@webtides/element-js 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -16,6 +16,19 @@ to [Semantic Versioning](http://semver.org/).
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+## [1.1.2] - 2024-10-30
+
+### FIXED
+
+- Fixed rerendering of templates that were initially null, prevent runtime errors
+
+## [1.1.1] - 2024-09-16
+
+### FIXED
+
+- Fixed base url and css rules order in adopted style sheets.
+- Fixed randomUUID not being available in unsecure hosts (like localhost) by adding a helper function
+
 ## [1.1.0] - 2024-06-24
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "module": "index.js",
     "main": "index.js",
     "type": "module",

package/src/BaseElement.js

@@ -2,6 +2,7 @@ import { parseAttribute, isNaN, dashToCamel, camelToDash, isObjectLike } from '.
 import { getAllElementChildren, getClosestParentCustomElementNode, isOfSameNodeType } from './util/DOMHelper.js';
 import { Store } from './util/Store.js';
 import { serializeState, deserializeState, hasSerializedState } from './util/SerializeStateHelper.js';
+import { randomUUID } from './util/crypto.js';
 export { defineElement } from './util/defineElement.js';
 export { toString } from './util/toString.js';
 
@@ -97,7 +98,7 @@ class BaseElement extends HTMLElement {
             this._serializationKey = this.getAttribute('ejs:key');
             deserializeState(this);
         } else {
-            this._serializationKey = globalThis.crypto.randomUUID();
+            this._serializationKey = randomUUID();
             if (globalThis.elementJsConfig?.serializeState) {
                 this.setAttribute('ejs:key', this._serializationKey);
             }

package/src/dom-parts/NodePart.js

@@ -18,7 +18,7 @@ export class NodePart extends Part {
     constructor(node, initialValue) {
         if (!isObjectLike(initialValue) && !initialValue.directiveClass) {
             throw new Error(
-                'NodePart: value is not a wrapped directive function. You must wrap you custom directive class with the defineDirective function.',
+                `NodePart: value "${initialValue}" is not a wrapped directive function. You must wrap you custom directive class with the defineDirective function.`,
             );
         }
         super();

package/src/dom-parts/render.js

@@ -4,7 +4,10 @@
  * @param {Element} domNode
  */
 const render = (template, domNode) => {
-    if (typeof template === 'string') {
+    if (!template) {
+        // empty template was returned
+        domNode.innerHTML = '';
+    } else if (typeof template === 'string') {
         // just a plain string (or literal)
         domNode.innerHTML = template;
     } else {

package/src/util/GlobalStylesStore.js

@@ -49,12 +49,19 @@ class GlobalStylesStore extends Store {
             // TODO: this will always be null as we never set anything to the cache...
             let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
             if (!cssStyleSheet) {
-                cssStyleSheet = new CSSStyleSheet();
                 if (styleSheet.ownerNode.tagName === 'STYLE') {
+                    cssStyleSheet = new CSSStyleSheet({ media: styleSheet.media, disabled: styleSheet.disabled });
                     cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
                 } else if (styleSheet.ownerNode.tagName === 'LINK') {
+                    cssStyleSheet = new CSSStyleSheet({
+                        baseURL: styleSheet.href,
+                        media: styleSheet.media,
+                        disabled: styleSheet.disabled,
+                    });
                     try {
-                        Array.from(styleSheet?.cssRules ?? []).map((rule) => cssStyleSheet.insertRule(rule.cssText));
+                        Array.from(styleSheet?.cssRules ?? []).map((rule, index) =>
+                            cssStyleSheet.insertRule(rule.cssText, index),
+                        );
                     } catch (e) {
                         console.error(
                             'GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?',

package/src/util/Store.js

@@ -6,6 +6,7 @@ import {
     serializableObjectsCache,
 } from './SerializeStateHelper.js';
 import { BaseElement } from '../BaseElement.js';
+import { randomUUID } from './crypto.js';
 
 /**
  * Options object for the Store
@@ -36,7 +37,7 @@ export class Store {
         if (options?.key) {
             this._serializationKey = options?.key;
         } else {
-            this._serializationKey = globalThis.crypto.randomUUID();
+            this._serializationKey = randomUUID();
         }
 
         if (options?.serializedState) {

package/src/util/crypto.js

@@ -0,0 +1,13 @@
+/**
+ * Helper function to use the crypto.randomUUID() as it will fail in none secure hosts (e.g. localhost)
+ * @return {`${string}-${string}-${string}-${string}-${string}`|*}
+ */
+export function randomUUID() {
+    if (!('randomUUID' in globalThis.crypto)) {
+        // https://stackoverflow.com/a/2117523/2800218
+        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+            (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16),
+        );
+    }
+    return globalThis.crypto.randomUUID();
+}