@primate/solid 0.2.0 → 0.4.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) Terrablue <terrablue@proton.me> and contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@primate/solid",
-  "version": "0.2.0",
-  "description": "Primate Solid module",
+  "version": "0.4.0",
+  "description": "Primate Solid frontend",
   "homepage": "https://primatejs.com/modules/solid",
   "bugs": "https://github.com/primatejs/primate/issues",
   "license": "MIT",
   "files": [
     "src/**/*.js",
-    "src/errors.json",
     "!src/**/*.spec.js"
   ],
   "repository": {
@@ -16,14 +15,60 @@
     "directory": "packages/solid"
   },
   "dependencies": {
-    "@primate/frontend": "^0.2.0",
-    "babel-preset-solid": "^1.7.7",
-    "runtime-compat": "^0.25.7",
-    "solid-js": "^1.7.11"
+    "@rcompat/build": "^0.4.0",
+    "@rcompat/fs": "^0.4.0",
+    "@rcompat/platform": "^0.3.0",
+    "@primate/frontend": "^0.16.0"
   },
   "peerDependencies": {
-    "primate": "0.22"
+    "@babel/core": "7",
+    "babel-preset-solid": "1",
+    "solid-js": "1",
+    "@primate/i18n": "^0.8.0",
+    "primate": "^0.32.0"
+  },
+  "peerDependenciesMeta": {
+    "@primate/i18n": {
+      "optional": true
+    }
   },
   "type": "module",
-  "exports": "./src/exports.js"
-}
+  "imports": {
+    "#*": {
+      "@primate/lt": "./src/private/*.js",
+      "default": "./src/private/*.js"
+    },
+    "#build": {
+      "@primate/lt": "./src/private/build/index.js",
+      "default": "./src/private/build/index.js"
+    },
+    "#serve": {
+      "@primate/lt": "./src/private/serve/index.js",
+      "default": "./src/private/serve/index.js"
+    },
+    "#context/*": {
+      "@primate/lt": "./src/private/context/*.js",
+      "default": "./src/private/context/*.js"
+    },
+    "#client": {
+      "@primate/lt": "./src/private/client/index.js",
+      "default": "./src/private/client/index.js"
+    },
+    "#client/*": {
+      "@primate/lt": "./src/private/client/*.js",
+      "default": "./src/private/client/*.js"
+    },
+    "#i18n/*": {
+      "@primate/lt": "./src/private/i18n/*.js",
+      "default": "./src/private/i18n/*.js"
+    }
+  },
+  "exports": {
+    ".": {
+      "runtime": "./src/public/runtime.js",
+      "default": "./src/public/default.js"
+    },
+    "./*": "./src/public/*.js",
+    "./context/*": "./src/public/context/*.js"
+  }
+}

package/src/private/build/client.js

@@ -0,0 +1,7 @@
+import { transformAsync } from "@babel/core";
+import solid from "babel-preset-solid";
+
+export default async text => {
+  const presets = [[solid, { generate: "dom", hydratable: true }]];
+  return { js: (await transformAsync(text, { presets })).code };
+};

package/src/private/build/index.js

@@ -0,0 +1,14 @@
+import create_root from "#client/create-root";
+import expose from "#client/expose";
+import name from "#name";
+import build from "@primate/frontend/core/build";
+import client from "./client.js";
+import publish from "./publish.js";
+import server from "./server.js";
+
+export default extension => build({
+  create_root,
+  extension,
+  name,
+  actions: { compile: { client, server }, expose, publish },
+});

package/src/private/build/publish.js

@@ -0,0 +1,26 @@
+import file from "@rcompat/fs/file";
+import client from "./client.js";
+
+const root_filter = /^root:solid/u;
+
+export default (app, extension) => ({
+  name: "solid",
+  setup(build) {
+    build.onResolve({ filter: root_filter }, ({ path }) => {
+      return { path, namespace: "solidroot" };
+    });
+    build.onLoad({ filter: root_filter }, ({ path }) => {
+      const contents = app.build.load(path);
+      return contents
+        ? { contents, loader: "js", resolveDir: app.root.path }
+        : null;
+    });
+    build.onLoad({ filter: new RegExp(`${extension}$`, "u") }, async args => {
+      // Load the file from the file system
+      const source = await file(args.path).text();
+
+      // Convert JSX syntax to JavaScript
+      return { contents: (await client(source)).js };
+    });
+  },
+});

