@primate/solid 0.0.1

package/README.md

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

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@primate/solid",
+  "version": "0.0.1",
+  "description": "Primate Solid module",
+  "homepage": "https://primatejs.com/modules/solid",
+  "bugs": "https://github.com/primatejs/primate/issues",
+  "license": "MIT",
+  "files": [
+    "src/**/*.js",
+    "!src/**/*.spec.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/primatejs/primate",
+    "directory": "packages/solid"
+  },
+  "dependencies": {
+    "babel-preset-solid": "^1.7.7",
+    "runtime-compat": "^0.25.1",
+    "solid-js": "^1.7.11"
+  },
+  "peerDependencies": {
+    "primate": "0.21"
+  },
+  "type": "module",
+  "exports": "./src/exports.js"
+}

package/src/client/client.js

@@ -0,0 +1,20 @@
+import {generateHydrationScript} from "solid-js/web";
+import rootname from "./rootname.js";
+import liveview from "./liveview.js";
+
+const {groups: {code: hydration_script}} = generateHydrationScript()
+  .match(/^<script>(?<code>.*?)<\/script>/u);
+
+export default ({names, data}, options) => `
+  import * as components from "app";
+  import {hydrate_solid} from "app";
+
+  window._$HY = { events: [], completed: new WeakSet(), r: {} };
+
+  ${hydration_script}
+
+  const root = hydrate_solid(() => components.${rootname}({
+      components: [${names.map(name => `components.${name}`).join(", ")}],
+      data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
+    }), globalThis.window.document.body);
+  ${options.liveview ? liveview : ""}`;

package/src/client/create-root.js

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

package/src/client/create-root2.js

@@ -0,0 +1,22 @@
+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};
+    };
+  `;
+};

package/src/client/exports.js

@@ -0,0 +1,5 @@
+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

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

package/src/client/liveview.js

@@ -0,0 +1,12 @@
+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,
+    })
+  );
+}));`;

package/src/client/rootname.js

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

package/src/errors.js

@@ -0,0 +1,6 @@
+import {Path} from "runtime-compat/fs";
+import {Logger} from "primate";
+
+const json = await new Path(import.meta.url).up(1).join("errors.json").json();
+
+export default Logger.err(json.errors, json.module);

package/src/exports.js

@@ -0,0 +1 @@
+export {default} from "./module.js";

package/src/module.js

@@ -0,0 +1,211 @@
+import crypto from "runtime-compat/crypto";
+import {Path} from "runtime-compat/fs";
+import {Response, Status, MediaType} from "runtime-compat/http";
+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";
+
+// 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 import$ = async (module, app, copy_dependency) => {
+  const {build: {modules}, 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);
+    await dependency.file.copy(`${to}`);
+  }
+
+  const entry = pkg.exports["."].browser.import;
+  app.importmaps[module] = new Path(root, modules, 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} = {}) =>
+  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}, request)
+    )))
+      /* set the actual page as the last component */
+      .concat(await make(name, props));
+
+    const data = components.map(component => component.props);
+    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 body = renderToString(() => imported({
+      components: components.map(({component}) => component),
+      data,
+    }));
+
+    const code = client({names, data}, options);
+
+    await app.publish({code, type, inline: true});
+    // needs to be called before app.render
+    const headers$ = await app.headers();
+
+    return new Response(await app.render({body}), {
+      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",
+  extension = "jsx",
+} = {}) => {
+  const env = {};
+
+  return {
+    name: "@primate/solid",
+    init(app, next) {
+      env.source = app.build.paths.components;
+
+      return next(app);
+    },
+    register(app, next) {
+      app.register("solid", handler);
+      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);
+
+      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`,
+          });
+        }
+      }));
+
+      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});
+      }
+
+      return next(app);
+    },
+  };
+};