perf: ⚡️ inlined wasm load script to reduce full requests

arctic-hen7 · arctic-hen7 · commit 6cfe8e15d812 · 2021-09-18T16:25:51.000+10:00
It's now inlined directly into the HTML at server startup.

BREAKING CHANGE: `js_init` no longer an option in actix web integration
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -4,8 +4,6 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <!-- Importing this runs Perseus -->
-        <script type="module" src="/.perseus/main.js" defer></script>
     </head>
     <body>
         <div id="root"></div>
diff --git a/examples/cli/.perseus/main.js b/examples/cli/.perseus/main.js
diff --git a/examples/cli/.perseus/server/src/main.rs b/examples/cli/.perseus/server/src/main.rs
@@ -23,7 +23,6 @@ async fn main() -> std::io::Result<()> {
                 Options {
                     index: "../index.html".to_string(), // The user must define their own `index.html` file
                     js_bundle: "dist/pkg/perseus_cli_builder.js".to_string(),
-                    js_init: "main.js".to_string(),
                     // Our crate has the same name, so this will be predictable
                     wasm_bundle: "dist/pkg/perseus_cli_builder_bg.wasm".to_string(),
                     templates_map: get_templates_map(),
diff --git a/examples/cli/index.html b/examples/cli/index.html
@@ -4,8 +4,6 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <!-- Importing this runs Perseus -->
-        <script type="module" src="/.perseus/main.js" defer></script>
     </head>
     <body>
         <div id="root"></div>
diff --git a/examples/i18n/index.html b/examples/i18n/index.html
@@ -5,8 +5,6 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Perseus Example – i18n</title>
-        <!-- Importing this runs Perseus -->
-        <script type="module" src="/.perseus/main.js" defer></script>
     </head>
     <body>
         <div id="root"></div>
diff --git a/examples/showcase/index.html b/examples/showcase/index.html
@@ -5,8 +5,6 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Perseus Example – Showcase</title>
-        <!-- Importing this runs Perseus -->
-        <script type="module" src="/.perseus/main.js" defer></script>
     </head>
     <body>
         <div id="root"></div>
diff --git a/packages/perseus-actix-web/src/configurer.rs b/packages/perseus-actix-web/src/configurer.rs
@@ -14,9 +14,6 @@ use std::fs;
 pub struct Options {
     /// The location on the filesystem of your JavaScript bundle.
     pub js_bundle: String,
-    /// The locales on the filesystem of the file that will invoke your JavaScript bundle. This should have something like `init()` in
-    /// it.
-    pub js_init: String,
     /// The location on the filesystem of your Wasm bundle.
     pub wasm_bundle: String,
     /// The location on the filesystem of your `index.html` file that includes the JS bundle.
@@ -43,9 +40,6 @@ async fn render_conf(
 async fn js_bundle(opts: web::Data<Options>) -> std::io::Result<NamedFile> {
     NamedFile::open(&opts.js_bundle)
 }
-async fn js_init(opts: web::Data<Options>) -> std::io::Result<NamedFile> {
-    NamedFile::open(&opts.js_init)
-}
 async fn wasm_bundle(opts: web::Data<Options>) -> std::io::Result<NamedFile> {
     NamedFile::open(&opts.wasm_bundle)
 }
@@ -62,13 +56,23 @@ pub async fn configurer<C: ConfigManager + 'static, T: TranslationsManager + 'st
     // Get the index file and inject the render configuration into ahead of time
     // We do this by injecting a script that defines the render config as a global variable, which we put just before the close of the head
     // We also inject a delimiter comment that will be used to wall off the constant document head from the interpolated document head
+    // We also inject a script to load the Wasm bundle (avoids extra trips)
     let index_file = fs::read_to_string(&opts.index).expect("Couldn't get HTML index file!");
+    let load_script = r#"<script type="module">
+    import init, { run } from "/.perseus/bundle.js";
+    async function main() {
+        await init("/.perseus/bundle.wasm");
+        run();
+    }
+    main();
+</script>"#;
     let index_with_render_cfg = index_file.replace(
         "</head>",
         // It's safe to assume that something we just deserialized will serialize again in this case
         &format!(
-            "<script>window.__PERSEUS_RENDER_CFG = '{}';</script>\n<!--PERSEUS_INTERPOLATED_HEAD_BEGINS-->\n</head>",
-            serde_json::to_string(&render_cfg).unwrap()
+            "<script>window.__PERSEUS_RENDER_CFG = '{}';</script>\n{}\n<!--PERSEUS_INTERPOLATED_HEAD_BEGINS-->\n</head>",
+            serde_json::to_string(&render_cfg).unwrap(),
+            load_script
         ),
     );
 
@@ -83,7 +87,6 @@ pub async fn configurer<C: ConfigManager + 'static, T: TranslationsManager + 'st
             // TODO chunk JS and Wasm bundles
             // These allow getting the basic app code (not including the static data)
             // This contains everything in the spirit of a pseudo-SPA
-            .route("/.perseus/main.js", web::get().to(js_init))
             .route("/.perseus/bundle.js", web::get().to(js_bundle))
             .route("/.perseus/bundle.wasm", web::get().to(wasm_bundle))
             .route("/.perseus/render_conf.json", web::get().to(render_conf))
