@primate/svelte 0.15.0 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/svelte",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Primate Svelte module",
   "homepage": "https://primatejs.com/modules/svelte",
   "bugs": "https://github.com/primatejs/primate/issues",

package/src/client/client.js

@@ -0,0 +1,14 @@
+import rootname from "./rootname.js";
+import liveview from "./liveview.js";
+
+export default ({names, data}, options) => `
+  import * as components from "app";
+  let root = new components.${rootname}({
+    target: document.body,
+    hydrate: true,
+    props: {
+      components: [${names.map(name => `components.${name}`).join(", ")}],
+      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: props.names.map(name => components[name]),
+      data: props.data,
+      update,
+    },
+  });
+}));`;

package/src/client/rootname.js

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

package/src/module.js

@@ -4,13 +4,14 @@ 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",
   js: ".svelte.js",
 };
-const rootname = "root";
 
+const encoder = new TextEncoder();
 const hash = async (string, algorithm = "sha-256") => {
   const base = 16;
   const target_pad_length = 2;
@@ -25,11 +26,6 @@ const normalize = async path => `_${await hash(path)}`;
 
 const filename = `${rootname}.js`;
 
-const options = {
-  server: {generate: "ssr", hydratable: true},
-  client: {generate: "dom", hydratable: true},
-};
-
 const type = "module";
 
 const load = async path =>
@@ -39,10 +35,12 @@ const load = async path =>
 const make_component = base => async (name, props) =>
   ({name, component: await load(base.join(name)), props});
 
-const encoder = new TextEncoder();
-
 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) {
@@ -57,15 +55,14 @@ const handler = (name, props = {}, {status = Status.OK, page} = {}) =>
     const data = components.map(component => component.props);
     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) {
+    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({
@@ -73,67 +70,21 @@ const handler = (name, props = {}, {status = Status.OK, page} = {}) =>
       data,
     });
 
-    const code = `
-      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))}),
-        },
-      });
-
-      ${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,
-          },
-        });
-      }));
-      ` : ""}
-    `;
+    const code = client({names, data}, options);
 
     await app.publish({code, type, inline: true});
-
-    const headers = await app.headers();
+    // needs to be called before app.render
+    const headers$ = await app.headers();
 
     return new Response(await app.render({body: html, page}), {
       status,
-      headers: {...headers, "Content-Type": MediaType.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;