@primate/svelte 0.16.0 → 0.18.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/svelte",
-  "version": "0.16.0",
-  "description": "Primate Svelte module",
+  "version": "0.18.0",
+  "description": "Primate Svelte frontend",
   "homepage": "https://primatejs.com/modules/svelte",
   "bugs": "https://github.com/primatejs/primate/issues",
   "license": "MIT",
   "files": [
     "src/**/*.js",
-    "src/errors.json",
     "!src/**/*.spec.js"
   ],
   "repository": {
@@ -16,13 +15,51 @@
     "directory": "packages/svelte"
   },
   "dependencies": {
-    "@primate/frontend": "^0.2.0",
-    "runtime-compat": "^0.25.7",
-    "svelte": "^4.2.0"
+    "@rcompat/fs": "^0.4.0",
+    "@primate/frontend": "^0.16.0"
   },
   "peerDependencies": {
-    "primate": "0.22"
+    "svelte": "4",
+    "@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"
+    },
+    "#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"
+  }
+}

package/src/private/build/client.js

@@ -0,0 +1,8 @@
+import * as compiler from "svelte/compiler";
+
+export default text => {
+  const options = { generate: "dom", hydratable: true };
+  const { js, css } = compiler.compile(text, options);
+  return { js: js.code, css: css.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,40 @@
+import file from "@rcompat/fs/file";
+import webpath from "@rcompat/fs/webpath";
+import client from "./client.js";
+
+const css_filter = /\.sveltecss$/u;
+const root_filter = /^root:svelte$/u;
+
+export default (app, extension) => ({
+  name: "svelte",
+  setup(build) {
+    build.onResolve({ filter: css_filter }, ({ path }) => {
+      return { path, namespace: "sveltecss" };
+    });
+    build.onResolve({ filter: root_filter }, ({ path }) => {
+      return { path, namespace: "svelteroot" };
+    });
+    build.onLoad({ filter: css_filter }, ({ path }) => {
+      const contents = app.build.load(webpath(path));
+      return contents ? { contents, loader: "css", resolveDir: app.root.path } : null;
+    });
+    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 Svelte syntax to JavaScript
+      const { js, css } = client(source);
+      let contents = js;
+      if (css !== null && css !== "") {
+        const path = File.webpath(`${args.path}css`);
+        app.build.save(path, css);
+        contents += `\nimport "${path}";`;
+      }
+      return { contents };
+    });
+  },
+});

package/src/private/build/server.js

@@ -0,0 +1,6 @@
+import * as compiler from "svelte/compiler";
+
+export default text => {
+  const options = { generate: "ssr", hydratable: true };
+  return compiler.compile(text, options).js.code;
+};

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

@@ -0,0 +1,31 @@
+export default length => {
+  const n = length - 1;
+  const body = Array.from({ length: n }, (_, i) => i - 1)
+    .reduceRight((child, _, i) => `
+      {#if components[${i + 1}]}
+        <svelte:component this={components[${i}]} {request} {...data[${i}]}>
+          ${child}
+        </svelte:component>
+      {:else}
+        <svelte:component this={components[${i}]} {request} {...data[${i}]}/>
+      {/if}
+    `, `<svelte:component this={components[${n}]} {request} {...data[${n}]}/>`);
+
+  return `
+    <script>
+      import { afterUpdate, setContext } from "svelte";
+      import context_name from "@primate/svelte/context-name";
+
+      export let components;
+      export let data;
+      export let request;
+      export let context;
+      export let update = () => undefined;
+
+      setContext(context_name, context);
+
+      afterUpdate(update);
+    </script>
+    ${body}
+  `;
+};

package/src/private/client/expose.js

@@ -0,0 +1 @@
+export default "export { setContext } from \"svelte\";";

package/src/private/client/index.js

@@ -0,0 +1,18 @@
+import spa from "./spa.js";
+
+export default ({ names, data, context, request }, options) => `
+  import * as components from "app";
+  let root = new components.root_svelte({
+    target: document.body,
+    hydrate: true,
+    props: {
+      components: [${names.map(name => `components.${name}`).join(", ")}],
+      data: ${JSON.stringify(data)},
+      context: ${JSON.stringify(context)},
+      request: {
+        ...${JSON.stringify(request)},
+        url: new URL(location.href),
+      },
+    },
+  });
+  ${options.spa ? spa : ""}`;

package/src/private/client/spa.js

@@ -0,0 +1,19 @@
+export default `
+const { spa } = components;
+window.addEventListener("DOMContentLoaded", _ => spa((props, update) => {
+  root.$destroy();
+  root = new components.root_svelte({
+    target: document.body,
+    hydrate: true,
+    props: {
+      components: props.names.map(name => components[name]),
+      data: props.data,
+      context: props.context,
+      request: {
+        ...props.request,
+        url: new URL(location.href),
+      },
+      update,
+    },
+  });
+}));`;

