@primate/solid 0.0.2 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/solid",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Primate Solid module",
   "homepage": "https://primatejs.com/modules/solid",
   "bugs": "https://github.com/primatejs/primate/issues",

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

@@ -6,7 +6,7 @@ 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";
@@ -45,7 +45,7 @@ const type = "module";
 
 const load = async path =>
   tryreturn(async () => (await import(`${path}.js`)).default)
-    .orelse(_ => errors.MissingComponent.throw(path.name, path));
+    .orelse(error => {console.log(error);return errors.MissingComponent.throw(path.name, path)});
 
 const make_component = base => async (name, props) =>
   ({name, component: await load(base.join(name)), props});
@@ -108,11 +108,6 @@ const options = {
   }],
 };
 
-const endings = {
-  solid: ".solid",
-  js: ".solid.js",
-};
-
 const transform = {
   async server(file) {
     return (await transformAsync(file, {presets: [options.server]})).code;
@@ -127,22 +122,28 @@ export default ({
   extension = "jsx",
 } = {}) => {
   const env = {};
+  const copy_re = new RegExp(`^.*.(?:${extension})$`, "u");
+  const collect_re = new RegExp(`^.*.${extension}$`, "u");
+  const extensions = {
+    from: `.${extension}`,
+    to: `.${extension}.js`,
+  };
 
   return {
     name: "@primate/solid",
-    init(app, next) {
+    init(app, next/*0.21 compat, remove >0.21*/ = () => null) {
       env.source = app.build.paths.components;
 
       return next(app);
     },
     register(app, next) {
-      app.register("solid", handler);
+      app.register(extension, 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);
+      await app.copy(app.paths.components, env.source, copy_re);
+      const components = await env.source.collect(collect_re);
       const target = app.build.paths.server.join(app.config.build.app);
       await target.file.create();
 
@@ -151,10 +152,10 @@ export default ({
         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));
+        await to.file.write(code.replaceAll(extensions.from, extensions.to));
       }));
 
-      const root = await transform.server(create_root2(app.layoutDepth,
+      const root = await transform.server(create_root(app.layoutDepth,
         dynamicProps));
       const to = app.build.paths.server.join(filename);
       await to.file.write(root);
@@ -166,7 +167,7 @@ export default ({
       await target.file.create();
 
       // create client components
-      const components = await env.source.collect(/^.*.solid/u);
+      const components = await env.source.collect(collect_re);
       await Promise.all(components.map(async component => {
         const name = component.path.replace(`${env.source}/`, "");
         const file = await component.file.read();
@@ -178,7 +179,7 @@ export default ({
           {
             const src = `${path}.js`.replace(`${env.source}`, _ => build);
             await app.publish({src,
-              code: code.replaceAll(endings.solid, endings.js),
+              code: code.replaceAll(extensions.from, extensions.to),
             type});
           }
           const imported = await normalize(name);
@@ -195,7 +196,7 @@ export default ({
       app.bootstrap({type: "script", code: hydrate});
 
       {
-        const code = await transform.client(create_root2(app.layoutDepth,
+        const code = await transform.client(create_root(app.layoutDepth,
           dynamicProps));
         const src = new Path(app.config.http.static.root, filename);
         await app.publish({src, code, type});

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};
-    };
-  `;
-};