@webtides/element-js 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/index.js

@@ -9,9 +9,9 @@ var __publicField = (obj, key, value) => {
 function isObjectLike(value) {
   return typeof value == "object" && value !== null;
 }
-function isJSON(str) {
+function isJSON(value) {
   try {
-    return JSON.parse(str) && !!str;
+    return JSON.parse(value) && !!value;
   } catch (e) {
     return false;
   }
@@ -86,8 +86,22 @@ function getShadowParentOrBody(element) {
   }
   return document.body;
 }
-var supportsAdoptingStyleSheets = () => "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
-var supportsAppendingStyleSheets = !window.ShadyDOM;
+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;
+};
 var convertStringToTemplate = (string) => {
   var _a;
   const template = (_a = globalThis.document) == null ? void 0 : _a.createElement("template");
@@ -95,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];
@@ -112,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") {
@@ -122,6 +225,7 @@ var Store = class {
         }
       });
     });
+    serializableObjectsCache.set(this._serializationKey, this);
   }
   properties() {
     return {};
@@ -143,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);
+              }
             }
           });
         }
@@ -162,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
@@ -185,6 +302,7 @@ function toString(value) {
 var BaseElement = class extends HTMLElement {
   constructor(options = {}) {
     super();
+    __publicField(this, "_serializationKey");
     this.$refs = {};
     this._state = {};
     this._mutationObserver = null;
@@ -194,6 +312,7 @@ var BaseElement = class extends HTMLElement {
     this._options = {
       autoUpdate: true,
       deferUpdate: true,
+      deferConnected: false,
       mutationObserverOptions: {
         attributes: true,
         childList: true,
@@ -203,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();
@@ -308,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;
     }
@@ -321,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];
@@ -332,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);
           }
@@ -393,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) {
@@ -411,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;
         }
       }
     });
@@ -492,44 +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() {
-    _StyledElement.globalStyles = document.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,
@@ -542,60 +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 = document.createElement("style");
+        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 {
@@ -1184,6 +1391,8 @@ var TemplateResult = class {
         parts.push((value) => {
           let result = pre;
           if (isObjectLike(value) && value.directiveClass) {
+            const directive = new value.directiveClass();
+            result += directive.stringify(...value.values);
           } else if (value != null) {
             result += encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value);
           }
@@ -1317,14 +1526,27 @@ var TemplateElement = class extends StyledElement {
     return this.shadowRoot !== null ? this.shadowRoot : this;
   }
 };
+
+// src/util/Directive.js
+var Directive = class {
+  constructor(node) {
+    __publicField(this, "node");
+    this.node = node;
+  }
+  update() {
+  }
+  stringify(...values) {
+    return "";
+  }
+};
 export {
   BaseElement,
+  Directive,
   Store,
   StyledElement,
   TemplateElement,
   defineElement,
   html,
-  i18n,
   toString
 };
 //# sourceMappingURL=index.js.map