package/src/private/context-name.js

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

package/src/private/extension.js

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

package/src/private/i18n/index.js

@@ -0,0 +1,10 @@
+import context_name from "#context-name";
+import locale_store from "#i18n/locale";
+import resolve from "@primate/i18n/core/resolve";
+import { getContext } from "svelte";
+import { derived } from "svelte/store";
+
+export default derived(locale_store, locale => (key, placeholders) => {
+  const { locales } = getContext(context_name).i18n;
+  return resolve(locales[locale], key, placeholders);
+});

package/src/private/i18n/locale.js

@@ -0,0 +1,19 @@
+import context_name from "#context-name";
+import save from "@primate/i18n/core/save";
+import { getContext } from "svelte";
+import { writable } from "svelte/store";
+
+const store = writable("", set => {
+  const { locale } = getContext(context_name).i18n;
+  set(locale);
+
+  return () => undefined;
+});
+
+export default {
+  subscribe: store.subscribe,
+  set: locale => {
+    store.set(locale);
+    save(locale);
+  },
+};

package/src/private/name.js

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

package/src/private/pkgname.js

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

package/src/private/serve/index.js

@@ -0,0 +1,16 @@
+import client from "#client";
+import name from "#name";
+import handler from "@primate/frontend/core/handler";
+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,4 @@
+export default (component, ...args) => {
+  const { html, head } = component.render(...args);
+  return { body: html, head };
+};

package/src/public/context-name.js

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

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/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 @@
-# Svelte
-
-This handler serves Svelte components with the `svelte` file extension.
-
-## [Documentation](https://primatejs.com/modules/svelte)

package/src/client/client.js

@@ -1,14 +0,0 @@
-import rootname from "./rootname.js";
-import liveview from "./liveview.js";
-
-export default ({names, data}, options) => `
-  import * as components from "app";
-  let root = new components.${rootname}({
-    target: document.body,
-    hydrate: true,
-    props: {
-      components: [${names.map(name => `components.${name}`).join(", ")}],
-      data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
-    },
-  });
-  ${options.liveview ? liveview : ""}`;

package/src/client/create-root.js

@@ -1,25 +0,0 @@
-export default (length, data) => {
-  const n = length - 1;
-  const body = Array.from({length: n}, (_, i) => i - 1)
-    .reduceRight((child, _, i) => `
-      {#if components[${i + 1}]}
-        <svelte:component this={components[${i}]} ${data}={data[${i}]}>
-          ${child}
-        </svelte:component>
-      {:else}
-        <svelte:component this={components[${i}]} ${data}={data[${i}]} />
-      {/if}
-    `, `<svelte:component this={components[${n}]} ${data}={data[${n}]} />`);
-
-  return `
-    <script>
-      import {afterUpdate} from "svelte";
-      export let components;
-      export let data;
-      export let update = () => undefined;
-
-      afterUpdate(update);
-    </script>
-    ${body}
-  `;
-};

package/src/client/exports.js

@@ -1,3 +0,0 @@
-export {default as client} from "./client.js";
-export {default as create_root} from "./create-root.js";
-export {default as rootname} from "./rootname.js";

package/src/client/liveview.js

@@ -1,16 +0,0 @@
-import rootname from "./rootname.js";
-
-export default `
-const {liveview} = components;
-window.addEventListener("DOMContentLoaded", _ => liveview((props, update) => {
-  root.$destroy();
-  root = new components.${rootname}({
-    target: document.body,
-    hydrate: true,
-    props: {
-      components: props.names.map(name => components[name]),
-      data: props.data,
-      update,
-    },
-  });
-}));`;

package/src/client/rootname.js

@@ -1 +0,0 @@
-export default "svelte_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/svelte",
-  "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,104 +0,0 @@
-import {Response, Status, MediaType} from "runtime-compat/http";
-import * as base from "@primate/frontend";
-import * as compiler from "svelte/compiler";
-import {client, create_root, rootname} from "./client/exports.js";
-
-const normalize = base.normalize("svelte");
-const type = "module";
-
-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;
-    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 {html: body, head} = imported.render({
-      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, head}), {
-      status,
-      headers: {...headers$, "Content-Type": MediaType.TEXT_HTML},
-    });
-  };
-
-export default ({
-  dynamicProps = "data",
-  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;
-        },
-      });
-
-      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};
-        },
-      });
-
-      return next(app);
-    },
-  };
-};