package/src/private/build/server.js

@@ -0,0 +1,8 @@
+import { transformAsync } from "@babel/core";
+import solid from "babel-preset-solid";
+
+export default async text => {
+  const presets = [[solid, { generate: "ssr", hydratable: true }]];
+  return (await transformAsync(text, { presets })).code;
+};
+

package/src/private/client/create-root.js

@@ -0,0 +1,33 @@
+export default length => {
+  const n = length - 1;
+  const body = Array.from({ length: n }, (_, i) => i - 1)
+    .reduceRight((child, _, i) => `components[${i + 1}] !== undefined
+        ? createComponent(components[${i}], {request, ...data[${i}], 
+            children: ${child}})
+        : createComponent(components[${i}], {request, ...data[${i}]})
+    `, `createComponent(components[${n}], {request, ...data[${n}]})`);
+
+  return `
+    import { createSignal } from "solid-js";
+    import { createComponent } from "solid-js/web";
+    import AppContext from "@primate/solid/context/app";
+    import HeadContext from "@primate/solid/context/head";
+
+    export default ({
+      components,
+      data,
+      request,
+      context: c,
+      push_heads: value,
+    }) => {
+      const [context, setContext] = createSignal(c);
+      const $value = { context, setContext };
+
+      return <AppContext.Provider value={$value}>
+          <HeadContext.Provider value={value}>
+            {${body}}
+          </HeadContext.Provider>
+        </AppContext.Provider>
+    }
+  `;
+};

package/src/private/client/expose.js

@@ -0,0 +1,7 @@
+export default `
+  export { 
+    hydrate as hydrate_solid,
+    render as render_solid,
+  } from "solid-js/web";
+  export { default as SolidHead } from "@primate/solid/head";
+`;

package/src/private/client/index.js

@@ -0,0 +1,25 @@
+import { generateHydrationScript } from "solid-js/web";
+import spa from "./spa.js";
+
+const { groups: { code: hydration_script } } = generateHydrationScript()
+  .match(/^<script>(?<code>.*?)<\/script>/u);
+
+export default ({ names, data, context, request }, options) => `
+  import * as components from "app";
+  import { hydrate_solid, render_solid, SolidHead } from "app";
+
+  window._$HY = { events: [], completed: new WeakSet(), r: {} };
+
+  ${hydration_script}
+
+  SolidHead.clear();
+  let dispose = hydrate_solid(() => components.root_solid({
+      components: [${names.map(name => `components.${name}`).join(", ")}],
+      data: ${JSON.stringify(data)},
+      context: ${JSON.stringify(context)},
+      request: {
+        ...${JSON.stringify(request)},
+        url: new URL(location.href),
+      },
+    }), globalThis.window.document.body);
+  ${options.spa ? spa : ""}`;

package/src/private/client/spa.js

@@ -0,0 +1,14 @@
+export default `
+const { spa } = components;
+window.addEventListener("DOMContentLoaded", _ => spa((props, update) => {
+  dispose();
+  dispose = render_solid(() => components.root_solid({
+    components: props.names.map(name => components[name]),
+    data: props.data,
+    context: props.context,
+    request: {
+      ...props.request,
+      url: new URL(location.href),
+    },
+  }), globalThis.window.document.body);
+}));`;

package/src/private/context/app.js

@@ -0,0 +1,3 @@
+import { createContext } from "solid-js";
+
+export default createContext({});

package/src/private/context/head.js

@@ -0,0 +1,3 @@
+import { createContext } from "solid-js";
+
+export default createContext();

package/src/private/extension.js

@@ -0,0 +1 @@
+export default ".jsx";

package/src/private/i18n/index.js

@@ -0,0 +1,10 @@
+import resolve from "@primate/i18n/core/resolve";
+import AppContext from "#context/app";
+import { useContext } from "solid-js";
+import locale_store from "./locale.js";
+
+export default (key, placeholders) => {
+  locale_store.init();
+  const { locales, locale } = useContext(AppContext).context().i18n;
+  return resolve(locales[locale], key, placeholders);
+};

