mi-html 0.0.1 → 0.6.0

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright © 2020-today, Andrea Giammarchi, @WebReflection
+Copyright © 2025-today, commenthol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+

package/README.md

@@ -1,2 +1,360 @@
 # mi-html
 
+> html template literal for building reactive web components
+
+Uses [uhtml@4][] for html literal and DOM rendering.
+
+Needs 3.8kB minified and gzipped with all bundled dependencies.
+
+## Usage
+
+In your project:
+
+```
+npm i mi-html
+```
+
+Create a reactive web-component with mi-html and mi-element.
+
+```js
+import { render, html } from 'mi-html'
+import { MiElement, define } from 'mi-element'
+
+define(
+  'my-counter',
+  class extends MiElement {
+    static get attributes() {
+      return { count: 0 }
+      // this.count becomes a signal on instantiation
+    }
+    render() {
+      const template = html`<button @click=${() => this.count++}>
+        Clicked ${this.count} times
+      </button>`
+      render(this.renderRoot, template)
+    }
+  }
+)
+```
+
+## html`` In a nutshell
+
+(From [uhtml@4][])
+
+The following code is an abstract representation of all features delivered by _uhtml_ and it's explained in details preserving the same order.
+
+You can skip to details directly via the following links:
+
+- [render](#render) - to reveal tags content
+- [tag](#tag) - to create content
+- [boolean](#boolean) - to toggle attributes
+- [attribute](#attribute) - to assign attributes
+- [direct](#direct) - to assign properties
+- [listener](#listener) - to add listeners
+- [list](#list) - to grow or shrink a list of nodes
+- [ref](#ref) - to keep references to DOM nodes
+- [self closing](#self-closing) - to simplify life
+- [hole](#hole) - to represent generic content
+- [reactivity](#reactivity) - to understand reactivity
+
+```
+let el = {}
+   ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ render
+   ┃                    ┏━━━━━━━━━━━━━━━━━━━ tag
+render(document.body, html`
+  <div class=${className} ?hidden=${!show}>
+         ┃                    ┗━━━━━━━━━━━━━ boolean
+         ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ attribute
+    <ul @click=${sort} .sort=${order}>
+           ┃             ┗━━━━━━━━━━━━━━━━━━ direct
+           ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ listener
+      ${[...listItems]}
+        ┗━━━━━━┳━━━━━┛
+               ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━ list
+    </ul>
+                 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━ ref
+    <my-element ref=${el} /> ━━━━━━━━━━━━━━━ self closing
+    <p>
+      ${show ? `${order} results` : null}
+       ┗━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━┛
+                      ┗━━━━━━━━━━━━━━━━━━━━━ hole
+    </p>
+  </div>
+`);
+```
+
+### render
+
+To reveal template literal tags within a specific element we need a helper which goal is to understand if the
+content to render was already known but also, in case it's a _hole_, to orchestrate a "_smart dance_" to render such content.
+
+The `render` exported helper is a function that, given a node _where_ to render such content, returns that very
+same node with the content in the right place, content returned by the _tag_ used to render.
+
+```js
+import { render, html } from 'mi-html'
+
+const whom = 'World'
+
+render(document.body, () => html`Hello ${whom}!`)
+
+/** results into
+<body>
+  Hello World!
+<body>
+ */
+```
+
+### tag
+
+A template literal tag can be either the `html` or the `svg` one, both directly exported from this module:
+
+```js
+import { html, svg } from 'mi-html'
+
+html`<button />`
+svg`<circle />`
+```
+
+### boolean
+
+Fully inspired by _lit_, boolean attributes are simply a **toggle** indirection to either have, or not, such attribute.
+
+```js
+import { render, html } from 'mi-html'
+
+render(
+  document.body,
+  () => html`
+    <div ?hidden=${false}>I am visible</div>
+    <div ?hidden=${true}>I am invisible</div>
+  `
+)
+
+/** results into
+<body>
+  <div>I am visible</div>
+  <div hidden>I am invisible</div>
+<body>
+ */
+```
+
+### attribute
+
+Every attribute that doesn't have a specialized syntax prefix, such as `?`, `@` or `.`, is handled in the following way and only if different from its previous value:
+
+- if the exported `attr` _Map_ knows the attribute, a callback related to it will be used to update
+  - `aria` attribute accepts and handle an object literal with `role` and other _aria_ attributes
+  - `class` attribute handles a direct `element.className` assignment or remove the attribute if the value is either `null` or `undefined`
+  - `data` attribute accepts and handle an object literal with `dataset` names to directly set to the node
+  - `ref` attribute handles _React_ like _ref_ property by updating the `ref.current` value to the current node, or invoking `ref(element)` when it's a callback
+  - `style` attribute handles a direct `element.style.cssText` assignment or remove the attribute if the value is either `null` or `undefined`
+  - it is possible to augment the `attr` _Map_ with any custom attribute name that doesn't have an already known prefix and it's not part of the already known list (although one could override known attributes too). In this case, `attr.set("my-attr", (element, newValue, name, oldValue) => newValue)` is the expected signature to augment attributes in the wild, as the stack retains only the current value and it will invoke the callback only if the new value is different.
+- if the attribute is unknown in the `attr` map, a `name in element` check is performed once (per template, not per element) and if that's `true`, a _direct_ assignment will be used to update the value, unless the value is either `null` or `undefined`, in which case the attribute is removed if it's _not a listener_, otherwise it drops the listener:
+  - `"onclick" in element`, like any other native listener, will directly assign the callback via `element[name] = value`, when `value` is different, providing a way to simplify events handling in the wild
+  - `"value" in input`, like any other understood accessor for the currently related node, will directly use `input[name] = value`, when `value` is different
+  - `"hidden" in element`, as defined by standard, will also directly set `element[name] = value`, when `value` is different, somehow overlapping with the _boolean_ feature
+  - any other `"accessor" in element` will simply follow the exact same rule and use the direct `element[name] = value`, when `value` is different
+- in all other cases the attribute is set via `element.setAttribute(name, value)` and removed via `element.removeAttribute(name)` when `value` is either `null` or `undefined`
+
+### direct
+
+A direct attribute is simply passed along to the element, no matter its name or special standard behavior.
+
+```js
+import { render, html } from 'mi-html'
+
+const state = {
+  some: 'special state'
+}
+
+render(
+  document.body,
+  () => html`<div id="direct" .state=${state}>content</div>`
+)
+
+document.querySelector('#direct').state === state
+// true
+```
+
+If the name is already a special standard accessor, this will be set with the current value, whenever it's different from the previous one, so that _direct_ syntax _could_ be also used to set `.hidden` or `.value`, for input or textarea, but that's just explicit, as these accessors would work regardless that way, without needing special syntax hints and as already explained in the _attribute_ section.
+
+### listener
+
+As already explained in the _attribute_ section, common listeners can be already attached via `onclick=${callback}` and everything would work already as expected, with also less moving parts behind the scene ... but what if the listener is a custom event name or it requires options such as `{ once: true }` ?
+
+This is where `@click=${[handler, { once: true }]}` helps, so that `addEventListener`, and `removeEventListener` when the listener changes, are used instead of direct `on*=${callback}` assignment.
+
+```js
+import { render, html } from 'mi-html'
+
+const handler = {
+  handleEvent(event) {
+    console.log(event.type)
+  }
+}
+
+render(
+  document.body,
+  () => html`
+    <div @custom:type="${handler}" @click=${[handler, { once: true }]}>
+      content
+    </div>
+  `
+)
+
+const div = document.querySelector('div')
+
+div.dispatchEvent(new Event('custom:type'))
+// logs "custom:type"
+
+div.click()
+// logs "click"
+
+div.click()
+// nothing, as it was once
+```
+
+**Please note** that even if options such as `{ once: true }` are used, if the handler / listener is different each time the listener itself will be added, as for logic sake that's indeed a different listener.
+
+### list
+
+Most of the time, the template defines just static parts of the content and this is not likely to grow or shrink over time _but_, when that's the case or desired, it is possible to use an _array_ to delimit an area that over time could grow or shrink.
+
+`<ul>`, `<ol>`, `<tr>` and whatnot, are all valid use cases to use a list placeholder and not some unique node, together with `<article>` and literally any other use case that might render or not multiple nodes in the very same place after updates.
+
+```js
+import { render, html } from 'mi-html'
+
+render(
+  document.querySelector('#todos'),
+  () => html`
+    <ul>
+      ${databaseResults.map((value) => html`<li>${value}</li>`)}
+    </ul>
+  `
+)
+```
+
+Please note that whenever a specific placeholder in the template might shrink in the future, it is always possible to still use an array to represent a single content:
+
+```js
+html`
+  <div>
+    ${items.length
+      ? items
+      : [
+          html`...loading content`
+          // still valid hole content
+          // or a direct DOM node to render
+        ]}
+  </div>
+`
+```
+
+**Please also note** that an _array_ is always expected to contain a _hole_ or an actual DOM Node.
+
+### ref
+
+Keep references to DOM nodes
+
+```js
+let ref = {}
+render(document.body, () => html`<div ref=${ref}>Hey</div>`)
+// access with `.current`
+ref.current.textContent = 'Hi'
+```
+
+### self closing
+
+Fully inspired by _XHTML_ first and _JSX_ after, any element that self closes won't result into surprises so that _custom-elements_ as well as any other standard node that doesn't have nodes in it works out of the box.
+
+```js
+import { render, html } from 'mi-html'
+
+render(
+  document.body,
+  () => html`
+    <my-element />
+    <my-other-element />
+  `
+)
+
+/** results into
+<body>
+  <my-element></my-element>
+  <my-other-element></my-other-element>
+<body>
+ */
+```
+
+Please note this is an _optional_ feature, not a mandatory one: you don't need to self-close standard void elements such as `<br>`, `<link>` or others, but you can self-close even these if consistency in templates is what you are after.
+
+### hole
+
+Technically speaking, in the template literal tags world all values part of the template are called _interpolations_.
+
+```js
+const tag = (template, ...interpolations) => {
+  console.log(template.join())
+  // logs "this is , and this is ,"
+  console.log(interpolations)
+  // logs [1, 2]
+}
+
+tag`this is ${1} and this is ${2}`
+```
+
+Mostly because the name _Interpolation_ is both verbose and boring plus it doesn't really describe the value _kind_ within a DOM context, in _uhtml_ the chosen name for "_yet unknown content to be rendered_" values is _hole_.
+
+By current TypeScript definition, a _hole_ can be either:
+
+- a `string`, a `boolean` or a `number` to show as it is on the rendered node
+- `null` or `undefined` to signal that _hole_ has currently no content whatsoever
+- an actual `instanceof Hole` exported class, which is what `html` or `svg` tags return once invoked
+- an _array_ that contains a list of instances of _Hole_ or DOM nodes to deal with
+
+### reactivity
+
+Signals are a primitive used to automatically react to changes, as opposite of remembering to deal manually with re-renders invokes which is all good but not ideal in terms of DX.
+
+```js
+import { effect, createSignal, render, html } from 'mi-html'
+
+const count = createSignal(0)
+
+// render in the body passing a () => html`...` callback
+render(
+  document.body,
+  () => html`
+    <button
+      onclick=${() => {
+        count.value++
+      }}
+    >
+      Clicks: ${count.value}
+    </button>
+  `
+)
+```
+
+### constraints
+
+If signals are meant to be used within a template then the `render` function needs to have a lazy invoke of its content because otherwise signals don't get a chance to subscribe to it.
+
+```js
+// ⚠️ DOES NOT CREATE AN EFFECT
+render(target, html`${signal.value}`)
+
+// ✔ CREATE AN EFFECT 👍
+render(target, () => html`${signal.value}`)
+```
+
+Please note that components that are meant to be rendered within other components, and not stand-alone, passing a non callback as second argument might be even desired so that only the outer top-most render would react to changes.
+
+# License
+
+MIT licensed
+
+[uhtml@4]: https://github.com/WebReflection/uhtml/tree/v4
+[mi-element]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element

package/dist/index.js

@@ -0,0 +1,11 @@
+import { effect } from 'mi-signal';
+
+export { Computed, default as Signal, State, createSignal, effect } from 'mi-signal';
+
+import { reactive as reactive$1 } from 'uhtml/reactive';
+
+export * from 'uhtml/reactive';
+
+const render = reactive$1(effect);
+
+export { render };

package/dist/index.min.js

@@ -0,0 +1,4 @@
+const e=[];class t extends EventTarget{#e;#t;constructor(e,t){super();const{equals:n}=t||{};this.#e=e,this.#t=n??((e,t)=>e===t)}get value(){return this.get()}set value(e){this.set(e)}get(){const t=e[e.length-1];return t&&t.add(this),this.#e}set(e){this.#t(this.#e,e)||(this.#e=e,this.dispatchEvent(new CustomEvent("signal")))}}const n=(e,n)=>e instanceof t?e:new t(e,n);function s(t){const n=new Set;e.push(n);try{t()}finally{e.pop()}for(const e of n)e.addEventListener("signal",t);return()=>{for(const e of n)e.removeEventListener("signal",t)}}class r{#n;constructor(e){this.#n=new t,s((()=>this.#n.set(e())))}get(){return this.#n.get()}}var l={State:t,Computed:r,createSignal:n,effect:s};const{isArray:i}=Array,{getPrototypeOf:o,getOwnPropertyDescriptor:a}=Object,c=[],u=()=>document.createRange(),h=(e,t,n)=>(e.set(t,n),n),d=(e,t)=>t.reduceRight(f,e),f=(e,t)=>e.childNodes[t],{setPrototypeOf:p}=Object;let g;var v=(e,t,n)=>(g||(g=u()),n?g.setStartAfter(e):g.setStartBefore(e),g.setEndAfter(t),g.deleteContents(),e);const m=({firstChild:e,lastChild:t},n)=>v(e,t,n);let b=!1;const w=(e,t)=>b&&11===e.nodeType?1/t<0?t?m(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,C=e=>document.createComment(e);class x extends((e=>{function t(e){return p(e,new.target.prototype)}return t.prototype=e.prototype,t})(DocumentFragment)){#s=C("<>");#r=C("</>");#l=c;constructor(e){super(e),this.replaceChildren(this.#s,...e.childNodes,this.#r),b=!0}get firstChild(){return this.#s}get lastChild(){return this.#r}get parentNode(){return this.#s.parentNode}remove(){m(this,!1)}replaceWith(e){m(this,!0).replaceWith(e)}valueOf(){const{parentNode:e}=this;if(e===this)this.#l===c&&(this.#l=[...this.childNodes]);else{if(e){let{firstChild:e,lastChild:t}=this;for(this.#l=[e];e!==t;)this.#l.push(e=e.nextSibling)}this.replaceChildren(...this.#l)}return this}}const y=(e,t,n)=>e.setAttribute(t,n),$=(e,t)=>e.removeAttribute(t);let N;const k=(e,t,n)=>{n=n.slice(1),N||(N=new WeakMap);const s=N.get(e)||h(N,e,{});let r=s[n];return r&&r[0]&&e.removeEventListener(n,...r),r=i(t)?t:[t,!1],s[n]=r,r[0]&&e.addEventListener(n,...r),t},O=(e,t)=>{const{t:n,n:s}=e;let r=!1;switch(typeof t){case"object":if(null!==t){(s||n).replaceWith(e.n=t.valueOf());break}case"undefined":r=!0;default:n.data=r?"":t,s&&(e.n=null,s.replaceWith(n))}return t},W=(e,t,n)=>e[n]=t,E=(e,t,n)=>W(e,t,n.slice(1)),M=(e,t,n)=>null==t?($(e,n),t):W(e,t,n),S=(e,t)=>("function"==typeof t?t(e):t.current=e,t),A=(e,t,n)=>(null==t?$(e,n):y(e,n,t),t),T=(e,t,n)=>(e.toggleAttribute(n.slice(1),t),t),j=(e,t,n)=>{const{length:s}=t;if(e.data=`[${s}]`,s)return((e,t,n,s,r)=>{const l=n.length;let i=t.length,o=l,a=0,c=0,u=null;for(;a<i||c<o;)if(i===a){const t=o<l?c?s(n[c-1],-0).nextSibling:s(n[o],0):r;for(;c<o;)e.insertBefore(s(n[c++],1),t)}else if(o===c)for(;a<i;)u&&u.has(t[a])||e.removeChild(s(t[a],-1)),a++;else if(t[a]===n[c])a++,c++;else if(t[i-1]===n[o-1])i--,o--;else if(t[a]===n[o-1]&&n[c]===t[i-1]){const r=s(t[--i],-0).nextSibling;e.insertBefore(s(n[c++],1),s(t[a++],-0).nextSibling),e.insertBefore(s(n[--o],1),r),t[i]=n[o]}else{if(!u){u=new Map;let e=c;for(;e<o;)u.set(n[e],e++)}if(u.has(t[a])){const r=u.get(t[a]);if(c<r&&r<o){let l=a,h=1;for(;++l<i&&l<o&&u.get(t[l])===r+h;)h++;if(h>r-c){const l=s(t[a],0);for(;c<r;)e.insertBefore(s(n[c++],1),l)}else e.replaceChild(s(n[c++],1),s(t[a++],-1))}else a++}else e.removeChild(s(t[a++],-1))}return n})(e.parentNode,n,t,w,e);switch(n.length){case 1:n[0].remove();case 0:break;default:v(w(n[0],0),w(n.at(-1),-0),!1)}return c},B=new Map([["aria",(e,t)=>{for(const n in t){const s=t[n],r="role"===n?n:`aria-${n}`;null==s?$(e,r):y(e,r,s)}return t}],["class",(e,t)=>M(e,t,null==t?"class":"className")],["data",(e,t)=>{const{dataset:n}=e;for(const e in t)null==t[e]?delete n[e]:n[e]=t[e];return t}],["ref",S],["style",(e,t)=>null==t?M(e,t,"style"):W(e.style,t,"cssText")]]),D=(e,t,n)=>{switch(t[0]){case".":return E;case"?":return T;case"@":return k;default:return n||"ownerSVGElement"in e?"ref"===t?S:A:B.get(t)||(t in e?t.startsWith("on")?W:((e,t)=>{let n;do{n=a(e,t)}while(!n&&(e=o(e)));return n})(e,t)?.set?M:A:A)}},L=(e,t)=>(e.textContent=null==t?"":t,t),q=(e,t,n)=>({a:e,b:t,c:n}),P=()=>q(null,null,c);var R=e=>(t,n)=>{const{a:s,b:r,c:l}=e(t,n),i=document.importNode(s,!0);let o=c;if(r!==c){o=[];for(let e,t,n=0;n<r.length;n++){const{a:s,b:l,c:p}=r[n],g=s===t?e:e=d(i,t=s);o[n]=(a=l,u=g,h=p,f=l===j?[]:l===O?P():null,{v:c,u:a,t:u,n:h,c:f})}}var a,u,h,f;return((e,t)=>({b:e,c:t}))(l?i.firstChild:new x(i),o)};const z=/^(?:plaintext|script|style|textarea|title|xmp)$/i,F=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,Z=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,G=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,H=/[\x01\x02]/g;let V,_,I=document.createElement("template");var J=(e,t)=>{if(t)return V||(V=document.createElementNS("http://www.w3.org/2000/svg","svg"),_=u(),_.selectNodeContents(V)),_.createContextualFragment(e);I.innerHTML=e;const{content:n}=I;return I=I.cloneNode(!1),n};const K=e=>{const t=[];let n;for(;n=e.parentNode;)t.push(t.indexOf.call(n.childNodes,e)),e=n;return t},Q=()=>document.createTextNode(""),U=new WeakMap,X="isµ";var Y=e=>(t,n)=>U.get(t)||((e,t,n)=>{const s=J(((e,t,n)=>{let s=0;return e.join("
").trim().replace(Z,((e,t,s,r)=>`<${t}${s.replace(G,"=$2$1").trimEnd()}${r?n||F.test(t)?" /":`></${t}`:""}>`)).replace(H,(e=>"
"===e?`\x3c!--${t+s++}--\x3e`:t+s++))})(e,X,n),n),{length:r}=e;let l=c;if(r>1){const e=[],o=document.createTreeWalker(s,129);let a=0,c=`${X}${a++}`;for(l=[];a<r;){const s=o.nextNode();if(8===s.nodeType){if(s.data===c){const n=i(t[a-1])?j:O;n===O&&e.push(s),l.push(q(K(s),n,null)),c=`${X}${a++}`}}else{let e;for(;s.hasAttribute(c);){e||(e=K(s));const t=s.getAttribute(c);l.push(q(e,D(s,t,n),t)),$(s,c),c=`${X}${a++}`}!n&&z.test(s.localName)&&s.textContent.trim()===`\x3c!--${c}--\x3e`&&(l.push(q(e||K(s),L,null)),c=`${X}${a++}`)}}for(a=0;a<e.length;a++)e[a].replaceWith(Q())}const{childNodes:o}=s;let{length:a}=o;return a<1?(a=1,s.appendChild(Q())):1===a&&1!==r&&1!==o[0].nodeType&&(a=0),h(U,e,q(s,l,1===a))})(t,n,e);const ee=R(Y(!1)),te=R(Y(!0)),ne=(e,{s:t,t:n,v:s})=>{if(e.a!==n){const{b:r,c:l}=(t?te:ee)(n,s);e.a=n,e.b=r,e.c=l}for(let{c:t}=e,n=0;n<t.length;n++){const e=s[n],r=t[n];switch(r.u){case j:r.v=j(r.t,se(r.c,e),r.v);break;case O:const t=e instanceof re?ne(r.c||(r.c=P()),e):(r.c=null,e);t!==r.v&&(r.v=O(r,t));break;default:e!==r.v&&(r.v=r.u(r.t,e,r.n,r.v))}}return e.b},se=(e,t)=>{let n=0,{length:s}=t;for(s<e.length&&e.splice(s);n<s;n++){const s=t[n];s instanceof re?t[n]=ne(e[n]||(e[n]=P()),s):e[n]=null}return t};class re{constructor(e,t,n){this.s=e,this.t=t,this.v=n}toDOM(e=P()){return ne(e,this)}}
+/*! (c) Andrea Giammarchi - MIT */const le=e=>(t,...n)=>new re(e,t,n),ie=le(!1),oe=le(!0),ae=new WeakMap;var ce=(e,t,n)=>{const s=ae.get(e)||h(ae,e,P()),{b:r}=s,l=t,i=l instanceof re?l.toDOM(s):l;return r!==i&&e.replaceChildren((s.b=i).valueOf()),e};
+/*! (c) Andrea Giammarchi - MIT */const ue=new WeakMap,he=e=>(t,n)=>{const s=ue.get(t)||h(ue,t,new Map);return s.get(n)||h(s,n,function(t,...n){return new re(e,t,n).toDOM(this)}.bind(P()))},de=he(!1),fe=he(!0),pe=new FinalizationRegistry((([e,t,n])=>{e(t)})),ge=Object.create(null),ve=new WeakMap,me=e=>e();let be=!0;const we=e=>(t,n)=>{if(be="function"!=typeof n,Ce(t),be)return ce(t,n);be=!0;const s=new WeakRef(t),r=e((()=>{ce(s.deref(),n())}));return ve.set(t,r),((e,t,{debug:n,handler:s,return:r,token:l=e}=ge)=>{const i=r||new Proxy(e,s||ge),o=[i,[t,e,!!n]];return!1!==l&&o.push(l),pe.register(...o),i})(r,me,{return:t})},Ce=e=>{const t=ve.get(e);var n;t&&(be&&ve.delete(e),n=t,pe.unregister(n),t())},xe=we(s);export{r as Computed,re as Hole,l as Signal,t as State,we as attach,B as attr,n as createSignal,Ce as detach,s as effect,ie as html,de as htmlFor,we as reactive,xe as render,oe as svg,fe as svgFor};
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.min.js","sources":["../../mi-signal/dist/index.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/utils.js","../../../node_modules/.pnpm/custom-function@2.0.0/node_modules/custom-function/esm/factory.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/range.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/persistent-fragment.js","../../../node_modules/.pnpm/domconstants@1.1.6/node_modules/domconstants/esm/constants.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/handler.js","../../../node_modules/.pnpm/udomdiff@1.1.2/node_modules/udomdiff/esm/index.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/literals.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/creator.js","../../../node_modules/.pnpm/domconstants@1.1.6/node_modules/domconstants/esm/re.js","../../../node_modules/.pnpm/@webreflection+uparser@0.4.0/node_modules/@webreflection/uparser/esm/index.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/create-content.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/parser.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/rabbit.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/index.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/render/shared.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/keyed.js","../../../node_modules/.pnpm/gc-hook@0.4.1/node_modules/gc-hook/esm/index.js","../../../node_modules/.pnpm/uhtml@4.7.1/node_modules/uhtml/esm/render/reactive.js","../src/index.js"],"sourcesContent":["const context = [];\n\nclass State extends EventTarget {\n  #value;\n  #equals;\n  constructor(value, options) {\n    super();\n    const {equals: equals} = options || {};\n    this.#value = value, this.#equals = equals ?? ((value, nextValue) => value === nextValue);\n  }\n  get value() {\n    return this.get();\n  }\n  set value(nextValue) {\n    this.set(nextValue);\n  }\n  get() {\n    const running = context[context.length - 1];\n    return running && running.add(this), this.#value;\n  }\n  set(nextValue) {\n    this.#equals(this.#value, nextValue) || (this.#value = nextValue, this.dispatchEvent(new CustomEvent('signal')));\n  }\n}\n\nconst createSignal = (initialValue, options) => initialValue instanceof State ? initialValue : new State(initialValue, options);\n\nfunction effect(cb) {\n  const running = new Set;\n  context.push(running);\n  try {\n    cb();\n  } finally {\n    context.pop();\n  }\n  for (const dep of running) dep.addEventListener('signal', cb);\n  return () => {\n    for (const dep of running) dep.removeEventListener('signal', cb);\n  };\n}\n\nclass Computed {\n  #state;\n  constructor(cb) {\n    this.#state = new State, effect((() => this.#state.set(cb())));\n  }\n  get() {\n    return this.#state.get();\n  }\n}\n\nvar index = {\n  State: State,\n  Computed: Computed,\n  createSignal: createSignal,\n  effect: effect\n};\n\nexport { Computed, State, createSignal, index as default, effect };\n","const { isArray } = Array;\nconst { getPrototypeOf, getOwnPropertyDescriptor } = Object;\n\nexport { isArray };\n\nexport const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n\nexport const empty = [];\n\nexport const newRange = () => document.createRange();\n\n/**\n * Set the `key` `value` pair to the *Map* or *WeakMap* and returns the `value`\n * @template T\n * @param {Map | WeakMap} map\n * @param {any} key\n * @param {T} value\n * @returns {T}\n */\nexport const set = (map, key, value) => {\n  map.set(key, value);\n  return value;\n};\n\n/**\n * Return a descriptor, if any, for the referenced *Element*\n * @param {Element} ref\n * @param {string} prop\n * @returns \n */\nexport const gPD = (ref, prop) => {\n  let desc;\n  do { desc = getOwnPropertyDescriptor(ref, prop); }\n  while(!desc && (ref = getPrototypeOf(ref)));\n  return desc;\n};\n\n/* c8 ignore start */\n/**\n * @param {DocumentFragment} content\n * @param {number[]} path\n * @returns {Element}\n */\nexport const find = (content, path) => path.reduceRight(childNodesIndex, content);\nconst childNodesIndex = (node, i) => node.childNodes[i];\n/* c8 ignore stop */\n","const {setPrototypeOf} = Object;\n\n/**\n * @param {Function} Class any base class to extend without passing through it via super() call.\n * @returns {Function} an extensible class for the passed one.\n * @example\n *  // creating this very same module utility\n *  import custom from 'custom-function/factory';\n *  const CustomFunction = custom(Function);\n *  class MyFunction extends CustomFunction {}\n *  const mf = new MyFunction(() => {});\n */\nexport default Class => {\n  function Custom(target) {\n    return setPrototypeOf(target, new.target.prototype);\n  }\n  Custom.prototype = Class.prototype;\n  return Custom;\n};\n","import { newRange } from './utils.js';\n\nlet range;\n/**\n * @param {Node | Element} firstChild\n * @param {Node | Element} lastChild\n * @param {boolean} preserve\n * @returns\n */\nexport default (firstChild, lastChild, preserve) => {\n  if (!range) range = newRange();\n  /* c8 ignore start */\n  if (preserve)\n    range.setStartAfter(firstChild);\n  else\n    range.setStartBefore(firstChild);\n  /* c8 ignore stop */\n  range.setEndAfter(lastChild);\n  range.deleteContents();\n  return firstChild;\n};\n","import { DOCUMENT_FRAGMENT_NODE } from 'domconstants/constants';\nimport custom from 'custom-function/factory';\nimport drop from './range.js';\nimport { empty } from './utils.js';\n\n/**\n * @param {PersistentFragment} fragment\n * @returns {Node | Element}\n */\nconst remove = ({firstChild, lastChild}, preserve) => drop(firstChild, lastChild, preserve);\n\nlet checkType = false;\n\n/**\n * @param {Node} node\n * @param {1 | 0 | -0 | -1} operation\n * @returns {Node}\n */\nexport const diffFragment = (node, operation) => (\n  checkType && node.nodeType === DOCUMENT_FRAGMENT_NODE ?\n    ((1 / operation) < 0 ?\n      (operation ? remove(node, true) : node.lastChild) :\n      (operation ? node.valueOf() : node.firstChild)) :\n    node\n);\n\nconst comment = value => document.createComment(value);\n\n/** @extends {DocumentFragment} */\nexport class PersistentFragment extends custom(DocumentFragment) {\n  #firstChild = comment('<>');\n  #lastChild = comment('</>');\n  #nodes = empty;\n  constructor(fragment) {\n    super(fragment);\n    this.replaceChildren(...[\n      this.#firstChild,\n      ...fragment.childNodes,\n      this.#lastChild,\n    ]);\n    checkType = true;\n  }\n  get firstChild() { return this.#firstChild; }\n  get lastChild() { return this.#lastChild; }\n  get parentNode() { return this.#firstChild.parentNode; }\n  remove() {\n    remove(this, false);\n  }\n  replaceWith(node) {\n    remove(this, true).replaceWith(node);\n  }\n  valueOf() {\n    const { parentNode } = this;\n    if (parentNode === this) {\n      if (this.#nodes === empty)\n        this.#nodes = [...this.childNodes];\n    }\n    else {\n      /* c8 ignore start */\n      // there are cases where a fragment might be just appended\n      // out of the box without valueOf() invoke (first render).\n      // When these are moved around and lose their parent and,\n      // such parent is not the fragment itself, it's possible there\n      // where changes or mutations in there to take care about.\n      // This is a render-only specific issue but it's tested and\n      // it's worth fixing to me to have more consistent fragments.\n      if (parentNode) {\n        let { firstChild, lastChild } = this;\n        this.#nodes = [firstChild];\n        while (firstChild !== lastChild)\n          this.#nodes.push((firstChild = firstChild.nextSibling));\n      }\n      /* c8 ignore stop */\n      this.replaceChildren(...this.#nodes);\n    }\n    return this;\n  }\n}\n","export const ELEMENT_NODE = 1;\nexport const ATTRIBUTE_NODE = 2;\nexport const TEXT_NODE = 3;\nexport const COMMENT_NODE = 8;\nexport const DOCUMENT_NODE = 9;\nexport const DOCUMENT_TYPE_NODE = 10;\nexport const DOCUMENT_FRAGMENT_NODE = 11;\n","import udomdiff from 'udomdiff';\nimport { empty, gPD, isArray, set } from './utils.js';\nimport { diffFragment } from './persistent-fragment.js';\nimport drop from './range.js';\n\nconst setAttribute = (element, name, value) =>\n  element.setAttribute(name, value);\n\n/**\n * @param {Element} element\n * @param {string} name\n * @returns {void}\n */\nexport const removeAttribute = (element, name) =>\n  element.removeAttribute(name);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @returns {T}\n */\nexport const aria = (element, value) => {\n  for (const key in value) {\n    const $ = value[key];\n    const name = key === 'role' ? key : `aria-${key}`;\n    if ($ == null) removeAttribute(element, name);\n    else setAttribute(element, name, $);\n  }\n  return value;\n};\n\nlet listeners;\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @param {string} name\n * @returns {T}\n */\nexport const at = (element, value, name) => {\n  name = name.slice(1);\n  if (!listeners) listeners = new WeakMap;\n  const known = listeners.get(element) || set(listeners, element, {});\n  let current = known[name];\n  if (current && current[0]) element.removeEventListener(name, ...current);\n  current = isArray(value) ? value : [value, false];\n  known[name] = current;\n  if (current[0]) element.addEventListener(name, ...current);\n  return value;\n};\n\n/** @type {WeakMap<Node, Element | import(\"./persistent-fragment.js\").PersistentFragment>} */\nconst holes = new WeakMap;\n\n/**\n * @template T\n * @param {import(\"./literals.js\").Detail} detail\n * @param {T} value\n * @returns {T}\n */\nexport const hole = (detail, value) => {\n  const { t: node, n: hole } = detail;\n  let nullish = false;\n  switch (typeof value) {\n    case 'object':\n      if (value !== null) {\n        (hole || node).replaceWith((detail.n = value.valueOf()));\n        break;\n      }\n    case 'undefined':\n      nullish = true;\n    default:\n      node.data = nullish ? '' : value;\n      if (hole) {\n        detail.n = null;\n        hole.replaceWith(node);\n      }\n      break;\n  }\n  return value;\n};\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @returns {T}\n */\nexport const className = (element, value) => maybeDirect(\n  element, value, value == null ? 'class' : 'className'\n);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @returns {T}\n */\nexport const data = (element, value) => {\n  const { dataset } = element;\n  for (const key in value) {\n    if (value[key] == null) delete dataset[key];\n    else dataset[key] = value[key];\n  }\n  return value;\n};\n\n/**\n * @template T\n * @param {Element | CSSStyleDeclaration} ref\n * @param {T} value\n * @param {string} name\n * @returns {T}\n */\nexport const direct = (ref, value, name) => (ref[name] = value);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @param {string} name\n * @returns {T}\n */\nexport const dot = (element, value, name) => direct(element, value, name.slice(1));\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @param {string} name\n * @returns {T}\n */\nexport const maybeDirect = (element, value, name) => (\n  value == null ?\n    (removeAttribute(element, name), value) :\n    direct(element, value, name)\n);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @returns {T}\n */\nexport const ref = (element, value) => (\n  (typeof value === 'function' ?\n    value(element) : (value.current = element)),\n  value\n);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @param {string} name\n * @returns {T}\n */\nconst regular = (element, value, name) => (\n  (value == null ?\n    removeAttribute(element, name) :\n    setAttribute(element, name, value)),\n  value\n);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @returns {T}\n */\nexport const style = (element, value) => (\n  value == null ?\n    maybeDirect(element, value, 'style') :\n    direct(element.style, value, 'cssText')\n);\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @param {string} name\n * @returns {T}\n */\nexport const toggle = (element, value, name) => (\n  element.toggleAttribute(name.slice(1), value),\n  value\n);\n\n/**\n * @param {Node} node\n * @param {Node[]} value\n * @param {string} _\n * @param {Node[]} prev\n * @returns {Node[]}\n */\nexport const array = (node, value, prev) => {\n  // normal diff\n  const { length } = value;\n  node.data = `[${length}]`;\n  if (length)\n    return udomdiff(node.parentNode, prev, value, diffFragment, node);\n  /* c8 ignore start */\n  switch (prev.length) {\n    case 1:\n      prev[0].remove();\n    case 0:\n      break;\n    default:\n      drop(\n        diffFragment(prev[0], 0),\n        diffFragment(prev.at(-1), -0),\n        false\n      );\n      break;\n  }\n  /* c8 ignore stop */\n  return empty;\n};\n\nexport const attr = new Map([\n  ['aria', aria],\n  ['class', className],\n  ['data', data],\n  ['ref', ref],\n  ['style', style],\n]);\n\n/**\n * @param {HTMLElement | SVGElement} element\n * @param {string} name\n * @param {boolean} svg\n * @returns\n */\nexport const attribute = (element, name, svg) => {\n  switch (name[0]) {\n    case '.': return dot;\n    case '?': return toggle;\n    case '@': return at;\n    default: return (\n      svg || ('ownerSVGElement' in element) ?\n        (name === 'ref' ? ref : regular) :\n        (attr.get(name) || (\n          name in element ?\n            (name.startsWith('on') ?\n              direct :\n              (gPD(element, name)?.set ? maybeDirect : regular)\n            ) :\n            regular\n          )\n        )\n    );\n  }\n};\n\n/**\n * @template T\n * @param {Element} element\n * @param {T} value\n * @returns {T}\n */\nexport const text = (element, value) => (\n  (element.textContent = value == null ? '' : value),\n  value\n);\n","/**\n * ISC License\n *\n * Copyright (c) 2020, Andrea Giammarchi, @WebReflection\n *\n * Permission to use, copy, modify, and/or distribute this software for any\n * purpose with or without fee is hereby granted, provided that the above\n * copyright notice and this permission notice appear in all copies.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\n * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\n * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE\n * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\n * PERFORMANCE OF THIS SOFTWARE.\n */\n\n/**\n * @param {Node} parentNode The container where children live\n * @param {Node[]} a The list of current/live children\n * @param {Node[]} b The list of future children\n * @param {(entry: Node, action: number) => Node} get\n * The callback invoked per each entry related DOM operation.\n * @param {Node} [before] The optional node used as anchor to insert before.\n * @returns {Node[]} The same list of future children.\n */\nexport default (parentNode, a, b, get, before) => {\n  const bLength = b.length;\n  let aEnd = a.length;\n  let bEnd = bLength;\n  let aStart = 0;\n  let bStart = 0;\n  let map = null;\n  while (aStart < aEnd || bStart < bEnd) {\n    // append head, tail, or nodes in between: fast path\n    if (aEnd === aStart) {\n      // we could be in a situation where the rest of nodes that\n      // need to be added are not at the end, and in such case\n      // the node to `insertBefore`, if the index is more than 0\n      // must be retrieved, otherwise it's gonna be the first item.\n      const node = bEnd < bLength ?\n        (bStart ?\n          (get(b[bStart - 1], -0).nextSibling) :\n          get(b[bEnd], 0)) :\n        before;\n      while (bStart < bEnd)\n        parentNode.insertBefore(get(b[bStart++], 1), node);\n    }\n    // remove head or tail: fast path\n    else if (bEnd === bStart) {\n      while (aStart < aEnd) {\n        // remove the node only if it's unknown or not live\n        if (!map || !map.has(a[aStart]))\n          parentNode.removeChild(get(a[aStart], -1));\n        aStart++;\n      }\n    }\n    // same node: fast path\n    else if (a[aStart] === b[bStart]) {\n      aStart++;\n      bStart++;\n    }\n    // same tail: fast path\n    else if (a[aEnd - 1] === b[bEnd - 1]) {\n      aEnd--;\n      bEnd--;\n    }\n    // The once here single last swap \"fast path\" has been removed in v1.1.0\n    // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85\n    // reverse swap: also fast path\n    else if (\n      a[aStart] === b[bEnd - 1] &&\n      b[bStart] === a[aEnd - 1]\n    ) {\n      // this is a \"shrink\" operation that could happen in these cases:\n      // [1, 2, 3, 4, 5]\n      // [1, 4, 3, 2, 5]\n      // or asymmetric too\n      // [1, 2, 3, 4, 5]\n      // [1, 2, 3, 5, 6, 4]\n      const node = get(a[--aEnd], -0).nextSibling;\n      parentNode.insertBefore(\n        get(b[bStart++], 1),\n        get(a[aStart++], -0).nextSibling\n      );\n      parentNode.insertBefore(get(b[--bEnd], 1), node);\n      // mark the future index as identical (yeah, it's dirty, but cheap 👍)\n      // The main reason to do this, is that when a[aEnd] will be reached,\n      // the loop will likely be on the fast path, as identical to b[bEnd].\n      // In the best case scenario, the next loop will skip the tail,\n      // but in the worst one, this node will be considered as already\n      // processed, bailing out pretty quickly from the map index check\n      a[aEnd] = b[bEnd];\n    }\n    // map based fallback, \"slow\" path\n    else {\n      // the map requires an O(bEnd - bStart) operation once\n      // to store all future nodes indexes for later purposes.\n      // In the worst case scenario, this is a full O(N) cost,\n      // and such scenario happens at least when all nodes are different,\n      // but also if both first and last items of the lists are different\n      if (!map) {\n        map = new Map;\n        let i = bStart;\n        while (i < bEnd)\n          map.set(b[i], i++);\n      }\n      // if it's a future node, hence it needs some handling\n      if (map.has(a[aStart])) {\n        // grab the index of such node, 'cause it might have been processed\n        const index = map.get(a[aStart]);\n        // if it's not already processed, look on demand for the next LCS\n        if (bStart < index && index < bEnd) {\n          let i = aStart;\n          // counts the amount of nodes that are the same in the future\n          let sequence = 1;\n          while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))\n            sequence++;\n          // effort decision here: if the sequence is longer than replaces\n          // needed to reach such sequence, which would brings again this loop\n          // to the fast path, prepend the difference before a sequence,\n          // and move only the future list index forward, so that aStart\n          // and bStart will be aligned again, hence on the fast path.\n          // An example considering aStart and bStart are both 0:\n          // a: [1, 2, 3, 4]\n          // b: [7, 1, 2, 3, 6]\n          // this would place 7 before 1 and, from that time on, 1, 2, and 3\n          // will be processed at zero cost\n          if (sequence > (index - bStart)) {\n            const node = get(a[aStart], 0);\n            while (bStart < index)\n              parentNode.insertBefore(get(b[bStart++], 1), node);\n          }\n          // if the effort wasn't good enough, fallback to a replace,\n          // moving both source and target indexes forward, hoping that some\n          // similar node will be found later on, to go back to the fast path\n          else {\n            parentNode.replaceChild(\n              get(b[bStart++], 1),\n              get(a[aStart++], -1)\n            );\n          }\n        }\n        // otherwise move the source forward, 'cause there's nothing to do\n        else\n          aStart++;\n      }\n      // this node has no meaning in the future list, so it's more than safe\n      // to remove it, and check the next live node out instead, meaning\n      // that only the live list index should be forwarded\n      else\n        parentNode.removeChild(get(a[aStart++], -1));\n    }\n  }\n  return b;\n};\n","import { empty } from './utils.js';\n\n/** @typedef {import(\"./persistent-fragment.js\").PersistentFragment} PersistentFragment */\n/** @typedef {import(\"./rabbit.js\").Hole} Hole */\n\n/** @typedef {unknown} Value */\n/** @typedef {Node | Element | PersistentFragment} Target */\n/** @typedef {null | undefined | string | number | boolean | Node | Element | PersistentFragment} DOMValue */\n/** @typedef {Hole | Node} ArrayValue */\n\nexport const abc = (a, b, c) => ({ a, b, c });\n\nexport const bc = (b, c) => ({ b, c });\n\n/**\n * @typedef {Object} Detail\n * @property {any} v the current value of the interpolation / hole\n * @property {function} u the callback to update the value\n * @property {Node} t the target comment node or element\n * @property {string | null | Node} n the attribute name, if any, or `null`\n * @property {Cache | ArrayValue[] | null} c the cache value for this detail\n */\n\n/**\n * @returns {Detail}\n */\nexport const detail = (u, t, n, c) => ({ v: empty, u, t, n, c });\n\n/**\n * @typedef {Object} Entry\n * @property {number[]} a the path to retrieve the node\n * @property {function} b the update function\n * @property {string | null} c the attribute name, if any, or `null`\n */\n\n/**\n * @typedef {Object} Cache\n * @property {null | TemplateStringsArray} a the cached template\n * @property {null | Node | PersistentFragment} b the node returned when parsing the template\n * @property {Detail[]} c the list of updates to perform\n */\n\n/**\n * @returns {Cache}\n */\nexport const cache = () => abc(null, null, empty);\n","import { PersistentFragment } from './persistent-fragment.js';\nimport { bc, detail } from './literals.js';\nimport { array, hole } from './handler.js';\nimport { empty, find } from './utils.js';\nimport { cache } from './literals.js';\n\n/** @param {(template: TemplateStringsArray, values: any[]) => import(\"./parser.js\").Resolved} parse */\nexport default parse => (\n  /**\n   * @param {TemplateStringsArray} template\n   * @param {any[]} values\n   * @returns {import(\"./literals.js\").Cache}\n   */\n  (template, values) => {\n    const { a: fragment, b: entries, c: direct } = parse(template, values);\n    const root = document.importNode(fragment, true);\n    /** @type {import(\"./literals.js\").Detail[]} */\n    let details = empty;\n    if (entries !== empty) {\n      details = [];\n      for (let current, prev, i = 0; i < entries.length; i++) {\n        const { a: path, b: update, c: name } = entries[i];\n        const node = path === prev ? current : (current = find(root, (prev = path)));\n        details[i] = detail(\n          update,\n          node,\n          name,\n          update === array ? [] : (update === hole ? cache() : null)\n        );\n      }\n    }\n    return bc(\n      direct ? root.firstChild : new PersistentFragment(root),\n      details,\n    );\n  }\n);\n","export const TEXT_ELEMENTS = /^(?:plaintext|script|style|textarea|title|xmp)$/i;\nexport const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;\n","import { VOID_ELEMENTS } from 'domconstants/re';\n\nconst elements = /<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\\/?)>/g;\nconst attributes = /([^\\s\\\\>\"'=]+)\\s*=\\s*(['\"]?)\\x01/g;\nconst holes = /[\\x01\\x02]/g;\n\n// \\x01 Node.ELEMENT_NODE\n// \\x02 Node.ATTRIBUTE_NODE\n\n/**\n * Given a template, find holes as both nodes and attributes and\n * return a string with holes as either comment nodes or named attributes.\n * @param {string[]} template a template literal tag array\n * @param {string} prefix prefix to use per each comment/attribute\n * @param {boolean} xml enforces self-closing tags\n * @returns {string} X/HTML with prefixed comments or attributes\n */\nexport default (template, prefix, xml) => {\n  let i = 0;\n  return template\n    .join('\\x01')\n    .trim()\n    .replace(\n      elements,\n      (_, name, attrs, selfClosing) => `<${\n          name\n        }${\n          attrs.replace(attributes, '\\x02=$2$1').trimEnd()\n        }${\n          selfClosing ? (\n            (xml || VOID_ELEMENTS.test(name)) ? ' /' : `></${name}`\n          ) : ''\n        }>`\n    )\n    .replace(\n      holes,\n      hole => hole === '\\x01' ? `<!--${prefix + i++}-->` : (prefix + i++)\n    )\n  ;\n};\n","import { SVG_NAMESPACE, newRange } from './utils.js';\n\nlet template = document.createElement('template'), svg, range;\n\n/**\n * @param {string} text\n * @param {boolean} xml\n * @returns {DocumentFragment}\n */\nexport default (text, xml) => {\n  if (xml) {\n    if (!svg) {\n      svg = document.createElementNS(SVG_NAMESPACE, 'svg');\n      range = newRange();\n      range.selectNodeContents(svg);\n    }\n    return range.createContextualFragment(text);\n  }\n  template.innerHTML = text;\n  const { content } = template;\n  template = template.cloneNode(false);\n  return content;\n};\n","import { COMMENT_NODE, ELEMENT_NODE } from 'domconstants/constants';\nimport { TEXT_ELEMENTS } from 'domconstants/re';\nimport parser from '@webreflection/uparser';\n\nimport { empty, isArray, set } from './utils.js';\nimport { abc } from './literals.js';\n\nimport { array, attribute, hole, text, removeAttribute } from './handler.js';\nimport createContent from './create-content.js';\n\n/** @typedef {import(\"./literals.js\").Entry} Entry */\n\n/**\n * @typedef {Object} Resolved\n * @param {DocumentFragment} f content retrieved from the template\n * @param {Entry[]} e entries per each hole in the template\n * @param {boolean} d direct node to handle\n */\n\n/**\n * @param {Element} node\n * @returns {number[]}\n */\nconst createPath = node => {\n  const path = [];\n  let parentNode;\n  while ((parentNode = node.parentNode)) {\n    path.push(path.indexOf.call(parentNode.childNodes, node));\n    node = parentNode;\n  }\n  return path;\n};\n\nconst textNode = () => document.createTextNode('');\n\n/**\n * @param {TemplateStringsArray} template\n * @param {boolean} xml\n * @returns {Resolved}\n */\nconst resolve = (template, values, xml) => {\n  const content = createContent(parser(template, prefix, xml), xml);\n  const { length } = template;\n  let entries = empty;\n  if (length > 1) {\n    const replace = [];\n    const tw = document.createTreeWalker(content, 1 | 128);\n    let i = 0, search = `${prefix}${i++}`;\n    entries = [];\n    while (i < length) {\n      const node = tw.nextNode();\n      // these are holes or arrays\n      if (node.nodeType === COMMENT_NODE) {\n        if (node.data === search) {\n          // ⚠️ once array, always array!\n          const update = isArray(values[i - 1]) ? array : hole;\n          if (update === hole) replace.push(node);\n          entries.push(abc(createPath(node), update, null));\n          search = `${prefix}${i++}`;\n        }\n      }\n      else {\n        let path;\n        // these are attributes\n        while (node.hasAttribute(search)) {\n          if (!path) path = createPath(node);\n          const name = node.getAttribute(search);\n          entries.push(abc(path, attribute(node, name, xml), name));\n          removeAttribute(node, search);\n          search = `${prefix}${i++}`;\n        }\n        // these are special text-only nodes\n        if (\n          !xml &&\n          TEXT_ELEMENTS.test(node.localName) &&\n          node.textContent.trim() === `<!--${search}-->`\n        ) {\n          entries.push(abc(path || createPath(node), text, null));\n          search = `${prefix}${i++}`;\n        }\n      }\n    }\n    // can't replace holes on the fly or the tree walker fails\n    for (i = 0; i < replace.length; i++)\n      replace[i].replaceWith(textNode());\n  }\n\n  // need to decide if there should be a persistent fragment\n  const { childNodes } = content;\n  let { length: len } = childNodes;\n\n  // html`` or svg`` to signal an empty content\n  // these nodes can be passed directly as never mutated\n  if (len < 1) {\n    len = 1;\n    content.appendChild(textNode());\n  }\n  // html`${'b'}` or svg`${[]}` cases\n  else if (\n    len === 1 &&\n    // ignore html`static` or svg`static` because\n    // these nodes can be passed directly as never mutated\n    length !== 1 &&\n    childNodes[0].nodeType !== ELEMENT_NODE\n  ) {\n    // use a persistent fragment for these cases too\n    len = 0;\n  }\n\n  return set(cache, template, abc(content, entries, len === 1));\n};\n\n/** @type {WeakMap<TemplateStringsArray, Resolved>} */\nconst cache = new WeakMap;\nconst prefix = 'isµ';\n\n/**\n * @param {boolean} xml\n * @returns {(template: TemplateStringsArray, values: any[]) => Resolved}\n */\nexport default xml => (template, values) => cache.get(template) || resolve(template, values, xml);\n","import { array, hole } from './handler.js';\nimport { cache } from './literals.js';\nimport create from './creator.js';\nimport parser from './parser.js';\n\nconst createHTML = create(parser(false));\nconst createSVG = create(parser(true));\n\n/**\n * @param {import(\"./literals.js\").Cache} info\n * @param {Hole} hole\n * @returns {Node}\n */\nconst unroll = (info, { s, t, v }) => {\n  if (info.a !== t) {\n    const { b, c } = (s ? createSVG : createHTML)(t, v);\n    info.a = t;\n    info.b = b;\n    info.c = c;\n  }\n  for (let { c } = info, i = 0; i < c.length; i++) {\n    const value = v[i];\n    const detail = c[i];\n    switch (detail.u) {\n      case array:\n        detail.v = array(\n          detail.t,\n          unrollValues(detail.c, value),\n          detail.v\n        );\n        break;\n      case hole:\n        const current = value instanceof Hole ?\n          unroll(detail.c || (detail.c = cache()), value) :\n          (detail.c = null, value)\n        ;\n        if (current !== detail.v)\n          detail.v = hole(detail, current);\n        break;\n      default:\n        if (value !== detail.v)\n          detail.v = detail.u(detail.t, value, detail.n, detail.v);\n        break;\n    }\n  }\n  return info.b;\n};\n\n/**\n * @param {Cache} cache\n * @param {any[]} values\n * @returns {number}\n */\nconst unrollValues = (stack, values) => {\n  let i = 0, { length } = values;\n  if (length < stack.length) stack.splice(length);\n  for (; i < length; i++) {\n    const value = values[i];\n    if (value instanceof Hole)\n      values[i] = unroll(stack[i] || (stack[i] = cache()), value);\n    else stack[i] = null;\n  }\n  return values;\n};\n\n/**\n * Holds all details needed to render the content on a render.\n * @constructor\n * @param {boolean} svg The content type.\n * @param {TemplateStringsArray} template The template literals used to the define the content.\n * @param {any[]} values Zero, one, or more interpolated values to render.\n */\nexport class Hole {\n  constructor(svg, template, values) {\n    this.s = svg;\n    this.t = template;\n    this.v = values;\n  }\n  toDOM(info = cache()) {\n    return unroll(info, this);\n  }\n};\n","/*! (c) Andrea Giammarchi - MIT */\nimport { Hole } from './rabbit.js';\nimport { attr } from './handler.js';\n\nimport render from './render/hole.js';\n\n/** @typedef {import(\"./literals.js\").Value} Value */\n\nconst tag = svg => (template, ...values) => new Hole(svg, template, values);\n\n/** @type {(template: TemplateStringsArray, ...values:Value[]) => Hole} A tag to render HTML content. */\nexport const html = tag(false);\n\n/** @type {(template: TemplateStringsArray, ...values:Value[]) => Hole} A tag to render SVG content. */\nexport const svg = tag(true);\n\nexport { Hole, render, attr };\n","import { Hole } from '../rabbit.js';\nimport { cache } from '../literals.js';\nimport { set } from '../utils.js';\n\n/** @type {WeakMap<Element | DocumentFragment, import(\"../literals.js\").Cache>} */\nconst known = new WeakMap;\n\n/**\n  * Render with smart updates within a generic container.\n  * @template T\n  * @param {T} where the DOM node where to render content\n  * @param {(() => Hole) | Hole} what the hole to render\n  * @param {boolean} check does a `typeof` check (internal usage).\n  * @returns\n  */\nexport default (where, what, check) => {\n  const info = known.get(where) || set(known, where, cache());\n  const { b } = info;\n  const hole = (check && typeof what === 'function') ? what() : what;\n  const node = hole instanceof Hole ? hole.toDOM(info) : hole;\n  if (b !== node)\n    where.replaceChildren((info.b = node).valueOf());\n  return where;\n};\n","/*! (c) Andrea Giammarchi - MIT */\nimport { Hole } from './rabbit.js';\nimport { attr } from './handler.js';\nimport { cache } from './literals.js';\nimport { set } from './utils.js';\nimport { html, svg } from './index.js';\n\nimport render from './render/keyed.js';\n\n/** @typedef {import(\"./literals.js\").Cache} Cache */\n/** @typedef {import(\"./literals.js\").Target} Target */\n/** @typedef {import(\"./literals.js\").Value} Value */\n\n/** @typedef {(ref:Object, key:string | number) => Tag} Bound */\n\n/**\n * @callback Tag\n * @param {TemplateStringsArray} template\n * @param  {...Value} values\n * @returns {Target}\n */\n\nconst keyed = new WeakMap;\nconst createRef = svg => /** @type {Bound} */ (ref, key) => {\n  /** @type {Tag} */\n  function tag(template, ...values) {\n    return new Hole(svg, template, values).toDOM(this);\n  }\n\n  const memo = keyed.get(ref) || set(keyed, ref, new Map);\n  return memo.get(key) || set(memo, key, tag.bind(cache()));\n};\n\n/** @type {Bound} Returns a bound tag to render HTML content. */\nexport const htmlFor = createRef(false);\n\n/** @type {Bound} Returns a bound tag to render SVG content. */\nexport const svgFor = createRef(true);\n\nexport { Hole, render, html, svg, attr };\n","// (c) Andrea Giammarchi - ISC\n\nconst registry = new FinalizationRegistry(\n  ([onGarbageCollected, held, debug]) => {\n    // \"%cThis is a green text\", \"color:green\"\n    if (debug) console.debug(`%c${String(held)}`, 'font-weight:bold', 'collected');\n    onGarbageCollected(held);\n  }\n);\n\nconst nullHandler = Object.create(null);\n\n/**\n * @template {unknown} H\n * @typedef {Object} GCHookOptions\n * @prop {boolean} [debug=false] if `true`, logs values once these can get collected.\n * @prop {ProxyHandler<object>} [handler] optional proxy handler to use instead of the default one.\n * @prop {H} [return=H] if specified, overrides the returned proxy with its value.\n * @prop {unknown} [token=H] it's the held value by default, but it can be any other token except the returned value itself.\n */\n\n/**\n * @template {unknown} H\n * @param {H} hold the reference to hold behind the scene and passed along the callback once it triggers.\n * @param {(held:H) => void} onGarbageCollected the callback that will receive the held value once its wrapper or indirect reference is no longer needed.\n * @param {GCHookOptions<H>} [options] an optional configuration object to change some default behavior.\n */\nexport const create = (\n  hold,\n  onGarbageCollected,\n  { debug, handler, return: r, token = hold } = nullHandler\n) => {\n  // if no reference to return is defined,\n  // create a proxy for the held one and register that instead.\n  /** @type {H} */\n  const target = r || new Proxy(hold, handler || nullHandler);\n  const args = [target, [onGarbageCollected, hold, !!debug]];\n  if (token !== false) args.push(token);\n  // register the target reference in a way that\n  // the `onGarbageCollected(held)` callback will eventually notify.\n  registry.register(...args);\n  return target;\n};\n\n/**\n * If previously registered as either `token` or `hold` value, allow explicit removal of the entry in the registry.\n * @param {unknown} token the token used during registration. If no `token` was passed, this can be the same `hold` reference.\n * @returns {boolean} `true` if successfully unregistered.\n */\nexport const drop = token => registry.unregister(token);\n","import { create, drop } from 'gc-hook';\n\nimport render from './shared.js';\n\n/** @typedef {import(\"../rabbit.js\").Hole} Hole */\n\n/** @type {WeakMap<Element | DocumentFragment, Function>} */\nconst effects = new WeakMap;\n\n/**\n * @param {Function} dispose\n * @returns {void}\n */\nconst onGC = dispose => dispose();\n\nlet remove = true;\n\n/**\n * @param {Function} effect the reactive `effect` callback provided by a 3rd party library.\n * @returns \n */\nexport const attach = effect => {\n  /**\n   * Render with smart updates within a generic container.\n   * If the `what` is a function, it automatically create\n   * an effect for the render function.\n   * @template T\n   * @param {T} where the DOM node where to render content\n   * @param {(() => Hole) | Hole} what the hole to render\n   * @returns {T}\n   */\n  return (where, what) => {\n    remove = typeof what !== 'function';\n    detach(where);\n\n    if (remove) return render(where, what, false);\n    remove = true;\n\n    const wr = new WeakRef(where);\n    const dispose = effect(() => { render(wr.deref(), what(), false) });\n    effects.set(where, dispose);\n    return create(dispose, onGC, { return: where });\n  };\n};\n\n/**\n * Allow manual cleanup of subscribed signals.\n * @param {Element} where a reference container previously used to render signals.\n */\nexport const detach = where => {\n  const dispose = effects.get(where);\n  if (dispose) {\n    if (remove) effects.delete(where);\n    drop(dispose);\n    dispose();\n  }\n};\n","export {\n  default as Signal,\n  createSignal,\n  effect,\n  State,\n  Computed\n} from 'mi-signal'\nexport * from 'uhtml/reactive'\nimport { effect } from 'mi-signal'\nimport { reactive } from 'uhtml/reactive'\nexport const render = reactive(effect)\n"],"names":["context","State","EventTarget","value","equals","constructor","options","super","this","nextValue","get","set","running","length","add","dispatchEvent","CustomEvent","createSignal","initialValue","effect","cb","Set","push","pop","dep","addEventListener","removeEventListener","Computed","state","index","isArray","Array","getPrototypeOf","getOwnPropertyDescriptor","Object","empty","newRange","document","createRange","map","key","find","content","path","reduceRight","childNodesIndex","node","i","childNodes","setPrototypeOf","range","drop$1","firstChild","lastChild","preserve","setStartAfter","setStartBefore","setEndAfter","deleteContents","remove","drop","checkType","diffFragment","operation","nodeType","valueOf","comment","createComment","PersistentFragment","Class","Custom","target","prototype","custom","DocumentFragment","nodes","fragment","replaceChildren","parentNode","replaceWith","nextSibling","setAttribute","element","name","removeAttribute","listeners","at","slice","WeakMap","known","current","hole","detail","t","n","nullish","data","direct","ref","dot","maybeDirect","regular","toggle","toggleAttribute","array","prev","a","b","before","bLength","aEnd","bEnd","aStart","bStart","insertBefore","has","removeChild","Map","sequence","replaceChild","udomdiff","attr","$","dataset","style","attribute","svg","startsWith","prop","desc","gPD","text","textContent","abc","c","cache","create$1","parse","template","values","entries","root","importNode","details","update","u","v","bc","TEXT_ELEMENTS","VOID_ELEMENTS","elements","attributes","holes","createElement","createContent","xml","createElementNS","selectNodeContents","createContextualFragment","innerHTML","cloneNode","createPath","indexOf","call","textNode","createTextNode","prefix","parser","join","trim","replace","_","attrs","selfClosing","trimEnd","test","tw","createTreeWalker","search","nextNode","hasAttribute","getAttribute","localName","len","appendChild","resolve","createHTML","create","createSVG","unroll","info","s","unrollValues","Hole","stack","splice","toDOM","tag","html","render$1","where","what","check","keyed","createRef","memo","bind","htmlFor","svgFor","registry","FinalizationRegistry","onGarbageCollected","held","debug","nullHandler","effects","onGC","dispose","attach","detach","render","wr","WeakRef","deref","hold","handler","return","r","token","Proxy","args","register","delete","unregister","reactive"],"mappings":"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","x_google_ignoreList":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]}

package/package.json

@@ -1,16 +1,82 @@
 {
   "name": "mi-html",
-  "version": "0.0.1",
-  "description": "",
-  "keywords": [],
+  "version": "0.6.0",
+  "description": "Signal for reactive behavior",
+  "keywords": [
+    "signal",
+    "effect"
+  ],
+  "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-html",
+  "bugs": {
+    "url": "https://github.com/commenthol/mi-element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/commenthol/mi-element.git",
+    "directory": "packages/mi-element"
+  },
   "license": "MIT",
   "author": "commenthol <commenthol@gmail.com>",
+  "maintainers": [
+    "commenthol <commenthol@gmail.com>"
+  ],
+  "sideEffects": false,
   "type": "module",
+  "exports": {
+    ".": {
+      "development": "./src/index.js",
+      "types": "./types/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./min": {
+      "sourceMap": "./dist/index.min.js.map",
+      "types": "./types/index.d.ts",
+      "default": "./dist/index.min.js"
+    }
+  },
   "main": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "dist",
+    "types"
   ],
+  "dependencies": {
+    "mi-signal": "^0.5.0",
+    "uhtml": "^4.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@testing-library/dom": "^10.4.1",
+    "@types/node": "^24.3.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-istanbul": "^3.2.4",
+    "eslint": "^9.33.0",
+    "globals": "^16.3.0",
+    "npm-run-all2": "^8.0.4",
+    "playwright": "^1.54.2",
+    "prettier": "^3.6.2",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.46.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.2",
+    "vitest": "^3.2.4"
+  },
+  "c4uIgnore": {
+    "uhtml": "^4"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "all": "npm-run-all pretty lint test build types",
+    "build": "rimraf dist && rollup -c && gzip -k dist/index.min.js && ls -al dist && rimraf dist/index.min.js.gz",
+    "docs": "cd docs; for f in *.md; do markedpp -s -i $f; done",
+    "example": "vite --open /example/",
+    "lint": "eslint",
+    "pretty": "prettier -w **/*.js",
+    "test": "vitest run --coverage",
+    "test:browser": "vitest --coverage",
+    "dev": "npm run test:browser",
+    "types": "tsc",
+    "setup": "pnpm exec playwright install"
   }
-}
+}

package/src/index.js

@@ -0,0 +1,11 @@
+export {
+  default as Signal,
+  createSignal,
+  effect,
+  State,
+  Computed
+} from 'mi-signal'
+export * from 'uhtml/reactive'
+import { effect } from 'mi-signal'
+import { reactive } from 'uhtml/reactive'
+export const render = reactive(effect)

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "uhtml/reactive";
+export const render: <T>(where: T, what: (() => import("uhtml/reactive").Hole) | import("uhtml/reactive").Hole) => T;
+export { default as Signal, createSignal, effect, State, Computed } from "mi-signal";