@primate/svelte 0.14.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/svelte",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "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/client/client.js

@@ -0,0 +1,18 @@
+import rootname from "./rootname.js";
+import liveview from "./liveview.js";
+
+export default ({names, data}, options) => `
+  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: getComponents([${names.map(name => `"${name}"`)}]),
+      data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
+    },
+  });
+  ${options.liveview ? liveview : ""}`;

package/src/client/create-root.js

@@ -0,0 +1,25 @@
+export default (length, data) => {
+  const n = length - 1;
+  const body = Array.from({length: n}, (_, i) => i - 1)
+    .reduceRight((child, _, i) => `
+      {#if components[${i + 1}]}
+        <svelte:component this={components[${i}]} ${data}={data[${i}]}>
+          ${child}
+        </svelte:component>
+      {:else}
+        <svelte:component this={components[${i}]} ${data}={data[${i}]} />
+      {/if}
+    `, `<svelte:component this={components[${n}]} ${data}={data[${n}]} />`);
+
+  return `
+    <script>
+      import {afterUpdate} from "svelte";
+      export let components;
+      export let data;
+      export let update = () => undefined;
+
+      afterUpdate(update);
+    </script>
+    ${body}
+  `;
+};

package/src/client/exports.js

@@ -0,0 +1,3 @@
+export {default as client} from "./client.js";
+export {default as create_root} from "./create-root.js";
+export {default as rootname} from "./rootname.js";

package/src/client/liveview.js

@@ -0,0 +1,16 @@
+import rootname from "./rootname.js";
+
+export default `
+const {liveview} = components;
+window.addEventListener("DOMContentLoaded", _ => liveview((props, update) => {
+  root.$destroy();
+  root = new components.${rootname}({
+    target: document.body,
+    hydrate: true,
+    props: {
+      components: getComponents(props.names),
+      data: props.data,
+      update,
+    },
+  });
+}));`;

package/src/client/rootname.js

@@ -0,0 +1 @@
+export default "root";

package/src/module.js

@@ -1,8 +1,10 @@
 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";
+import {client, create_root, rootname} from "./client/exports.js";
 
 const endings = {
   svelte: ".svelte",
@@ -21,190 +23,158 @@ const hash = async (string, algorithm = "sha-256") => {
 };
 const normalize = async path => `_${await hash(path)}`;
 
-const rootname = "root";
 const filename = `${rootname}.js`;
 
-const options = {
-  server: {generate: "ssr", hydratable: true},
-  client: {generate: "dom", hydratable: true},
-};
-
 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 options = {
+      liveview: app.liveview !== undefined,
+    };
+    const {headers} = 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)));
+
+    if (options.liveview && 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}({
-        target: document.body,
-        hydrate: true,
-        props: {
-          components: [${names}],
-          data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
-        },
-      });
-    `;
+    const code = client({names, data}, options);
 
     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) => {
-  const n = length - 1;
-  const body = Array.from({length: n}, (_, i) => i - 1)
-    .reduceRight((child, _, i) => `
-      {#if components[${i + 1}]}
-        <svelte:component this={components[${i}]} ${data}={data[${i}]}>
-          ${child}
-        </svelte:component>
-      {:else}
-        <svelte:component this={components[${i}]} ${data}={data[${i}]} />
-      {/if}
-    `, `<svelte:component this={components[${n}]} ${data}={data[${n}]} />`);
-
-  return `
-    <script>
-      export let components;
-      export let data;
-    </script>
-    ${body}
-  `;
+const options = {
+  server: {generate: "ssr", hydratable: true},
+  client: {generate: "dom", hydratable: true},
 };
 
 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);
+  },
+});