modality-kit 0.8.8 → 0.8.10

package/dist/browser.js

@@ -1 +1,263 @@
-var{defineProperty:Z,getOwnPropertyNames:O,getOwnPropertyDescriptor:V}=Object,W=Object.prototype.hasOwnProperty;var _=new WeakMap,H=(x)=>{var j=_.get(x),q;if(j)return j;if(j=Z({},"__esModule",{value:!0}),x&&typeof x==="object"||typeof x==="function")O(x).map((B)=>!W.call(j,B)&&Z(j,B,{get:()=>x[B],enumerable:!(q=V(x,B))||q.enumerable}));return _.set(x,j),j};var M=(x,j)=>{for(var q in j)Z(x,q,{get:j[q],enumerable:!0,configurable:!0,set:(B)=>j[q]=()=>B})};var f={};M(f,{render:()=>$,registerStore:()=>F,ReactiveComponent:()=>Q});module.exports=H(f);class Q extends HTMLElement{#j;#G=!1;#q=!1;#K=!1;#x;#J;#B={};#Q=["click","dblclick","mousedown","mouseup","mousemove","mouseover","mouseout","focus","blur","change","input","submit","keydown","keyup","keypress"];_stores;_storeListeners;constructor(x={}){super();this.#J=x,this.#j=x.initialState||{}}get state(){return Object.freeze({...this.#j})}setState(x,j,q){let B=q||{...this.#j},J;if(typeof x==="function")J=x(this.#j);else J=x;let G={...this.#j,...J};if(this.#J.shouldUpdate&&!this.#J.shouldUpdate(G,B))return this.#j;else return this.#j=G,this.#X(B),G}forceUpdate(){this.#X({...this.#j})}#X(x){if(this.#G||this.#q)return;this.#q=!0,queueMicrotask(()=>{if(this.#q&&this.isConnected)this.#Y(x)})}#Y(x){this.#G=!0,this.#q=!1;let j=!this.#K,q=x||{...this.#j};try{if(this.#$(),this.#K=!0,!j&&typeof this.componentDidUpdate==="function")this.componentDidUpdate(this.#j,q)}catch(B){console.error("Error during component update:",B)}finally{this.#G=!1}}static#Z=(()=>{if(typeof window!=="undefined"&&window.trustedTypes&&window.trustedTypes.createPolicy)try{return window.trustedTypes.createPolicy("reactive-component",{createHTML:(x)=>x})}catch(x){return console.warn("Failed to create trusted types policy:",x),null}return null})();#_(x,j){if(Q.#Z)x.innerHTML=Q.#Z.createHTML(j);else x.innerHTML=j}#$(){if(!this.#x)this.#x=this.shadowRoot||this.attachShadow({mode:"open"}),this.#F();if(typeof window!=="undefined"&&window.trustedTypes&&window.trustedTypes.emptyHTML)this.#x.innerHTML=window.trustedTypes.emptyHTML;else while(this.#x.firstChild)this.#x.removeChild(this.#x.firstChild);let x=this.render();if(typeof x==="string"){let j=document.createElement("template");this.#_(j,x),this.#x.appendChild(j.content.cloneNode(!0))}else if(x instanceof DocumentFragment||x instanceof Element)this.#x.appendChild(x)}#F(){this.#Q.forEach((x)=>{let j=(B)=>{this.#I(B)};this.#B[x]=j;let q=!["mousedown","keydown","submit"].includes(x);this.#x.addEventListener(x,j,{passive:q})})}#I(x){let{type:j,target:q}=x;if(!q)return;let B=`data-${j}`,J=this.#x.querySelectorAll(`[${B}]`);Array.from(J).forEach((G)=>{if(q.isSameNode(G)||G.contains(q)){let K=G.getAttribute(B);if(K&&typeof this[K]==="function")this[K](x)}})}connectedCallback(){if(this._stores&&this._stores.length>0)this._storeListeners=[],this._stores.forEach((x)=>{let j=this.setState.bind(this);x.addListener(j),this._storeListeners.push({store:x,listener:j});let q=x.getState();this.setState(q)});if(this.#Y(),typeof this.componentDidMount==="function")this.componentDidMount()}disconnectedCallback(){if(this.#x&&Object.keys(this.#B).length>0)this.#Q.forEach((x)=>{let j=this.#B[x];if(j)this.#x.removeEventListener(x,j)}),this.#B={};if(this._storeListeners&&this._storeListeners.length>0)this._storeListeners.forEach(({store:x,listener:j})=>{x.removeListener(j)}),this._storeListeners=[]}}function $(x,j={},q){let B=document.createElement(x),{appendTo:J=document.body,...G}=j;if(Object.keys(G).forEach((K)=>{let X=G[K];if(X!=null){let I=typeof X==="object"?JSON.stringify(X):String(X);B.setAttribute(K,I)}}),q&&q.length>0)B._stores=q;if(J instanceof HTMLElement)J.appendChild(B);return B}var Y={current:{}};function F(x,j){let q=document.querySelector("connection-section");if(q)q._stores=j;else Y.current[x]=j}if(typeof document!=="undefined")document.addEventListener("DOMContentLoaded",()=>{let x=Object.keys(Y.current).map(async(j)=>{let q=document.querySelector(j);if(q)q._stores=Y.current[j],delete Y.current[j]});Promise.all(x)});
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/browser.ts
+var exports_browser = {};
+__export(exports_browser, {
+  render: () => render,
+  registerStore: () => registerStore,
+  ReactiveComponent: () => ReactiveComponent
+});
+module.exports = __toCommonJS(exports_browser);
+
+// src/ReactiveComponent.ts
+class ReactiveComponent extends HTMLElement {
+  #state;
+  #isRendering = false;
+  #pendingUpdate = false;
+  #hasRendered = false;
+  #shadow;
+  #options;
+  #delegatedEventListeners = {};
+  #eventTypes = [
+    "click",
+    "dblclick",
+    "mousedown",
+    "mouseup",
+    "mousemove",
+    "mouseover",
+    "mouseout",
+    "focus",
+    "blur",
+    "change",
+    "input",
+    "submit",
+    "keydown",
+    "keyup",
+    "keypress"
+  ];
+  _stores;
+  _storeListeners;
+  constructor(options = {}) {
+    super();
+    this.#options = options;
+    this.#state = options.initialState || {};
+  }
+  get state() {
+    return Object.freeze({ ...this.#state });
+  }
+  setState(updator, _action, prevState) {
+    const oldState = prevState || { ...this.#state };
+    let newUpdates;
+    if (typeof updator === "function") {
+      newUpdates = updator(this.#state);
+    } else {
+      newUpdates = updator;
+    }
+    const newState = { ...this.#state, ...newUpdates };
+    if (this.#options.shouldUpdate && !this.#options.shouldUpdate(newState, oldState)) {
+      return this.#state;
+    } else {
+      this.#state = newState;
+      this.#scheduleUpdate(oldState);
+      return newState;
+    }
+  }
+  forceUpdate() {
+    this.#scheduleUpdate({ ...this.#state });
+  }
+  #scheduleUpdate(previousState) {
+    if (this.#isRendering || this.#pendingUpdate) {
+      return;
+    }
+    this.#pendingUpdate = true;
+    queueMicrotask(() => {
+      if (this.#pendingUpdate && this.isConnected) {
+        this.#performUpdate(previousState);
+      }
+    });
+  }
+  #performUpdate(previousState) {
+    this.#isRendering = true;
+    this.#pendingUpdate = false;
+    const wasFirstRender = !this.#hasRendered;
+    const prevState = previousState || { ...this.#state };
+    try {
+      this.#updateDOM();
+      this.#hasRendered = true;
+      if (!wasFirstRender && typeof this.componentDidUpdate === "function") {
+        this.componentDidUpdate(this.#state, prevState);
+      }
+    } catch (error) {
+      console.error("Error during component update:", error);
+    } finally {
+      this.#isRendering = false;
+    }
+  }
+  static #trustedTypesPolicy = (() => {
+    if (typeof window !== "undefined" && window.trustedTypes && window.trustedTypes.createPolicy) {
+      try {
+        return window.trustedTypes.createPolicy("reactive-component", {
+          createHTML: (string) => string
+        });
+      } catch (e) {
+        console.warn("Failed to create trusted types policy:", e);
+        return null;
+      }
+    }
+    return null;
+  })();
+  #safeSetInnerHTML(element, html) {
+    if (ReactiveComponent.#trustedTypesPolicy) {
+      element.innerHTML = ReactiveComponent.#trustedTypesPolicy.createHTML(html);
+    } else {
+      element.innerHTML = html;
+    }
+  }
+  #updateDOM() {
+    if (!this.#shadow) {
+      this.#shadow = this.shadowRoot || this.attachShadow({ mode: "open" });
+      this.#setupEventDelegation();
+    }
+    if (typeof window !== "undefined" && window.trustedTypes && window.trustedTypes.emptyHTML) {
+      this.#shadow.innerHTML = window.trustedTypes.emptyHTML;
+    } else {
+      while (this.#shadow.firstChild) {
+        this.#shadow.removeChild(this.#shadow.firstChild);
+      }
+    }
+    const renderResult = this.render();
+    if (typeof renderResult === "string") {
+      const template = document.createElement("template");
+      this.#safeSetInnerHTML(template, renderResult);
+      this.#shadow.appendChild(template.content.cloneNode(true));
+    } else if (renderResult instanceof DocumentFragment || renderResult instanceof Element) {
+      this.#shadow.appendChild(renderResult);
+    }
+  }
+  #setupEventDelegation() {
+    this.#eventTypes.forEach((eventType) => {
+      const listener = (e) => {
+        this.#handleDelegatedEvent(e);
+      };
+      this.#delegatedEventListeners[eventType] = listener;
+      const usePassive = !["mousedown", "keydown", "submit"].includes(eventType);
+      this.#shadow.addEventListener(eventType, listener, {
+        passive: usePassive
+      });
+    });
+  }
+  #handleDelegatedEvent(e) {
+    const eventType = e.type;
+    const target = e.target;
+    if (!target)
+      return;
+    const handlerAttribute = `data-${eventType}`;
+    const elementsWithHandlers = this.#shadow.querySelectorAll(`[${handlerAttribute}]`);
+    Array.from(elementsWithHandlers).forEach((element) => {
+      if (target.isSameNode(element) || element.contains(target)) {
+        const handlerName = element.getAttribute(handlerAttribute);
+        if (handlerName && typeof this[handlerName] === "function") {
+          this[handlerName](e);
+        }
+      }
+    });
+  }
+  connectedCallback() {
+    if (this._stores && this._stores.length > 0) {
+      this._storeListeners = [];
+      this._stores.forEach((store) => {
+        const boundSetState = this.setState.bind(this);
+        store.addListener(boundSetState);
+        this._storeListeners.push({ store, listener: boundSetState });
+        const initialState = store.getState();
+        this.setState(initialState);
+      });
+    }
+    this.#performUpdate();
+    if (typeof this.componentDidMount === "function") {
+      this.componentDidMount();
+    }
+  }
+  disconnectedCallback() {
+    if (this.#shadow && Object.keys(this.#delegatedEventListeners).length > 0) {
+      this.#eventTypes.forEach((eventType) => {
+        const listener = this.#delegatedEventListeners[eventType];
+        if (listener) {
+          this.#shadow.removeEventListener(eventType, listener);
+        }
+      });
+      this.#delegatedEventListeners = {};
+    }
+    if (this._storeListeners && this._storeListeners.length > 0) {
+      this._storeListeners.forEach(({ store, listener }) => {
+        store.removeListener(listener);
+      });
+      this._storeListeners = [];
+    }
+  }
+}
+function render(componentName, props = {}, stores) {
+  const element = document.createElement(componentName);
+  const { appendTo = document.body, ...restProps } = props;
+  Object.keys(restProps).forEach((key) => {
+    const value = restProps[key];
+    if (value != null) {
+      const stringValue = typeof value === "object" ? JSON.stringify(value) : String(value);
+      element.setAttribute(key, stringValue);
+    }
+  });
+  if (stores && stores.length > 0) {
+    element._stores = stores;
+  }
+  if (appendTo instanceof HTMLElement) {
+    appendTo.appendChild(element);
+  }
+  return element;
+}
+var lazyStores = { current: {} };
+function registerStore(componentName, stores) {
+  const connectionSectionElement = document.querySelector("connection-section");
+  if (connectionSectionElement) {
+    connectionSectionElement._stores = stores;
+  } else {
+    lazyStores.current[componentName] = stores;
+  }
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("DOMContentLoaded", () => {
+    const promise = Object.keys(lazyStores.current).map(async (componentName) => {
+      const connectionSectionElement = document.querySelector(componentName);
+      if (connectionSectionElement) {
+        connectionSectionElement._stores = lazyStores.current[componentName];
+        delete lazyStores.current[componentName];
+      }
+    });
+    Promise.all(promise);
+  });
+}