@primate/svelte 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "bugs": "https://github.com/primatejs/svelte/issues",
   "repository": "https://github.com/primatejs/svelte",
   "description": "Primate Svelte handler",

package/src/module.js

@@ -1,19 +1,37 @@
 import * as compiler from "svelte/compiler";
-import {File} from "runtime-compat/fs";
+import {File, Path} from "runtime-compat/fs";
 
 const endings = {
   svelte: ".svelte",
   js: ".svelte.js",
 };
 
+const type = "module";
+
 const handler = path => (component, props = {}, {status = 200} = {}) =>
   async (env, headers) => {
     const {js} = endings;
-    const {html} = (await import(`${path.join(`${component}${js}`)}`))
+    const {html: body} = (await import(`${path.join(`${component}${js}`)}`))
       .default.render(props);
 
+    const stringifiedProps = JSON.stringify(props);
+    // create an entry point
+    const entry = `import ${component} from "./${component}.svelte.js";
+      const props = JSON.parse('${stringifiedProps}');
+      new ${component}({
+        target: document.body,
+        hydrate: true,
+        props,
+      });
+    `;
+    const inline = true;
+    const integrity = await env.publish({code: entry, type, inline});
+    // hacky, CSP should be a map that gets flattened in the end
+    headers["Content-Security-Policy"] = headers["Content-Security-Policy"]
+      .replace("script-src 'self' ", `script-src 'self' '${integrity}' `);
+
     // -> spread into new Response()
-    return [await env.render(html), {
+    return [await env.render({body}), {
       status,
       headers: {...headers, "Content-Type": "text/html"},
     }];
@@ -33,13 +51,35 @@ export default directory => async () => {
       await Promise.all(components.map(async component => {
         const file = await component.file.read();
         const server = compiler.compile(file, options);
-        /* const client = compiler.compile(file, {
-          generate: "dom", hydratable: true, css: false}).js.code;*/
         const compiled = server.js.code.replaceAll(svelte, js);
         await File.write(`${component.path}.js`, compiled);
       }));
 
       return next(env);
     },
+    publish: async (env, next) => {
+      const path = directory ?? env.paths.components;
+      const options = {
+        generate: "dom",
+        hydratable: true,
+        css: false,
+        sveltePath: "/svelte",
+      };
+      const components = await path.list(filename => filename.endsWith(svelte));
+      const scriptPath = ["node_modules", "svelte", "internal", "index.mjs"];
+      // publish svelte itself
+      const code = await Path.resolve().join(...scriptPath).file.read();
+      await env.publish({src: "svelte/internal.js", code, type});
+      await Promise.all(components.map(async component => {
+        const file = await component.file.read();
+        const client = compiler.compile(file, options);
+        const compiled = client.js.code
+          .replaceAll(svelte, js)
+          .replace("/svelte/internal", "/svelte/internal.js");
+        await env.publish({src: `${component.name}.js`, code: compiled, type});
+        await File.write(`${component.path}.client.js`, compiled);
+      }));
+      return next(env);
+    },
   };
 };