mi-element 0.9.4 → 0.9.6

package/README.md

@@ -5,7 +5,7 @@
 
 > a lightweight alternative to write web components
 
-Only weights 2.5kB minified and gzipped.
+Only weights 3.3kB minified and gzipped.
 
 mi-element provides features to build web applications through
 [Web Components][] like:

package/dist/bundle.js

@@ -0,0 +1,407 @@
+/*!
+ * SPDX-License-Identifier: MIT
+ * mi-element v0.9.6
+ */
+const context = [];
+
+class State extends EventTarget {
+  #value;
+  #equals;
+  constructor(value, options) {
+    super();
+    const {equals: equals} = options || {};
+    this.#value = value, this.#equals = equals ?? ((value, nextValue) => value === nextValue);
+  }
+  get value() {
+    return this.get();
+  }
+  set value(nextValue) {
+    this.set(nextValue);
+  }
+  get() {
+    const running = context[context.length - 1];
+    return running && running.add(this), this.#value;
+  }
+  set(nextValue) {
+    this.#equals(this.#value, nextValue) || (this.#value = nextValue, this.dispatchEvent(new CustomEvent('signal')));
+  }
+}
+
+const createSignal = (initialValue, options) => initialValue instanceof State ? initialValue : new State(initialValue, options);
+
+function effect(cb) {
+  const running = new Set;
+  context.push(running);
+  try {
+    cb();
+  } finally {
+    context.pop();
+  }
+  for (const dep of running) dep.addEventListener('signal', cb);
+  return () => {
+    for (const dep of running) dep.removeEventListener('signal', cb);
+  };
+}
+
+var index = {
+  State: State,
+  Computed: class {
+    #state;
+    #unsubscribe;
+    constructor(cb) {
+      this.#state = new State, this.#unsubscribe = effect(() => this.#state.set(cb()));
+    }
+    get() {
+      return this.#state.get();
+    }
+    unsubscribe() {
+      this.#unsubscribe();
+    }
+  },
+  createSignal: createSignal,
+  effect: effect
+};
+
+class ContextProvider {
+  constructor(host, context, initialValue) {
+    this.host = host, this.context = context, this.state = createSignal(initialValue), 
+    this.host.addController?.(this);
+  }
+  hostConnected() {
+    this.host.addEventListener("context-request", this.onContextRequest);
+  }
+  hostDisconnected() {
+    this.host.removeEventListener("context-request", this.onContextRequest);
+  }
+  set(newValue) {
+    this.state.set(newValue);
+  }
+  get() {
+    return this.state.get();
+  }
+  set value(newValue) {
+    this.set(newValue);
+  }
+  get value() {
+    return this.get();
+  }
+  onContextRequest=ev => {
+    if (ev.context !== this.context) return;
+    let unsubscribe;
+    ev.stopPropagation(), ev.subscribe && (unsubscribe = effect(() => {
+      const value = this.get();
+      unsubscribe && ev.callback(value, unsubscribe);
+    })), ev.callback(this.get(), unsubscribe);
+  };
+}
+
+class ContextRequestEvent extends Event {
+  constructor(context, callback, subscribe) {
+    super("context-request", {
+      bubbles: !0,
+      composed: !0
+    }), this.context = context, this.callback = callback, this.subscribe = subscribe;
+  }
+}
+
+class ContextConsumer {
+  #value;
+  constructor(host, context, options) {
+    const {subscribe: subscribe = !1, validate: validate = () => !0} = options || {};
+    this.host = host, this.context = context, this.subscribe = !!subscribe, this.validate = validate, 
+    this.unsubscribe = void 0, this.host.addController?.(this);
+  }
+  get() {
+    return this.#value;
+  }
+  get value() {
+    return this.#value;
+  }
+  hostConnected() {
+    this.dispatchRequest();
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(new ContextRequestEvent(this.context, this._callback.bind(this), this.subscribe));
+  }
+  _callback(value, unsubscribe) {
+    unsubscribe && (this.subscribe ? this.unsubscribe && (this.unsubscribe !== unsubscribe && this.unsubscribe(), 
+    this.unsubscribe = unsubscribe) : unsubscribe()), this.validate(value) && (this.#value = value, 
+    this.host.requestUpdate(value));
+  }
+}
+
+const camelToKebabCase = (str = "") => str.replace(/([A-Z])/g, (_, m) => `-${m.toLowerCase()}`), kebabToCamelCase = (str = "") => str.toLowerCase().replace(/[-_]\w/g, m => m[1].toUpperCase()), classNames = (...args) => {
+  const classList = [];
+  return args.forEach(arg => {
+    arg && ('string' == typeof arg ? classList.push(arg) : 'object' == typeof arg && Object.entries(arg).forEach(([key, value]) => {
+      value && classList.push(key);
+    }));
+  }), classList.join(' ');
+}, styleMap = (map, options) => {
+  const {unit: unit = "px"} = options || {}, acc = [];
+  for (const [name, value] of Object.entries(map ?? {})) {
+    if (null == value) continue;
+    const _unit = Number.isFinite(value) ? unit : '';
+    acc.push(`${camelToKebabCase(name)}:${value}${_unit}`);
+  }
+  return acc.join(';');
+};
+
+let globalSheets = null;
+
+function addGlobalStyles(renderRoot) {
+  renderRoot.adoptedStyleSheets.push(...(null === globalSheets && (globalSheets = Array.from(document.styleSheets).map(({cssRules: cssRules}) => {
+    const sheet = new CSSStyleSheet, css = Array.from(cssRules).map(rule => rule.cssText).join(' ');
+    return sheet.replaceSync(css), sheet;
+  })), globalSheets));
+}
+
+class UnsafeCss extends String {}
+
+const unsafeCss = str => new UnsafeCss(str), escMap$1 = {
+  '&': '\\26 ',
+  '<': '\\3c ',
+  '>': '\\3e '
+}, escCss = string => string instanceof UnsafeCss ? string : unsafeCss((string => string.replace(/[&<>]/g, tag => escMap$1[tag]))('' + string)), css = (strings, ...values) => String.raw({
+  raw: strings
+}, ...values.map(escCss));
+
+function refsBySelector(container, selectors) {
+  const found = {};
+  for (const [name, selector] of Object.entries(selectors)) found[name] = container.querySelector?.(selector);
+  return found;
+}
+
+const toJson = any => {
+  try {
+    return JSON.parse(any);
+  } catch {
+    return;
+  }
+}, nameMap = {
+  class: 'className',
+  for: 'htmlFor'
+};
+
+class MiElement extends HTMLElement {
+  _props={};
+  #changedProps={};
+  #disposers=new Set;
+  #controllers=new Set;
+  #updateRequested=!1;
+  static get shadowRootInit() {
+    return {
+      mode: 'open'
+    };
+  }
+  static template;
+  static get properties() {}
+  static observedAttributes=[];
+  static styles='';
+  static get useGlobalStyles() {
+    return !1;
+  }
+  static createSignal=createSignal;
+  constructor() {
+    super();
+    const {createSignal: createSignal, properties: properties} = this.constructor;
+    for (const [name, {initial: initial}] of Object.entries(properties)) {
+      const descriptor = Object.getOwnPropertyDescriptor(this.constructor.prototype, name);
+      createSignal && (this._props[name] = createSignal()), Object.defineProperty(this, name, {
+        get() {
+          return descriptor?.get ? descriptor.get.call(this) : createSignal ? this._props[name].value : this._props[name];
+        },
+        set(value) {
+          const oldValue = this[name];
+          descriptor?.set ? descriptor.set.call(this, value) : createSignal ? this._props[name].value = value : this._props[name] = value, 
+          oldValue !== this[name] && this.requestUpdate({
+            [name]: value
+          });
+        }
+      }), this[name] = initial;
+    }
+  }
+  connectedCallback() {
+    const {shadowRootInit: shadowRootInit, useGlobalStyles: useGlobalStyles, template: template} = this.constructor;
+    this.#controllers.forEach(controller => controller.hostConnected?.()), this.renderRoot = shadowRootInit ? this.shadowRoot ?? this.attachShadow(shadowRootInit) : this, 
+    this.addTemplate(template), useGlobalStyles && addGlobalStyles(this.renderRoot), 
+    this.render(), this.requestUpdate();
+  }
+  disconnectedCallback() {
+    this.#disposers.forEach(remover => remover()), this.#controllers.forEach(controller => controller.hostDisconnected?.());
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    const camelName = nameMap[name] ?? kebabToCamelCase(name), properties = this.constructor?.properties, {type: type} = properties?.[camelName] ?? {}, coercedValue = convertType(newValue, type);
+    if (name.startsWith('data-')) {
+      const datasetName = kebabToCamelCase(name.substring(5));
+      datasetName && (this.dataset[datasetName] = coercedValue);
+    }
+    this[camelName] = coercedValue;
+  }
+  requestUpdate(changedProps) {
+    this.#changedProps = {
+      ...this.#changedProps,
+      ...changedProps
+    }, !this.#updateRequested && this.renderRoot && (this.#updateRequested = !0, window.requestAnimationFrame(() => {
+      this.#updateRequested = !1;
+      const changedProps = this.#changedProps;
+      this.#changedProps = {}, this.update(changedProps);
+    }));
+  }
+  addTemplate(template) {
+    if (template) {
+      if (!(template instanceof HTMLTemplateElement)) throw new Error('template is not a HTMLTemplateElement');
+      this.renderRoot.append(template.content.cloneNode(!0));
+    }
+  }
+  render() {}
+  update(_changedProps) {}
+  on(eventName, listener, node = this) {
+    node.addEventListener(eventName, listener), this.#disposers.add(() => node.removeEventListener(eventName, listener));
+  }
+  once(eventName, listener, node = this) {
+    node.addEventListener(eventName, listener, {
+      once: !0
+    });
+  }
+  dispose(...listeners) {
+    for (const listener of listeners) {
+      if ('function' != typeof listener) throw new TypeError('listener must be a function');
+      this.#disposers.add(listener);
+    }
+  }
+  addController(controller) {
+    this.#controllers.add(controller), this.isConnected && controller.hostConnected?.();
+  }
+  removeController(controller) {
+    this.#controllers.delete(controller);
+  }
+  refsBySelector(selectors) {
+    return refsBySelector(this.renderRoot, selectors);
+  }
+}
+
+const define = (tagName, elementClass, options) => {
+  if (customElements.get(tagName)) return;
+  const {usedCssPrefix: usedCssPrefix = "", cssPrefix: cssPrefix = "", styles: styles} = options || {};
+  if (elementClass.properties) {
+    const observedAttrs = [];
+    for (const [name, {attribute: attribute = !0}] of Object.entries(elementClass.properties)) attribute && observedAttrs.push(camelToKebabCase(name));
+    Object.defineProperty(elementClass, 'observedAttributes', {
+      get: () => observedAttrs
+    });
+  } else if (elementClass.observedAttributes) {
+    const properties = elementClass.observedAttributes.reduce((acc, attr) => (acc[kebabToCamelCase(attr)] = {}, 
+    acc), {});
+    Object.defineProperty(elementClass, 'properties', {
+      get: () => properties
+    });
+  }
+  elementClass.styles && (elementClass.styles = styles || (usedCssPrefix === cssPrefix ? elementClass.styles : elementClass.styles.replaceAll(`--${usedCssPrefix}-`, cssPrefix))), 
+  renderTemplate(elementClass), window.customElements.define(tagName, elementClass);
+}, renderTemplate = element => {
+  if (!element.template || element.template instanceof HTMLTemplateElement) return;
+  const el = document.createElement('template');
+  el.innerHTML = element.template || '', element.template = el;
+}, convertType = (value, type) => type === Boolean ? null !== value : type === Number ? (any => {
+  const n = Number(any);
+  return isNaN(n) ? 0 : n;
+})(value) : type === Array ? toJson(value) ?? value.split(',').map(v => v.trim()) : type === Object ? toJson(value) : value, globalRenderCache = new class {
+  cnt=0;
+  cache=new Map;
+  last=0;
+  get size() {
+    return this.cache.size;
+  }
+  _inc() {
+    return this.cnt = 268435455 & ++this.cnt, this.cnt;
+  }
+  clear() {
+    this.cnt = 0, this.cache.clear();
+  }
+  set(value) {
+    const now = Date.now();
+    this.last < now && this.cache.clear(), this.last = now + 5e3;
+    const key = '__rc:' + this._inc().toString(36);
+    return this.cache.set(key, value), key;
+  }
+  get(key) {
+    const value = this.cache.get(key);
+    return this.cache.delete(key), value;
+  }
+};
+
+class UnsafeHtml extends String {}
+
+const unsafeHtml = str => new UnsafeHtml(str), escMap = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;'
+}, escRe = /[&<>"']/g, esc = string => string.replace(escRe, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), escValue = any => {
+  if (any instanceof UnsafeHtml) return any;
+  const t = typeof any;
+  if ("object" === t || "function" === t) {
+    const key = globalRenderCache.set(any);
+    return unsafeHtml(key);
+  }
+  return unsafeHtml(esc('' + any));
+}, html = (strings, ...values) => unsafeHtml(String.raw({
+  raw: strings
+}, ...values.map(val => Array.isArray(val) ? val.map(escValue).join('') : escValue(val))));
+
+function render(node, template, handlers = {}) {
+  const refs = {};
+  node.innerHTML = template.toString();
+  for (let i = 0, l = node.children.length; i < l; i++) renderAttrs(node.children[i], handlers, refs);
+  return refs;
+}
+
+const REF = 'ref', REF_Q = '[ref]';
+
+function renderAttrs(node, handlers = {}, refs = {}) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const rmAttrs = [], attrs = node.attributes;
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      const attr = attrs[i], attrName = attr.name, code = attrName.charCodeAt(0), name = attrName.slice(1);
+      let rm = 0;
+      if (63 === code) toJson(attr.value) ? node.setAttribute(name, '') : node.removeAttribute(name), 
+      rm = 1; else if ('...' === attr.name) {
+        const obj = globalRenderCache.get(attr.value);
+        if (obj && "object" == typeof obj) for (const [k, v] of Object.entries(obj)) node[k] = v;
+        rm = 1;
+      } else if (46 === code) node[name] = globalRenderCache.get(attr.value) ?? attr.value, 
+      rm = 1; else if (64 === code) {
+        const handlerName = attr.value, fn = globalRenderCache.get(handlerName);
+        fn ? node.addEventListener(name, fn) : "function" == typeof handlers[handlerName] && node.addEventListener(name, handlers[handlerName]), 
+        rm = 1;
+      } else attr.name === REF && (refs[attr.value] = node, rm = 1);
+      rm && rmAttrs.push(attr.name);
+    }
+    for (let i = 0, l = rmAttrs.length; i < l; i++) node.removeAttribute(rmAttrs[i]);
+  }
+  if (customElements.get(node.localName)) {
+    const q = node.querySelectorAll(REF_Q);
+    for (let el of q) {
+      const refName = el.getAttribute(REF);
+      refName && !refs[refName] && (refs[refName] = el);
+    }
+    return refs;
+  }
+  if (!node.children?.length) return refs;
+  for (let child of Array.from(node.children)) renderAttrs(child, handlers, refs);
+  return refs;
+}
+
+class Store extends State {
+  constructor(actions, initialValue, options) {
+    super(initialValue, options);
+    for (const [action, dispatcher] of Object.entries(actions)) this[action] = data => this.set(dispatcher(data)(this.get()));
+  }
+}
+
+export { ContextConsumer, ContextProvider, ContextRequestEvent, MiElement, index as Signal, Store, addGlobalStyles, classNames, convertType, css, define, escCss, escHtml, html, refsBySelector, render, renderAttrs, styleMap, unsafeCss, unsafeHtml };

