@primate/svelte 0.15.3 → 0.16.0

package/README.md

@@ -1,6 +1,5 @@
-# Svelte handler
+# Svelte
 
-This handler module supports SSR and hydration and serves Svelte components
-with the .svelte extension.
+This handler serves Svelte components with the `svelte` file extension.
 
 ## [Documentation](https://primatejs.com/modules/svelte)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/svelte",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "description": "Primate Svelte module",
   "homepage": "https://primatejs.com/modules/svelte",
   "bugs": "https://github.com/primatejs/primate/issues",
@@ -16,11 +16,12 @@
     "directory": "packages/svelte"
   },
   "dependencies": {
-    "runtime-compat": "^0.25.1",
-    "svelte": "^4.1.2"
+    "@primate/frontend": "^0.2.0",
+    "runtime-compat": "^0.25.7",
+    "svelte": "^4.2.0"
   },
   "peerDependencies": {
-    "primate": "0.21"
+    "primate": "0.22"
   },
   "type": "module",
   "exports": "./src/exports.js"

package/src/client/rootname.js

@@ -1 +1 @@
-export default "root";
+export default "svelte_root";

package/src/module.js

@@ -1,48 +1,18 @@
-import crypto from "runtime-compat/crypto";
-import {Path} from "runtime-compat/fs";
 import {Response, Status, MediaType} from "runtime-compat/http";
+import * as base from "@primate/frontend";
 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 encoder = new TextEncoder();
-const hash = async (string, algorithm = "sha-256") => {
-  const base = 16;
-  const target_pad_length = 2;
-  const target_slice = 12;
-  const bytes = await crypto.subtle.digest(algorithm, encoder.encode(string));
-  return Array.from(new Uint8Array(bytes))
-    .map(byte => byte.toString(base).padStart(target_pad_length, "0"))
-    .join("")
-    .slice(0, target_slice);
-};
-const normalize = async path => `_${await hash(path)}`;
-
-const filename = `${rootname}.js`;
-
+const normalize = base.normalize("svelte");
 const type = "module";
 
-const load = async path =>
-  tryreturn(async () => (await import(`${path}.js`)).default)
-    .orelse(_ => errors.MissingComponent.throw(path.name, path));
-
-const make_component = base => async (name, props) =>
-  ({name, component: await load(base.join(name)), props});
-
-const handler = (name, props = {}, {status = Status.OK, page} = {}) =>
+const handler = config => (name, props = {}, {status = Status.OK, page} = {}) =>
   async (app, {layouts = [], as_layout} = {}, request) => {
+    const {make, root} = config;
     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);
     }
@@ -63,9 +33,8 @@ const handler = (name, props = {}, {status = Status.OK, page} = {}) =>
       });
     }
 
-    const root = paths.server.join(filename);
     const imported = (await import(root)).default;
-    const {html: body} = imported.render({
+    const {html: body, head} = imported.render({
       components: components.map(({component}) => component),
       data,
     });
@@ -76,99 +45,60 @@ const handler = (name, props = {}, {status = Status.OK, page} = {}) =>
     // needs to be called before app.render
     const headers$ = await app.headers();
 
-    return new Response(await app.render({body, page}), {
+    return new Response(await app.render({body, page, head}), {
       status,
       headers: {...headers$, "Content-Type": MediaType.TEXT_HTML},
     });
   };
 
-const options = {
-  server: {generate: "ssr", hydratable: true},
-  client: {generate: "dom", hydratable: true},
-};
-
-const {svelte, js} = endings;
 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");
-
-    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;
+  extension = "svelte",
+  directory,
+} = {}) => {
+  return {
+    name: "primate:svelte",
+    register(app, next) {
+      app.register(extension, handler(base.register({app, rootname})));
+
+      return next(app);
+    },
+    async compile(app, next) {
+      await base.compile({
+        app,
+        directory: directory ?? app.config.location.components,
+        extension,
+        rootname,
+        create_root,
+        dynamicProps,
+        compile(file) {
+          const options = {generate: "ssr", hydratable: true};
+          return compiler.compile(file, options).js.code;
+        },
+      });
 
-      {
-        {
-          const code = client.js.code.replaceAll(svelte, js);
-          const src = `${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 = `${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);
+    },
+    async publish(app, next) {
+      // import libs
+      await app.import("svelte");
+
+      await base.publish({
+        app,
+        directory: directory ?? app.config.location.components,
+        extension,
+        rootname,
+        create_root,
+        dynamicProps,
+        normalize,
+        compile(file) {
+          const options = {generate: "dom", hydratable: true};
+          const {js, css} = compiler.compile(file, options);
+          return {js: js.code, css: css.code};
+        },
+      });
 
-    {
-      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);
-  },
-});
+      return next(app);
+    },
+  };
+};