microtags 0.0.3 → 0.0.5

package/README.md

@@ -9,9 +9,9 @@
 [![gzip size](https://img.shields.io/bundlephobia/minzip/microtags?style=flat-square)](https://bundlephobia.com/package/microtags)
 [![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
 
-Web component helper with reactive props, automatic cleanup,
-and no Shadow DOM. Reactive via
-[alien-signals](https://github.com/stackblitz/alien-signals).
+Web component helper with reactive props, automatic cleanup, and no
+[Shadow DOM](https://gomakethings.com/the-shadow-dom-is-an-antipattern/).
+Reactive via [alien-signals](https://github.com/stackblitz/alien-signals).
 
 **Size**: 3.41 kB with all dependencies, minified and brotlied
 
@@ -36,13 +36,17 @@ Inspired by [nanotags](https://nanotags.psdcoder.dev/). Reactive props use
   * [Refs](#refs)
     + [`withRefs`](#withrefs)
     + [Element types](#element-types)
-  * [define](#define)
-  * [withContexts](#withcontexts)
-  * [setup and ctx](#setup-and-ctx)
+  * [`define`](#define)
+  * [`withContexts`](#withcontexts)
+  * [`setup` and `ctx`](#setup-and-ctx)
     + [peek and untracked](#peek-and-untracked)
-- [Subpaths](#subpaths)
-  * [microtags/context](#microtagscontext)
-  * [microtags/render](#microtagsrender)
+- [Templates](#templates)
+- [Subpath Exports](#subpath-exports)
+  * [`microtags/context`](#microtagscontext)
+  * [`microtags/render`](#microtagsrender)
+    + [`renderList`](#renderlist)
+    + [`render`](#render)
+    + [Templates](#templates-1)
 - [Divergence from nanotags](#divergence-from-nanotags)
 
 <!-- tocstop -->
@@ -356,8 +360,8 @@ it instead. Queries are resolved relative to the host element, during
 
 ```ts
 .withRefs(r => ({
-    button: r.one(),   // resolves [data-ref="button"] — throws if missing
-    items:  r.all(),   // resolves all [data-ref="items"] — empty array if none
+    button: r.one(),   // resolves [data-ref="button"] (throws if missing)
+    items:  r.all(),   // resolves all [data-ref="items"] (empty array if none)
 }))
 ```
 
@@ -407,46 +411,83 @@ constrained to `HTMLElement`, so cast at the use site if you need one
 (e.g. `ctx.refs.icon as unknown as SVGSVGElement`).
 
 
-### define
+### `define`
 
 ```ts
 import { define } from 'microtags'
 
-define(tagName: string): ComponentBuilder
+define(tagName:string):ComponentBuilder
 ```
 
 Returns a fluent builder. Call `.setup()` to register the custom element.
 All builder methods are chainable and fully type-inferred.
 
-### withContexts
+### `withContexts`
+
+Context is for the case where a parent component defines some state, e.g. a
+`theme`, and the top-level (application) knows nothing about the theme. But the
+top level application does determine what children the parent renders
+(it passes in children), and the children need to know the theme.
+
+In that case, there is no way for the "parent" component to pass the theme to
+the children, and the root level (application) doesn't know what the theme is.
+
+Context gives us a "pull" based way to model this. The context-provider
+publishes the value, and any descendants opt in (or pull values) with
+`withContexts`, and the unknown-consumer and late-arrival problems are handled. 
+
+>
+> [!IMPORTANT]  
+> Context is only relevant on the client-side.
+> Context gives you nothing for first paint or the no-JS case.
+>
+
 
 ```ts
-import { createContext } from 'microtags/context'
+import { define } from 'microtags'
+import { createContext, provide } from 'microtags/context'
 
 const ThemeToken = createContext<string>()
 
-define('my-child')
+// Parent: owns the theme and publishes it to its descendants. It does
+// not reference the children below. The application composes those in.
+define('theme-provider')
+    .setup(ctx => {
+        ctx.onCleanup(provide(ctx.host, ThemeToken, 'dark'))
+    })
+
+// Child: opts in to the theme and reads whichever provider it is
+// composed into. It never receives the value as a prop.
+define('themed-card')
     .withContexts(() => ({
         theme: ThemeToken,
     }))
     .setup(ctx => {
         ctx.effect(() => {
-            console.log('theme is', ctx.contexts.theme)
+            ctx.host.dataset.theme = ctx.contexts.theme
         })
     })
 ```
 
+```html
+<!-- The application writes this markup. It nests <themed-card> inside
+     <theme-provider> but never sets the theme itself. -->
+<theme-provider>
+    <themed-card>Card content</themed-card>
+</theme-provider>
+```
+
 `setup()` is deferred until all required contexts resolve. See
-[microtags/context](#microtagscontext) for the provider API.
+[`microtags/context`](#microtagscontext) for the provider API.
 
-### setup and ctx
+### `setup` and `ctx`
 
 ```ts
 .setup(ctx => {
-    // ctx.host       — the HTMLElement itself
-    // ctx.props      — callable signals for each declared prop
-    // ctx.refs       — resolved DOM refs
-    // ctx.contexts   — consumed context values (reactive)
+    // ctx.host       the HTMLElement itself
+    // ctx.props      callable signals for each declared prop
+    // ctx.refs       resolved DOM refs
+    // ctx.contexts   consumed context values (reactive)
 
     // Run a tracked effect; auto-disposed on disconnect.
     ctx.effect(() => {
@@ -486,46 +527,265 @@ ctx.effect(() => {
 })
 ```
 
-## Subpaths
+## Templates
+
+[`render` and `renderList`](#microtagsrender) both take a `<template>`
+element as their second argument. A
+[`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template)
+is a native HTML element that holds markup the browser parses but does not
+render. Its contents are inert. Nothing inside paints, scripts do not run,
+images and other resources do not load, and the nodes stay out of the
+document until you clone them.
 
-### microtags/context
+See [./example/ssr.ts, line 89](./example/ssr.ts#L89).
 
-Cross-component context backed by alien-signals.
+You write the markup for an item inside the template, and the
+reconciler stamps out a copy per item by cloning `template.content`. The
+template's first element child is the unit that gets cloned, so give each
+template a single root element.
+
+```html
+<item-list>
+    <ul></ul>
+    <template>
+        <li>
+            <span class="name"></span>
+            <span class="count"></span>
+        </li>
+    </template>
+</item-list>
+```
+
+The component resolves the list and the template as refs, then calls
+`renderList` from inside an effect so the list re-renders whenever the
+data signal changes.
 
 ```ts
-import { createContext, provide, resolveContextSignal } from 'microtags/context'
+import { define } from 'microtags'
+import { signal } from 'alien-signals'
+import { renderList } from 'microtags/render'
+
+type Item = { id:string; name:string; count:number }
+
+define('item-list')
+    .withRefs(r => ({
+        list: r.one('ul'),
+        row: r.one('template'),  // typed as HTMLTemplateElement
+    }))
+    .setup(ctx => {
+        const items = signal<Item[]>([
+            { id: 'a', name: 'Alice', count: 1 },
+            { id: 'b', name: 'Bob', count: 2 },
+        ])
+
+        // Re-runs on every items() change; only changed rows are touched.
+        ctx.effect(() => {
+            renderList(ctx.refs.list, ctx.refs.row, {
+                data: items(),
+                key: item => item.id,
+                update: (el, item) => {
+                    el.querySelector('.name')!.textContent = item.name
+                    el.querySelector('.count')!.textContent =
+                        String(item.count)
+                },
+            })
+        })
+    })
+```
+
+Because the template lives in your HTML instead of a JavaScript string, each
+render clones real DOM nodes rather than re-parsing HTML, and the `update`
+callback function mutates the DOM through properties like `textContent`.
+Nothing concatenates strings into markup, so there is no string-injection
+XSS vector.
+
+## Subpath Exports
+
+### `microtags/context`
+
+Cross-component context backed by alien-signals. A provider shares a value
+with everything nested inside it; a consumer reads the value from its nearest
+provider ancestor and reacts when it changes.
+
+`provide` seeds a signal the first time it runs and updates that same signal
+on later calls, so re-providing inside an effect pushes changes to consumers.
+
+```ts
+import { define } from 'microtags'
+import { signal } from 'alien-signals'
+import { createContext, provide } from 'microtags/context'
 
 const ThemeToken = createContext<string>()
 
-// In a provider component's setup():
-const cleanup = provide(ctx.host, ThemeToken, 'dark')
-ctx.onCleanup(cleanup)
+// Provider: owns the theme and shares it with its descendants.
+define('theme-provider')
+    .withRefs(r => ({
+        toggle: r.one('button'),
+    }))
+    .setup(ctx => {
+        const theme = signal('light')
+
+        // Share with descendants; remove the entry on disconnect.
+        ctx.onCleanup(provide(ctx.host, ThemeToken, theme()))
+
+        // Re-provide on change. provide() updates the existing signal,
+        // so consumers that read this value re-run.
+        ctx.effect(() => provide(ctx.host, ThemeToken, theme()))
+
+        ctx.on(ctx.refs.toggle, 'click', () => {
+            theme(theme() === 'light' ? 'dark' : 'light')
+        })
+    })
+
+// Consumer: reads the nearest provider's theme, reactively.
+define('themed-card')
+    .withContexts(() => ({
+        theme: ThemeToken,
+    }))
+    .setup(ctx => {
+        // Reading ctx.contexts.theme inside an effect subscribes to it,
+        // so this re-runs whenever the provider toggles the value.
+        ctx.effect(() => {
+            ctx.host.dataset.theme = ctx.contexts.theme
+        })
+    })
+```
+
+```html
+<theme-provider>
+    <button>Toggle theme</button>
+    <themed-card>Card A</themed-card>
+    <themed-card>Card B</themed-card>
+</theme-provider>
+```
+
+Both cards resolve to the same nearest `<theme-provider>`, so one click
+updates both. `resolveContextSignal(element, token)` is the low-level lookup
+those reads use under the hood; reach for it only when you need the provider
+signal imperatively.
+
+---
+
+### `microtags/render`
+
+A keyed reconciler for rendering lists and single items from a
+`<template>`, with no virtual DOM and no diffing library.
+
+Microtags' state is reactive. When a signal changes, you want the DOM to follow.
+A way to do that for a list is to rebuild the markup on every change,
+e.g. `container.innerHTML = items.map(toHTML).join('')`.
 
-// In a consumer component via withContexts:
-ctx.contexts.theme   // 'dark' (reactive — re-runs effects when value changes)
+But rebuilding the markup on every change
+**throws away and recreates every node on every update**, losing any DOM
+state, like focus, text selection, scroll position, and the internal state of
+elements like `<video>`, `<details>`, and `<iframe>`. It also re-parses HTML on
+every pass, which creates a vector for string-concatenation XSS.
+
+**This library exports a `renderList` and a `render` function**.
+They diff against the live DOM. See
+[example/render-demo.ts](./example/render-demo.ts) for a working example.
+
+#### `renderList`
+
+Each item is matched to an existing element by its `key` attribute, so nodes
+are reused across renders rather than being recreated. Nodes whose keys
+disappear from the data are removed, surviving nodes are moved into place
+with the fewest DOM operations, and your `update` callback runs only for
+items whose value actually changed (compared by identity). Focus state and other
+DOM state survives a re-render, and changing one row touches only that row.
+
+```ts
+function renderList<T, E extends Element = Element> (
+    container:Element,
+    template:HTMLTemplateElement,
+    options:{
+        data:readonly T[];
+        key:(item:T, index:number) => string|number;
+        update:(el:E, item:T) => void;
+    }
+):void
 ```
 
-### microtags/render
+##### `renderList` Example
 
-DOM diffing helpers for rendering lists and single items without a virtual DOM.
+The markup is the list container plus a `<template>` for one row:
+
+```html
+<ul></ul>
+<template>
+    <li>
+        <span class="name"></span>
+    </li>
+</template>
+```
+
+Call `renderList` from inside an effect so it re-runs whenever the data
+signal changes:
 
 ```ts
-import { render, renderList } from 'microtags/render'
+ctx.effect(() => {
+    renderList(ctx.refs.list, ctx.refs.row, {
+        data: items(),
+        key: item => item.id,
+        update: (el, item) => {
+            el.querySelector('.name')!.textContent = item.name
+        },
+    })
+})
+```
+
+#### `render`
+
+`render` is the same machinery for a single item. It keys on the template, so
+repeated calls update the same element in place instead of replacing it.
+
+```ts
+function render<T, E extends Element = Element> (
+    container:Element,
+    template:HTMLTemplateElement,
+    options?:{
+        data?:T;
+        update?:(el:E, item:T) => void;
+    }
+):void
+```
 
-// Render a single item into a container from a <template>.
+##### `render` Example
+
+The markup is a container plus a single-item `<template>`:
+
+```html
+<div class="item"></div>
+<template>
+    <div>
+        <span></span>
+    </div>
+</template>
+```
+
+```ts
+import { render } from 'microtags/render'
+
+// Render a single item into the container from the <template>.
 render(container, template, {
     data: item,
-    update: (el, item) => { el.querySelector('span')!.textContent = item.name },
-})
-
-// Render a keyed list with minimal DOM mutations.
-renderList(container, template, {
-    data: items,
-    key: item => item.id,
-    update: (el, item) => { /* update el from item */ },
+    update: (el, item) => {
+        el.querySelector('span')!.textContent = item.name
+    },
 })
 ```
 
+For a runnable version, see `example/render-demo.ts`. It keeps an editable
+`<input>` in every row and a single item panel rendered with `render`, then
+re-renders on a timer and reorders on demand to show that focus, caret, and
+typed text survive: keyed nodes are reused and at most moved, never rebuilt.
+
+#### Templates
+
+
+
+---
+
 ## Divergence from nanotags
 
 | nanotags (nanostores) | microtags (alien-signals) |
@@ -536,8 +796,4 @@ renderList(container, template, {
 | `ctx.props.$count` (store) | `ctx.props.count` (callable signal) |
 
 Props declared with `withProps` are native alien-signals callable signals.
-There is no `$` prefix convention — all prop names are plain identifiers.
-
-```
-/ed3d-plan-and-execute:execute-implementation-plan /Users/nick/code/_microtags/docs/implementation-plans/2026-06-28-zod-validation-example/ /Users/nick/code/_microtags/
-```
+There is no `$` prefix convention; all prop names are plain identifiers.

package/dist/meta.json

@@ -133,7 +133,7 @@
       "format": "esm"
     },
     "src/render.ts": {
-      "bytes": 2601,
+      "bytes": 2457,
       "imports": [
         {
           "path": "<runtime>",
@@ -192,7 +192,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 4204
+      "bytes": 4056
     },
     "dist/render.js": {
       "imports": [

package/dist/render.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/render.ts"],
-  "sourcesContent": ["export type RenderListOptions<T, E extends Element = Element> = {\n    data:readonly T[];\n    key:(item:T, index:number) => string | number;\n    update:(el:E, item:T) => void;\n}\n\nexport type RenderOptions<T, E extends Element = Element> = {\n    data?:T;\n    update?:(el:E, item:T) => void;\n}\n\nconst elementData = new WeakMap<Element, unknown>()\nconst elementKeys = new WeakMap<Element, string | number>()\n\nexport function renderList<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options:RenderListOptions<T, E>\n):void {\n    const { data, key: getKey, update } = options\n    const existingByKey = new Map<string | number, E>()\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key !== undefined) existingByKey.set(key, child as E)\n    }\n\n    const dataKeys = new Set(data.map(getKey))\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key === undefined || !dataKeys.has(key)) {\n            child.remove()\n            elementKeys.delete(child)\n            elementData.delete(child)\n        }\n    }\n\n    let prev:E | null = null\n    for (let i = 0; i < data.length; i++) {\n        const item = data[i]\n        const key = getKey(item, i)\n        let el = existingByKey.get(key)\n\n        if (!el) {\n            el = (template.content.cloneNode(true) as Element)\n                .firstElementChild as E\n            elementKeys.set(el, key)\n        }\n\n        if (elementData.get(el) !== item) {\n            update(el, item)\n            elementData.set(el, item)\n        }\n\n        const expected = prev ?\n            prev.nextElementSibling :\n            container.firstElementChild\n\n        if (el !== expected) {\n            if (prev) prev.after(el)\n            else container.prepend(el)\n        }\n\n        prev = el\n    }\n}\n\nlet _tplCounter = 0\nconst tplIds = new WeakMap<HTMLTemplateElement, number>()\n\nexport function render<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options?:RenderOptions<T, E>\n):void {\n    renderList<T, E>(container, template, {\n        data: [\n            options !== undefined && 'data' in options ?\n                options.data as T :\n                {} as T\n        ],\n        key: () => {\n            let id = tplIds.get(template)\n            if (id === undefined) {\n                id = _tplCounter++\n                tplIds.set(template, id)\n            }\n            return id\n        },\n        update: options?.update ?? (() => {}),\n    })\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA,IAAM,cAAc,oBAAI,QAA0B;AAClD,IAAM,cAAc,oBAAI,QAAkC;AAEnD,SAAS,WACZ,WACA,UACA,SACG;AACH,QAAM,EAAE,MAAM,KAAK,QAAQ,OAAO,IAAI;AACtC,QAAM,gBAAgB,oBAAI,IAAwB;AAElD,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,OAAW,eAAc,IAAI,KAAK,KAAU;AAAA,EAC5D;AAEA,QAAM,WAAW,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC;AAEzC,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,UAAa,CAAC,SAAS,IAAI,GAAG,GAAG;AACzC,YAAM,OAAO;AACb,kBAAY,OAAO,KAAK;AACxB,kBAAY,OAAO,KAAK;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,OAAgB;AACpB,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AAClC,UAAM,OAAO,KAAK,CAAC;AACnB,UAAM,MAAM,OAAO,MAAM,CAAC;AAC1B,QAAI,KAAK,cAAc,IAAI,GAAG;AAE9B,QAAI,CAAC,IAAI;AACL,WAAM,SAAS,QAAQ,UAAU,IAAI,EAChC;AACL,kBAAY,IAAI,IAAI,GAAG;AAAA,IAC3B;AAEA,QAAI,YAAY,IAAI,EAAE,MAAM,MAAM;AAC9B,aAAO,IAAI,IAAI;AACf,kBAAY,IAAI,IAAI,IAAI;AAAA,IAC5B;AAEA,UAAM,WAAW,OACb,KAAK,qBACL,UAAU;AAEd,QAAI,OAAO,UAAU;AACjB,UAAI,KAAM,MAAK,MAAM,EAAE;AAAA,UAClB,WAAU,QAAQ,EAAE;AAAA,IAC7B;AAEA,WAAO;AAAA,EACX;AACJ;AApDgB;AAsDhB,IAAI,cAAc;AAClB,IAAM,SAAS,oBAAI,QAAqC;AAEjD,SAAS,OACZ,WACA,UACA,SACG;AACH,aAAiB,WAAW,UAAU;AAAA,IAClC,MAAM;AAAA,MACF,YAAY,UAAa,UAAU,UAC/B,QAAQ,OACR,CAAC;AAAA,IACT;AAAA,IACA,KAAK,6BAAM;AACP,UAAI,KAAK,OAAO,IAAI,QAAQ;AAC5B,UAAI,OAAO,QAAW;AAClB,aAAK;AACL,eAAO,IAAI,UAAU,EAAE;AAAA,MAC3B;AACA,aAAO;AAAA,IACX,GAPK;AAAA,IAQL,QAAQ,SAAS,WAAW,MAAM;AAAA,IAAC;AAAA,EACvC,CAAC;AACL;AArBgB;",
+  "sourcesContent": ["const elementData = new WeakMap<Element, unknown>()\nconst elementKeys = new WeakMap<Element, string | number>()\n\nexport function renderList<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options:{\n        data:readonly T[];\n        key:(item:T, index:number) => string|number;\n        update:(el:E, item:T) => void;\n    }\n):void {\n    const { data, key: getKey, update } = options\n    const existingByKey = new Map<string | number, E>()\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key !== undefined) existingByKey.set(key, child as E)\n    }\n\n    const dataKeys = new Set(data.map(getKey))\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key === undefined || !dataKeys.has(key)) {\n            child.remove()\n            elementKeys.delete(child)\n            elementData.delete(child)\n        }\n    }\n\n    let prev:E | null = null\n    for (let i = 0; i < data.length; i++) {\n        const item = data[i]\n        const key = getKey(item, i)\n        let el = existingByKey.get(key)\n\n        if (!el) {\n            el = (template.content.cloneNode(true) as Element)\n                .firstElementChild as E\n            elementKeys.set(el, key)\n        }\n\n        if (elementData.get(el) !== item) {\n            update(el, item)\n            elementData.set(el, item)\n        }\n\n        const expected = prev ?\n            prev.nextElementSibling :\n            container.firstElementChild\n\n        if (el !== expected) {\n            if (prev) prev.after(el)\n            else container.prepend(el)\n        }\n\n        prev = el\n    }\n}\n\nlet _tplCounter = 0\nconst tplIds = new WeakMap<HTMLTemplateElement, number>()\n\nexport function render<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options?:{\n        data?:T;\n        update?:(el:E, item:T) => void;\n    }\n):void {\n    renderList<T, E>(container, template, {\n        data: [\n            options !== undefined && 'data' in options ?\n                options.data as T :\n                {} as T\n        ],\n        key: () => {\n            let id = tplIds.get(template)\n            if (id === undefined) {\n                id = _tplCounter++\n                tplIds.set(template, id)\n            }\n            return id\n        },\n        update: options?.update ?? (() => {}),\n    })\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAM,cAAc,oBAAI,QAA0B;AAClD,IAAM,cAAc,oBAAI,QAAkC;AAEnD,SAAS,WACZ,WACA,UACA,SAKG;AACH,QAAM,EAAE,MAAM,KAAK,QAAQ,OAAO,IAAI;AACtC,QAAM,gBAAgB,oBAAI,IAAwB;AAElD,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,OAAW,eAAc,IAAI,KAAK,KAAU;AAAA,EAC5D;AAEA,QAAM,WAAW,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC;AAEzC,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,UAAa,CAAC,SAAS,IAAI,GAAG,GAAG;AACzC,YAAM,OAAO;AACb,kBAAY,OAAO,KAAK;AACxB,kBAAY,OAAO,KAAK;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,OAAgB;AACpB,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AAClC,UAAM,OAAO,KAAK,CAAC;AACnB,UAAM,MAAM,OAAO,MAAM,CAAC;AAC1B,QAAI,KAAK,cAAc,IAAI,GAAG;AAE9B,QAAI,CAAC,IAAI;AACL,WAAM,SAAS,QAAQ,UAAU,IAAI,EAChC;AACL,kBAAY,IAAI,IAAI,GAAG;AAAA,IAC3B;AAEA,QAAI,YAAY,IAAI,EAAE,MAAM,MAAM;AAC9B,aAAO,IAAI,IAAI;AACf,kBAAY,IAAI,IAAI,IAAI;AAAA,IAC5B;AAEA,UAAM,WAAW,OACb,KAAK,qBACL,UAAU;AAEd,QAAI,OAAO,UAAU;AACjB,UAAI,KAAM,MAAK,MAAM,EAAE;AAAA,UAClB,WAAU,QAAQ,EAAE;AAAA,IAC7B;AAEA,WAAO;AAAA,EACX;AACJ;AAxDgB;AA0DhB,IAAI,cAAc;AAClB,IAAM,SAAS,oBAAI,QAAqC;AAEjD,SAAS,OACZ,WACA,UACA,SAIG;AACH,aAAiB,WAAW,UAAU;AAAA,IAClC,MAAM;AAAA,MACF,YAAY,UAAa,UAAU,UAC/B,QAAQ,OACR,CAAC;AAAA,IACT;AAAA,IACA,KAAK,6BAAM;AACP,UAAI,KAAK,OAAO,IAAI,QAAQ;AAC5B,UAAI,OAAO,QAAW;AAClB,aAAK;AACL,eAAO,IAAI,UAAU,EAAE;AAAA,MAC3B;AACA,aAAO;AAAA,IACX,GAPK;AAAA,IAQL,QAAQ,SAAS,WAAW,MAAM;AAAA,IAAC;AAAA,EACvC,CAAC;AACL;AAxBgB;",
   "names": []
 }

package/dist/render.d.ts

@@ -1,12 +1,10 @@
-export type RenderListOptions<T, E extends Element = Element> = {
+export declare function renderList<T, E extends Element = Element>(container: Element, template: HTMLTemplateElement, options: {
     data: readonly T[];
     key: (item: T, index: number) => string | number;
     update: (el: E, item: T) => void;
-};
-export type RenderOptions<T, E extends Element = Element> = {
+}): void;
+export declare function render<T, E extends Element = Element>(container: Element, template: HTMLTemplateElement, options?: {
     data?: T;
     update?: (el: E, item: T) => void;
-};
-export declare function renderList<T, E extends Element = Element>(container: Element, template: HTMLTemplateElement, options: RenderListOptions<T, E>): void;
-export declare function render<T, E extends Element = Element>(container: Element, template: HTMLTemplateElement, options?: RenderOptions<T, E>): void;
+}): void;
 //# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IAC5D,IAAI,EAAC,SAAS,CAAC,EAAE,CAAC;IAClB,GAAG,EAAC,CAAC,IAAI,EAAC,CAAC,EAAE,KAAK,EAAC,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC9C,MAAM,EAAC,CAAC,EAAE,EAAC,CAAC,EAAE,IAAI,EAAC,CAAC,KAAK,IAAI,CAAC;CACjC,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IACxD,IAAI,CAAC,EAAC,CAAC,CAAC;IACR,MAAM,CAAC,EAAC,CAAC,EAAE,EAAC,CAAC,EAAE,IAAI,EAAC,CAAC,KAAK,IAAI,CAAC;CAClC,CAAA;AAKD,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,EACrD,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAC,mBAAmB,EAC5B,OAAO,EAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GACjC,IAAI,CAgDL;AAKD,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,EACjD,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAC,mBAAmB,EAC5B,OAAO,CAAC,EAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,GAC9B,IAAI,CAiBL"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,EACrD,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAC,mBAAmB,EAC5B,OAAO,EAAC;IACJ,IAAI,EAAC,SAAS,CAAC,EAAE,CAAC;IAClB,GAAG,EAAC,CAAC,IAAI,EAAC,CAAC,EAAE,KAAK,EAAC,MAAM,KAAK,MAAM,GAAC,MAAM,CAAC;IAC5C,MAAM,EAAC,CAAC,EAAE,EAAC,CAAC,EAAE,IAAI,EAAC,CAAC,KAAK,IAAI,CAAC;CACjC,GACH,IAAI,CAgDL;AAKD,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,EACjD,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAC,mBAAmB,EAC5B,OAAO,CAAC,EAAC;IACL,IAAI,CAAC,EAAC,CAAC,CAAC;IACR,MAAM,CAAC,EAAC,CAAC,EAAE,EAAC,CAAC,EAAE,IAAI,EAAC,CAAC,KAAK,IAAI,CAAC;CAClC,GACH,IAAI,CAiBL"}

package/dist/render.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/render.ts"],
-  "sourcesContent": ["export type RenderListOptions<T, E extends Element = Element> = {\n    data:readonly T[];\n    key:(item:T, index:number) => string | number;\n    update:(el:E, item:T) => void;\n}\n\nexport type RenderOptions<T, E extends Element = Element> = {\n    data?:T;\n    update?:(el:E, item:T) => void;\n}\n\nconst elementData = new WeakMap<Element, unknown>()\nconst elementKeys = new WeakMap<Element, string | number>()\n\nexport function renderList<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options:RenderListOptions<T, E>\n):void {\n    const { data, key: getKey, update } = options\n    const existingByKey = new Map<string | number, E>()\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key !== undefined) existingByKey.set(key, child as E)\n    }\n\n    const dataKeys = new Set(data.map(getKey))\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key === undefined || !dataKeys.has(key)) {\n            child.remove()\n            elementKeys.delete(child)\n            elementData.delete(child)\n        }\n    }\n\n    let prev:E | null = null\n    for (let i = 0; i < data.length; i++) {\n        const item = data[i]\n        const key = getKey(item, i)\n        let el = existingByKey.get(key)\n\n        if (!el) {\n            el = (template.content.cloneNode(true) as Element)\n                .firstElementChild as E\n            elementKeys.set(el, key)\n        }\n\n        if (elementData.get(el) !== item) {\n            update(el, item)\n            elementData.set(el, item)\n        }\n\n        const expected = prev ?\n            prev.nextElementSibling :\n            container.firstElementChild\n\n        if (el !== expected) {\n            if (prev) prev.after(el)\n            else container.prepend(el)\n        }\n\n        prev = el\n    }\n}\n\nlet _tplCounter = 0\nconst tplIds = new WeakMap<HTMLTemplateElement, number>()\n\nexport function render<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options?:RenderOptions<T, E>\n):void {\n    renderList<T, E>(container, template, {\n        data: [\n            options !== undefined && 'data' in options ?\n                options.data as T :\n                {} as T\n        ],\n        key: () => {\n            let id = tplIds.get(template)\n            if (id === undefined) {\n                id = _tplCounter++\n                tplIds.set(template, id)\n            }\n            return id\n        },\n        update: options?.update ?? (() => {}),\n    })\n}\n"],
-  "mappings": ";;;;;AAWA,IAAM,cAAc,oBAAI,QAA0B;AAClD,IAAM,cAAc,oBAAI,QAAkC;AAEnD,SAAS,WACZ,WACA,UACA,SACG;AACH,QAAM,EAAE,MAAM,KAAK,QAAQ,OAAO,IAAI;AACtC,QAAM,gBAAgB,oBAAI,IAAwB;AAElD,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,OAAW,eAAc,IAAI,KAAK,KAAU;AAAA,EAC5D;AAEA,QAAM,WAAW,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC;AAEzC,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,UAAa,CAAC,SAAS,IAAI,GAAG,GAAG;AACzC,YAAM,OAAO;AACb,kBAAY,OAAO,KAAK;AACxB,kBAAY,OAAO,KAAK;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,OAAgB;AACpB,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AAClC,UAAM,OAAO,KAAK,CAAC;AACnB,UAAM,MAAM,OAAO,MAAM,CAAC;AAC1B,QAAI,KAAK,cAAc,IAAI,GAAG;AAE9B,QAAI,CAAC,IAAI;AACL,WAAM,SAAS,QAAQ,UAAU,IAAI,EAChC;AACL,kBAAY,IAAI,IAAI,GAAG;AAAA,IAC3B;AAEA,QAAI,YAAY,IAAI,EAAE,MAAM,MAAM;AAC9B,aAAO,IAAI,IAAI;AACf,kBAAY,IAAI,IAAI,IAAI;AAAA,IAC5B;AAEA,UAAM,WAAW,OACb,KAAK,qBACL,UAAU;AAEd,QAAI,OAAO,UAAU;AACjB,UAAI,KAAM,MAAK,MAAM,EAAE;AAAA,UAClB,WAAU,QAAQ,EAAE;AAAA,IAC7B;AAEA,WAAO;AAAA,EACX;AACJ;AApDgB;AAsDhB,IAAI,cAAc;AAClB,IAAM,SAAS,oBAAI,QAAqC;AAEjD,SAAS,OACZ,WACA,UACA,SACG;AACH,aAAiB,WAAW,UAAU;AAAA,IAClC,MAAM;AAAA,MACF,YAAY,UAAa,UAAU,UAC/B,QAAQ,OACR,CAAC;AAAA,IACT;AAAA,IACA,KAAK,6BAAM;AACP,UAAI,KAAK,OAAO,IAAI,QAAQ;AAC5B,UAAI,OAAO,QAAW;AAClB,aAAK;AACL,eAAO,IAAI,UAAU,EAAE;AAAA,MAC3B;AACA,aAAO;AAAA,IACX,GAPK;AAAA,IAQL,QAAQ,SAAS,WAAW,MAAM;AAAA,IAAC;AAAA,EACvC,CAAC;AACL;AArBgB;",
+  "sourcesContent": ["const elementData = new WeakMap<Element, unknown>()\nconst elementKeys = new WeakMap<Element, string | number>()\n\nexport function renderList<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options:{\n        data:readonly T[];\n        key:(item:T, index:number) => string|number;\n        update:(el:E, item:T) => void;\n    }\n):void {\n    const { data, key: getKey, update } = options\n    const existingByKey = new Map<string | number, E>()\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key !== undefined) existingByKey.set(key, child as E)\n    }\n\n    const dataKeys = new Set(data.map(getKey))\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key === undefined || !dataKeys.has(key)) {\n            child.remove()\n            elementKeys.delete(child)\n            elementData.delete(child)\n        }\n    }\n\n    let prev:E | null = null\n    for (let i = 0; i < data.length; i++) {\n        const item = data[i]\n        const key = getKey(item, i)\n        let el = existingByKey.get(key)\n\n        if (!el) {\n            el = (template.content.cloneNode(true) as Element)\n                .firstElementChild as E\n            elementKeys.set(el, key)\n        }\n\n        if (elementData.get(el) !== item) {\n            update(el, item)\n            elementData.set(el, item)\n        }\n\n        const expected = prev ?\n            prev.nextElementSibling :\n            container.firstElementChild\n\n        if (el !== expected) {\n            if (prev) prev.after(el)\n            else container.prepend(el)\n        }\n\n        prev = el\n    }\n}\n\nlet _tplCounter = 0\nconst tplIds = new WeakMap<HTMLTemplateElement, number>()\n\nexport function render<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options?:{\n        data?:T;\n        update?:(el:E, item:T) => void;\n    }\n):void {\n    renderList<T, E>(container, template, {\n        data: [\n            options !== undefined && 'data' in options ?\n                options.data as T :\n                {} as T\n        ],\n        key: () => {\n            let id = tplIds.get(template)\n            if (id === undefined) {\n                id = _tplCounter++\n                tplIds.set(template, id)\n            }\n            return id\n        },\n        update: options?.update ?? (() => {}),\n    })\n}\n"],
+  "mappings": ";;;;;AAAA,IAAM,cAAc,oBAAI,QAA0B;AAClD,IAAM,cAAc,oBAAI,QAAkC;AAEnD,SAAS,WACZ,WACA,UACA,SAKG;AACH,QAAM,EAAE,MAAM,KAAK,QAAQ,OAAO,IAAI;AACtC,QAAM,gBAAgB,oBAAI,IAAwB;AAElD,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,OAAW,eAAc,IAAI,KAAK,KAAU;AAAA,EAC5D;AAEA,QAAM,WAAW,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC;AAEzC,aAAW,SAAS,MAAM,KAAK,UAAU,QAAQ,GAAG;AAChD,UAAM,MAAM,YAAY,IAAI,KAAK;AACjC,QAAI,QAAQ,UAAa,CAAC,SAAS,IAAI,GAAG,GAAG;AACzC,YAAM,OAAO;AACb,kBAAY,OAAO,KAAK;AACxB,kBAAY,OAAO,KAAK;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,OAAgB;AACpB,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AAClC,UAAM,OAAO,KAAK,CAAC;AACnB,UAAM,MAAM,OAAO,MAAM,CAAC;AAC1B,QAAI,KAAK,cAAc,IAAI,GAAG;AAE9B,QAAI,CAAC,IAAI;AACL,WAAM,SAAS,QAAQ,UAAU,IAAI,EAChC;AACL,kBAAY,IAAI,IAAI,GAAG;AAAA,IAC3B;AAEA,QAAI,YAAY,IAAI,EAAE,MAAM,MAAM;AAC9B,aAAO,IAAI,IAAI;AACf,kBAAY,IAAI,IAAI,IAAI;AAAA,IAC5B;AAEA,UAAM,WAAW,OACb,KAAK,qBACL,UAAU;AAEd,QAAI,OAAO,UAAU;AACjB,UAAI,KAAM,MAAK,MAAM,EAAE;AAAA,UAClB,WAAU,QAAQ,EAAE;AAAA,IAC7B;AAEA,WAAO;AAAA,EACX;AACJ;AAxDgB;AA0DhB,IAAI,cAAc;AAClB,IAAM,SAAS,oBAAI,QAAqC;AAEjD,SAAS,OACZ,WACA,UACA,SAIG;AACH,aAAiB,WAAW,UAAU;AAAA,IAClC,MAAM;AAAA,MACF,YAAY,UAAa,UAAU,UAC/B,QAAQ,OACR,CAAC;AAAA,IACT;AAAA,IACA,KAAK,6BAAM;AACP,UAAI,KAAK,OAAO,IAAI,QAAQ;AAC5B,UAAI,OAAO,QAAW;AAClB,aAAK;AACL,eAAO,IAAI,UAAU,EAAE;AAAA,MAC3B;AACA,aAAO;AAAA,IACX,GAPK;AAAA,IAQL,QAAQ,SAAS,WAAW,MAAM;AAAA,IAAC;AAAA,EACvC,CAAC;AACL;AAxBgB;",
   "names": []
 }

package/dist/render.min.js

@@ -1,2 +1,2 @@
-var g=Object.defineProperty;var a=(d,i)=>g(d,"name",{value:i,configurable:!0});var o=new WeakMap,m=new WeakMap;function x(d,i,s){let{data:l,key:E,update:T}=s,p=new Map;for(let e of Array.from(d.children)){let t=m.get(e);t!==void 0&&p.set(t,e)}let c=new Set(l.map(E));for(let e of Array.from(d.children)){let t=m.get(e);(t===void 0||!c.has(t))&&(e.remove(),m.delete(e),o.delete(e))}let r=null;for(let e=0;e<l.length;e++){let t=l[e],f=E(t,e),n=p.get(f);n||(n=i.content.cloneNode(!0).firstElementChild,m.set(n,f)),o.get(n)!==t&&(T(n,t),o.set(n,t));let y=r?r.nextElementSibling:d.firstElementChild;n!==y&&(r?r.after(n):d.prepend(n)),r=n}}a(x,"renderList");var k=0,u=new WeakMap;function M(d,i,s){x(d,i,{data:[s!==void 0&&"data"in s?s.data:{}],key:a(()=>{let l=u.get(i);return l===void 0&&(l=k++,u.set(i,l)),l},"key"),update:s?.update??(()=>{})})}a(M,"render");export{M as render,x as renderList};
+var g=Object.defineProperty;var s=(l,a)=>g(l,"name",{value:a,configurable:!0});var o=new WeakMap,m=new WeakMap;function k(l,a,i){let{data:d,key:E,update:p}=i,f=new Map;for(let e of Array.from(l.children)){let t=m.get(e);t!==void 0&&f.set(t,e)}let T=new Set(d.map(E));for(let e of Array.from(l.children)){let t=m.get(e);(t===void 0||!T.has(t))&&(e.remove(),m.delete(e),o.delete(e))}let r=null;for(let e=0;e<d.length;e++){let t=d[e],u=E(t,e),n=f.get(u);n||(n=a.content.cloneNode(!0).firstElementChild,m.set(n,u)),o.get(n)!==t&&(p(n,t),o.set(n,t));let y=r?r.nextElementSibling:l.firstElementChild;n!==y&&(r?r.after(n):l.prepend(n)),r=n}}s(k,"renderList");var h=0,c=new WeakMap;function M(l,a,i){k(l,a,{data:[i!==void 0&&"data"in i?i.data:{}],key:s(()=>{let d=c.get(a);return d===void 0&&(d=h++,c.set(a,d)),d},"key"),update:i?.update??(()=>{})})}s(M,"render");export{M as render,k as renderList};
 //# sourceMappingURL=render.min.js.map

package/dist/render.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/render.ts"],
-  "sourcesContent": ["export type RenderListOptions<T, E extends Element = Element> = {\n    data:readonly T[];\n    key:(item:T, index:number) => string | number;\n    update:(el:E, item:T) => void;\n}\n\nexport type RenderOptions<T, E extends Element = Element> = {\n    data?:T;\n    update?:(el:E, item:T) => void;\n}\n\nconst elementData = new WeakMap<Element, unknown>()\nconst elementKeys = new WeakMap<Element, string | number>()\n\nexport function renderList<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options:RenderListOptions<T, E>\n):void {\n    const { data, key: getKey, update } = options\n    const existingByKey = new Map<string | number, E>()\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key !== undefined) existingByKey.set(key, child as E)\n    }\n\n    const dataKeys = new Set(data.map(getKey))\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key === undefined || !dataKeys.has(key)) {\n            child.remove()\n            elementKeys.delete(child)\n            elementData.delete(child)\n        }\n    }\n\n    let prev:E | null = null\n    for (let i = 0; i < data.length; i++) {\n        const item = data[i]\n        const key = getKey(item, i)\n        let el = existingByKey.get(key)\n\n        if (!el) {\n            el = (template.content.cloneNode(true) as Element)\n                .firstElementChild as E\n            elementKeys.set(el, key)\n        }\n\n        if (elementData.get(el) !== item) {\n            update(el, item)\n            elementData.set(el, item)\n        }\n\n        const expected = prev ?\n            prev.nextElementSibling :\n            container.firstElementChild\n\n        if (el !== expected) {\n            if (prev) prev.after(el)\n            else container.prepend(el)\n        }\n\n        prev = el\n    }\n}\n\nlet _tplCounter = 0\nconst tplIds = new WeakMap<HTMLTemplateElement, number>()\n\nexport function render<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options?:RenderOptions<T, E>\n):void {\n    renderList<T, E>(container, template, {\n        data: [\n            options !== undefined && 'data' in options ?\n                options.data as T :\n                {} as T\n        ],\n        key: () => {\n            let id = tplIds.get(template)\n            if (id === undefined) {\n                id = _tplCounter++\n                tplIds.set(template, id)\n            }\n            return id\n        },\n        update: options?.update ?? (() => {}),\n    })\n}\n"],
-  "mappings": "+EAWA,IAAMA,EAAc,IAAI,QAClBC,EAAc,IAAI,QAEjB,SAASC,EACZC,EACAC,EACAC,EACG,CACH,GAAM,CAAE,KAAAC,EAAM,IAAKC,EAAQ,OAAAC,CAAO,EAAIH,EAChCI,EAAgB,IAAI,IAE1B,QAAWC,KAAS,MAAM,KAAKP,EAAU,QAAQ,EAAG,CAChD,IAAMQ,EAAMV,EAAY,IAAIS,CAAK,EAC7BC,IAAQ,QAAWF,EAAc,IAAIE,EAAKD,CAAU,CAC5D,CAEA,IAAME,EAAW,IAAI,IAAIN,EAAK,IAAIC,CAAM,CAAC,EAEzC,QAAWG,KAAS,MAAM,KAAKP,EAAU,QAAQ,EAAG,CAChD,IAAMQ,EAAMV,EAAY,IAAIS,CAAK,GAC7BC,IAAQ,QAAa,CAACC,EAAS,IAAID,CAAG,KACtCD,EAAM,OAAO,EACbT,EAAY,OAAOS,CAAK,EACxBV,EAAY,OAAOU,CAAK,EAEhC,CAEA,IAAIG,EAAgB,KACpB,QAASC,EAAI,EAAGA,EAAIR,EAAK,OAAQQ,IAAK,CAClC,IAAMC,EAAOT,EAAKQ,CAAC,EACbH,EAAMJ,EAAOQ,EAAMD,CAAC,EACtBE,EAAKP,EAAc,IAAIE,CAAG,EAEzBK,IACDA,EAAMZ,EAAS,QAAQ,UAAU,EAAI,EAChC,kBACLH,EAAY,IAAIe,EAAIL,CAAG,GAGvBX,EAAY,IAAIgB,CAAE,IAAMD,IACxBP,EAAOQ,EAAID,CAAI,EACff,EAAY,IAAIgB,EAAID,CAAI,GAG5B,IAAME,EAAWJ,EACbA,EAAK,mBACLV,EAAU,kBAEVa,IAAOC,IACHJ,EAAMA,EAAK,MAAMG,CAAE,EAClBb,EAAU,QAAQa,CAAE,GAG7BH,EAAOG,CACX,CACJ,CApDgBE,EAAAhB,EAAA,cAsDhB,IAAIiB,EAAc,EACZC,EAAS,IAAI,QAEZ,SAASC,EACZlB,EACAC,EACAC,EACG,CACHH,EAAiBC,EAAWC,EAAU,CAClC,KAAM,CACFC,IAAY,QAAa,SAAUA,EAC/BA,EAAQ,KACR,CAAC,CACT,EACA,IAAKa,EAAA,IAAM,CACP,IAAII,EAAKF,EAAO,IAAIhB,CAAQ,EAC5B,OAAIkB,IAAO,SACPA,EAAKH,IACLC,EAAO,IAAIhB,EAAUkB,CAAE,GAEpBA,CACX,EAPK,OAQL,OAAQjB,GAAS,SAAW,IAAM,CAAC,EACvC,CAAC,CACL,CArBgBa,EAAAG,EAAA",
+  "sourcesContent": ["const elementData = new WeakMap<Element, unknown>()\nconst elementKeys = new WeakMap<Element, string | number>()\n\nexport function renderList<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options:{\n        data:readonly T[];\n        key:(item:T, index:number) => string|number;\n        update:(el:E, item:T) => void;\n    }\n):void {\n    const { data, key: getKey, update } = options\n    const existingByKey = new Map<string | number, E>()\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key !== undefined) existingByKey.set(key, child as E)\n    }\n\n    const dataKeys = new Set(data.map(getKey))\n\n    for (const child of Array.from(container.children)) {\n        const key = elementKeys.get(child)\n        if (key === undefined || !dataKeys.has(key)) {\n            child.remove()\n            elementKeys.delete(child)\n            elementData.delete(child)\n        }\n    }\n\n    let prev:E | null = null\n    for (let i = 0; i < data.length; i++) {\n        const item = data[i]\n        const key = getKey(item, i)\n        let el = existingByKey.get(key)\n\n        if (!el) {\n            el = (template.content.cloneNode(true) as Element)\n                .firstElementChild as E\n            elementKeys.set(el, key)\n        }\n\n        if (elementData.get(el) !== item) {\n            update(el, item)\n            elementData.set(el, item)\n        }\n\n        const expected = prev ?\n            prev.nextElementSibling :\n            container.firstElementChild\n\n        if (el !== expected) {\n            if (prev) prev.after(el)\n            else container.prepend(el)\n        }\n\n        prev = el\n    }\n}\n\nlet _tplCounter = 0\nconst tplIds = new WeakMap<HTMLTemplateElement, number>()\n\nexport function render<T, E extends Element = Element> (\n    container:Element,\n    template:HTMLTemplateElement,\n    options?:{\n        data?:T;\n        update?:(el:E, item:T) => void;\n    }\n):void {\n    renderList<T, E>(container, template, {\n        data: [\n            options !== undefined && 'data' in options ?\n                options.data as T :\n                {} as T\n        ],\n        key: () => {\n            let id = tplIds.get(template)\n            if (id === undefined) {\n                id = _tplCounter++\n                tplIds.set(template, id)\n            }\n            return id\n        },\n        update: options?.update ?? (() => {}),\n    })\n}\n"],
+  "mappings": "+EAAA,IAAMA,EAAc,IAAI,QAClBC,EAAc,IAAI,QAEjB,SAASC,EACZC,EACAC,EACAC,EAKG,CACH,GAAM,CAAE,KAAAC,EAAM,IAAKC,EAAQ,OAAAC,CAAO,EAAIH,EAChCI,EAAgB,IAAI,IAE1B,QAAWC,KAAS,MAAM,KAAKP,EAAU,QAAQ,EAAG,CAChD,IAAMQ,EAAMV,EAAY,IAAIS,CAAK,EAC7BC,IAAQ,QAAWF,EAAc,IAAIE,EAAKD,CAAU,CAC5D,CAEA,IAAME,EAAW,IAAI,IAAIN,EAAK,IAAIC,CAAM,CAAC,EAEzC,QAAWG,KAAS,MAAM,KAAKP,EAAU,QAAQ,EAAG,CAChD,IAAMQ,EAAMV,EAAY,IAAIS,CAAK,GAC7BC,IAAQ,QAAa,CAACC,EAAS,IAAID,CAAG,KACtCD,EAAM,OAAO,EACbT,EAAY,OAAOS,CAAK,EACxBV,EAAY,OAAOU,CAAK,EAEhC,CAEA,IAAIG,EAAgB,KACpB,QAASC,EAAI,EAAGA,EAAIR,EAAK,OAAQQ,IAAK,CAClC,IAAMC,EAAOT,EAAKQ,CAAC,EACbH,EAAMJ,EAAOQ,EAAMD,CAAC,EACtBE,EAAKP,EAAc,IAAIE,CAAG,EAEzBK,IACDA,EAAMZ,EAAS,QAAQ,UAAU,EAAI,EAChC,kBACLH,EAAY,IAAIe,EAAIL,CAAG,GAGvBX,EAAY,IAAIgB,CAAE,IAAMD,IACxBP,EAAOQ,EAAID,CAAI,EACff,EAAY,IAAIgB,EAAID,CAAI,GAG5B,IAAME,EAAWJ,EACbA,EAAK,mBACLV,EAAU,kBAEVa,IAAOC,IACHJ,EAAMA,EAAK,MAAMG,CAAE,EAClBb,EAAU,QAAQa,CAAE,GAG7BH,EAAOG,CACX,CACJ,CAxDgBE,EAAAhB,EAAA,cA0DhB,IAAIiB,EAAc,EACZC,EAAS,IAAI,QAEZ,SAASC,EACZlB,EACAC,EACAC,EAIG,CACHH,EAAiBC,EAAWC,EAAU,CAClC,KAAM,CACFC,IAAY,QAAa,SAAUA,EAC/BA,EAAQ,KACR,CAAC,CACT,EACA,IAAKa,EAAA,IAAM,CACP,IAAII,EAAKF,EAAO,IAAIhB,CAAQ,EAC5B,OAAIkB,IAAO,SACPA,EAAKH,IACLC,EAAO,IAAIhB,EAAUkB,CAAE,GAEpBA,CACX,EAPK,OAQL,OAAQjB,GAAS,SAAW,IAAM,CAAC,EACvC,CAAC,CACL,CAxBgBa,EAAAG,EAAA",
   "names": ["elementData", "elementKeys", "renderList", "container", "template", "options", "data", "getKey", "update", "existingByKey", "child", "key", "dataKeys", "prev", "i", "item", "el", "expected", "__name", "_tplCounter", "tplIds", "render", "id"]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "microtags",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "sideEffects": [
     "./example/**"
   ],