0.70.0: Fix web app template (#49)

* Fix web template

* Update flutter_bootstrap.js

* Update pubspec.yaml

{{cookiecutter.out_dir}}/pubspec.yaml

@@ -26,7 +26,7 @@ dependency_overrides:
   flet:
     git:
       path: packages/flet
-      ref: v1
+      ref: main
       url: https://github.com/flet-dev/flet.git
 
   # serious_python:

{{cookiecutter.out_dir}}/web/flutter_bootstrap.js

@@ -1,21 +1,26 @@
 {{ '{{flutter_js}}' }}
 {{ '{{flutter_build_config}}' }}
 
-var config = {};
-if (globalThis.webRenderer != "auto") {
-    config.renderer = globalThis.webRenderer;
+var flutterConfig = {
+    multiViewEnabled: flet.multiView,
+    assetBase: flet.assetBase
+};
+if (flet.webRenderer != "auto") {
+    flutterConfig.renderer = flet.webRenderer;
 }
-if (globalThis.canvasKitBaseUrl) {
-    config.canvasKitBaseUrl = globalThis.canvasKitBaseUrl;
+if (flet.noCdn) {
+    flutterConfig.canvasKitBaseUrl = flet.canvasKitBaseUrl;
+    flutterConfig.fontFallbackBaseUrl = flet.fontFallbackBaseUrl;
 }
 
 _flutter.loader.load({
-    config: config,
+    config: flutterConfig,
     serviceWorkerSettings: {
         serviceWorkerVersion: {{ '{{flutter_service_worker_version}}' }},
     },
     onEntrypointLoaded: async function (engineInitializer) {
-        const appRunner = await engineInitializer.initializeEngine({useColorEmoji: useColorEmoji});
-        await appRunner.runApp();
+        const engine = await engineInitializer.initializeEngine(flutterConfig);
+        flet.flutterApp = await engine.runApp();
+        flet.flutterAppResolve(flet.flutterApp);
     }
 });

{{cookiecutter.out_dir}}/web/index.html

@@ -11,33 +11,38 @@
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-title" content="{{ cookiecutter.product_name }}">
-  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+  <link rel="apple-touch-icon" href="icons/apple-touch-icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png" />
 
-  <!-- Flet specific -->
-  <meta name="flet-route-url-strategy" content="{{ cookiecutter.route_url_strategy }}">
-  <meta name="flet-web-pyodide" content="true">
-
   <title>{{ cookiecutter.product_name }}</title>
   <link rel="manifest" href="manifest.json">
 
   <script>
-    var webRenderer = "{{ cookiecutter.web_renderer }}";
-    var useColorEmoji = "{{ cookiecutter.use_color_emoji }}".toLowerCase() == "true";
-    var appPackageUrl = "assets/app/app.zip";
-    var pythonModuleName = "{{ cookiecutter.python_module_name }}";
-    var noCdn = "{{ cookiecutter.no_cdn }}".toLowerCase() == "true";
-  </script>
-
-  <script>
-    if (noCdn) {
-      var canvasKitBaseUrl = "/canvaskit/";
-      var pyodideUrl = "/pyodide/pyodide.js";
+    var flet = {
+      pyodide: true,
+      multiView: false,
+      noCdn: "{{ cookiecutter.no_cdn }}".toLowerCase() == "true",
+      webSocketEndpoint: "/ws",
+      assetBase: "/",
+      routeUrlStrategy: "{{ cookiecutter.route_url_strategy }}",
+      canvasKitBaseUrl: "/canvaskit/",
+      pyodideUrl: "/pyodide/pyodide.js",
+      pythonModuleName: "{{ cookiecutter.python_module_name }}",
+      webRenderer: "{{ cookiecutter.web_renderer }}",
+      fontFallbackBaseUrl: "assets/fonts/", // for Noto Emoji, use Google CDN
+      appPackageUrl: "assets/app/app.zip"
     }
-  </script>
 
+    flet.flutterAppLoaded = new Promise((resolve) => {
+      flet.flutterAppResolve = resolve;
+    });
+
+    flet.flutterAppLoaded.then((flutterApp) => {
+      console.log("Flutter app loaded");
+    });
+  </script>
   <script src="python.js"></script>
 </head>
 

{{cookiecutter.out_dir}}/web/python.js

@@ -1,4 +1,4 @@
-const defaultPyodideUrl = "https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js";
+const defaultPyodideUrl = "https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js";
 
 let _apps = {};
 let _documentUrl = document.URL;
@@ -30,12 +30,12 @@ globalThis.jsConnect = async function(appId, args, dartOnMessage) {
 
     // initialize worker
     app.worker.postMessage({
-        pyodideUrl: globalThis.pyodideUrl ?? defaultPyodideUrl,
+        pyodideUrl: flet.noCdn ? flet.pyodideUrl : defaultPyodideUrl,
         args: args,
         documentUrl: _documentUrl,
-        appPackageUrl: globalThis.appPackageUrl,
-        micropipIncludePre: globalThis.micropipIncludePre,
-        pythonModuleName: globalThis.pythonModuleName
+        appPackageUrl: flet.appPackageUrl,
+        micropipIncludePre: flet.micropipIncludePre,
+        pythonModuleName: flet.pythonModuleName
     });
 
     await pythonInitialized;