@primate/htmx 0.16.0 → 0.19.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,7 +1,7 @@
 {
   "name": "@primate/htmx",
-  "version": "0.16.0",
-  "description": "Primate HTMX module",
+  "version": "0.19.0",
+  "description": "Primate HTMX frontend",
   "homepage": "https://primatejs.com/modules/htmx",
   "bugs": "https://github.com/primatejs/primate/issues",
   "license": "MIT",
@@ -15,12 +15,38 @@
     "directory": "packages/htmx"
   },
   "dependencies": {
-    "htmx.org": "^1.9.4",
-    "runtime-compat": "^0.24.1"
+    "@rcompat/object": "^0.5.0",
+    "@rcompat/string": "^0.3.0",
+    "@primate/frontend": "^0.16.0",
+    "@primate/html": "^0.10.0"
   },
   "peerDependencies": {
-    "primate": "0.21"
+    "htmx-esm": "0.2",
+    "primate": "^0.32.0"
   },
   "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"
+    },
+    "#error/*": {
+      "@primate/lt": "./src/private/error/*.js",
+      "default": "./src/private/error/*.js"
+    }
+  },
+  "exports": {
+    ".": {
+      "runtime": "./src/public/runtime.js",
+      "default": "./src/public/default.js"
+    }
+  }
+}

package/src/private/build/index.js

@@ -0,0 +1,51 @@
+import no_client_extension from "#error/no-client-extension";
+import name from "#name";
+import compile from "@primate/frontend/core/compile";
+import empty from "@rcompat/object/empty";
+import server from "./server.js";
+
+const templates = "client-side-templates";
+const htmx_esm = "htmx-esm";
+const base_import_template = (subpath, app) =>
+  app.build.export(`export * from "${htmx_esm}/${templates}/${subpath}";`);
+
+const import_template = {
+  handlebars: app => base_import_template("handlebars", app),
+  mustache: app => base_import_template("mustache", app),
+  nunjucks: app => base_import_template("nunjucks", app),
+  // noop
+  xslt: _ => _,
+};
+
+export default ({
+  extension,
+  extensions,
+  client_side_templates,
+}) => async (app, next) => {
+  app.build.export(`export { default as htmx } from "${htmx_esm}";`);
+
+  extensions.forEach(extension_name =>
+    app.build.export(`export * from "${htmx_esm}/${extension_name}";`));
+
+  if (!empty(client_side_templates)) {
+    const has_templates = extensions.includes(templates);
+    // app.assert(has_templates, nce(templates, client_side_templates.join(",")));
+    has_templates ||
+      no_client_extension(templates, client_side_templates.join(", "));
+    client_side_templates.forEach(client_side_template =>
+      import_template[client_side_template](app));
+  }
+
+  app.register(extension, {
+    ...await compile({
+      app,
+      extension,
+      name,
+      compile: { server },
+    }),
+    // no support for hydration
+    client: _ => _,
+  });
+
+  return next(app);
+};

package/src/private/build/server.js

@@ -0,0 +1,8 @@
+export default text => `import HTML from "@rcompat/string/html";
+  export default (props = {}, options) => {
+  const encoded = JSON.parse(HTML.escape(JSON.stringify(props)));
+  const keys = Object.keys(encoded);
+  const values = Object.values(encoded);
+  const text = ${JSON.stringify(text)};
+  return new Function(...keys, \`return \\\`\${text}\\\`;\`)(...values);
+}`;

package/src/private/error/no-client-extension.js

@@ -0,0 +1,11 @@
+import pkgname from "#pkgname";
+import log from "@primate/core/log";
+import file from "@rcompat/fs/file";
+
+export default (...params) => log.error({
+  params,
+  name: file(import.meta.url).base,
+  module: pkgname,
+  message: "the extension {0} is required for {1} client side support",
+  fix: "add \"{0}\" to the `extensions` array for the HTMX module",
+});

package/src/private/extension.js

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

package/src/private/name.js

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

package/src/private/pkgname.js

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

package/src/private/serve/handler.js

@@ -0,0 +1,13 @@
+import handler from "@primate/html/handler";
+
+export default (name, props, options = {}) => async (app, _, request) => {
+  const code = "import { htmx } from \"app\";";
+  const { head , integrity } = await app.inline(code, "module");
+  const script_src = [integrity];
+
+  return handler(name, props, { head: [head],
+    csp: { script_src },
+    partial: Boolean(request.headers.get("hx-request")),
+    ...options,
+  })(app, _, request);
+};

package/src/private/serve/index.js

@@ -0,0 +1,7 @@
+import handler from "./handler.js";
+
+export default extension => (app, next) => {
+  app.register(extension, handler);
+
+  return next(app);
+};

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,
+  extensions = [],
+  client_side_templates = [],
+} = {}) => ({
+  name: pkgname,
+  build: build({ extension, extensions, client_side_templates }),
+  serve: serve(extension),
+});

package/src/public/runtime.js

@@ -0,0 +1,8 @@
+import default_extension from "#extension";
+import pkgname from "#pkgname";
+import serve from "#serve";
+
+export default ({ extension = default_extension } = {}) => ({
+  name: pkgname,
+  serve: serve(extension),
+});

package/README.md

@@ -1,5 +0,0 @@
-# HTMX
-
-This handler module serves HTMX components with the .htmx extension.
-
-## [Documentation](https://primatejs.com/modules/htmx)

package/src/exports.js

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

package/src/module.js

@@ -1,50 +0,0 @@
-import {Response, Status, MediaType} from "runtime-compat/http";
-
-const loadComponent = async (file) => {
-  try {
-    return await file.read();
-  } catch (error) {
-    throw new Error(`cannot load component at ${file.name}`);
-  }
-};
-
-const getBody = async (app, partial, file) => {
-  const body = await loadComponent(file);
-  return partial ? body : app.render({body});
-};
-
-const handler = (name, {status = Status.OK, partial = false} = {}) =>
-  async app => {
-    const {build: {paths: {components}}} = app;
-    const code = "import {htmx} from \"app\";";
-    await app.publish({code, type: "module", inline: true});
-
-    const headers = app.headers();
-    const csp = headers["Content-Security-Policy"].replace(
-      "style-src 'self'", "style-src 'self' 'unsafe-inline'"
-    );
-    const body = await getBody(app, partial, components.join(name).file);
-
-    return new Response(body, {
-      status,
-      headers: {
-        ...headers,
-        "Content-Type": MediaType.TEXT_HTML,
-        "Content-Security-Policy": csp,
-      },
-    });
-  };
-
-export default _ => ({
-  name: "@primate/htmx",
-  register(app, next) {
-    app.register("htmx", handler);
-    return next(app);
-  },
-  async publish(app, next) {
-    const name = "htmx.org";
-    await app.import(name);
-    app.bootstrap({type: "script", code: `export * as htmx from "${name}";`});
-    return next(app);
-  },
-});