Use flutter.js bootstrapping (#2960)

* Revert "Revert "Use flutter.js bootstrapping (#2792)" (#2959)" This reverts commit 9183b0b. * Loosen CORS header for canvaskit.wasm
dart-lang · May 9, 2024 · 578bd4e · 578bd4e
1 parent 9183b0b
commit 578bd4e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,6 @@ build/
 # Or the files created by dart2js.
 *.dart.js
 *.js.deps
-*.js.map
 
 # Python generated files
 *.pyc

diff --git a/pkgs/dart_services/lib/src/common.dart b/pkgs/dart_services/lib/src/common.dart
@@ -26,8 +26,11 @@ import 'main.dart' as entrypoint;
 
 Future<void> main() async {
   registerPlugins(webPluginRegistrar);
-  await ui_web.bootstrapEngine();
-  entrypoint.main();
+  await ui_web.bootstrapEngine(
+    runApp: () {
+      return entrypoint.main();
+    },
+  );
 }
 ''';
 

diff --git a/pkgs/dartpad_ui/firebase.json b/pkgs/dartpad_ui/firebase.json
@@ -83,6 +83,15 @@
             }
           ]
         },
+        {
+          "source": "/canvaskit/chromium/canvaskit.wasm",
+          "headers": [
+            {
+              "key": "Access-Control-Allow-Origin",
+              "value": "*"
+            }
+          ]
+        },
         {
           "source": "**",
           "headers": [

diff --git a/pkgs/dartpad_ui/web/frame.html b/pkgs/dartpad_ui/web/frame.html
@@ -19,9 +19,9 @@
       margin-top: 0;
     }
   </style>
-  <script src="frame.js"></script>
   <script src="require.js"></script>
-  <script id="compiled-script"></script>
+  <script src="flutter.js"></script>
+  <script src="frame.js"></script>
 </head>
 
 <body>

diff --git a/pkgs/dartpad_ui/web/frame.js b/pkgs/dartpad_ui/web/frame.js
@@ -22,16 +22,22 @@ function messageHandler(e) {
   var obj = e.data;
 
   if (obj.command === 'execute') {
-    // TODO: Switch to using engineInitializer.initializeEngine(config). See
-    // https://docs.flutter.dev/development/platform-integration/web/initialization.
-    window.flutterConfiguration = {
-      canvasKitBaseUrl: obj.canvasKitBaseUrl
-    };
-
-    replaceJavaScript(obj.js);
+    runFlutterApp(obj.js);
   }
 };
 
+function runFlutterApp(compiledScript) {
+  var blob = new Blob([compiledScript], {type: 'text/javascript'});
+  var url = URL.createObjectURL(blob);
+  _flutter.loader.loadEntrypoint({
+    entrypointUrl: url,
+    onEntrypointLoaded: async function(engineInitializer) {
+      let appRunner = await engineInitializer.initializeEngine();
+      appRunner.runApp();
+    }
+  });
+}
+
 window.addEventListener('load', function () {
   window.addEventListener('message', messageHandler, false);
   parent.postMessage({ 'sender': 'frame', 'type': 'ready' }, '*');