primate 0.23.2 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primate",
-  "version": "0.23.2",
+  "version": "0.24.0",
   "description": "Expressive, minimal and extensible web framework",
   "homepage": "https://primatejs.com",
   "bugs": "https://github.com/primatejs/primate/issues",
@@ -18,7 +18,7 @@
     "directory": "packages/primate"
   },
   "dependencies": {
-    "runtime-compat": "^0.28.4"
+    "runtime-compat": "^0.29.0"
   },
   "engines": {
     "node": ">=18"

package/src/app.js

@@ -3,7 +3,7 @@ import {tryreturn} from "runtime-compat/async";
 import {File, Path} from "runtime-compat/fs";
 import {bold, blue} from "runtime-compat/colors";
 import {is} from "runtime-compat/invariant";
-import {transform, valmap, to} from "runtime-compat/object";
+import {transform, valmap} from "runtime-compat/object";
 import {globify} from "runtime-compat/string";
 import * as runtime from "runtime-compat/meta";
 
@@ -29,6 +29,22 @@ const attribute = attributes => Object.keys(attributes).length > 0
   : "";
 const tag = ({name, attributes = {}, code = "", close = true}) =>
   `<${name}${attribute(attributes)}${close ? `>${code}</${name}>` : "/>"}`;
+const tags = {
+  // inline: <script type integrity>...</script>
+  // outline: <script type integrity src></script>
+  script({inline, code, type, integrity, src}) {
+    return inline
+      ? tag({name: "script", attributes: {type, integrity}, code})
+      : tag({name: "script", attributes: {type, integrity, src}});
+  },
+  // inline: <style>...</style>
+  // outline: <link rel="stylesheet" href/>
+  style({inline, code, href, rel = "stylesheet"}) {
+    return inline
+      ? tag({name: "style", code})
+      : tag({name: "link", attributes: {rel, href}, close: false});
+  },
+};
 
 const {name, version} = await new Path(import.meta.url).up(2)
   .join(runtime.manifest).json();
@@ -96,24 +112,21 @@ export default async (log, root, config) => {
         }
       }));
     },