package/src/private/i18n/locale.js

@@ -0,0 +1,37 @@
+import AppContext from "#context/app";
+import save from "@primate/i18n/core/save";
+import { useContext } from "solid-js";
+
+const $ = {
+  context: Symbol("context"),
+  setContext: Symbol("setContext"),
+};
+
+export default {
+  [$.context]: undefined,
+  [$.setContext]: undefined,
+  get() {
+    this.init();
+    return this[$.context].i18n.locale;
+  },
+  set(locale) {
+    this.init();
+    this[$.setContext]({
+        ...this[$.context],
+        i18n: {
+          locale,
+          locales: this[$.context].i18n.locales,
+        },
+      });
+    save(locale);
+  },
+  init() {
+    if (this[$.context] !== undefined) {
+      return;
+    }
+
+    const { context, setContext } = useContext(AppContext);
+    this[$.context] = context();
+    this[$.setContext] = setContext;
+  },
+};

package/src/private/name.js

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

package/src/private/pkgname.js

@@ -0,0 +1 @@
+export default "@primate/solid";

package/src/private/serve/index.js

@@ -0,0 +1,16 @@
+import handler from "@primate/frontend/core/handler";
+import client from "#client";
+import name from "#name";
+import render from "./render.js";
+
+export default (extension, spa) => (app, next) => {
+  app.register(extension, handler({
+    app,
+    render,
+    client,
+    name,
+    spa,
+  }));
+
+  return next(app);
+};

package/src/private/serve/render.js

@@ -0,0 +1,17 @@
+import { renderToString } from "solid-js/web";
+
+export default (component, props) => {
+  const heads = [];
+  const push_heads = sub_heads => {
+    heads.push(...sub_heads);
+  };
+  const body = renderToString(() => component({ ...props, push_heads }));
+
+  if (heads.filter(head => head.startsWith("<title")).length > 1) {
+    const error = "May only contain one <title> across component hierarchy";
+    throw new Error(error);
+  }
+  const head = heads.join("\n");
+
+  return { body, head };
+};

package/src/public/context/app.js

@@ -0,0 +1 @@
+export { default } from "#context/app";

package/src/public/context/head.js

@@ -0,0 +1 @@
+export { default } from "#context/head";

package/src/public/default.js

@@ -0,0 +1,14 @@
+import build from "#build";
+import default_extension from "#extension";
+import pkgname from "#pkgname";
+import serve from "#serve";
+
+export default ({
+  extension = default_extension,
+  // activate fetch-based browsing
+  spa = true,
+} = {}) => ({
+  name: pkgname,
+  build: build(extension),
+  serve: serve(extension, spa),
+});

package/src/public/head.js

@@ -0,0 +1,92 @@
+import HeadContext from "#context/head";
+import platform from "@rcompat/platform";
+import { onCleanup, onMount, useContext } from "solid-js";
+
+const is_client = platform === "browser";
+
+const to_array = maybe => Array.isArray(maybe) ? maybe : [maybe];
+
+const data_attribute = "data-sh";
+const data_ssr = "ssr";
+const allowed = ["title", "meta", "style", "meta", "link", "script", "base"];
+
+const make_tag = (tag, id) => {
+  const parts = tag.split(" ");
+  return [
+    parts[0],
+    `${data_attribute}="${id}"`,
+    ...parts.slice(1),
+  ].join(" ");
+};
+
+const get_tag = child => child.match(/^<(?<tag>[a-z]*) .*$/u).groups.tag;
+
+const render = (maybe_children, id) => {
+  const children = to_array(maybe_children);
+
+  if (is_client) {
+    // DOM elements
+    const titles = children.filter(({ tagName }) => tagName === "TITLE");
+    const others = children.filter(({ tagName }) => tagName !== "TITLE");
+
+    titles.forEach(title => {
+      globalThis.document.title = title.innerText;
+    });
+    others.forEach(other => {
+      other.dataset.sh = id;
+      globalThis.document.head.prepend(other);
+    });
+  } else {
+    const tags = children.map(({ t: tag }) => tag);
+    const all_good = tags.every(tag => allowed.includes(get_tag(tag)));
+    if (!all_good) {
+      const bad = get_tag(tags.find(tag => !allowed.includes(get_tag(tag))));
+      const alloweds = `${allowed.map(tag => `<${tag}>`).join(", ")}`;
+      const error = `Head may only contain ${alloweds}, found <${bad}>`;
+      throw new Error(error);
+    }
+
+    const titles = tags.filter(tag => get_tag(tag) === "title");
+    const others = tags.filter(tag => get_tag(tag) !== "title");
+
+    return [
+      ...titles,
+      ...others.map(other => make_tag(other, id)),
+    ];
+  }
+};
+
+const clear = (data_value) => {
+  const selector = `[${data_attribute}="${data_value}"]`;
+  globalThis.document.querySelectorAll(selector).forEach(element => {
+    element.remove();
+  });
+};
+
+const Head = function Head(props) {
+  let id;
+  onMount(() => {
+    if (is_client) {
+      id = crypto.randomUUID();
+      render(props.children, id);
+    }
+  });
+
+  onCleanup(() => {
+    if (is_client) {
+      // remove managed tags
+      clear(id);
+    }
+  });
+
+  if (!is_client) {
+    const context = useContext(HeadContext);
+    context(render(props.children, data_ssr));
+  }
+
+  // no return, nothing rendered
+};
+
+Head.clear = (data_value = data_ssr) => clear(data_value);
+
+export default Head;