package/dist/bundle.min.js

@@ -0,0 +1,5 @@
+/*!
+ * SPDX-License-Identifier: MIT
+ * mi-element v0.9.6
+ */
+const t=[];class e extends EventTarget{#t;#e;constructor(t,e){super();const{equals:s}=e||{};this.#t=t,this.#e=s??((t,e)=>t===e)}get value(){return this.get()}set value(t){this.set(t)}get(){const e=t[t.length-1];return e&&e.add(this),this.#t}set(t){this.#e(this.#t,t)||(this.#t=t,this.dispatchEvent(new CustomEvent("signal")))}}const s=(t,s)=>t instanceof e?t:new e(t,s);function n(e){const s=new Set;t.push(s);try{e()}finally{t.pop()}for(const t of s)t.addEventListener("signal",e);return()=>{for(const t of s)t.removeEventListener("signal",e)}}var r={State:e,Computed:class{#s;#n;constructor(t){this.#s=new e,this.#n=n(()=>this.#s.set(t()))}get(){return this.#s.get()}unsubscribe(){this.#n()}},createSignal:s,effect:n};const o="context-request";class i{constructor(t,e,n){this.host=t,this.context=e,this.state=s(n),this.host.addController?.(this)}hostConnected(){this.host.addEventListener(o,this.onContextRequest)}hostDisconnected(){this.host.removeEventListener(o,this.onContextRequest)}set(t){this.state.set(t)}get(){return this.state.get()}set value(t){this.set(t)}get value(){return this.get()}onContextRequest=t=>{if(t.context!==this.context)return;let e;t.stopPropagation(),t.subscribe&&(e=n(()=>{const s=this.get();e&&t.callback(s,e)})),t.callback(this.get(),e)}}class c extends Event{constructor(t,e,s){super(o,{bubbles:!0,composed:!0}),this.context=t,this.callback=e,this.subscribe=s}}class a{#t;constructor(t,e,s){const{subscribe:n=!1,validate:r=()=>!0}=s||{};this.host=t,this.context=e,this.subscribe=!!n,this.validate=r,this.unsubscribe=void 0,this.host.addController?.(this)}get(){return this.#t}get value(){return this.#t}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new c(this.context,this._callback.bind(this),this.subscribe))}_callback(t,e){e&&(this.subscribe?this.unsubscribe&&(this.unsubscribe!==e&&this.unsubscribe(),this.unsubscribe=e):e()),this.validate(t)&&(this.#t=t,this.host.requestUpdate(t))}}const h=(t="")=>t.replace(/([A-Z])/g,(t,e)=>`-${e.toLowerCase()}`),l=(t="")=>t.toLowerCase().replace(/[-_]\w/g,t=>t[1].toUpperCase()),u=(...t)=>{const e=[];return t.forEach(t=>{t&&("string"==typeof t?e.push(t):"object"==typeof t&&Object.entries(t).forEach(([t,s])=>{s&&e.push(t)}))}),e.join(" ")},d=(t,e)=>{const{unit:s="px"}=e||{},n=[];for(const[e,r]of Object.entries(t??{})){if(null==r)continue;const t=Number.isFinite(r)?s:"";n.push(`${h(e)}:${r}${t}`)}return n.join(";")};let p=null;function f(t){t.adoptedStyleSheets.push(...(null===p&&(p=Array.from(document.styleSheets).map(({cssRules:t})=>{const e=new CSSStyleSheet,s=Array.from(t).map(t=>t.cssText).join(" ");return e.replaceSync(s),e})),p))}class b extends String{}const g=t=>new b(t),m={"&":"\\26 ","<":"\\3c ",">":"\\3e "},v=t=>t instanceof b?t:g((t=>t.replace(/[&<>]/g,t=>m[t]))(""+t)),y=(t,...e)=>String.raw({raw:t},...e.map(v));function w(t,e){const s={};for(const[n,r]of Object.entries(e))s[n]=t.querySelector?.(r);return s}const E=t=>{try{return JSON.parse(t)}catch{return}},S={class:"className",for:"htmlFor"};class C extends HTMLElement{_props={};#r={};#o=new Set;#i=new Set;#c=!1;static get shadowRootInit(){return{mode:"open"}}static template;static get properties(){}static observedAttributes=[];static styles="";static get useGlobalStyles(){return!1}static createSignal=s;constructor(){super();const{createSignal:t,properties:e}=this.constructor;for(const[s,{initial:n}]of Object.entries(e)){const e=Object.getOwnPropertyDescriptor(this.constructor.prototype,s);t&&(this._props[s]=t()),Object.defineProperty(this,s,{get(){return e?.get?e.get.call(this):t?this._props[s].value:this._props[s]},set(n){const r=this[s];e?.set?e.set.call(this,n):t?this._props[s].value=n:this._props[s]=n,r!==this[s]&&this.requestUpdate({[s]:n})}}),this[s]=n}}connectedCallback(){const{shadowRootInit:t,useGlobalStyles:e,template:s}=this.constructor;this.#i.forEach(t=>t.hostConnected?.()),this.renderRoot=t?this.shadowRoot??this.attachShadow(t):this,this.addTemplate(s),e&&f(this.renderRoot),this.render(),this.requestUpdate()}disconnectedCallback(){this.#o.forEach(t=>t()),this.#i.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const n=S[t]??l(t),r=this.constructor?.properties,{type:o}=r?.[n]??{},i=A(s,o);if(t.startsWith("data-")){const e=l(t.substring(5));e&&(this.dataset[e]=i)}this[n]=i}requestUpdate(t){this.#r={...this.#r,...t},!this.#c&&this.renderRoot&&(this.#c=!0,window.requestAnimationFrame(()=>{this.#c=!1;const t=this.#r;this.#r={},this.update(t)}))}addTemplate(t){if(t){if(!(t instanceof HTMLTemplateElement))throw new Error("template is not a HTMLTemplateElement");this.renderRoot.append(t.content.cloneNode(!0))}}render(){}update(t){}on(t,e,s=this){s.addEventListener(t,e),this.#o.add(()=>s.removeEventListener(t,e))}once(t,e,s=this){s.addEventListener(t,e,{once:!0})}dispose(...t){for(const e of t){if("function"!=typeof e)throw new TypeError("listener must be a function");this.#o.add(e)}}addController(t){this.#i.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.#i.delete(t)}refsBySelector(t){return w(this.renderRoot,t)}}const q=(t,e,s)=>{if(customElements.get(t))return;const{usedCssPrefix:n="",cssPrefix:r="",styles:o}=s||{};if(e.properties){const t=[];for(const[s,{attribute:n=!0}]of Object.entries(e.properties))n&&t.push(h(s));Object.defineProperty(e,"observedAttributes",{get:()=>t})}else if(e.observedAttributes){const t=e.observedAttributes.reduce((t,e)=>(t[l(e)]={},t),{});Object.defineProperty(e,"properties",{get:()=>t})}e.styles&&(e.styles=o||(n===r?e.styles:e.styles.replaceAll(`--${n}-`,r))),x(e),window.customElements.define(t,e)},x=t=>{if(!t.template||t.template instanceof HTMLTemplateElement)return;const e=document.createElement("template");e.innerHTML=t.template||"",t.template=e},A=(t,e)=>e===Boolean?null!==t:e===Number?(t=>{const e=Number(t);return isNaN(e)?0:e})(t):e===Array?E(t)??t.split(",").map(t=>t.trim()):e===Object?E(t):t,j=new class{cnt=0;cache=new Map;last=0;get size(){return this.cache.size}_inc(){return this.cnt=268435455&++this.cnt,this.cnt}clear(){this.cnt=0,this.cache.clear()}set(t){const e=Date.now();this.last<e&&this.cache.clear(),this.last=e+5e3;const s="__rc:"+this._inc().toString(36);return this.cache.set(s,t),s}get(t){const e=this.cache.get(t);return this.cache.delete(t),e}};class L extends String{}const R=t=>new L(t),T={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},O=/[&<>"']/g,_=t=>t.replace(O,t=>T[t]),N=t=>t instanceof L?t:R(_(""+t)),P="object",k="function",M=t=>{if(t instanceof L)return t;const e=typeof t;if(e===P||e===k){const e=j.set(t);return R(e)}return R(_(""+t))},D=(t,...e)=>R(String.raw({raw:t},...e.map(t=>Array.isArray(t)?t.map(M).join(""):M(t))));function H(t,e,s={}){const n={};t.innerHTML=e.toString();for(let e=0,r=t.children.length;e<r;e++)F(t.children[e],s,n);return n}const U="ref",$="[ref]";function F(t,e={},s={}){if(t.nodeType===Node.ELEMENT_NODE){const n=[],r=t.attributes;for(let o=0,i=r.length;o<i;o++){const i=r[o],c=i.name,a=c.charCodeAt(0),h=c.slice(1);let l=0;if(63===a)E(i.value)?t.setAttribute(h,""):t.removeAttribute(h),l=1;else if("..."===i.name){const e=j.get(i.value);if(e&&typeof e===P)for(const[s,n]of Object.entries(e))t[s]=n;l=1}else if(46===a)t[h]=j.get(i.value)??i.value,l=1;else if(64===a){const s=i.value,n=j.get(s);n?t.addEventListener(h,n):typeof e[s]===k&&t.addEventListener(h,e[s]),l=1}else i.name===U&&(s[i.value]=t,l=1);l&&n.push(i.name)}for(let e=0,s=n.length;e<s;e++)t.removeAttribute(n[e])}if(customElements.get(t.localName)){const e=t.querySelectorAll($);for(let t of e){const e=t.getAttribute(U);e&&!s[e]&&(s[e]=t)}return s}if(!t.children?.length)return s;for(let n of Array.from(t.children))F(n,e,s);return s}class z extends e{constructor(t,e,s){super(e,s);for(const[e,s]of Object.entries(t))this[e]=t=>this.set(s(t)(this.get()))}}export{a as ContextConsumer,i as ContextProvider,c as ContextRequestEvent,C as MiElement,r as Signal,z as Store,f as addGlobalStyles,u as classNames,A as convertType,y as css,q as define,v as escCss,N as escHtml,D as html,w as refsBySelector,H as render,F as renderAttrs,d as styleMap,g as unsafeCss,R as unsafeHtml};

package/dist/html.js

@@ -33,9 +33,10 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
   '>': '>',
   '"': '"',
   "'": '''
-}, esc = string => string.replace(/[&<>"']/g, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), OBJECT = 'object', FUNCTION = 'function', escValue = any => {
+}, escRe = /[&<>"']/g, esc = string => string.replace(escRe, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), escValue = any => {
   if (any instanceof UnsafeHtml) return any;
-  if ([ OBJECT, FUNCTION ].includes(typeof any)) {
+  const t = typeof any;
+  if ("object" === t || "function" === t) {
     const key = globalRenderCache.set(any);
     return unsafeHtml(key);
   }
@@ -45,10 +46,9 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
 }, ...values.map(val => Array.isArray(val) ? val.map(escValue).join('') : escValue(val))));
 
 function render(node, template, handlers = {}) {
-  const refs = {}, div = document.createElement('div');
-  div.innerHTML = template.toString();
-  for (let child of Array.from(div.children)) renderAttrs(child, handlers, refs), 
-  node.appendChild(child);
+  const refs = {};
+  node.innerHTML = template.toString();
+  for (let i = 0, l = node.children.length; i < l; i++) renderAttrs(node.children[i], handlers, refs);
   return refs;
 }
 
@@ -56,24 +56,24 @@ const REF = 'ref', REF_Q = '[ref]';
 
 function renderAttrs(node, handlers = {}, refs = {}) {
   if (node.nodeType === Node.ELEMENT_NODE) {
-    const rmFns = [];
-    for (let attr of node.attributes) {
-      const startsWith = attr.name[0], name = attr.name.slice(1);
+    const rmAttrs = [], attrs = node.attributes;
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      const attr = attrs[i], attrName = attr.name, code = attrName.charCodeAt(0), name = attrName.slice(1);
       let rm = 0;
-      if ('?' === startsWith) toJson(attr.value) ? node.setAttribute(name, '') : node.removeAttribute(name), 
+      if (63 === code) toJson(attr.value) ? node.setAttribute(name, '') : node.removeAttribute(name), 
       rm = 1; else if ('...' === attr.name) {
         const obj = globalRenderCache.get(attr.value);
-        if (obj && typeof obj === OBJECT) for (const [k, v] of Object.entries(obj)) node[k] = v;
+        if (obj && "object" == typeof obj) for (const [k, v] of Object.entries(obj)) node[k] = v;
         rm = 1;
-      } else if ('.' === startsWith) node[name] = globalRenderCache.get(attr.value) ?? attr.value, 
-      rm = 1; else if ('@' === startsWith) {
+      } else if (46 === code) node[name] = globalRenderCache.get(attr.value) ?? attr.value, 
+      rm = 1; else if (64 === code) {
         const handlerName = attr.value, fn = globalRenderCache.get(handlerName);
-        fn ? node.addEventListener(name, e => fn(e)) : typeof handlers[handlerName] === FUNCTION && node.addEventListener(name, e => handlers[handlerName](e)), 
+        fn ? node.addEventListener(name, fn) : "function" == typeof handlers[handlerName] && node.addEventListener(name, handlers[handlerName]), 
         rm = 1;
       } else attr.name === REF && (refs[attr.value] = node, rm = 1);
-      rm && rmFns.push([ node, attr.name ]);
+      rm && rmAttrs.push(attr.name);
     }
-    rmFns.forEach(([node, name]) => node.removeAttribute(name));
+    for (let i = 0, l = rmAttrs.length; i < l; i++) node.removeAttribute(rmAttrs[i]);
   }
   if (customElements.get(node.localName)) {
     const q = node.querySelectorAll(REF_Q);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Build lightweight reactive micro web-components",
   "keywords": [],
   "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-element#readme",
@@ -59,6 +59,14 @@
       "development": "./src/styling.js",
       "types": "./types/styling.d.ts",
       "default": "./dist/styling.js"
+    },
+    "./bundle": {
+      "types": "./types/index.d.ts",
+      "default": "./dist/bundle.js"
+    },
+    "./bundle.min": {
+      "types": "./types/index.d.ts",
+      "default": "./dist/bundle.min.js"
     }
   },
   "main": "src/index.js",

package/src/html.js

@@ -63,7 +63,9 @@ const escMap = {
   "'": '''
 }
 