-    headers() {
+    headers({script = "", style = ""} = {}) {
       const csp = Object.keys(http.csp).reduce((policy, key) =>
         `${policy}${key} ${http.csp[key]};`, "")
-        .replace("script-src 'self'", `script-src 'self' ${
+        .replace("script-src 'self'", `script-src 'self' ${script} ${
           this.assets
             .filter(({type}) => type !== "style")
             .map(asset => `'${asset.integrity}'`).join(" ")
-        } `)
-        .replace("style-src 'self'", `style-src 'self' ${
+        }`)
+        .replace("style-src 'self'", `style-src 'self' ${style} ${
           this.assets
             .filter(({type}) => type === "style")
             .map(asset => `'${asset.integrity}'`).join(" ")
-        } `);
+        }`);
 
-      return {
-        "Content-Security-Policy": csp,
-        "Referrer-Policy": "same-origin",
-      };
+      return {"Content-Security-Policy": csp, "Referrer-Policy": "same-origin"};
     },
     runpath(...directories) {
       return this.path.build.join(...directories);
@@ -122,29 +135,22 @@ export default async (log, root, config) => {
       const {location: {pages}} = this.config;
 
       const html = await index(this.runpath(pages), page, config.pages.index);
-      // inline: <script type integrity>...</script>
-      // outline: <script type integrity src></script>
-      const script = ({inline, code, type, integrity, src}) => inline
-        ? tag({name: "script", attributes: {type, integrity}, code})
-        : tag({name: "script", attributes: {type, integrity, src}});
-      // inline: <style>...</style>
-      // outline: <link rel="stylesheet" href/>
-      const style = ({inline, code, href, rel = "stylesheet"}) => inline
-        ? tag({name: "style", code})
-        : tag({name: "link", attributes: {rel, href}, close: false});
-
-      const heads = head.concat("\n", to_sorted(this.assets,
+
+      const heads = to_sorted(this.assets,
         ({type}) => -1 * (type === "importmap"))
         .map(({src, code, type, inline, integrity}) =>
           type === "style"
-            ? style({inline, code, href: src})
-            : script({inline, code, type, integrity, src})
-        ).join("\n"));
-      // remove inline assets
-      this.assets = this.assets.filter(({inline, type}) => !inline
-        || type === "importmap");
+            ? tags.style({inline, code, href: src})
+            : tags.script({inline, code, type, integrity, src})
+        ).join("\n").concat("\n", head);
       return html.replace("%body%", _ => body).replace("%head%", _ => heads);
     },
+    async inline(code, type) {
+      const integrity = await this.hash(code);
+      const tag_name = type === "style" ? "style" : "script";
+      const head = tags[tag_name]({code, type, inline: true, integrity});
+      return {head, csp: `'${integrity}'`};
+    },
     async publish({src, code, type = "", inline = false, copy = true}) {
       if (!inline && copy) {
         const base = this.runpath(this.config.location.client).join(src);
@@ -173,7 +179,7 @@ export default async (log, root, config) => {
       const prefix = algorithm.replace("-", _ => "");
       return `${prefix}-${btoa(String.fromCharCode(...new Uint8Array(bytes)))}`;
     },
-    async import(module) {
+    async import(module, deep_import) {
       const {http: {static: {root}}, location: {client}} = this.config;
 
       const parts = module.split("/");
@@ -182,12 +188,16 @@ export default async (log, root, config) => {
       const exports = pkg.exports === undefined
         ? {[module]: `/${module}/${pkg.main}`}
         : transform(pkg.exports, entry => entry
-          .filter(([, export$]) => export$.browser?.default !== undefined
+          .filter(([, export$]) =>
+            export$.browser?.[deep_import] !== undefined
+            || export$.browser?.default !== undefined
             || export$.import !== undefined
             || export$.default !== undefined)
           .map(([key, value]) => [
-            key.replace(".", module),
-            value.browser?.default.replace(".", `./${module}`)
+            key.replace(".", deep_import === undefined
+              ? module : `${module}/${deep_import}`),
+            value.browser?.[deep_import]?.replace(".", `./${module}`)
+              ?? value.browser?.default.replace(".", `./${module}`)
               ?? value.default?.replace(".", `./${module}`)
               ?? value.import?.replace(".", `./${module}`),
           ]));

package/src/handlers/html.js

@@ -1,26 +1,29 @@
 import {Response, Status, MediaType} from "runtime-compat/http";
 
-const script = /(?<=<script)>(?<code>.*?)(?=<\/script>)/gus;
-const style = /(?<=<style)>(?<code>.*?)(?=<\/style>)/gus;
+const script_re = /(?<=<script)>(?<code>.*?)(?=<\/script>)/gus;
+const style_re = /(?<=<style)>(?<code>.*?)(?=<\/style>)/gus;
 const remove = /<(?<tag>script|style)>.*?<\/\k<tag>>/gus;
-const inline = true;
 
 export default (name, options = {}) => {
   const {status = Status.OK, partial = false} = options;
 
   return async app => {
     const html = await app.path.components.join(name).text();
-    await Promise.all([...html.matchAll(script)]
-      .map(({groups: {code}}) => app.publish({code, inline})));
-    await Promise.all([...html.matchAll(style)]
-      .map(({groups: {code}}) => app.publish({code, type: "style", inline})));
+    const scripts = await Promise.all([...html.matchAll(script_re)]
+      .map(({groups: {code}}) => app.inline(code, "module")));
+    const styles = await Promise.all([...html.matchAll(style_re)]
+      .map(({groups: {code}}) => app.inline(code, "style")));
+    const assets = [...scripts, ...styles];
+
     const body = html.replaceAll(remove, _ => "");
-    // needs to happen before app.render()
-    const headers = app.headers();
+    const head = assets.map(asset => asset.head).join("\n");
+    const script = scripts.map(asset => asset.csp).join(" ");
+    const style = styles.map(asset => asset.csp).join(" ");
+    const headers = {script, style};
 
-    return new Response(partial ? body : await app.render({body}), {
+    return new Response(partial ? body : await app.render({body, head}), {
       status,
-      headers: {...headers, "Content-Type": MediaType.TEXT_HTML},
+      headers: {...app.headers(headers), "Content-Type": MediaType.TEXT_HTML},
     });
   };
 };

package/src/hooks/publish.js

@@ -25,9 +25,8 @@ const post = async app => {
     }
 
     const imports = {...app.importmaps, app: src.path};
-    const inline = true;
     const type = "importmap";
-    await app.publish({inline, code: stringify({imports}), type});
+    await app.publish({inline: true, code: stringify({imports}), type});
   }
 
   if (await path.static.exists) {