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 = {};
+var flutterConfig = {
-if (globalThis.webRenderer != "auto") {
+    multiViewEnabled: flet.multiView,
-    config.renderer = globalThis.webRenderer;
+    assetBase: flet.assetBase
+};
+if (flet.webRenderer != "auto") {
+    flutterConfig.renderer = flet.webRenderer;
 }
-if (globalThis.canvasKitBaseUrl) {
+if (flet.noCdn) {
-    config.canvasKitBaseUrl = globalThis.canvasKitBaseUrl;
+    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});
+        const engine = await engineInitializer.initializeEngine(flutterConfig);
-        await appRunner.runApp();
+        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 flet = {
-    var useColorEmoji = "{{ cookiecutter.use_color_emoji }}".toLowerCase() == "true";
+      pyodide: true,
-    var appPackageUrl = "assets/app/app.zip";
+      multiView: false,
-    var pythonModuleName = "{{ cookiecutter.python_module_name }}";
+      noCdn: "{{ cookiecutter.no_cdn }}".toLowerCase() == "true",
-    var noCdn = "{{ cookiecutter.no_cdn }}".toLowerCase() == "true";
+      webSocketEndpoint: "/ws",
-  </script>
+      assetBase: "/",
-
+      routeUrlStrategy: "{{ cookiecutter.route_url_strategy }}",
-  <script>
+      canvasKitBaseUrl: "/canvaskit/",
-    if (noCdn) {
+      pyodideUrl: "/pyodide/pyodide.js",
-      var canvasKitBaseUrl = "/canvaskit/";
+      pythonModuleName: "{{ cookiecutter.python_module_name }}",
-      var pyodideUrl = "/pyodide/pyodide.js";
+      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>
 
@@ -45,4 +50,4 @@
   <script src="flutter_bootstrap.js" async></script>
 </body>
 
-</html>
+</html>

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

@@ -24,16 +24,16 @@ self.initPyodide = async function () {
 
         if "app_package_url" in py_args:
             app_package_url = py_args["app_package_url"]
-            
+
         if app_package_url is None:
             app_package_url = "assets/app/app.zip"
-        
+
         if "python_module_name" in py_args:
             python_module_name = py_args["python_module_name"]
-            
+
         if python_module_name is None:
             python_module_name = "main"
-        
+
         if "micropip_include_pre" in py_args:
             micropip_include_pre = py_args["micropip_include_pre"]
 
@@ -51,12 +51,12 @@ self.initPyodide = async function () {
             print("Saving script to a file")
             with open(f"{python_module_name}.py", "w") as f:
                 f.write(py_args["script"]);
-    
+
         pkgs_path = "__pypackages__"
         if os.path.exists(pkgs_path):
             print(f"Adding {pkgs_path} to sys.path")
             sys.path.insert(0, pkgs_path)
-    
+
         if os.path.exists("requirements.txt"):
             with open("requirements.txt", "r") as f:
                 deps = [line.rstrip() for line in f]
@@ -65,7 +65,7 @@ self.initPyodide = async function () {
 
         if "dependencies" in py_args:
             await micropip.install(py_args["dependencies"], pre=micropip_include_pre)
-    
+
         # Execute app
         runpy.run_module(python_module_name, run_name="__main__")
       `);
@@ -95,4 +95,4 @@ self.onmessage = async (event) => {
         // message
         flet_js.send(event.data);
     }
-};
+};

{{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,
+        appPackageUrl: flet.appPackageUrl,
-        micropipIncludePre: globalThis.micropipIncludePre,
+        micropipIncludePre: flet.micropipIncludePre,
-        pythonModuleName: globalThis.pythonModuleName
+        pythonModuleName: flet.pythonModuleName
     });
 
     await pythonInitialized;
@@ -67,4 +67,4 @@ globalThis.jsDisconnect = async function(appId) {
         app.worker.onmessage = null;
         app.worker.onerror = null;
     }
-}
+}