@primate/svelte 0.13.2 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/svelte",
-  "version": "0.13.2",
+  "version": "0.15.0",
   "description": "Primate Svelte module",
   "homepage": "https://primatejs.com/modules/svelte",
   "bugs": "https://github.com/primatejs/primate/issues",
@@ -16,11 +16,11 @@
     "directory": "packages/svelte"
   },
   "dependencies": {
-    "runtime-compat": "^0.21.0",
-    "svelte": "^4.0.0"
+    "runtime-compat": "^0.24.1",
+    "svelte": "^4.1.1"
   },
   "peerDependencies": {
-    "primate": "0.20"
+    "primate": "0.21"
   },
   "type": "module",
   "exports": "./src/exports.js"

package/src/module.js

@@ -1,5 +1,6 @@
 import crypto from "runtime-compat/crypto";
 import {Path} from "runtime-compat/fs";
+import {Response, Status, MediaType} from "runtime-compat/http";
 import * as compiler from "svelte/compiler";
 import {tryreturn} from "runtime-compat/async";
 import errors from "./errors.js";
@@ -8,6 +9,7 @@ const endings = {
   svelte: ".svelte",
   js: ".svelte.js",
 };
+const rootname = "root";
 
 const hash = async (string, algorithm = "sha-256") => {
   const base = 16;
@@ -21,7 +23,6 @@ const hash = async (string, algorithm = "sha-256") => {
 };
 const normalize = async path => `_${await hash(path)}`;
 
-const rootname = "root";
 const filename = `${rootname}.js`;
 
 const options = {
@@ -33,57 +34,84 @@ const type = "module";
 
 const load = async path =>
   tryreturn(async () => (await import(`${path}.js`)).default)
-    .orelse(() => errors.MissingComponent.throw(path.name, path));
+    .orelse(_ => errors.MissingComponent.throw(path.name, path));
 
 const make_component = base => async (name, props) =>
   ({name, component: await load(base.join(name)), props});
 
 const encoder = new TextEncoder();
 
-const handler = ({path}) => (name, props = {}, {status = 200, page} = {}) =>
-  async (app, {layouts = [], as_layout} = {}) => {
-    const make = make_component(path);
+const handler = (name, props = {}, {status = Status.OK, page} = {}) =>
+  async (app, {layouts = [], as_layout} = {}, request) => {
+    const {paths} = app.build;
+    const make = make_component(paths.server.join(app.config.build.app));
     if (as_layout) {
       return make(name, props);
     }
     const components = (await Promise.all(layouts.map(layout =>
-      layout(app, {as_layout: true})
+      layout(app, {as_layout: true}, request)
     )))
       /* set the actual page as the last component */
       .concat(await make(name, props));
 
     const data = components.map(component => component.props);
-
-    const root = app.paths.server.join(filename);
+    const names = await Promise.all(components.map(component =>
+      normalize(component.name)));
+
+    const liveview = app.liveview !== undefined;
+    if (liveview && request.headers.get(app.liveview.header) !== undefined) {
+      return new Response(JSON.stringify({names, data}), {
+        status,
+        headers: {...await app.headers(),
+          "Content-Type": MediaType.APPLICATION_JSON},
+      });
+    }
+    const root = paths.server.join(filename);
     const imported = (await import(root)).default;
     const {html} = imported.render({
       components: components.map(({component}) => component),
       data,
     });
 
-    const names = (await Promise.all(components.map(component =>
-      normalize(component.name)))).join(", ");
     const code = `
-      import {${rootname}, ${names}} from "app";
-      new ${rootname}({
+      import * as components from "app";
+      const getComponents = names =>
+        Object.entries(components).filter(([name, component]) =>
+          names.includes(name))
+          .map(([, component]) => component);
+      let root = new components.${rootname}({
         target: document.body,
         hydrate: true,
         props: {
-          components: [${names}],
+          components: getComponents([${names.map(name => `"${name}"`)}]),
           data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
         },
       });
+
+      ${liveview ? `
+      const {liveview} = components;
+      window.addEventListener("DOMContentLoaded", _ => liveview(props => {
+        root.$destroy();
+        root = new components.${rootname}({
+          target: document.body,
+          hydrate: true,
+          props: {
+            components: getComponents(props.names),
+            data: props.data,
+          },
+        });
+      }));
+      ` : ""}
     `;
 
     await app.publish({code, type, inline: true});
-    // needs to be called before app.render
-    const headers = app.headers();
 
-    // -> spread into new Response()
-    return [await app.render({body: html, page}), {
+    const headers = await app.headers();
+
+    return new Response(await app.render({body: html, page}), {
       status,
-      headers: {...headers, "Content-Type": "text/html"},
-    }];
+      headers: {...headers, "Content-Type": MediaType.TEXT_HTML},
+    });
   };
 
 const create_root = (length, data) => {
@@ -109,102 +137,92 @@ const create_root = (length, data) => {
 };
 
 const {svelte, js} = endings;
-export default ({
-  directory,
-  dynamicProps = "data",
-} = {}) => {
-  const env = {};
-  return {
-    name: "@primate/svelte",
-    async init(app) {
-      const source = directory ?? app.paths.components;
-      env.copyJS = source !== app.paths.components;
-      env.copy = app.copy;
-      env.source = source;
-      env.components = await source.collect(/^.*.svelte$/u);
-      env.build = app.config.build.app;
-      env.paths = {
-        server: app.paths.server.join(env.build),
-        client: app.paths.client.join(env.build),
-      };
-    },
-    register(app, next) {
-      app.register("svelte", handler({path: env.paths.server}));
-      return next(app);
-    },
-    async compile(app, next) {
-      const target = env.paths.server;
-      await target.file.create();
-      // copy any JS files from an alternative components directory
-      if (env.copyJS) {
-        await app.copy(env.source, env.paths.server);
-        await app.copy(env.source, env.paths.client);
-      }
-
-      await Promise.all(env.components.map(async component => {
-        const file = await component.file.read();
-        const server = compiler.compile(file, options.server);
-        const to = target.join(`${component.path}.js`.replace(env.source, ""));
-        await to.directory.file.create();
-        await to.file.write(server.js.code.replaceAll(svelte, js));
-      }));
+export default ({dynamicProps = "data"} = {}) => ({
+  name: "@primate/svelte",
+  register(app, next) {
+    app.register("svelte", handler);
+    return next(app);
+  },
+  async compile(app, next) {
+    const source = app.build.paths.components;
+    // copy components to build/components
+    await app.copy(app.paths.components, source, /^.*.(?:js|svelte)$/u);
+    const components = await source.collect(/^.*.svelte$/u);
+    const target = app.build.paths.server.join(app.config.build.app);
+    await target.file.create();
+
+    await Promise.all(components.map(async component => {
+      const file = await component.file.read();
+      const server = compiler.compile(file, options.server);
+      const to = target.join(`${component.path}.js`.replace(source, ""));
+      await to.directory.file.create();
+      await to.file.write(server.js.code.replaceAll(svelte, js));
+    }));
+
+    const root = create_root(app.layoutDepth, dynamicProps);
+    const server = compiler.compile(root, options.server).js.code;
+    const to = app.build.paths.server.join(filename);
+    await to.file.write(server);
+
+    return next(app);
+  },
+  async publish(app, next) {
+    const source = app.build.paths.components;
+    const components = await source.collect(/^.*.svelte$/u);
+    await app.import("svelte");
+
+    // liveview
+    if (app.liveview !== undefined) {
+      app.bootstrap({
+        type: "script",
+        code: "export {default as liveview} from \"@primate/liveview\";\n",
+      });
+    }
+    await Promise.all(components.map(async component => {
+      const name = component.path.replace(`${source}/`, "");
+      const file = await component.file.read();
+      const client = compiler.compile(file, options.client);
+      const build = app.config.build.app;
+      const {path} = component;
 
-      const root = create_root(app.layoutDepth, dynamicProps);
-      const server = compiler.compile(root, options.server).js.code;
-      const to = app.paths.server.join(filename);
-      await to.file.write(server);
-
-      return next(app);
-    },
-    async publish(app, next) {
-      await app.import("svelte");
-      const {source, build} = env;
-
-      const target = env.paths.client;
-      await target.file.create();
-
-      await Promise.all(env.components.map(async component => {
-        const name = component.path.replace(`${source}/`, "");
-        const file = await component.file.read();
-        const client = compiler.compile(file, options.client);
+      {
         {
-          {
-            const code = client.js.code.replaceAll(svelte, js);
-            const src = `${component.path}.js`.replace(`${source}`, build);
-            await app.publish({src, code, type});
-          }
-          const imported = await normalize(name);
-          app.bootstrap({
-            type: "script",
-            code: `export {default as ${imported}} from "./${name}.js";\n`,
-          });
-        }
-        if (client.css.code !== null) {
-          {
-            const {code} = client.css;
-            const src = `${component.path}.css`.replace(`${source}`, build);
-            await app.publish({src, code, type: "style"});
-          }
-          {
-            const src = `${component.path}.css`.replace(`${source}`, "");
-            app.bootstrap({type: "style", code: `import ".${src}";`});
-          }
+          const code = client.js.code.replaceAll(svelte, js);
+          const src = `${path}.js`.replace(`${source}`, _ => build);
+          await app.publish({src, code, type});
         }
-      }));
-
-      {
-        const root = create_root(app.layoutDepth, dynamicProps);
-        const client = compiler.compile(root, options.client);
-        const code = client.js.code.replaceAll(svelte, js);
-        const src = new Path(app.config.http.static.root, filename);
-        await app.publish({src, code, type});
+        const imported = await normalize(name);
+        app.bootstrap({
+          type: "script",
+          code: `export {default as ${imported}} from "./${name}.js";\n`,
+        });
       }
-      {
-        const code = `export {default as ${rootname}} from "../${filename}";\n`;
-        app.bootstrap({type: "script", code});
+      if (client.css.code !== null) {
+        {
+          const {code} = client.css;
+          const src = `${path}.css`.replace(`${source}`, _ => build);
+          await app.publish({src, code, type: "style"});
+        }
+        {
+          // sans app.config.build.app removal, for a bundler to resolve,
+          // irrelevant without bundling
+          const src = `${path}.css`.replace(`${source}`, "");
+          app.bootstrap({type: "style", code: `import ".${src}";`});
+        }
       }
+    }));
 
-      return next(app);
-    },
-  };
-};
+    {
+      const root = create_root(app.layoutDepth, dynamicProps);
+      const client = compiler.compile(root, options.client);
+      const code = client.js.code.replaceAll(svelte, js);
+      const src = new Path(app.config.http.static.root, filename);
+      await app.publish({src, code, type});
+    }
+    {
+      const code = `export {default as ${rootname}} from "../${filename}";\n`;
+      app.bootstrap({type: "script", code});
+    }
+    return next(app);
+  },
+});