@primate/solid 0.0.2 → 0.2.0

package/README.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/solid",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Primate Solid module",
   "homepage": "https://primatejs.com/modules/solid",
   "bugs": "https://github.com/primatejs/primate/issues",
@@ -16,12 +16,13 @@
     "directory": "packages/solid"
   },
   "dependencies": {
+    "@primate/frontend": "^0.2.0",
     "babel-preset-solid": "^1.7.7",
-    "runtime-compat": "^0.25.1",
+    "runtime-compat": "^0.25.7",
     "solid-js": "^1.7.11"
   },
   "peerDependencies": {
-    "primate": "0.21"
+    "primate": "0.22"
   },
   "type": "module",
   "exports": "./src/exports.js"

package/src/client/client.js

@@ -7,13 +7,13 @@ const {groups: {code: hydration_script}} = generateHydrationScript()
 
 export default ({names, data}, options) => `
   import * as components from "app";
-  import {hydrate_solid} from "app";
+  import {hydrate_solid, render_solid} from "app";
 
-  window._$HY = { events: [], completed: new WeakSet(), r: {} };
+  window._$HY = {events: [], completed: new WeakSet(), r: {}};
 
   ${hydration_script}
 
-  const root = hydrate_solid(() => components.${rootname}({
+  let dispose = hydrate_solid(() => components.${rootname}({
       components: [${names.map(name => `components.${name}`).join(", ")}],
       data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
     }), globalThis.window.document.body);

package/src/client/exports.js

@@ -1,5 +1,4 @@
 export {default as client} from "./client.js";
 export {default as hydrate} from "./hydrate.js";
 export {default as create_root} from "./create-root.js";
-export {default as create_root2} from "./create-root2.js";
 export {default as rootname} from "./rootname.js";

package/src/client/hydrate.js

@@ -1 +1,4 @@
-export default "export {hydrate as hydrate_solid} from \"solid-js/web\";";
+export default `export {
+  hydrate as hydrate_solid,
+  render as render_solid,
+} from "solid-js/web";`;

package/src/client/liveview.js

@@ -3,10 +3,9 @@ import rootname from "./rootname.js";
 export default `
 const {liveview} = components;
 window.addEventListener("DOMContentLoaded", _ => liveview((props, update) => {
-  root.render(
-    createElement(components.${rootname}, {
-      components: props.names.map(name => components[name]),
-      data: props.data,
-    })
-  );
+  dispose();
+  dispose = render_solid(() => components.${rootname}({
+    components: props.names.map(name => components[name]),
+    data: props.data,
+  }), globalThis.window.document.body);
 }));`;

package/src/module.js

@@ -1,63 +1,38 @@
-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 {renderToString as render} from "solid-js/web";
 import {transformAsync} from "@babel/core";
 import solid from "babel-preset-solid";
-import {renderToString} from "solid-js/web";
-import {tryreturn} from "runtime-compat/async";
-import errors from "./errors.js";
-import {client, create_root, create_root2, rootname, hydrate} from "./client/exports.js";
+import {client, create_root, rootname, hydrate} from "./client/exports.js";
 
-// do not hard-depend on node
-const packager = import.meta.runtime?.packager ?? "package.json";
-const library = import.meta.runtime?.library ?? "node_modules";
-
-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 => `solid_${await hash(path)}`;
+const normalize = base.normalize("solid");
 
 const import$ = async (module, app, copy_dependency) => {
-  const {build: {modules}, http: {static: {root}}} = app.config;
+  const {library, packager} = app;
+  const {http: {static: {root}}} = app.config;
   const parts = module.split("/");
   const path = [library, ...parts];
   const pkg = await Path.resolve().join(...path, packager).json();
   if (copy_dependency) {
     const dependency = Path.resolve().join(...path);
-    const to = app.build.paths.client.join(modules, ...parts);
+    const to = app.runpath(app.config.location.client, library, ...parts);
     await dependency.file.copy(`${to}`);
   }
 
   const entry = pkg.exports["."].browser.import;
-  app.importmaps[module] = new Path(root, modules, module, entry).path;
+  app.importmaps[module] = new Path(root, library, module, entry).path;
 };
 
-const filename = `${rootname}.js`;
 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} = {}) =>
+const handler = config => (name, props = {}, {status = Status.OK, page} = {}) =>
   async (app, {layouts = [], as_layout} = {}, request) => {
+    const {make, root} = config;
+    const {headers} = 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);
     }
@@ -78,9 +53,8 @@ const handler = (name, props = {}, {status = Status.OK} = {}) =>
       });
     }
 
-    const root = paths.server.join(filename);
     const imported = (await import(root)).default;
-    const body = renderToString(() => imported({
+    const body = render(() => imported({
       components: components.map(({component}) => component),
       data,
     }));
@@ -91,119 +65,60 @@ const handler = (name, props = {}, {status = Status.OK} = {}) =>
     // needs to be called before app.render
     const headers$ = await app.headers();
 
-    return new Response(await app.render({body}), {
+    return new Response(await app.render({body, page}), {
       status,
       headers: {...headers$, "Content-Type": MediaType.TEXT_HTML},
     });
   };
 
-const options = {
-  server: [solid, {
-    generate: "ssr",
-    hydratable: true,
-  }],
-  client: [solid, {
-    generate: "dom",
-    hydratable: true,
-  }],
-};
-
-const endings = {
-  solid: ".solid",
-  js: ".solid.js",
-};
-
-const transform = {
-  async server(file) {
-    return (await transformAsync(file, {presets: [options.server]})).code;
-  },
-  async client(file) {
-    return (await transformAsync(file, {presets: [options.client]})).code;
-  },
-};
-
 export default ({
-  dynamicProps = "data",
+  directory,
+  dynamicProps,
   extension = "jsx",
 } = {}) => {
-  const env = {};
-
   return {
-    name: "@primate/solid",
-    init(app, next) {
-      env.source = app.build.paths.components;
-
-      return next(app);
-    },
+    name: "primate:solid",
     register(app, next) {
-      app.register("solid", handler);
+      app.register(extension, handler(base.register({app, rootname})));
+
       return next(app);
     },
     async compile(app, next) {
-      // copy components to build/components
-      await app.copy(app.paths.components, env.source, /^.*.(?:solid)$/u);
-      const components = await env.source.collect(/^.*.solid$/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 code = await transform.server(file);
-        const to = target.join(`${component.path}.js`.replace(env.source, ""));
-        await to.directory.file.create();
-        await to.file.write(code.replaceAll(endings.solid, endings.js));
-      }));
-
-      const root = await transform.server(create_root2(app.layoutDepth,
-        dynamicProps));
-      const to = app.build.paths.server.join(filename);
-      await to.file.write(root);
+      await base.compile({
+        app,
+        directory: directory ?? app.config.location.components,
+        extension,
+        rootname,
+        create_root,
+        dynamicProps,
+        async compile(file) {
+          const presets = [[solid, {generate: "ssr", hydratable: true}]];
+          return (await transformAsync(file, {presets})).code;
+        },
+      });
 
       return next(app);
     },
     async publish(app, next) {
-      const target = app.build.paths.client.join(app.config.build.app);
-      await target.file.create();
-
-      // create client components
-      const components = await env.source.collect(/^.*.solid/u);
-      await Promise.all(components.map(async component => {
-        const name = component.path.replace(`${env.source}/`, "");
-        const file = await component.file.read();
-        const code = await transform.client(file);
-        const build = app.config.build.app;
-        const {path} = component;
-
-        {
-          {
-            const src = `${path}.js`.replace(`${env.source}`, _ => build);
-            await app.publish({src,
-              code: code.replaceAll(endings.solid, endings.js),
-            type});
-          }
-          const imported = await normalize(name);
-          app.bootstrap({
-            type: "script",
-            code: `export {default as ${imported}} from "./${name}.js";\n`,
-          });
-        }
-      }));
-
+      // import libs
       await import$("solid-js", app, true);
       await import$("solid-js/web", app);
-
-      app.bootstrap({type: "script", code: hydrate});
-
-      {
-        const code = await transform.client(create_root2(app.layoutDepth,
-          dynamicProps));
-        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});
-      }
+      // export hydration code
+      app.export({type: "script", code: hydrate});
+
+      await base.publish({
+        app,
+        directory: directory ?? app.config.location.components,
+        extension,
+        rootname,
+        create_root,
+        dynamicProps,
+        normalize,
+        async compile(file) {
+          const presets = [[solid, {generate: "dom", hydratable: true}]];
+          return {js: (await transformAsync(file, {presets})).code};
+        },
+      });
 
       return next(app);
     },

package/src/client/create-root2.js

@@ -1,22 +0,0 @@
-export default (length, data) => {
-  const n = length - 1;
-  const body = Array.from({length: n}, (_, i) => i - 1)
-    .reduceRight((child, _, i) => `<Show
-    when={components[${i + 1}] !== undefined}
-    fallback={
-      <>
-        <Dynamic component={components[${i}]} ${data}={data[${i}]} />
-      </>
-    }
-  >
-   <Dynamic component={components[${i}]} ${data}={data[${i}]}>${child}</Dynamic>
-  </Show>
-    `, `<Dynamic component={components[${n}]} ${data}={data[${n}]} />`);
-
-  return `
-    import {Dynamic, Show} from "solid-js/web";
-    export default function Root({components, data} = {}) {
-      return ${body};
-    };
-  `;
-};