@podium/podlet 5.1.12 → 5.2.0-next.2

package/CHANGELOG.md

@@ -1,3 +1,129 @@
+# [5.2.0-next.2](https://github.com/podium-lib/podlet/compare/v5.2.0-next.1...v5.2.0-next.2) (2024-09-06)
+
+
+### Bug Fixes
+
+* force release 5.2.0-next.2 ([b2fc84c](https://github.com/podium-lib/podlet/commit/b2fc84cd6ced3716aa0964d76f55063db5c37fce))
+* force release 5.2.0-next.2 ([84223e8](https://github.com/podium-lib/podlet/commit/84223e823125544eb40cbd50b2558bcb78ba9ce6))
+* force release 5.2.0-next.2 ([4f5f19d](https://github.com/podium-lib/podlet/commit/4f5f19d9e486461b822dddf4bf278207927c63be))
+* force release 5.2.0-next.2 ([a5a1953](https://github.com/podium-lib/podlet/commit/a5a19536aab17130e79f14b2a8d7e7f58e61d0f0))
+* update @podium/utils ([719c1e0](https://github.com/podium-lib/podlet/commit/719c1e0ae4e06144e084e8b95bd04d94313b116e))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* force release 5.2.0-next.2 ([84223e8](https://github.com/podium-lib/podlet/commit/84223e823125544eb40cbd50b2558bcb78ba9ce6))
+* force release 5.2.0-next.2 ([4f5f19d](https://github.com/podium-lib/podlet/commit/4f5f19d9e486461b822dddf4bf278207927c63be))
+* force release 5.2.0-next.2 ([a5a1953](https://github.com/podium-lib/podlet/commit/a5a19536aab17130e79f14b2a8d7e7f58e61d0f0))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+* update @podium/utils ([719c1e0](https://github.com/podium-lib/podlet/commit/719c1e0ae4e06144e084e8b95bd04d94313b116e))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* force release 5.2.0-next.2 ([4f5f19d](https://github.com/podium-lib/podlet/commit/4f5f19d9e486461b822dddf4bf278207927c63be))
+* force release 5.2.0-next.2 ([a5a1953](https://github.com/podium-lib/podlet/commit/a5a19536aab17130e79f14b2a8d7e7f58e61d0f0))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+* update @podium/utils ([719c1e0](https://github.com/podium-lib/podlet/commit/719c1e0ae4e06144e084e8b95bd04d94313b116e))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* force release 5.2.0-next.2 ([a5a1953](https://github.com/podium-lib/podlet/commit/a5a19536aab17130e79f14b2a8d7e7f58e61d0f0))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+* update @podium/utils ([719c1e0](https://github.com/podium-lib/podlet/commit/719c1e0ae4e06144e084e8b95bd04d94313b116e))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+* update @podium/utils ([719c1e0](https://github.com/podium-lib/podlet/commit/719c1e0ae4e06144e084e8b95bd04d94313b116e))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+* update @podium/utils ([719c1e0](https://github.com/podium-lib/podlet/commit/719c1e0ae4e06144e084e8b95bd04d94313b116e))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-09-03)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([f243d60](https://github.com/podium-lib/podlet/commit/f243d607356166cd77c83eb72ef7ea84f4b95d80))
+* **types:** fix AssetJsLike type ([19494f5](https://github.com/podium-lib/podlet/commit/19494f51c338468c362668678654c119993795db))
+
+
+### Features
+
+* automatically send assets with content/fallback requests as 103 early hints ([c4c8c88](https://github.com/podium-lib/podlet/commit/c4c8c889bc491b8a3c4a896220d1205164e6fde4))
+
+# [5.2.0-next.1](https://github.com/podium-lib/podlet/compare/v5.1.12...v5.2.0-next.1) (2024-08-19)
+
+
+### Bug Fixes
+
+* ensure both key/value and object conversion are supported for JS data attributes ([ccdfd1e](https://github.com/podium-lib/podlet/commit/ccdfd1e791c81b4c5aed045b47a316683911d929))
+* **types:** fix AssetJsLike type ([1c29350](https://github.com/podium-lib/podlet/commit/1c29350a9f0682df675b44cf4c5e88468ab24043))
+
+
+### Features
+
+* add res.assets for request bound, early hinted asset sending ([caca302](https://github.com/podium-lib/podlet/commit/caca302a2d80144e24d2078c3ae8f7a8f423b1dd))
+
 ## [5.1.12](https://github.com/podium-lib/podlet/compare/v5.1.11...v5.1.12) (2024-08-19)
 
 

package/README.md

@@ -551,6 +551,8 @@ Sets the pathname for a podlet's javascript assets.
 When a value is set it will be internally kept and used when the podlet
 instance is serialized into a manifest JSON string.
 
+In addition, JS information will be serialized into a Link header and sent as an HTTP 103 early hint with content and fallback responses so that the layout client can get access to assets before the main podlet body. The layout can use this information to generate 103 early hints for the browser so that the browser can begin downloading asset files while still waiting for the podlet and layout bodys.
+
 ### options
 
 | option | type      | default   | required |
@@ -647,6 +649,8 @@ Sets the options for a podlet's CSS assets.
 When a value is set it will be internally kept and used when the podlet
 instance is serialized into a manifest JSON string.
 
+In addition, CSS information will be serialized into a Link header and sent as an HTTP 103 early hint with content and fallback responses so that the layout client can get access to assets before the main podlet body. The layout can use this information to generate 103 early hints for the browser so that the browser can begin downloading asset files while still waiting for the podlet and layout bodys.
+
 ### options
 
 | option | type      | default | required |

package/lib/podlet.js

@@ -7,11 +7,13 @@ import {
 import * as schema from '@podium/schemas';
 import Metrics from '@metrics/client';
 import abslog from 'abslog';
+// @ts-ignore
 import objobj from 'objobj';
 import * as utils from '@podium/utils';
 import Proxy from '@podium/proxy';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+// @ts-ignore
 import fs from 'node:fs';
 
 const currentDirectory = dirname(fileURLToPath(import.meta.url));
@@ -36,8 +38,8 @@ const { template } = utils;
  * @property {import("@podium/proxy").PodiumProxyOptions} [proxy] - options that can be provided to configure the @podium/proxy instance used by the podlet. See that module for details.
  *
  * @typedef {{ debug: 'true' | 'false', locale: string, deviceType: string, requestedBy: string, mountOrigin: string, mountPathname: string, publicPathname: string }} PodletContext
- * @typedef {{ as?: string | false | null, crossorigin?: string | null | boolean, disabled?: boolean | '' | null, hreflang?: string | false | null, title?: string | false | null, media?: string | false | null, rel?: string | false | null, type?: string | false | null, value: string | false | null, data?: Array<{ key: string; value: string }>, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetCssLike
- * @typedef {{ value: string | null, crossorigin?: string | null | boolean, type?: string | null | false, integrity?: string | null | false, referrerpolicy?: string | null | false, nomodule?: boolean | null | '', async?: boolean | null | '', defer?: boolean | null | '', data?: Array<{ key: string; value: string }>, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetJsLike
+ * @typedef {{ as?: string | false | null, crossorigin?: string | null | boolean, disabled?: boolean | '' | null, hreflang?: string | false | null, title?: string | false | null, media?: string | false | null, rel?: string | false | null, type?: string | false | null, value: string | false | null, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetCssLike
+ * @typedef {{ value: string | null, crossorigin?: string | null | boolean, type?: string | null | false, integrity?: string | null | false, referrerpolicy?: string | null | false, nomodule?: boolean | null | '', async?: boolean | null | '', defer?: boolean | null | '', data?: {[key: string]: string} | Array<{ key: string; value: string }>, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetJsLike
  */
 
 export default class PodiumPodlet {
@@ -515,9 +517,9 @@ export default class PodiumPodlet {
      * Takes an AssetCss instance or an object with equivalent properties, converts it to an AssetCss instance if necessary and adds it to the
      * cssRoute array.
      * @param { AssetCss | AssetCssLike } options
-     * @returns {void}
+     * @returns {AssetCss}
      */
-    #addCssAsset(options) {
+    #cssAsset(options) {
         const clonedOptions = JSON.parse(JSON.stringify(options));
         clonedOptions.value = this.#sanitize(
             clonedOptions.value,
@@ -528,7 +530,7 @@ export default class PodiumPodlet {
             ...clonedOptions,
             pathname: this.#pathname,
         };
-        this.cssRoute.push(new AssetCss(args));
+        return new AssetCss(args);
     }
 
     /**
@@ -553,20 +555,19 @@ export default class PodiumPodlet {
     css(options) {
         if (Array.isArray(options)) {
             for (const opts of options) {
-                this.#addCssAsset(opts);
+                this.cssRoute.push(this.#cssAsset(opts));
             }
             return;
         }
-        this.#addCssAsset(options);
+        this.cssRoute.push(this.#cssAsset(options));
     }
 
     /**
-     * Takes an AssetJs instance or an object with equivalent properties, converts it to an AssetJs instance if necessary and adds it to the
-     * jsRoute array.
+     * Takes an AssetJs instance or an object with equivalent properties, converts it to an AssetJs instance if necessary and returns it.
      * @param { AssetJs | AssetJsLike } options
-     * @returns {void}
+     * @returns {AssetJs}
      */
-    #addJsAsset(options) {
+    #jsAsset(options) {
         const clonedOptions = JSON.parse(JSON.stringify(options));
         clonedOptions.value = this.#sanitize(
             clonedOptions.value,
@@ -579,19 +580,31 @@ export default class PodiumPodlet {
             pathname: this.#pathname,
         };
 
-        // Convert data attribute object structure to array of key value objects
-        if (typeof args.data === 'object' && args.data !== null) {
-            const data = [];
-            Object.keys(args.data).forEach((key) => {
-                data.push({
-                    value: args.data[key],
-                    key,
+        if (args.data) {
+            // validate that key value objects provided are compliant
+            if (Array.isArray(args.data)) {
+                for (const data of args.data) {
+                    if (!data.key || !data.value) {
+                        throw new TypeError(
+                            `JS Asset data object "${JSON.stringify(data)}" must contain both a 'key' and a 'value' attribute.`,
+                        );
+                    }
+                }
+            }
+            // Convert data attribute object structure to array of key value objects
+            else if (typeof args.data === 'object') {
+                const data = [];
+                Object.keys(args.data).forEach((key) => {
+                    data.push({
+                        value: args.data[key],
+                        key,
+                    });
                 });
-            });
-            args.data = data;
+                args.data = data;
+            }
         }
 
-        this.jsRoute.push(new AssetJs(args));
+        return new AssetJs(args);
     }
 
     /**
@@ -616,11 +629,11 @@ export default class PodiumPodlet {
     js(options) {
         if (Array.isArray(options)) {
             for (const opts of options) {
-                this.#addJsAsset(opts);
+                this.jsRoute.push(this.#jsAsset(opts));
             }
             return;
         }
-        this.#addJsAsset(options);
+        this.jsRoute.push(this.#jsAsset(options));
     }
 
     /**
@@ -863,11 +876,26 @@ export default class PodiumPodlet {
             );
         }
 
-        // Determin if the request should be proxied and do if so
+        // Determine if the request should be proxied and do if so
         if (incoming.development && proxy) {
+            // @ts-ignore
             await this.httpProxy.process(incoming);
         }
 
+        // @ts-ignore
+        const js = incoming.js.map((asset) => asset.toHeader());
+
+        // @ts-ignore
+        const css = incoming.css.map((asset) => asset.toHeader());
+
+        // Send early hints to layout client in the form of a 103 status code and a link header with js/css asset information.
+        // Always send this. If no assets present, send an empty string.
+        if (incoming.response.writeEarlyHints) {
+            incoming.response.writeEarlyHints({
+                link: [...js, ...css],
+            });
+        }
+
         return incoming;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podium/podlet",
-  "version": "5.1.12",
+  "version": "5.2.0-next.2",
   "type": "module",
   "description": "Module for building page fragment servers in a micro frontend architecture.",
   "license": "MIT",
@@ -37,13 +37,13 @@
     "@metrics/client": "2.5.3",
     "@podium/proxy": "5.0.24",
     "@podium/schemas": "5.0.6",
-    "@podium/utils": "5.1.0",
+    "@podium/utils": "5.2.0",
     "abslog": "2.4.4",
     "ajv": "8.17.1",
     "objobj": "1.0.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.24.7",
+    "@babel/eslint-parser": "7.25.1",
     "@podium/test-utils": "2.5.2",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "11.1.0",
@@ -53,16 +53,17 @@
     "@semantic-release/release-notes-generator": "12.1.0",
     "@types/node": "^20.10.3",
     "@types/readable-stream": "4.0.15",
-    "eslint": "9.6.0",
+    "eslint": "9.9.1",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-prettier": "5.2.1",
     "express": "4.19.2",
-    "globals": "15.8.0",
+    "globals": "15.9.0",
     "json-stringify-safe": "5.0.1",
     "npm-run-all2": "5.0.2",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "semantic-release": "23.1.1",
     "tap": "18.8.0",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "undici": "^6.19.7"
   }
 }

package/types/podlet.d.ts

@@ -38,8 +38,8 @@ declare global {
  * @property {import("@podium/proxy").PodiumProxyOptions} [proxy] - options that can be provided to configure the @podium/proxy instance used by the podlet. See that module for details.
  *
  * @typedef {{ debug: 'true' | 'false', locale: string, deviceType: string, requestedBy: string, mountOrigin: string, mountPathname: string, publicPathname: string }} PodletContext
- * @typedef {{ as?: string | false | null, crossorigin?: string | null | boolean, disabled?: boolean | '' | null, hreflang?: string | false | null, title?: string | false | null, media?: string | false | null, rel?: string | false | null, type?: string | false | null, value: string | false | null, data?: Array<{ key: string; value: string }>, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetCssLike
- * @typedef {{ value: string | null, crossorigin?: string | null | boolean, type?: string | null | false, integrity?: string | null | false, referrerpolicy?: string | null | false, nomodule?: boolean | null | '', async?: boolean | null | '', defer?: boolean | null | '', data?: Array<{ key: string; value: string }>, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetJsLike
+ * @typedef {{ as?: string | false | null, crossorigin?: string | null | boolean, disabled?: boolean | '' | null, hreflang?: string | false | null, title?: string | false | null, media?: string | false | null, rel?: string | false | null, type?: string | false | null, value: string | false | null, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetCssLike
+ * @typedef {{ value: string | null, crossorigin?: string | null | boolean, type?: string | null | false, integrity?: string | null | false, referrerpolicy?: string | null | false, nomodule?: boolean | null | '', async?: boolean | null | '', defer?: boolean | null | '', data?: {[key: string]: string} | Array<{ key: string; value: string }>, strategy?: "beforeInteractive" | "afterInteractive" | "lazy", scope?: "content" | "fallback" | "all", [key: string]: any }} AssetJsLike
  */
 export default class PodiumPodlet {
     /**
@@ -639,10 +639,6 @@ export type AssetCssLike = {
     rel?: string | false | null;
     type?: string | false | null;
     value: string | false | null;
-    data?: Array<{
-        key: string;
-        value: string;
-    }>;
     strategy?: "beforeInteractive" | "afterInteractive" | "lazy";
     scope?: "content" | "fallback" | "all";
     [key: string]: any;
@@ -656,7 +652,9 @@ export type AssetJsLike = {
     nomodule?: boolean | null | "";
     async?: boolean | null | "";
     defer?: boolean | null | "";
-    data?: Array<{
+    data?: {
+        [key: string]: string;
+    } | Array<{
         key: string;
         value: string;
     }>;