-const esc = (string) => string.replace(/[&<>"']/g, (tag) => escMap[tag])
+const escRe = /[&<>"']/g
+
+const esc = (string) => string.replace(escRe, (tag) => escMap[tag])
 
 /**
  * escape HTML and prevent double escaping of '&'
@@ -90,7 +92,8 @@ const escValue = (any) => {
     // @ts-expect-error
     return any
   }
-  if ([OBJECT, FUNCTION].includes(typeof any)) {
+  const t = typeof any
+  if (t === OBJECT || t === FUNCTION) {
     const key = globalRenderCache.set(any)
     return unsafeHtml(key)
   }
@@ -120,20 +123,18 @@ export const html = (strings, ...values) =>
 /**
  * render HTML template into given node with support for special attributes
  *
- * @param {Element} node to append rendered content
+ * @param {Element} node to render content
  * @param {string|UnsafeHtml} template HTML template string
  * @param {Record<string, Function>|HTMLElement} [handlers={}] event handlers or HTMLElement for method lookup
  * @returns {Record<string, Element>} references collected
  */
 export function render(node, template, handlers = {}) {
   const refs = {}
-  const div = document.createElement('div')
-  div.innerHTML = template.toString()
-  // don't understand why `for (let child of div.children)` does not work here
-  for (let child of Array.from(div.children)) {
+  node.innerHTML = template.toString()
+  for (let i = 0, l = node.children.length; i < l; i++) {
+    const child = node.children[i]
     // @ts-expect-error
     renderAttrs(child, handlers, refs)
-    node.appendChild(child)
   }
   // @ts-expect-error
   return refs
@@ -162,12 +163,15 @@ const REF_Q = '[ref]'
  */
 export function renderAttrs(node, handlers = {}, refs = {}) {
   if (node.nodeType === Node.ELEMENT_NODE) {
-    const rmFns = []
-    for (let attr of node.attributes) {
-      const startsWith = attr.name[0]
-      const name = attr.name.slice(1)
+    const rmAttrs = []
+    const attrs = node.attributes
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      const attr = attrs[i]
+      const attrName = attr.name
+      const code = attrName.charCodeAt(0)
+      const name = attrName.slice(1)
       let rm = 0
-      if (startsWith === '?') {
+      if (code === 63 /* '?' */) {
         // boolean attributes
         if (toJson(attr.value)) {
           node.setAttribute(name, '')
@@ -184,32 +188,32 @@ export function renderAttrs(node, handlers = {}, refs = {}) {
           }
         }
         rm = 1
-      } else if (startsWith === '.') {
+      } else if (code === 46 /* '.' */) {
         // property binding
         node[name] = globalRenderCache.get(attr.value) ?? attr.value
         rm = 1
-      } else if (startsWith === '@') {
+      } else if (code === 64 /* '@' */) {
         // event listener
         const handlerName = attr.value
         const fn = globalRenderCache.get(handlerName)
         if (fn) {
-          node.addEventListener(name, (e) => fn(e))
+          node.addEventListener(name, fn)
         } else if (typeof handlers[handlerName] === FUNCTION) {
-          node.addEventListener(name, (e) => handlers[handlerName](e))
+          node.addEventListener(name, handlers[handlerName])
         }
         rm = 1
       } else if (attr.name === REF) {
         // element reference - remove as well to prevent collection by other processors
-        const refName = attr.value
-        refs[refName] = node
+        refs[attr.value] = node
         rm = 1
       }
       if (rm) {
-        rmFns.push([node, attr.name])
+        rmAttrs.push(attr.name)
       }
     }
-    // @ts-expect-error
-    rmFns.forEach(([node, name]) => node.removeAttribute(name))
+    for (let i = 0, l = rmAttrs.length; i < l; i++) {
+      node.removeAttribute(rmAttrs[i])
+    }
   }
   // early abort if custom element but resolve slotted refs
   if (customElements.get(node.localName)) {

package/types/html.d.ts

@@ -1,7 +1,7 @@
 /**
  * render HTML template into given node with support for special attributes
  *
- * @param {Element} node to append rendered content
+ * @param {Element} node to render content
  * @param {string|UnsafeHtml} template HTML template string
  * @param {Record<string, Function>|HTMLElement} [handlers={}] event handlers or HTMLElement for method lookup
  * @returns {Record<string, Element>} references collected