package/src/public/i18n.js

@@ -0,0 +1 @@
+export { default } from "#i18n/index";

package/src/public/locale.js

@@ -0,0 +1 @@
+export { default } from "#i18n/locale";

package/src/public/runtime.js

@@ -0,0 +1,12 @@
+import default_extension from "#extension";
+import pkgname from "#pkgname";
+import serve from "#serve";
+
+export default ({
+  extension = default_extension,
+  // activate fetch-based browsing
+  spa = true,
+} = {}) => ({
+  name: pkgname,
+  serve: serve(extension, spa),
+});

package/README.md

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

package/src/client/client.js

@@ -1,20 +0,0 @@
-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, render_solid} from "app";
-
-  window._$HY = {events: [], completed: new WeakSet(), r: {}};
-
-  ${hydration_script}
-
-  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);
-  ${options.liveview ? liveview : ""}`;

package/src/client/create-root.js

@@ -1,16 +0,0 @@
-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/exports.js

@@ -1,4 +0,0 @@
-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 rootname} from "./rootname.js";

package/src/client/hydrate.js

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

package/src/client/liveview.js

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

package/src/client/rootname.js

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

package/src/errors.js

@@ -1,6 +0,0 @@
-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/errors.json

@@ -1,10 +0,0 @@
-{
-  "module": "primate/solid",
-  "errors": {
-    "MissingComponent": {
-      "message": "missing component {0}",
-      "fix": "create {1} or remove route function",
-      "level": "Error"
-    }
-  }
-}

package/src/exports.js

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

package/src/module.js

@@ -1,126 +0,0 @@
-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 {client, create_root, rootname, hydrate} from "./client/exports.js";
-
-const normalize = base.normalize("solid");
-
-const import$ = async (module, app, copy_dependency) => {
-  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.runpath(app.config.location.client, library, ...parts);
-    await dependency.file.copy(`${to}`);
-  }
-
-  const entry = pkg.exports["."].browser.import;
-  app.importmaps[module] = new Path(root, library, module, entry).path;
-};
-
-const type = "module";
-
-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,
-    };
-    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 imported = (await import(root)).default;
-    const body = render(() => 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, page}), {
-      status,
-      headers: {...headers$, "Content-Type": MediaType.TEXT_HTML},
-    });
-  };
-
-export default ({
-  directory,
-  dynamicProps,
-  extension = "jsx",
-} = {}) => {
-  return {
-    name: "primate:solid",
-    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,
-        async compile(file) {
-          const presets = [[solid, {generate: "ssr", hydratable: true}]];
-          return (await transformAsync(file, {presets})).code;
-        },
-      });
-
-      return next(app);
-    },
-    async publish(app, next) {
-      // import libs
-      await import$("solid-js", app, true);
-      await import$("solid-js/web", app);
-      // 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);
-    },
-  };
-};