@podium/podlet 5.2.0-next.3 → 5.2.0-next.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [5.2.0-next.5](https://github.com/podium-lib/podlet/compare/v5.2.0-next.4...v5.2.0-next.5) (2024-09-29)
+
+
+### Bug Fixes
+
+* sharpen up shadow dom usage assertion ([a47c8bc](https://github.com/podium-lib/podlet/commit/a47c8bc7bb33bc6c685d882a7f922cd39914a874))
+
+# [5.2.0-next.4](https://github.com/podium-lib/podlet/compare/v5.2.0-next.3...v5.2.0-next.4) (2024-09-22)
+
+
+### Bug Fixes
+
+* tag asset type when sending hint headers ([56c8614](https://github.com/podium-lib/podlet/commit/56c86144207956c63c7ce1d1103efe4f8ff7d7bf))
+
 # [5.2.0-next.3](https://github.com/podium-lib/podlet/compare/v5.2.0-next.2...v5.2.0-next.3) (2024-09-10)
 
 

package/README.md

@@ -93,7 +93,9 @@ const podlet = new Podlet(options);
 
 #### name
 
-The name the podlet identifies itself by. This value must be in camelCase.
+The name the podlet identifies itself by. This value can contain upper and lower case letters, numbers, the - character and the \_ character. No spaces.
+When shadow DOM is used, either via the `useShadowDOM` constructor option or via the `wrapWithShadowDOM` method, the name must comply with custom element naming rules.
+See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names) for more information.
 
 _Example:_
 
@@ -268,6 +270,7 @@ const podlet = new Podlet({ ..., useShadowDOM: true });
 ```
 
 Please note the following caveats when using this feature:
+
 1. You must name your podlet following custom element naming conventions as explained here: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names
 2. In order to style your content, you will need to include your CSS inside the shadow DOM wrapper. You can do this using one of the following 2 options:
 

package/lib/podlet.js

@@ -843,7 +843,7 @@ export default class PodiumPodlet {
     wrapWithShadowDOM(data) {
         assert.ok(
             customElementRegex.test(this.name),
-            'When using the constructor argument "useShadowDOM", podlet.name must conform to custom element naming conventions: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names',
+            `When using the constructor argument "useShadowDOM" or the method podlet.wrapWithShadowDOM, podlet.name must conform to custom element naming conventions. The name "${this.name}" does not comply. See https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names for more information.`,
         );
 
         const styles = this.cssRoute
@@ -935,11 +935,15 @@ export default class PodiumPodlet {
             await this.httpProxy.process(incoming);
         }
 
-        // @ts-ignore
-        const js = incoming.js.map((asset) => asset.toHeader());
+        const js = incoming.js.map(
+            // @ts-ignore
+            (asset) => asset.toHeader() + '; asset-type=script',
+        );
 
-        // @ts-ignore
-        const css = incoming.css.map((asset) => asset.toHeader());
+        const css = incoming.css.map(
+            // @ts-ignore
+            (asset) => asset.toHeader() + '; asset-type=style',
+        );
 
         // 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podium/podlet",
-  "version": "5.2.0-next.3",
+  "version": "5.2.0-next.5",
   "type": "module",
   "description": "Module for building page fragment servers in a micro frontend architecture.",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "@metrics/client": "2.5.3",
     "@podium/proxy": "5.0.24",
     "@podium/schemas": "5.0.6",
-    "@podium/utils": "5.2.0",
+    "@podium/utils": "5.2.1",
     "abslog": "2.4.4",
     "ajv": "8.17.1",
     "objobj": "1.0.0"