@webtides/element-js 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/index.js

@@ -86,6 +86,19 @@ function getShadowParentOrBody(element) {
   }
   return document.body;
 }
+function getAllElementChildren(domNode, instanceOfFilter = HTMLElement) {
+  const nodeIterator = document.createNodeIterator(
+    domNode,
+    NodeFilter.SHOW_ELEMENT,
+    (node) => node.nodeName.includes("-") && node instanceof instanceOfFilter ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+  );
+  const customElements2 = [];
+  let currentNode;
+  while (currentNode = nodeIterator.nextNode()) {
+    customElements2.push(currentNode);
+  }
+  return customElements2;
+}
 var supportsAdoptingStyleSheets = () => {
   return "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
 };
@@ -96,16 +109,101 @@ var convertStringToTemplate = (string) => {
   return template.content;
 };
 
+// src/util/SerializeStateHelper.js
+var serializableObjectsCache = /* @__PURE__ */ new Map();
+var globalElementJsState;
+function initGlobalStateObject() {
+  if (!globalElementJsState) {
+    globalElementJsState = Array.from(globalThis.document.scripts).find((script) => script.type === "ejs/json");
+    if (!globalElementJsState) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "ejs/json");
+      script.textContent = "{}";
+      document.body.appendChild(script);
+      globalElementJsState = script;
+    }
+  }
+}
+function serializeState(serializableObject) {
+  var _a;
+  if (!((_a = globalThis.elementJsConfig) == null ? void 0 : _a.serializeState))
+    return;
+  if (!serializableObject._serializationKey && !serializableObject.serializeState) {
+    throw new Error("serializableObject does not implement the Serializable interface");
+  }
+  initGlobalStateObject();
+  const currentState = JSON.parse(globalElementJsState.textContent);
+  currentState[serializableObject._serializationKey] = serializableObject.serializeState();
+  globalElementJsState.textContent = JSON.stringify(currentState, (key, value) => {
+    if (value instanceof Store) {
+      return "Store/" + value._serializationKey;
+    } else {
+      return value;
+    }
+  });
+}
+function deserializeState(serializableObject, serializedState) {
+  var _a;
+  if (!((_a = globalThis.elementJsConfig) == null ? void 0 : _a.serializeState))
+    return;
+  if (!serializableObject._serializationKey && !serializableObject.restoreState) {
+    throw new Error("serializableObject does not implement the Serializable interface");
+  }
+  if (serializedState) {
+    serializableObject.restoreState(serializedState);
+    return;
+  }
+  initGlobalStateObject();
+  const unresolvedState = JSON.parse(globalElementJsState.textContent);
+  const currentState = JSON.parse(globalElementJsState.textContent, (key, value) => {
+    if (typeof value === "string" && value.startsWith("Store/")) {
+      const [_, storeUuid] = value.split("/");
+      const serializedState2 = unresolvedState[storeUuid];
+      return new Store(serializedState2, { key: storeUuid, serializedState: serializedState2 });
+    } else {
+      return value;
+    }
+  });
+  serializableObject.restoreState(currentState[serializableObject._serializationKey]);
+}
+function hasSerializedState(key) {
+  var _a;
+  if (!((_a = globalThis.elementJsConfig) == null ? void 0 : _a.serializeState))
+    return false;
+  initGlobalStateObject();
+  const serializedState = JSON.parse(globalElementJsState.textContent);
+  return serializedState.hasOwnProperty(key);
+}
+
 // src/util/Store.js
 var Store = class {
-  constructor(value) {
-    __publicField(this, "_observer", /* @__PURE__ */ new Set());
+  constructor(value, options) {
+    __publicField(this, "_serializationKey");
+    __publicField(this, "_observer", /* @__PURE__ */ new Set([]));
     __publicField(this, "_singlePropertyMode", false);
     __publicField(this, "_state", {});
+    if ((options == null ? void 0 : options.key) && serializableObjectsCache.has(options == null ? void 0 : options.key)) {
+      return serializableObjectsCache.get(options == null ? void 0 : options.key);
+    }
     this._singlePropertyMode = arguments.length > 0 && !isObjectLike(value);
+    if (options == null ? void 0 : options.key) {
+      this._serializationKey = options == null ? void 0 : options.key;
+    } else {
+      this._serializationKey = globalThis.crypto.randomUUID();
+    }
+    if (options == null ? void 0 : options.serializedState) {
+      deserializeState(this, options.serializedState);
+    } else if (hasSerializedState(this._serializationKey)) {
+      deserializeState(this);
+    }
     const specificValues = this._singlePropertyMode ? { value } : value;
-    this._state = { ...!this._singlePropertyMode && this.properties(), ...specificValues };
-    Object.entries(this._state).map(([key, value2]) => {
+    const properties = { ...!this._singlePropertyMode && this.properties(), ...specificValues };
+    const serializationKeys = Object.keys(this.serializeState());
+    Object.entries(properties).map(([key, value2]) => {
+      this._state[key] = hasSerializedState(this._serializationKey) && serializationKeys.includes(key) ? this[key] : value2;
+      if (value2 instanceof Store) {
+        value2.subscribe(this);
+      }
       Object.defineProperty(this, key, {
         get: () => {
           return this._state[key];
@@ -113,6 +211,10 @@ var Store = class {
         set: (newValue) => {
           const oldValue = this._state[key];
           this._state[key] = newValue;
+          if (value2 instanceof Store) {
+            value2.subscribe(this);
+          }
+          serializeState(this);
           if (!deepEquals(newValue, oldValue)) {
             const watch = this.watch();
             if (watch.hasOwnProperty(key) && typeof watch[key] === "function") {
@@ -123,6 +225,7 @@ var Store = class {
         }
       });
     });
+    serializableObjectsCache.set(this._serializationKey, this);
   }
   properties() {
     return {};
@@ -144,15 +247,21 @@ var Store = class {
   }
   requestUpdate() {
     this._observer.forEach(async (observer) => {
-      var _a, _b;
-      if (observer instanceof BaseElement) {
-        await observer.requestUpdate();
-        if (Object.keys((_a = observer.watch()) != null ? _a : {}).length > 0) {
-          const properties = observer.properties();
-          Object.keys((_b = observer.watch()) != null ? _b : {}).forEach((key) => {
+      var _a, _b, _c;
+      if (observer instanceof BaseElement || observer instanceof Store) {
+        if (((_a = observer == null ? void 0 : observer._options) == null ? void 0 : _a.autoUpdate) !== false) {
+          await observer.requestUpdate();
+        }
+        if (Object.keys((_b = observer.watch()) != null ? _b : {}).length > 0) {
+          Object.keys((_c = observer.watch()) != null ? _c : {}).forEach((key) => {
+            var _a2;
             if (observer._state[key] === this) {
-              observer.callPropertyWatcher(key, this, this);
-              observer.notifyPropertyChange(key, this);
+              if (observer instanceof Store) {
+                (_a2 = observer.watch) == null ? void 0 : _a2.call(observer)[key](this, this);
+              } else {
+                observer.callPropertyWatcher(key, this, this);
+                observer.notifyPropertyChange(key, this);
+              }
             }
           });
         }
@@ -163,6 +272,13 @@ var Store = class {
       }
     });
   }
+  serializeState() {
+    const keys = Object.keys(this.properties());
+    return Object.fromEntries(keys.map((key) => [key, this[key]]));
+  }
+  restoreState(serializedState) {
+    Object.assign(this, serializedState);
+  }
 };
 
 // src/util/defineElement.js
@@ -186,6 +302,7 @@ function toString(value) {
 var BaseElement = class extends HTMLElement {
   constructor(options = {}) {
     super();
+    __publicField(this, "_serializationKey");
     this.$refs = {};
     this._state = {};
     this._mutationObserver = null;
@@ -195,6 +312,7 @@ var BaseElement = class extends HTMLElement {
     this._options = {
       autoUpdate: true,
       deferUpdate: true,
+      deferConnected: false,
       mutationObserverOptions: {
         attributes: true,
         childList: true,
@@ -204,8 +322,28 @@ var BaseElement = class extends HTMLElement {
       propertyOptions: {},
       ...options
     };
+    if (this.hasAttribute("defer-update")) {
+      this._options.deferUpdate = true;
+    }
+    if (this.hasAttribute("defer-connected")) {
+      this._options.deferConnected = true;
+    }
   }
   connectedCallback() {
+    var _a;
+    if (this._options.deferConnected) {
+      this._options.deferConnected = false;
+      return;
+    }
+    if (this.hasAttribute("ejs:key")) {
+      this._serializationKey = this.getAttribute("ejs:key");
+      deserializeState(this);
+    } else {
+      this._serializationKey = globalThis.crypto.randomUUID();
+      if ((_a = globalThis.elementJsConfig) == null ? void 0 : _a.serializeState) {
+        this.setAttribute("ejs:key", this._serializationKey);
+      }
+    }
     this.defineAttributesAsProperties();
     this.defineProperties();
     this.definePropertyInjection();
@@ -309,10 +447,7 @@ var BaseElement = class extends HTMLElement {
     });
   }
   defineProperty(property, value, reflectAttribute = false) {
-    var _a, _b;
-    if (value instanceof Store) {
-      value.subscribe(this);
-    }
+    var _a, _b, _c;
     if (this._state.hasOwnProperty(property)) {
       return;
     }
@@ -322,7 +457,13 @@ var BaseElement = class extends HTMLElement {
     if (((_b = this._options.propertyOptions[property]) == null ? void 0 : _b.reflect) === false) {
       this.removeAttribute(camelToDash(property));
     }
+    if (hasSerializedState(this._serializationKey) && ((_c = Object.keys(this.serializeState())) == null ? void 0 : _c.includes(property))) {
+      value = this[property];
+    }
     this._state[property] = value;
+    if (this._state[property] instanceof Store) {
+      this._state[property].subscribe(this);
+    }
     Object.defineProperty(this, property, {
       get: () => {
         return this._state[property];
@@ -333,6 +474,7 @@ var BaseElement = class extends HTMLElement {
         const newValueString = JSON.stringify(newValue);
         if (JSON.stringify(oldValue) !== newValueString) {
           this._state[property] = newValue;
+          serializeState(this);
           if (newValue instanceof Store) {
             newValue.subscribe(this);
           }
@@ -394,16 +536,25 @@ var BaseElement = class extends HTMLElement {
     Object.entries(this.injectProperties()).forEach(([key, value]) => {
       this.requestContext(key, value);
     });
-    if (Object.keys(this.provideProperties()).length > 0) {
+    const providedKeys = Object.keys(this.provideProperties());
+    if (providedKeys.length > 0) {
       this.addEventListener("request-context", this.onRequestContext);
+      getAllElementChildren(this.getRoot(), BaseElement).forEach((customChild) => {
+        var _a, _b;
+        const requestedProperties = (_b = (_a = customChild.injectProperties) == null ? void 0 : _a.call(customChild)) != null ? _b : {};
+        Object.entries(requestedProperties).forEach(([key, value]) => {
+          if (providedKeys.includes(key)) {
+            customChild.requestContext(key, value);
+          }
+        });
+      });
     }
   }
   requestContext(propertyName, valueOrCallback) {
-    this.dispatch("request-context", { [propertyName]: valueOrCallback }, true);
+    this.dispatch("request-context", { [propertyName]: valueOrCallback }, true, true, true);
   }
   onRequestContext(event) {
     var _a;
-    const properties = this.properties();
     const provideProperties = this.provideProperties();
     Object.entries((_a = event.detail) != null ? _a : {}).forEach(([key, valueOrCallback]) => {
       if (key in provideProperties) {
@@ -412,7 +563,9 @@ var BaseElement = class extends HTMLElement {
         if (typeof valueOrCallback === "function") {
           valueOrCallback(providedValue);
         } else {
-          event.target[key] = providedValue;
+          const eventPath = event.composedPath();
+          const target = eventPath[0] || event.target;
+          target[key] = providedValue;
         }
       }
     });
@@ -493,45 +646,99 @@ var BaseElement = class extends HTMLElement {
     });
     this.$refs = refsMap;
   }
-  dispatch(name, data, bubble = false, cancelable = false, composed = false) {
-    const event = new CustomEvent(name, {
-      bubbles: bubble,
-      cancelable,
-      composed,
-      detail: data
-    });
+  dispatch(name, data, options, cancelable = false, composed = false) {
+    let eventInit = {};
+    if (options !== void 0 && typeof options === "boolean") {
+      eventInit["bubbles"] = options;
+      eventInit["cancelable"] = cancelable;
+      eventInit["composed"] = composed;
+      eventInit["detail"] = data;
+      console.warn(
+        `[${this.localName}] Using the old parameter options for the event is deprecated and will be removed in v2.0! Please use the new options object that is in line with the "CustomEventInit" options`
+      );
+    } else {
+      eventInit = {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: data,
+        ...options
+      };
+    }
+    const event = new CustomEvent(name, eventInit);
     this.dispatchEvent(event);
   }
   getRoot() {
     return this;
   }
+  serializeState() {
+    const keys = Object.keys(this.properties());
+    return Object.fromEntries(keys.map((key) => [key, this[key]]));
+  }
+  restoreState(serializedState) {
+    Object.assign(this, serializedState);
+  }
 };
 
-// src/util/i18n.js
-function i18n(key, fallback) {
-  try {
-    const translations = window.elementjs.i18n();
-    if (translations[key] === void 0) {
-      throw "Translation Missing";
+// src/util/GlobalStylesStore.js
+var GlobalStylesStore = class extends Store {
+  constructor() {
+    var _a;
+    super();
+    __publicField(this, "globalStyleSheetsCache", /* @__PURE__ */ new WeakMap());
+    if ((_a = globalThis.elementJsConfig) == null ? void 0 : _a.observeGlobalStyles) {
+      const mutationObserver = new MutationObserver((mutationRecord) => {
+        if (!mutationRecord[0])
+          return;
+        const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
+          (node) => node.tagName === "STYLE" || node.tagName === "LINK"
+        );
+        if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === "LINK") {
+          filteredNodes[0].onload = () => {
+            this.requestUpdate();
+          };
+        } else if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === "STYLE") {
+          this.requestUpdate();
+        }
+      });
+      mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
     }
-    return translations[key];
-  } catch (err) {
-    if (fallback)
-      return fallback;
-    else
-      return key;
   }
-}
-
-// src/StyledElement.js
-var _StyledElement = class extends BaseElement {
-  static updateGlobalStyles() {
-    var _a;
-    _StyledElement.globalStyles = (_a = globalThis.document) == null ? void 0 : _a.getElementById("globalStyles");
-    if (_StyledElement.globalStyles && _StyledElement["globalStyleSheet"]) {
-      _StyledElement["globalStyleSheet"].replaceSync(_StyledElement.globalStyles.textContent);
+  getGlobalStyleSheets(selector) {
+    var _a, _b;
+    const cssStyleSheets = [];
+    if (selector === false)
+      return cssStyleSheets;
+    if (typeof selector === "string") {
+      selector = [selector];
+    }
+    if (selector === true || selector.includes("document")) {
+      cssStyleSheets.push(...(_a = globalThis.document) == null ? void 0 : _a.adoptedStyleSheets);
     }
+    Array.from((_b = globalThis.document) == null ? void 0 : _b.styleSheets).map((styleSheet) => {
+      if (Array.isArray(selector) && !selector.some((cssSelector) => styleSheet.ownerNode.matches(cssSelector))) {
+        return;
+      }
+      let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
+      if (!cssStyleSheet) {
+        cssStyleSheet = new CSSStyleSheet();
+        let cssText = "";
+        if (styleSheet.ownerNode.tagName === "STYLE") {
+          cssText = styleSheet.ownerNode.textContent;
+        } else if (styleSheet.ownerNode.tagName === "LINK") {
+          cssText = Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
+        }
+        cssStyleSheet.replaceSync(cssText);
+      }
+      cssStyleSheets.push(cssStyleSheet);
+    });
+    return cssStyleSheets;
   }
+};
+var globalStylesStore = new GlobalStylesStore();
+
+// src/StyledElement.js
+var StyledElement = class extends BaseElement {
   constructor(options) {
     super({
       deferUpdate: false,
@@ -544,61 +751,58 @@ var _StyledElement = class extends BaseElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    if (!this.constructor["elementStyleSheets"]) {
+      this.constructor["elementStyleSheets"] = this._styles.map((style) => {
+        const cssStyleSheet = new CSSStyleSheet();
+        cssStyleSheet.replaceSync(style);
+        return cssStyleSheet;
+      });
+    }
     if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
       this.adoptStyleSheets();
+      if (this._options.adoptGlobalStyles !== false) {
+        globalStylesStore.subscribe(() => {
+          this.adoptStyleSheets();
+        });
+      }
     }
   }
   styles() {
     return [];
   }
   update(options) {
-    var _a, _b;
     if (!supportsAdoptingStyleSheets() || this._options.shadowRender === false) {
-      const appendableStyles = [...this._styles];
-      if (this._options.shadowRender && this._options.adoptGlobalStyles) {
-        appendableStyles.unshift((_b = (_a = _StyledElement.globalStyles) == null ? void 0 : _a.textContent) != null ? _b : "");
-      }
-      this.appendStyleSheets(appendableStyles);
+      this.appendStyleSheets();
     }
     super.update(options);
   }
   adoptStyleSheets() {
-    if (!this.constructor["cssStyleSheets"]) {
-      this.constructor["cssStyleSheets"] = this._styles.map((style) => {
-        const sheet = new CSSStyleSheet();
-        if (sheet && sheet.cssRules.length === 0) {
-          sheet.replaceSync(style);
-        }
-        return sheet;
-      });
-    }
-    if (_StyledElement.globalStyles && !_StyledElement["globalStyleSheet"]) {
-      _StyledElement["globalStyleSheet"] = new CSSStyleSheet();
-      _StyledElement["globalStyleSheet"].replaceSync(_StyledElement.globalStyles.textContent);
-    }
+    const adoptGlobalStyleSheets = this._options.shadowRender && this._options.adoptGlobalStyles !== false;
     this.getRoot().adoptedStyleSheets = [
-      ...this._options.shadowRender && this._options.adoptGlobalStyles && _StyledElement["globalStyleSheet"] ? [_StyledElement["globalStyleSheet"]] : [],
-      ...this.constructor["cssStyleSheets"]
+      ...adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : [],
+      ...this.constructor["elementStyleSheets"]
     ];
   }
-  appendStyleSheets(styles) {
+  appendStyleSheets() {
     const parentDocument = getShadowParentOrBody(this.getRoot());
-    styles.forEach((style, index) => {
+    const adoptGlobalStyleSheets = this._options.shadowRender && this._options.adoptGlobalStyles !== false && parentDocument !== document.body;
+    const appendableStyles = [
+      ...adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : [],
+      ...this.constructor["elementStyleSheets"]
+    ];
+    appendableStyles.forEach((styleSheet, index) => {
       var _a;
       const identifier = this.tagName + index;
       if (!parentDocument.querySelector(`#${identifier}`)) {
         const styleElement = (_a = globalThis.document) == null ? void 0 : _a.createElement("style");
         styleElement.id = identifier;
         styleElement.style.display = "none";
-        styleElement.textContent = style;
+        styleElement.textContent = Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
         parentDocument.appendChild(styleElement);
       }
     });
   }
 };
-var StyledElement = _StyledElement;
-__publicField(StyledElement, "globalStyles", null);
-StyledElement.updateGlobalStyles();
 
 // src/dom-parts/Part.js
 var Part = class {
@@ -1016,20 +1220,22 @@ var TemplatePart = class extends Part {
         partsCache.set(templateResult.strings, parts);
       }
       let previousAttributePart = void 0;
-      this.parts = parts.map((part, index) => {
-        const node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
+      this.parts = parts.map((part) => {
+        part.node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
+        return part;
+      }).map((part, index) => {
         if (part.type === "node") {
-          return new ChildNodePart(node, templateResult.values[index]);
+          return new ChildNodePart(part.node, templateResult.values[index]);
         }
         if (part.type === "attribute") {
           if (previousAttributePart && previousAttributePart.name === part.name) {
-            previousAttributePart.addNode(node);
+            previousAttributePart.addNode(part.node);
             return previousAttributePart;
           }
-          return previousAttributePart = new AttributePart(node, part.name, part.initialValue);
+          return previousAttributePart = new AttributePart(part.node, part.name, part.initialValue);
         }
         if (part.type === "directive") {
-          return new NodePart(node, templateResult.values[index]);
+          return new NodePart(part.node, templateResult.values[index]);
         }
         throw `cannot map part: ${part}`;
       });
@@ -1056,7 +1262,7 @@ var createTemplateString = (templateStrings, attributePlaceholders = "") => {
     if (trailingSlash.length)
       elementTagWithAttributes += voidElements.test(name) ? " /" : "></" + name;
     const attributeParts = attributesString.replace(attributes, (attribute2, name2, valueWithQuotes, directive) => {
-      if (directive) {
+      if (directive && directive === "
") {
         return `<!--$-->`;
       }
       const value = (valueWithQuotes == null ? void 0 : valueWithQuotes.startsWith('"')) || (valueWithQuotes == null ? void 0 : valueWithQuotes.startsWith("'")) ? valueWithQuotes.slice(1, -1) : valueWithQuotes;
@@ -1343,7 +1549,6 @@ export {
   TemplateElement,
   defineElement,
   html,
-  i18n,
   toString
 };
 //# sourceMappingURL=index.js.map