@substrate-system/tonic 17.0.0 → 17.1.0

package/README.md

@@ -31,12 +31,14 @@ with all modern browsers. It's built on top of
   * [Rerender](#rerender)
   * [Events](#events)
   * [State](#state)
-- [API](#api)
-  * [Event listeners](#event-listeners)
-- [DOM state](#dom-state)
+- [Server-Side Rendering](#server-side-rendering)
+  * [SSR Example](#ssr-example)
+  * [Async Components](#async-components)
 - [docs](#docs)
 - [types](#types)
-- [`tag`](#tag)
+- [API](#api)
+  * [Event listeners](#event-listeners)
+  * [`tag`](#tag)
   * [`emit`](#emit)
   * [`static event`](#static-event)
   * [`dispatch`](#dispatch)
@@ -64,6 +66,10 @@ This is a front-end view library, like React, but using web components.
 > DOM state, such as element focus and input values, is preserved
 > across multiple calls to `reRender`.
 
+
+-------
+
+
 ## Use
 
 ### Bundler
@@ -245,11 +251,11 @@ class ButtonExample extends Tonic {
 ### State
 
 `this.state` is a plain-old javascript object. Its value will be persisted if
-the component is re-rendered. Any element that has an id attribute can use
-state, and any component that uses state must have an id property.
+the component is re-rendered. **Any component with state must have an**
+**id property**.
 
 Setting the state will not cause a component to re-render. This way you can
-make incremental updates. Components can be updated independently. And
+make incremental updates. Components can be updated independently, and
 rendering only happens only when necessary.
 
 Remember to clean up! States are just a set of key-value pairs on the Tonic
@@ -260,6 +266,106 @@ all use state, I should delete their state after they get destroyed.
 Delete `Tonic._states[someRandomId]`
 
 
+## Server-Side Rendering
+
+Tonic includes a `renderToString` function that converts component instances
+to static HTML strings, making it easy to implement server-side rendering.
+
+The `renderToString` function will process nested Tonic components recursively.
+
+### SSR Example
+
+#### The Component
+
+```js
+// my-component.js
+import Tonic from '@substrate-system/tonic'
+
+export class MyComponent extends Tonic {
+  render () {
+    return this.html`<div class="greeting">
+      Hello, ${this.props.name}!
+    </div>`
+  }
+}
+```
+
+#### Render
+
+Need to import `Tonic` after `render`, because it will polyfill some globals.
+
+```js
+// this runs in node
+import {
+  render as renderToString
+} from '@substrate-system/tonic/render-to-string'
+// Import Tonic after render-to-string
+import { Tonic } from '@substrate-system/tonic'
+import { MyComponent } from './my-component.js'
+
+// Create a component instance
+const component = new MyComponent()
+component.props = { name: 'World' }
+
+// Render to HTML string
+const html = await renderToString(component)
+console.log(html)
+
+// => '<div class="greeting">Hello, World!</div>'
+```
+
+#### Nested Components
+
+```js
+class InnerComponent extends Tonic {
+  render () {
+    return this.html`<span>${this.props.text}</span>`
+  }
+}
+
+class OuterComponent extends Tonic {
+  render () {
+    return this.html`
+      <div class="outer">
+        <inner-component text="Nested content"></inner-component>
+      </div>
+    `
+  }
+}
+
+Tonic.add(InnerComponent)
+Tonic.add(OuterComponent)
+
+const component = new OuterComponent()
+const html = await renderToString(component)
+// Nested components are rendered correctly
+```
+
+### Async Components
+
+The `renderToString` function works with async component render methods:
+
+```js
+class AsyncComponent extends Tonic {
+  async render () {
+    const data = await fetchData()
+    return this.html`<div>${data}</div>`
+  }
+}
+
+Tonic.add(AsyncComponent)
+
+const component = new AsyncComponent()
+const html = await renderToString(component)
+// Waits for async render to complete
+```
+
+## docs
+See [API docs](https://substrate-system.github.io/tonic/).
+
+## types
+See [src/index.ts](./src/index.ts).
+
 ## API
 
 ### Event listeners
@@ -288,22 +394,16 @@ class MyClicker extends Tonic {
 Tonic.add(MyClicker)
 ```
 
+-------
 
-## DOM state
+### `tag`
 
-DOM state (like element focus) should be preserved across re-renders.
-
-## docs
-See [API docs](https://substrate-system.github.io/tonic/).
-
-## types
-See [src/index.ts](./src/index.ts).
-
-## `tag`
 Get the HTML tag name given a Tonic class.
 
 ```ts
-static get tag():string;
+class Tonic {
+  static get tag():string;
+}
 ```
 
 ```js
@@ -326,10 +426,12 @@ Given an event name, the dispatched event will be prefixed with the element
 name, for example, `my-element:event-name`.
 
 ```ts
-emit (type:string, detail:string|object|any[] = {}, opts:Partial<{
-    bubbles:boolean;
-    cancelable:boolean
-}> = {}):boolean
+{
+  emit (type:string, detail:string|object|any[] = {}, opts:Partial<{
+      bubbles:boolean;
+      cancelable:boolean
+  }> = {}):boolean
+}
 ```
 
 #### emit example

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import morphdom from '@substrate-system/morphdom'\n\nexport class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|TemplateStringsArray|null\n    isTonicTemplate:true\n\n    constructor (\n        rawText,\n        templateStrings?:string[]|TemplateStringsArray|null,\n        unsafe?:boolean\n    ) {\n        this.isTonicTemplate = true\n        this.unsafe = !!unsafe\n        this.rawText = rawText\n        this.templateStrings = templateStrings\n    }\n\n    valueOf () { return this.rawText }\n    toString () { return this.rawText }\n}\n\n/**\n * Class Tonic\n *\n * @template {T extends object = Record<string, any>} T Type of the props\n */\nexport abstract class Tonic<\n    T extends { [key:string]:any}=Record<string, any>\n> extends window.HTMLElement {\n    private static _tags = ''\n    private static _refIds:string[] = []\n    private static _data = {}\n    private static _states = {}\n    private static _children = {}\n    private static _reg = {}\n    private static _stylesheetRegistry:(()=>string)[] = []\n    private static _index = 0\n    // @ts-expect-error VERSION is injected during build\n    static get version () { return VERSION ?? null }\n    static get SPREAD () { return /\\.\\.\\.\\s?(__\\w+__\\w+__)/g }\n    static get ESC () { return /[\"&'<>`/]/g }\n    static get AsyncFunctionGenerator ():AsyncGeneratorFunctionConstructor {\n        return (async function * () {\n        }.constructor) as AsyncGeneratorFunctionConstructor\n    }\n    // eslint-disable-next-line\n    static get AsyncFunction ():Function {\n        return (async function () {}.constructor)\n    }\n\n    static get MAP () {\n        /* eslint-disable object-property-newline, object-property-newline,\n        object-curly-newline */\n        return { '\"': '&quot;', '&': '&amp;', '\\'': '&#x27;', '<': '&lt;',\n            '>': '&gt;', '`': '&#x60;', '/': '&#x2F;' }\n    }\n\n    static ssr\n    static nonce\n\n    private _state:any\n    stylesheet?:()=>string\n    styles:()=>string\n    props:T\n    preventRenderOnReconnect:boolean\n    private _id:string\n    pendingReRender?:Promise<this>|null\n    updated?:((props:Record<string, any>)=>any)\n    willRender?:(()=>any)\n    root?:ShadowRoot|this\n    willConnect?:()=>any\n    private _source?:string\n    connected?:()=>void\n    disconnected?:()=>void\n\n    private elements:Element[] & { __children__? }\n    private nodes:ChildNode[] & { __children__? }\n    private _props = Tonic.getPropertyNames(this)\n\n    constructor () {\n        super()\n        const state = Tonic._states[super.id]\n        delete Tonic._states[super.id]\n        this._state = state || {}\n        this.preventRenderOnReconnect = false\n        this.props = {} as T\n        this.elements = [...this.children]\n        this.elements.__children__ = true\n        this.nodes = [...this.childNodes]\n        this.nodes.__children__ = true\n        this._events()\n    }\n\n    abstract render ():TonicTemplate|Promise<TonicTemplate>\n\n    defaults ():Record<string, any>|undefined {\n        return {}\n    }\n\n    get isTonicComponent ():true {\n        return true\n    }\n\n    /**\n     * Get a namespaced event name, given a non-namespaced string.\n     *\n     * @example\n     * MyElement.event('example')  // => my-element:example\n     *\n     * @param {string} type The name of the event\n     * @returns {string} The namespaced event name\n     */\n    static event (type:string):string {\n        return `${this.tag}:${type}`\n    }\n\n    /**\n     * Get the tag name of this component.\n     */\n    static get tag ():string {\n        return Tonic.getTagName(this.name)\n    }\n\n    private static _createId () {\n        return `tonic${Tonic._index++}`\n    }\n\n    private static _normalizeAttrs (o, x = {}) {\n        [...o].forEach(o => (x[o.name] = o.value))\n        return x\n    }\n\n    private _checkId () {\n        const _id = super.id\n        if (!_id) {\n            const html = this.outerHTML.replace(this.innerHTML, '...')\n            throw new Error(`Component: ${html} has no id`)\n        }\n        return _id\n    }\n\n    /**\n     * Get the component state property.\n     */\n    get state () {\n        return (this._checkId(), this._state)\n    }\n\n    set state (newState) {\n        this._state = (this._checkId(), newState)\n    }\n\n    private _events () {\n        const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype)\n        // this is where we map methods like `handle_click` to event handlers.\n        // look at the HTMLElement prototype, and if it is has a method like\n        // `onclick`, then add an event listener for 'click'\n        for (const p of this._props) {\n            if (!p.includes('handle_')) continue\n            const evName = p.split('_')[1]\n\n            if (hp.indexOf('on' + evName) === -1) continue\n            this.addEventListener(evName, this)\n        }\n    }\n\n    private _prop (o) {\n        const id = this._id\n        const p = `__${id}__${Tonic._createId()}__`\n        Tonic._data[id] = Tonic._data[id] || {}\n        Tonic._data[id][p] = o\n        return p\n    }\n\n    private _placehold (r) {\n        const id = this._id\n        const ref = `placehold:${id}:${Tonic._createId()}__`\n        Tonic._children[id] = Tonic._children[id] || {}\n        Tonic._children[id][ref] = r\n        return ref\n    }\n\n    static match (el:HTMLElement, s:string) {\n        if (!el.matches) el = el.parentElement!\n        return el.matches(s) ? el : el.closest(s)\n    }\n\n    static getTagName (camelName:string) {\n        return camelName.match(/[A-Z][a-z0-9]*/g)!.join('-').toLowerCase()\n    }\n\n    /**\n     * Add all methods to this._props\n     */\n    static getPropertyNames (proto) {\n        const props:string[] = []\n        while (proto && proto !== Tonic.prototype) {\n            props.push(...Object.getOwnPropertyNames(proto))\n            proto = Object.getPrototypeOf(proto)\n        }\n        return props\n    }\n\n    /**\n     * Add a component. Calls `window.customElements.define` with the\n     * component's name.\n     *\n     * @param {Tonic} c Component to add\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add (c, htmlName?:string) {\n        const hasValidName = htmlName || (c.name && c.name.length > 1)\n        if (!hasValidName) {\n            throw Error('Mangling. https://bit.ly/2TkJ6zP')\n        }\n\n        if (!htmlName) htmlName = Tonic.getTagName(c.name)\n        if (!Tonic.ssr && window.customElements.get(htmlName)) {\n            throw new Error(`Cannot Tonic.add(${c.name}, '${htmlName}') twice`)\n        }\n\n        if (!c.prototype || !c.prototype.isTonicComponent) {\n            const tmp = { [c.name]: class extends Tonic { render } }[c.name]\n            tmp.prototype.render = c\n            c = tmp\n        }\n\n        c.prototype._props = Tonic.getPropertyNames(c.prototype)\n\n        Tonic._reg[htmlName] = c\n        Tonic._tags = Object.keys(Tonic._reg).join()\n        window.customElements.define(htmlName, c as unknown as CustomElementConstructor)\n\n        if (typeof c.stylesheet === 'function') {\n            Tonic.registerStyles(c.stylesheet)\n        }\n\n        return c\n    }\n\n    static registerStyles (stylesheetFn:()=>string) {\n        if (Tonic._stylesheetRegistry.includes(stylesheetFn)) return\n        Tonic._stylesheetRegistry.push(stylesheetFn)\n\n        const styleNode = document.createElement('style')\n        if (Tonic.nonce) styleNode.setAttribute('nonce', Tonic.nonce)\n        styleNode.appendChild(document.createTextNode(stylesheetFn()))\n        if (document.head) document.head.appendChild(styleNode)\n    }\n\n    static escape (s:string):string {\n        return s.replace(Tonic.ESC, c => Tonic.MAP[c])\n    }\n\n    static unsafeRawString (\n        s:string,\n        templateStrings:string[]\n    ):InstanceType<typeof TonicTemplate> {\n        return new TonicTemplate(s, templateStrings, true)\n    }\n\n    /**\n     * Emit a regular, non-namespaced event.\n     *\n     * @param {string} eventName Event name as a string.\n     * @param {any} detail Any data to go with the event.\n     */\n    dispatch (eventName:string, detail:any = null):void {\n        const opts = { bubbles: true, detail }\n        this.dispatchEvent(new window.CustomEvent(eventName, opts))\n    }\n\n    /**\n     * Emit a namespaced event, using a convention for event names.\n     *\n     * @example\n     * myComponent.emit('test')  // => `my-compnent:test`\n     *\n     * @param {string} type The event type, comes after `:` in event name.\n     * @param {string|object|any[]} detail detail for Event constructor\n     * @param {{ bubbles?:boolean, cancelable?:boolean }} opts `Cancelable` and\n     * `bubbles`\n     * @returns {boolean}\n     */\n    emit (type:string, detail:string|object|any[] = {}, opts:Partial<{\n        bubbles:boolean;\n        cancelable:boolean\n    }> = {}):boolean {\n        const namespace = Tonic.getTagName(this.constructor.name)\n        const event = new CustomEvent(`${namespace}:${type}`, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    html (\n        strings:string[]|TemplateStringsArray,\n        ...values\n    ):InstanceType<typeof TonicTemplate> {\n        const refs = o => {\n            if (o && o.__children__) return this._placehold(o)\n            if (o && o.isTonicTemplate) return o.rawText\n            switch (Object.prototype.toString.call(o)) {\n                case '[object HTMLCollection]':\n                case '[object NodeList]': return this._placehold([...o])\n                case '[object Array]': {\n                    if (o.every(x => x.isTonicTemplate && !x.unsafe)) {\n                        return new TonicTemplate(o.join('\\n'), null, false)\n                    }\n                    return this._prop(o)\n                }\n                case '[object Object]':\n                case '[object Function]':\n                case '[object AsyncFunction]':\n                case '[object Set]':\n                case '[object Map]':\n                case '[object WeakMap]':\n                case '[object File]':\n                    return this._prop(o)\n                case '[object NamedNodeMap]':\n                    return this._prop(Tonic._normalizeAttrs(o))\n                case '[object Number]': return `${o}__float`\n                case '[object String]': return Tonic.escape(o)\n                case '[object Boolean]': return `${o}__boolean`\n                case '[object Null]': return `${o}__null`\n                case '[object HTMLElement]':\n                    return this._placehold([o])\n            }\n            if (\n                typeof o === 'object' && o && o.nodeType === 1 &&\n                typeof o.cloneNode === 'function'\n            ) {\n                return this._placehold([o])\n            }\n            return o\n        }\n\n        const out:string[] = []\n        for (let i = 0; i < strings.length - 1; i++) {\n            out.push(strings[i], refs(values[i]))\n        }\n        out.push(strings[strings.length - 1])\n\n        const htmlStr = out.join('').replace(Tonic.SPREAD, (_, p) => {\n            const o = Tonic._data[p.split('__')[1]][p]\n            return Object.entries(o).map(([key, value]) => {\n                const k = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n                if (value === true) return k\n                else if (value) return `${k}=\"${Tonic.escape(String(value))}\"`\n                else return ''\n            }).filter(Boolean).join(' ')\n        })\n            // Process type markers in template content\n            .replace(/(\\d+(?:\\.\\d+)?)__float/g, '$1')\n            .replace(/(true|false)__boolean/g, '$1')\n            .replace(/null__null/g, 'null')\n\n        return new TonicTemplate(htmlStr, strings, false)\n    }\n\n    scheduleReRender (oldProps:any):Promise<this> {\n        if (this.pendingReRender) return this.pendingReRender\n\n        this.pendingReRender = new Promise(resolve => setTimeout(() => {\n            if (!this.isInDocument(this.shadowRoot || this)) return\n            const p = this._set(this.shadowRoot || this, this.render)\n            this.pendingReRender = null\n\n            if (p && p.then) {\n                return p.then(() => {\n                    this.updated && this.updated(oldProps)\n                    resolve(this)\n                })\n            }\n\n            this.updated && this.updated(oldProps)\n            resolve(this)\n        }, 0))\n\n        return this.pendingReRender\n    }\n\n    /**\n     * Update the view\n     */\n    reRender (o:T|((props:T)=>T) = this.props):Promise<this> {\n        const oldProps = { ...this.props }\n        this.props = typeof o === 'function' ? (o as (props:T)=>T)(oldProps) : o\n        return this.scheduleReRender(oldProps)\n    }\n\n    /**\n     * If there is a method with the same name as the event type,\n     * then call the method.\n     * @see {@link https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#what-is-the-handleevent-method What is the handleEvent() method?}\n     */\n    handleEvent (ev:Event):void {\n        this['handle_' + ev.type] && this['handle_' + ev.type](ev)\n    }\n\n    private _drainIterator (target, iterator) {\n        return iterator.next().then((result) => {\n            this._set(target, null, result.value)\n            if (result.done) return\n            return this._drainIterator(target, iterator)\n        })\n    }\n\n    /**\n     * _set\n     * @param {Element|InstanceType<typeof Tonic>|ShadowRoot} target\n     * @param {()=>any} render\n     * @param {string} content\n     * @returns {Promise<void>|void}\n     * @private\n     */\n    private _set (target, render, content = ''):Promise<void>|void {\n        this.willRender && this.willRender()\n        for (const node of target.querySelectorAll(Tonic._tags)) {\n            if (!node.isTonicComponent) continue\n\n            const id = node.getAttribute('id')\n            if (!id || !Tonic._refIds.includes(id)) continue\n            Tonic._states[id] = node.state\n        }\n\n        if (render instanceof Tonic.AsyncFunction) {\n            return ((render as ()=>any)\n                .call(this, this.html, this.props)\n                .then(content => this._apply(target, content))\n            )\n        } else if (render instanceof Tonic.AsyncFunctionGenerator) {\n            return this._drainIterator(target, (render as AsyncGeneratorFunction).call(this))\n        } else if (render === null) {\n            this._apply(target, content)\n        } else if (render instanceof Function) {\n            this._apply(target, render.call(this, this.html, this.props) || '')\n        }\n    }\n\n    private _apply (target, content) {\n        if (content && content.isTonicTemplate) {\n            content = content.rawText\n        } else if (typeof content === 'string') {\n            content = Tonic.escape(content)\n        }\n\n        if (typeof content === 'string') {\n            if (this.stylesheet) {\n                content = `<style nonce=${Tonic.nonce || ''}>${this.stylesheet()}</style>${content}`\n            }\n\n            // Check if we should use morphdom for DOM state preservation\n            const hasFormElements = target.querySelector && (\n                target.querySelector('input') ||\n                target.querySelector('textarea') ||\n                target.querySelector('select')\n            )\n\n            const shouldUseMorphdom = (\n                hasFormElements &&\n                document.activeElement &&\n                (\n                    target.contains(document.activeElement) ||\n                    target === document.activeElement\n                )\n            )\n\n            if (shouldUseMorphdom) {\n                // Use morphdom to preserve DOM state during updates\n                const tempContainer = document.createElement('div')\n                tempContainer.innerHTML = content\n\n                morphdom(target, tempContainer, {\n                    childrenOnly: true,\n                    onBeforeElUpdated: (fromEl, toEl) => {\n                        // Skip updating if the elements are the same and preserve form state\n                        if (fromEl.isEqualNode && fromEl.isEqualNode(toEl)) {\n                            return false\n                        }\n\n                        // For inputs, preserve value and selection\n                        if (fromEl.tagName === 'INPUT' && toEl.tagName === 'INPUT') {\n                            const fromInput = fromEl as HTMLInputElement\n                            const toInput = toEl as HTMLInputElement\n\n                            // Preserve form values\n                            if (fromInput.value !== '') {\n                                toInput.value = fromInput.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromInput) {\n                                toInput.setAttribute('data-preserve-focus', 'true')\n                                toInput.setAttribute('data-selection-start', String(fromInput.selectionStart || 0))\n                                toInput.setAttribute('data-selection-end', String(fromInput.selectionEnd || 0))\n                            }\n                        }\n\n                        // For textareas, preserve value and selection\n                        if (fromEl.tagName === 'TEXTAREA' && toEl.tagName === 'TEXTAREA') {\n                            const fromTextarea = fromEl as HTMLTextAreaElement\n                            const toTextarea = toEl as HTMLTextAreaElement\n\n                            // Preserve form values\n                            if (fromTextarea.value !== '') {\n                                toTextarea.value = fromTextarea.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromTextarea) {\n                                toTextarea.setAttribute('data-preserve-focus', 'true')\n                                toTextarea.setAttribute('data-selection-start', String(fromTextarea.selectionStart || 0))\n                                toTextarea.setAttribute('data-selection-end', String(fromTextarea.selectionEnd || 0))\n                            }\n                        }\n\n                        return true\n                    },\n\n                    onElUpdated: (el) => {\n                        // Restore focus and selection after update\n                        if (el.hasAttribute('data-preserve-focus')) {\n                            const startPos = parseInt(el.getAttribute('data-selection-start') || '0', 10)\n                            const endPos = parseInt(el.getAttribute('data-selection-end') || '0', 10)\n\n                            // Clean up attributes\n                            el.removeAttribute('data-preserve-focus')\n                            el.removeAttribute('data-selection-start')\n                            el.removeAttribute('data-selection-end')\n\n                            // Focus and restore selection\n                            el.focus()\n                            if ('setSelectionRange' in el) {\n                                (el as HTMLInputElement|HTMLTextAreaElement).setSelectionRange(startPos, endPos)\n                            }\n                        }\n                    }\n                })\n            } else {\n                // Use original innerHTML approach\n                target.innerHTML = content\n            }\n\n            if (this.styles) {\n                const styles = this.styles()\n                for (const node of target.querySelectorAll('[styles]')) {\n                    for (const s of node.getAttribute('styles').split(/\\s+/)) {\n                        Object.assign(node.style, styles[s.trim()])\n                    }\n                }\n            }\n\n            const children = Tonic._children[this._id] || {}\n\n            const walk = (node, fn) => {\n                if (node.nodeType === 3) {\n                    const id = node.textContent.trim()\n                    if (children[id]) fn(node, children[id], id)\n                }\n\n                const childNodes = node.childNodes\n                if (!childNodes) return\n\n                for (let i = 0; i < childNodes.length; i++) {\n                    walk(childNodes[i], fn)\n                }\n            }\n\n            walk(target, (node, children, id) => {\n                for (const child of children) {\n                    node.parentNode.insertBefore(child, node)\n                }\n                delete Tonic._children[this._id][id]\n                node.parentNode.removeChild(node)\n            })\n        } else {\n            target.innerHTML = ''\n            target.appendChild(content.cloneNode(true))\n        }\n    }\n\n    connectedCallback () {\n        this.root = this.shadowRoot || this // here for back compat\n\n        if (super.id && !Tonic._refIds.includes(super.id)) {\n            Tonic._refIds.push(super.id)\n        }\n        const cc = s => s.replace(/-(.)/g, (_, m) => m.toUpperCase())\n\n        for (const { name: _name, value } of this.attributes) {\n            const name = cc(_name)\n            const p = (this.props as { [key:string]:any })[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__');\n                (this.props as { [key:string]:any })[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                (this.props as { [key:string]:any })[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                (this.props as { [key:string]:any })[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                (this.props as { [key:string]:any })[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':');\n                (this.props as { [key:string]:any })[name] =\n                    Tonic._children[root][p][0]\n            }\n        }\n\n        this.props = Object.assign(\n            this.defaults(),\n            this.props\n        )\n\n        this._id = this._id || Tonic._createId()\n\n        this.willConnect && this.willConnect()\n\n        if (!this.isInDocument(this.root)) return\n        if (!this.preventRenderOnReconnect) {\n            if (!this._source) {\n                this._source = this.innerHTML\n            } else {\n                this.innerHTML = this._source\n            }\n            const p = this._set(this.root, this.render)\n            if (p && p.then) {\n                return p.then(() => this.connected && this.connected())\n            }\n        }\n\n        this.connected && this.connected()\n    }\n\n    isInDocument (target:HTMLElement|ShadowRoot):boolean {\n        const root = target.getRootNode()\n        return root === document || root.toString() === '[object ShadowRoot]'\n    }\n\n    disconnectedCallback ():void {\n        this.disconnected && this.disconnected()\n        delete Tonic._data[this._id]\n        delete Tonic._children[this._id]\n    }\n}\n\nexport default Tonic\n"],
-  "mappings": "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",
+  "sourcesContent": ["import morphdom from '@substrate-system/morphdom'\n\nexport class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|TemplateStringsArray|null\n    isTonicTemplate:true\n\n    constructor (\n        rawText,\n        templateStrings?:string[]|TemplateStringsArray|null,\n        unsafe?:boolean\n    ) {\n        this.isTonicTemplate = true\n        this.unsafe = !!unsafe\n        this.rawText = rawText\n        this.templateStrings = templateStrings\n    }\n\n    valueOf () { return this.rawText }\n    toString () { return this.rawText }\n}\n\n/**\n * Class Tonic\n *\n * @template {T extends object = Record<string, any>} T Type of the props\n */\nexport abstract class Tonic<\n    T extends { [key:string]:any}=Record<string, any>\n> extends window.HTMLElement {\n    private static _tags = ''\n    private static _refIds:string[] = []\n    private static _data = {}\n    private static _states = {}\n    private static _children = {}\n    private static _reg = {}\n    private static _stylesheetRegistry:(()=>string)[] = []\n    private static _index = 0\n    // @ts-expect-error VERSION is injected during build\n    static get version () { return VERSION ?? null }\n    static get SPREAD () { return /\\.\\.\\.\\s?(__\\w+__\\w+__)/g }\n    static get ESC () { return /[\"&'<>`/]/g }\n    static get AsyncFunctionGenerator ():AsyncGeneratorFunctionConstructor {\n        return (async function * () {\n        }.constructor) as AsyncGeneratorFunctionConstructor\n    }\n    // eslint-disable-next-line\n    static get AsyncFunction ():Function {\n        return (async function () {}.constructor)\n    }\n\n    static get MAP () {\n        /* eslint-disable object-property-newline, object-property-newline,\n        object-curly-newline */\n        return { '\"': '&quot;', '&': '&amp;', '\\'': '&#x27;', '<': '&lt;',\n            '>': '&gt;', '`': '&#x60;', '/': '&#x2F;' }\n    }\n\n    static ssr\n    static nonce\n\n    private _state:any\n    stylesheet?:()=>string\n    styles:()=>string\n    props:T\n    preventRenderOnReconnect:boolean\n    private _id:string\n    pendingReRender?:Promise<this>|null\n    updated?:((props:Record<string, any>)=>any)\n    willRender?:(()=>any)\n    root?:ShadowRoot|this\n    willConnect?:()=>any\n    private _source?:string\n    connected?:()=>void\n    disconnected?:()=>void\n\n    private elements:Element[] & { __children__? }\n    private nodes:ChildNode[] & { __children__? }\n    private _props = Tonic.getPropertyNames(this)\n\n    constructor () {\n        super()\n        const state = Tonic._states[super.id]\n        delete Tonic._states[super.id]\n        this._state = state || {}\n        this.preventRenderOnReconnect = false\n        this.props = {} as T\n        this.elements = [...this.children]\n        this.elements.__children__ = true\n        this.nodes = [...this.childNodes]\n        this.nodes.__children__ = true\n        this._events()\n    }\n\n    abstract render ():TonicTemplate|Promise<TonicTemplate>\n\n    defaults ():Record<string, any> {\n        return {}\n    }\n\n    get isTonicComponent ():true {\n        return true\n    }\n\n    /**\n     * Get a namespaced event name, given a non-namespaced string.\n     *\n     * @example\n     * MyElement.event('example')  // => my-element:example\n     *\n     * @param {string} type The name of the event\n     * @returns {string} The namespaced event name\n     */\n    static event (type:string):string {\n        return `${this.tag}:${type}`\n    }\n\n    /**\n     * Get the tag name of this component.\n     */\n    static get tag ():string {\n        return Tonic.getTagName(this.name)\n    }\n\n    private static _createId () {\n        return `tonic${Tonic._index++}`\n    }\n\n    private static _normalizeAttrs (o, x = {}) {\n        [...o].forEach(o => (x[o.name] = o.value))\n        return x\n    }\n\n    private _checkId () {\n        const _id = super.id\n        if (!_id) {\n            const html = this.outerHTML.replace(this.innerHTML, '...')\n            throw new Error(`Component: ${html} has no id`)\n        }\n        return _id\n    }\n\n    /**\n     * Get the component state property.\n     */\n    get state () {\n        return (this._checkId(), this._state)\n    }\n\n    set state (newState) {\n        this._state = (this._checkId(), newState)\n    }\n\n    private _events () {\n        const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype)\n        // this is where we map methods like `handle_click` to event handlers.\n        // look at the HTMLElement prototype, and if it is has a method like\n        // `onclick`, then add an event listener for 'click'\n        for (const p of this._props) {\n            if (!p.includes('handle_')) continue\n            const evName = p.split('_')[1]\n\n            if (hp.indexOf('on' + evName) === -1) continue\n            this.addEventListener(evName, this)\n        }\n    }\n\n    private _prop (o) {\n        const id = this._id\n        const p = `__${id}__${Tonic._createId()}__`\n        Tonic._data[id] = Tonic._data[id] || {}\n        Tonic._data[id][p] = o\n        return p\n    }\n\n    private _placehold (r) {\n        const id = this._id\n        const ref = `placehold:${id}:${Tonic._createId()}__`\n        Tonic._children[id] = Tonic._children[id] || {}\n        Tonic._children[id][ref] = r\n        return ref\n    }\n\n    static match (el:HTMLElement, s:string) {\n        if (!el.matches) el = el.parentElement!\n        return el.matches(s) ? el : el.closest(s)\n    }\n\n    static getTagName (camelName:string) {\n        return camelName.match(/[A-Z][a-z0-9]*/g)!.join('-').toLowerCase()\n    }\n\n    /**\n     * Add all methods to this._props\n     */\n    static getPropertyNames (proto) {\n        const props:string[] = []\n        while (proto && proto !== Tonic.prototype) {\n            props.push(...Object.getOwnPropertyNames(proto))\n            proto = Object.getPrototypeOf(proto)\n        }\n        return props\n    }\n\n    /**\n     * Add a component. Calls `window.customElements.define` with the\n     * component's name.\n     *\n     * @param {Tonic} c Component to add\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add (c, htmlName?:string) {\n        const hasValidName = htmlName || (c.name && c.name.length > 1)\n        if (!hasValidName) {\n            throw Error('Mangling. https://bit.ly/2TkJ6zP')\n        }\n\n        if (!htmlName) htmlName = Tonic.getTagName(c.name)\n        if (!Tonic.ssr && window.customElements.get(htmlName)) {\n            throw new Error(`Cannot Tonic.add(${c.name}, '${htmlName}') twice`)\n        }\n\n        if (!c.prototype || !c.prototype.isTonicComponent) {\n            const tmp = { [c.name]: class extends Tonic { render } }[c.name]\n            tmp.prototype.render = c\n            c = tmp\n        }\n\n        c.prototype._props = Tonic.getPropertyNames(c.prototype)\n\n        Tonic._reg[htmlName] = c\n        Tonic._tags = Object.keys(Tonic._reg).join()\n        window.customElements.define(htmlName, c as unknown as CustomElementConstructor)\n\n        if (typeof c.stylesheet === 'function') {\n            Tonic.registerStyles(c.stylesheet)\n        }\n\n        return c\n    }\n\n    static registerStyles (stylesheetFn:()=>string) {\n        if (Tonic._stylesheetRegistry.includes(stylesheetFn)) return\n        Tonic._stylesheetRegistry.push(stylesheetFn)\n\n        const styleNode = document.createElement('style')\n        if (Tonic.nonce) styleNode.setAttribute('nonce', Tonic.nonce)\n        styleNode.appendChild(document.createTextNode(stylesheetFn()))\n        if (document.head) document.head.appendChild(styleNode)\n    }\n\n    static escape (s:string):string {\n        return s.replace(Tonic.ESC, c => Tonic.MAP[c])\n    }\n\n    static unsafeRawString (\n        s:string,\n        templateStrings:string[]\n    ):InstanceType<typeof TonicTemplate> {\n        return new TonicTemplate(s, templateStrings, true)\n    }\n\n    /**\n     * Emit a regular, non-namespaced event.\n     *\n     * @param {string} eventName Event name as a string.\n     * @param {any} detail Any data to go with the event.\n     */\n    dispatch (eventName:string, detail:any = null):void {\n        const opts = { bubbles: true, detail }\n        this.dispatchEvent(new window.CustomEvent(eventName, opts))\n    }\n\n    /**\n     * Emit a namespaced event, using a convention for event names.\n     *\n     * @example\n     * myComponent.emit('test')  // => `my-compnent:test`\n     *\n     * @param {string} type The event type, comes after `:` in event name.\n     * @param {string|object|any[]} detail detail for Event constructor\n     * @param {{ bubbles?:boolean, cancelable?:boolean }} opts `Cancelable` and\n     * `bubbles`\n     * @returns {boolean}\n     */\n    emit (type:string, detail:string|object|any[] = {}, opts:Partial<{\n        bubbles:boolean;\n        cancelable:boolean\n    }> = {}):boolean {\n        const namespace = Tonic.getTagName(this.constructor.name)\n        const event = new CustomEvent(`${namespace}:${type}`, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    html (\n        strings:string[]|TemplateStringsArray,\n        ...values\n    ):InstanceType<typeof TonicTemplate> {\n        const refs = o => {\n            if (o && o.__children__) return this._placehold(o)\n            if (o && o.isTonicTemplate) return o.rawText\n            switch (Object.prototype.toString.call(o)) {\n                case '[object HTMLCollection]':\n                case '[object NodeList]': return this._placehold([...o])\n                case '[object Array]': {\n                    if (o.every(x => x.isTonicTemplate && !x.unsafe)) {\n                        return new TonicTemplate(o.join('\\n'), null, false)\n                    }\n                    return this._prop(o)\n                }\n                case '[object Object]':\n                case '[object Function]':\n                case '[object AsyncFunction]':\n                case '[object Set]':\n                case '[object Map]':\n                case '[object WeakMap]':\n                case '[object File]':\n                    return this._prop(o)\n                case '[object NamedNodeMap]':\n                    return this._prop(Tonic._normalizeAttrs(o))\n                case '[object Number]': return `${o}__float`\n                case '[object String]': return Tonic.escape(o)\n                case '[object Boolean]': return `${o}__boolean`\n                case '[object Null]': return `${o}__null`\n                case '[object HTMLElement]':\n                    return this._placehold([o])\n            }\n            if (\n                typeof o === 'object' && o && o.nodeType === 1 &&\n                typeof o.cloneNode === 'function'\n            ) {\n                return this._placehold([o])\n            }\n            return o\n        }\n\n        const out:string[] = []\n        for (let i = 0; i < strings.length - 1; i++) {\n            out.push(strings[i], refs(values[i]))\n        }\n        out.push(strings[strings.length - 1])\n\n        const htmlStr = out.join('').replace(Tonic.SPREAD, (_, p) => {\n            const o = Tonic._data[p.split('__')[1]][p]\n            return Object.entries(o).map(([key, value]) => {\n                const k = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n                if (value === true) return k\n                else if (value) return `${k}=\"${Tonic.escape(String(value))}\"`\n                else return ''\n            }).filter(Boolean).join(' ')\n        })\n            // Process type markers in template content\n            .replace(/(\\d+(?:\\.\\d+)?)__float/g, '$1')\n            .replace(/(true|false)__boolean/g, '$1')\n            .replace(/null__null/g, 'null')\n\n        return new TonicTemplate(htmlStr, strings, false)\n    }\n\n    scheduleReRender (oldProps:any):Promise<this> {\n        if (this.pendingReRender) return this.pendingReRender\n\n        this.pendingReRender = new Promise(resolve => setTimeout(() => {\n            if (!this.isInDocument(this.shadowRoot || this)) return\n            const p = this._set(this.shadowRoot || this, this.render)\n            this.pendingReRender = null\n\n            if (p && p.then) {\n                return p.then(() => {\n                    this.updated && this.updated(oldProps)\n                    resolve(this)\n                })\n            }\n\n            this.updated && this.updated(oldProps)\n            resolve(this)\n        }, 0))\n\n        return this.pendingReRender\n    }\n\n    /**\n     * Update the view\n     */\n    reRender (o:T|((props:T)=>T) = this.props):Promise<this> {\n        const oldProps = { ...this.props }\n        this.props = typeof o === 'function' ? (o as (props:T)=>T)(oldProps) : o\n        return this.scheduleReRender(oldProps)\n    }\n\n    /**\n     * If there is a method with the same name as the event type,\n     * then call the method.\n     * @see {@link https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#what-is-the-handleevent-method What is the handleEvent() method?}\n     */\n    handleEvent (ev:Event):void {\n        this['handle_' + ev.type] && this['handle_' + ev.type](ev)\n    }\n\n    private _drainIterator (target, iterator) {\n        return iterator.next().then((result) => {\n            this._set(target, null, result.value)\n            if (result.done) return\n            return this._drainIterator(target, iterator)\n        })\n    }\n\n    /**\n     * _set\n     * @param {Element|InstanceType<typeof Tonic>|ShadowRoot} target\n     * @param {()=>any} render\n     * @param {string} content\n     * @returns {Promise<void>|void}\n     * @private\n     */\n    private _set (target, render, content = ''):Promise<void>|void {\n        this.willRender && this.willRender()\n        for (const node of target.querySelectorAll(Tonic._tags)) {\n            if (!node.isTonicComponent) continue\n\n            const id = node.getAttribute('id')\n            if (!id || !Tonic._refIds.includes(id)) continue\n            Tonic._states[id] = node.state\n        }\n\n        if (render instanceof Tonic.AsyncFunction) {\n            return ((render as ()=>any)\n                .call(this, this.html, this.props)\n                .then(content => this._apply(target, content))\n            )\n        } else if (render instanceof Tonic.AsyncFunctionGenerator) {\n            return this._drainIterator(target, (render as AsyncGeneratorFunction).call(this))\n        } else if (render === null) {\n            this._apply(target, content)\n        } else if (render instanceof Function) {\n            this._apply(target, render.call(this, this.html, this.props) || '')\n        }\n    }\n\n    private _apply (target, content) {\n        if (content && content.isTonicTemplate) {\n            content = content.rawText\n        } else if (typeof content === 'string') {\n            content = Tonic.escape(content)\n        }\n\n        if (typeof content === 'string') {\n            if (this.stylesheet) {\n                content = `<style nonce=${Tonic.nonce || ''}>${this.stylesheet()}</style>${content}`\n            }\n\n            // Check if we should use morphdom for DOM state preservation\n            const hasFormElements = target.querySelector && (\n                target.querySelector('input') ||\n                target.querySelector('textarea') ||\n                target.querySelector('select')\n            )\n\n            const shouldUseMorphdom = (\n                hasFormElements &&\n                document.activeElement &&\n                (\n                    target.contains(document.activeElement) ||\n                    target === document.activeElement\n                )\n            )\n\n            if (shouldUseMorphdom) {\n                // Use morphdom to preserve DOM state during updates\n                const tempContainer = document.createElement('div')\n                tempContainer.innerHTML = content\n\n                morphdom(target, tempContainer, {\n                    childrenOnly: true,\n                    onBeforeElUpdated: (fromEl, toEl) => {\n                        // Skip updating if the elements are the same and preserve form state\n                        if (fromEl.isEqualNode && fromEl.isEqualNode(toEl)) {\n                            return false\n                        }\n\n                        // For inputs, preserve value and selection\n                        if (fromEl.tagName === 'INPUT' && toEl.tagName === 'INPUT') {\n                            const fromInput = fromEl as HTMLInputElement\n                            const toInput = toEl as HTMLInputElement\n\n                            // Preserve form values\n                            if (fromInput.value !== '') {\n                                toInput.value = fromInput.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromInput) {\n                                toInput.setAttribute('data-preserve-focus', 'true')\n                                toInput.setAttribute('data-selection-start', String(fromInput.selectionStart || 0))\n                                toInput.setAttribute('data-selection-end', String(fromInput.selectionEnd || 0))\n                            }\n                        }\n\n                        // For textareas, preserve value and selection\n                        if (fromEl.tagName === 'TEXTAREA' && toEl.tagName === 'TEXTAREA') {\n                            const fromTextarea = fromEl as HTMLTextAreaElement\n                            const toTextarea = toEl as HTMLTextAreaElement\n\n                            // Preserve form values\n                            if (fromTextarea.value !== '') {\n                                toTextarea.value = fromTextarea.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromTextarea) {\n                                toTextarea.setAttribute('data-preserve-focus', 'true')\n                                toTextarea.setAttribute('data-selection-start', String(fromTextarea.selectionStart || 0))\n                                toTextarea.setAttribute('data-selection-end', String(fromTextarea.selectionEnd || 0))\n                            }\n                        }\n\n                        return true\n                    },\n\n                    onElUpdated: (el) => {\n                        // Restore focus and selection after update\n                        if (el.hasAttribute('data-preserve-focus')) {\n                            const startPos = parseInt(el.getAttribute('data-selection-start') || '0', 10)\n                            const endPos = parseInt(el.getAttribute('data-selection-end') || '0', 10)\n\n                            // Clean up attributes\n                            el.removeAttribute('data-preserve-focus')\n                            el.removeAttribute('data-selection-start')\n                            el.removeAttribute('data-selection-end')\n\n                            // Focus and restore selection\n                            el.focus()\n                            if ('setSelectionRange' in el) {\n                                (el as HTMLInputElement|HTMLTextAreaElement).setSelectionRange(startPos, endPos)\n                            }\n                        }\n                    }\n                })\n            } else {\n                // Use original innerHTML approach\n                target.innerHTML = content\n            }\n\n            if (this.styles) {\n                const styles = this.styles()\n                for (const node of target.querySelectorAll('[styles]')) {\n                    for (const s of node.getAttribute('styles').split(/\\s+/)) {\n                        Object.assign(node.style, styles[s.trim()])\n                    }\n                }\n            }\n\n            const children = Tonic._children[this._id] || {}\n\n            const walk = (node, fn) => {\n                if (node.nodeType === 3) {\n                    const id = node.textContent.trim()\n                    if (children[id]) fn(node, children[id], id)\n                }\n\n                const childNodes = node.childNodes\n                if (!childNodes) return\n\n                for (let i = 0; i < childNodes.length; i++) {\n                    walk(childNodes[i], fn)\n                }\n            }\n\n            walk(target, (node, children, id) => {\n                for (const child of children) {\n                    node.parentNode.insertBefore(child, node)\n                }\n                delete Tonic._children[this._id][id]\n                node.parentNode.removeChild(node)\n            })\n        } else {\n            target.innerHTML = ''\n            target.appendChild(content.cloneNode(true))\n        }\n    }\n\n    connectedCallback () {\n        this.root = this.shadowRoot || this // here for back compat\n\n        if (super.id && !Tonic._refIds.includes(super.id)) {\n            Tonic._refIds.push(super.id)\n        }\n        const cc = s => s.replace(/-(.)/g, (_, m) => m.toUpperCase())\n\n        for (const { name: _name, value } of this.attributes) {\n            const name = cc(_name)\n            const p = (this.props as { [key:string]:any })[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__');\n                (this.props as { [key:string]:any })[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                (this.props as { [key:string]:any })[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                (this.props as { [key:string]:any })[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                (this.props as { [key:string]:any })[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':');\n                (this.props as { [key:string]:any })[name] =\n                    Tonic._children[root][p][0]\n            }\n        }\n\n        this.props = Object.assign(\n            this.defaults(),\n            this.props\n        )\n\n        this._id = this._id || Tonic._createId()\n\n        this.willConnect && this.willConnect()\n\n        if (!this.isInDocument(this.root)) return\n        if (!this.preventRenderOnReconnect) {\n            if (!this._source) {\n                this._source = this.innerHTML\n            } else {\n                this.innerHTML = this._source\n            }\n            const p = this._set(this.root, this.render)\n            if (p && p.then) {\n                return p.then(() => this.connected && this.connected())\n            }\n        }\n\n        this.connected && this.connected()\n    }\n\n    isInDocument (target:HTMLElement|ShadowRoot):boolean {\n        const root = target.getRootNode()\n        return root === document || root.toString() === '[object ShadowRoot]'\n    }\n\n    disconnectedCallback ():void {\n        this.disconnected && this.disconnected()\n        delete Tonic._data[this._id]\n        delete Tonic._children[this._id]\n    }\n}\n\nexport default Tonic\n"],
+  "mappings": "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",
   "names": ["o", "content", "morphdom", "children"]
 }

package/dist/index.d.ts

@@ -58,7 +58,7 @@ export declare abstract class Tonic<T extends {
     private _props;
     constructor();
     abstract render(): TonicTemplate | Promise<TonicTemplate>;
-    defaults(): Record<string, any> | undefined;
+    defaults(): Record<string, any>;
     get isTonicComponent(): true;
     /**
      * Get a namespaced event name, given a non-namespaced string.

package/dist/index.js

@@ -62,7 +62,7 @@ export class Tonic extends window.HTMLElement {
   }
   // @ts-expect-error VERSION is injected during build
   static get version() {
-    return "17.0.0";
+    return "17.1.0";
   }
   static get SPREAD() {
     return /\.\.\.\s?(__\w+__\w+__)/g;

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import morphdom from '@substrate-system/morphdom'\n\nexport class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|TemplateStringsArray|null\n    isTonicTemplate:true\n\n    constructor (\n        rawText,\n        templateStrings?:string[]|TemplateStringsArray|null,\n        unsafe?:boolean\n    ) {\n        this.isTonicTemplate = true\n        this.unsafe = !!unsafe\n        this.rawText = rawText\n        this.templateStrings = templateStrings\n    }\n\n    valueOf () { return this.rawText }\n    toString () { return this.rawText }\n}\n\n/**\n * Class Tonic\n *\n * @template {T extends object = Record<string, any>} T Type of the props\n */\nexport abstract class Tonic<\n    T extends { [key:string]:any}=Record<string, any>\n> extends window.HTMLElement {\n    private static _tags = ''\n    private static _refIds:string[] = []\n    private static _data = {}\n    private static _states = {}\n    private static _children = {}\n    private static _reg = {}\n    private static _stylesheetRegistry:(()=>string)[] = []\n    private static _index = 0\n    // @ts-expect-error VERSION is injected during build\n    static get version () { return VERSION ?? null }\n    static get SPREAD () { return /\\.\\.\\.\\s?(__\\w+__\\w+__)/g }\n    static get ESC () { return /[\"&'<>`/]/g }\n    static get AsyncFunctionGenerator ():AsyncGeneratorFunctionConstructor {\n        return (async function * () {\n        }.constructor) as AsyncGeneratorFunctionConstructor\n    }\n    // eslint-disable-next-line\n    static get AsyncFunction ():Function {\n        return (async function () {}.constructor)\n    }\n\n    static get MAP () {\n        /* eslint-disable object-property-newline, object-property-newline,\n        object-curly-newline */\n        return { '\"': '&quot;', '&': '&amp;', '\\'': '&#x27;', '<': '&lt;',\n            '>': '&gt;', '`': '&#x60;', '/': '&#x2F;' }\n    }\n\n    static ssr\n    static nonce\n\n    private _state:any\n    stylesheet?:()=>string\n    styles:()=>string\n    props:T\n    preventRenderOnReconnect:boolean\n    private _id:string\n    pendingReRender?:Promise<this>|null\n    updated?:((props:Record<string, any>)=>any)\n    willRender?:(()=>any)\n    root?:ShadowRoot|this\n    willConnect?:()=>any\n    private _source?:string\n    connected?:()=>void\n    disconnected?:()=>void\n\n    private elements:Element[] & { __children__? }\n    private nodes:ChildNode[] & { __children__? }\n    private _props = Tonic.getPropertyNames(this)\n\n    constructor () {\n        super()\n        const state = Tonic._states[super.id]\n        delete Tonic._states[super.id]\n        this._state = state || {}\n        this.preventRenderOnReconnect = false\n        this.props = {} as T\n        this.elements = [...this.children]\n        this.elements.__children__ = true\n        this.nodes = [...this.childNodes]\n        this.nodes.__children__ = true\n        this._events()\n    }\n\n    abstract render ():TonicTemplate|Promise<TonicTemplate>\n\n    defaults ():Record<string, any>|undefined {\n        return {}\n    }\n\n    get isTonicComponent ():true {\n        return true\n    }\n\n    /**\n     * Get a namespaced event name, given a non-namespaced string.\n     *\n     * @example\n     * MyElement.event('example')  // => my-element:example\n     *\n     * @param {string} type The name of the event\n     * @returns {string} The namespaced event name\n     */\n    static event (type:string):string {\n        return `${this.tag}:${type}`\n    }\n\n    /**\n     * Get the tag name of this component.\n     */\n    static get tag ():string {\n        return Tonic.getTagName(this.name)\n    }\n\n    private static _createId () {\n        return `tonic${Tonic._index++}`\n    }\n\n    private static _normalizeAttrs (o, x = {}) {\n        [...o].forEach(o => (x[o.name] = o.value))\n        return x\n    }\n\n    private _checkId () {\n        const _id = super.id\n        if (!_id) {\n            const html = this.outerHTML.replace(this.innerHTML, '...')\n            throw new Error(`Component: ${html} has no id`)\n        }\n        return _id\n    }\n\n    /**\n     * Get the component state property.\n     */\n    get state () {\n        return (this._checkId(), this._state)\n    }\n\n    set state (newState) {\n        this._state = (this._checkId(), newState)\n    }\n\n    private _events () {\n        const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype)\n        // this is where we map methods like `handle_click` to event handlers.\n        // look at the HTMLElement prototype, and if it is has a method like\n        // `onclick`, then add an event listener for 'click'\n        for (const p of this._props) {\n            if (!p.includes('handle_')) continue\n            const evName = p.split('_')[1]\n\n            if (hp.indexOf('on' + evName) === -1) continue\n            this.addEventListener(evName, this)\n        }\n    }\n\n    private _prop (o) {\n        const id = this._id\n        const p = `__${id}__${Tonic._createId()}__`\n        Tonic._data[id] = Tonic._data[id] || {}\n        Tonic._data[id][p] = o\n        return p\n    }\n\n    private _placehold (r) {\n        const id = this._id\n        const ref = `placehold:${id}:${Tonic._createId()}__`\n        Tonic._children[id] = Tonic._children[id] || {}\n        Tonic._children[id][ref] = r\n        return ref\n    }\n\n    static match (el:HTMLElement, s:string) {\n        if (!el.matches) el = el.parentElement!\n        return el.matches(s) ? el : el.closest(s)\n    }\n\n    static getTagName (camelName:string) {\n        return camelName.match(/[A-Z][a-z0-9]*/g)!.join('-').toLowerCase()\n    }\n\n    /**\n     * Add all methods to this._props\n     */\n    static getPropertyNames (proto) {\n        const props:string[] = []\n        while (proto && proto !== Tonic.prototype) {\n            props.push(...Object.getOwnPropertyNames(proto))\n            proto = Object.getPrototypeOf(proto)\n        }\n        return props\n    }\n\n    /**\n     * Add a component. Calls `window.customElements.define` with the\n     * component's name.\n     *\n     * @param {Tonic} c Component to add\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add (c, htmlName?:string) {\n        const hasValidName = htmlName || (c.name && c.name.length > 1)\n        if (!hasValidName) {\n            throw Error('Mangling. https://bit.ly/2TkJ6zP')\n        }\n\n        if (!htmlName) htmlName = Tonic.getTagName(c.name)\n        if (!Tonic.ssr && window.customElements.get(htmlName)) {\n            throw new Error(`Cannot Tonic.add(${c.name}, '${htmlName}') twice`)\n        }\n\n        if (!c.prototype || !c.prototype.isTonicComponent) {\n            const tmp = { [c.name]: class extends Tonic { render } }[c.name]\n            tmp.prototype.render = c\n            c = tmp\n        }\n\n        c.prototype._props = Tonic.getPropertyNames(c.prototype)\n\n        Tonic._reg[htmlName] = c\n        Tonic._tags = Object.keys(Tonic._reg).join()\n        window.customElements.define(htmlName, c as unknown as CustomElementConstructor)\n\n        if (typeof c.stylesheet === 'function') {\n            Tonic.registerStyles(c.stylesheet)\n        }\n\n        return c\n    }\n\n    static registerStyles (stylesheetFn:()=>string) {\n        if (Tonic._stylesheetRegistry.includes(stylesheetFn)) return\n        Tonic._stylesheetRegistry.push(stylesheetFn)\n\n        const styleNode = document.createElement('style')\n        if (Tonic.nonce) styleNode.setAttribute('nonce', Tonic.nonce)\n        styleNode.appendChild(document.createTextNode(stylesheetFn()))\n        if (document.head) document.head.appendChild(styleNode)\n    }\n\n    static escape (s:string):string {\n        return s.replace(Tonic.ESC, c => Tonic.MAP[c])\n    }\n\n    static unsafeRawString (\n        s:string,\n        templateStrings:string[]\n    ):InstanceType<typeof TonicTemplate> {\n        return new TonicTemplate(s, templateStrings, true)\n    }\n\n    /**\n     * Emit a regular, non-namespaced event.\n     *\n     * @param {string} eventName Event name as a string.\n     * @param {any} detail Any data to go with the event.\n     */\n    dispatch (eventName:string, detail:any = null):void {\n        const opts = { bubbles: true, detail }\n        this.dispatchEvent(new window.CustomEvent(eventName, opts))\n    }\n\n    /**\n     * Emit a namespaced event, using a convention for event names.\n     *\n     * @example\n     * myComponent.emit('test')  // => `my-compnent:test`\n     *\n     * @param {string} type The event type, comes after `:` in event name.\n     * @param {string|object|any[]} detail detail for Event constructor\n     * @param {{ bubbles?:boolean, cancelable?:boolean }} opts `Cancelable` and\n     * `bubbles`\n     * @returns {boolean}\n     */\n    emit (type:string, detail:string|object|any[] = {}, opts:Partial<{\n        bubbles:boolean;\n        cancelable:boolean\n    }> = {}):boolean {\n        const namespace = Tonic.getTagName(this.constructor.name)\n        const event = new CustomEvent(`${namespace}:${type}`, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    html (\n        strings:string[]|TemplateStringsArray,\n        ...values\n    ):InstanceType<typeof TonicTemplate> {\n        const refs = o => {\n            if (o && o.__children__) return this._placehold(o)\n            if (o && o.isTonicTemplate) return o.rawText\n            switch (Object.prototype.toString.call(o)) {\n                case '[object HTMLCollection]':\n                case '[object NodeList]': return this._placehold([...o])\n                case '[object Array]': {\n                    if (o.every(x => x.isTonicTemplate && !x.unsafe)) {\n                        return new TonicTemplate(o.join('\\n'), null, false)\n                    }\n                    return this._prop(o)\n                }\n                case '[object Object]':\n                case '[object Function]':\n                case '[object AsyncFunction]':\n                case '[object Set]':\n                case '[object Map]':\n                case '[object WeakMap]':\n                case '[object File]':\n                    return this._prop(o)\n                case '[object NamedNodeMap]':\n                    return this._prop(Tonic._normalizeAttrs(o))\n                case '[object Number]': return `${o}__float`\n                case '[object String]': return Tonic.escape(o)\n                case '[object Boolean]': return `${o}__boolean`\n                case '[object Null]': return `${o}__null`\n                case '[object HTMLElement]':\n                    return this._placehold([o])\n            }\n            if (\n                typeof o === 'object' && o && o.nodeType === 1 &&\n                typeof o.cloneNode === 'function'\n            ) {\n                return this._placehold([o])\n            }\n            return o\n        }\n\n        const out:string[] = []\n        for (let i = 0; i < strings.length - 1; i++) {\n            out.push(strings[i], refs(values[i]))\n        }\n        out.push(strings[strings.length - 1])\n\n        const htmlStr = out.join('').replace(Tonic.SPREAD, (_, p) => {\n            const o = Tonic._data[p.split('__')[1]][p]\n            return Object.entries(o).map(([key, value]) => {\n                const k = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n                if (value === true) return k\n                else if (value) return `${k}=\"${Tonic.escape(String(value))}\"`\n                else return ''\n            }).filter(Boolean).join(' ')\n        })\n            // Process type markers in template content\n            .replace(/(\\d+(?:\\.\\d+)?)__float/g, '$1')\n            .replace(/(true|false)__boolean/g, '$1')\n            .replace(/null__null/g, 'null')\n\n        return new TonicTemplate(htmlStr, strings, false)\n    }\n\n    scheduleReRender (oldProps:any):Promise<this> {\n        if (this.pendingReRender) return this.pendingReRender\n\n        this.pendingReRender = new Promise(resolve => setTimeout(() => {\n            if (!this.isInDocument(this.shadowRoot || this)) return\n            const p = this._set(this.shadowRoot || this, this.render)\n            this.pendingReRender = null\n\n            if (p && p.then) {\n                return p.then(() => {\n                    this.updated && this.updated(oldProps)\n                    resolve(this)\n                })\n            }\n\n            this.updated && this.updated(oldProps)\n            resolve(this)\n        }, 0))\n\n        return this.pendingReRender\n    }\n\n    /**\n     * Update the view\n     */\n    reRender (o:T|((props:T)=>T) = this.props):Promise<this> {\n        const oldProps = { ...this.props }\n        this.props = typeof o === 'function' ? (o as (props:T)=>T)(oldProps) : o\n        return this.scheduleReRender(oldProps)\n    }\n\n    /**\n     * If there is a method with the same name as the event type,\n     * then call the method.\n     * @see {@link https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#what-is-the-handleevent-method What is the handleEvent() method?}\n     */\n    handleEvent (ev:Event):void {\n        this['handle_' + ev.type] && this['handle_' + ev.type](ev)\n    }\n\n    private _drainIterator (target, iterator) {\n        return iterator.next().then((result) => {\n            this._set(target, null, result.value)\n            if (result.done) return\n            return this._drainIterator(target, iterator)\n        })\n    }\n\n    /**\n     * _set\n     * @param {Element|InstanceType<typeof Tonic>|ShadowRoot} target\n     * @param {()=>any} render\n     * @param {string} content\n     * @returns {Promise<void>|void}\n     * @private\n     */\n    private _set (target, render, content = ''):Promise<void>|void {\n        this.willRender && this.willRender()\n        for (const node of target.querySelectorAll(Tonic._tags)) {\n            if (!node.isTonicComponent) continue\n\n            const id = node.getAttribute('id')\n            if (!id || !Tonic._refIds.includes(id)) continue\n            Tonic._states[id] = node.state\n        }\n\n        if (render instanceof Tonic.AsyncFunction) {\n            return ((render as ()=>any)\n                .call(this, this.html, this.props)\n                .then(content => this._apply(target, content))\n            )\n        } else if (render instanceof Tonic.AsyncFunctionGenerator) {\n            return this._drainIterator(target, (render as AsyncGeneratorFunction).call(this))\n        } else if (render === null) {\n            this._apply(target, content)\n        } else if (render instanceof Function) {\n            this._apply(target, render.call(this, this.html, this.props) || '')\n        }\n    }\n\n    private _apply (target, content) {\n        if (content && content.isTonicTemplate) {\n            content = content.rawText\n        } else if (typeof content === 'string') {\n            content = Tonic.escape(content)\n        }\n\n        if (typeof content === 'string') {\n            if (this.stylesheet) {\n                content = `<style nonce=${Tonic.nonce || ''}>${this.stylesheet()}</style>${content}`\n            }\n\n            // Check if we should use morphdom for DOM state preservation\n            const hasFormElements = target.querySelector && (\n                target.querySelector('input') ||\n                target.querySelector('textarea') ||\n                target.querySelector('select')\n            )\n\n            const shouldUseMorphdom = (\n                hasFormElements &&\n                document.activeElement &&\n                (\n                    target.contains(document.activeElement) ||\n                    target === document.activeElement\n                )\n            )\n\n            if (shouldUseMorphdom) {\n                // Use morphdom to preserve DOM state during updates\n                const tempContainer = document.createElement('div')\n                tempContainer.innerHTML = content\n\n                morphdom(target, tempContainer, {\n                    childrenOnly: true,\n                    onBeforeElUpdated: (fromEl, toEl) => {\n                        // Skip updating if the elements are the same and preserve form state\n                        if (fromEl.isEqualNode && fromEl.isEqualNode(toEl)) {\n                            return false\n                        }\n\n                        // For inputs, preserve value and selection\n                        if (fromEl.tagName === 'INPUT' && toEl.tagName === 'INPUT') {\n                            const fromInput = fromEl as HTMLInputElement\n                            const toInput = toEl as HTMLInputElement\n\n                            // Preserve form values\n                            if (fromInput.value !== '') {\n                                toInput.value = fromInput.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromInput) {\n                                toInput.setAttribute('data-preserve-focus', 'true')\n                                toInput.setAttribute('data-selection-start', String(fromInput.selectionStart || 0))\n                                toInput.setAttribute('data-selection-end', String(fromInput.selectionEnd || 0))\n                            }\n                        }\n\n                        // For textareas, preserve value and selection\n                        if (fromEl.tagName === 'TEXTAREA' && toEl.tagName === 'TEXTAREA') {\n                            const fromTextarea = fromEl as HTMLTextAreaElement\n                            const toTextarea = toEl as HTMLTextAreaElement\n\n                            // Preserve form values\n                            if (fromTextarea.value !== '') {\n                                toTextarea.value = fromTextarea.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromTextarea) {\n                                toTextarea.setAttribute('data-preserve-focus', 'true')\n                                toTextarea.setAttribute('data-selection-start', String(fromTextarea.selectionStart || 0))\n                                toTextarea.setAttribute('data-selection-end', String(fromTextarea.selectionEnd || 0))\n                            }\n                        }\n\n                        return true\n                    },\n\n                    onElUpdated: (el) => {\n                        // Restore focus and selection after update\n                        if (el.hasAttribute('data-preserve-focus')) {\n                            const startPos = parseInt(el.getAttribute('data-selection-start') || '0', 10)\n                            const endPos = parseInt(el.getAttribute('data-selection-end') || '0', 10)\n\n                            // Clean up attributes\n                            el.removeAttribute('data-preserve-focus')\n                            el.removeAttribute('data-selection-start')\n                            el.removeAttribute('data-selection-end')\n\n                            // Focus and restore selection\n                            el.focus()\n                            if ('setSelectionRange' in el) {\n                                (el as HTMLInputElement|HTMLTextAreaElement).setSelectionRange(startPos, endPos)\n                            }\n                        }\n                    }\n                })\n            } else {\n                // Use original innerHTML approach\n                target.innerHTML = content\n            }\n\n            if (this.styles) {\n                const styles = this.styles()\n                for (const node of target.querySelectorAll('[styles]')) {\n                    for (const s of node.getAttribute('styles').split(/\\s+/)) {\n                        Object.assign(node.style, styles[s.trim()])\n                    }\n                }\n            }\n\n            const children = Tonic._children[this._id] || {}\n\n            const walk = (node, fn) => {\n                if (node.nodeType === 3) {\n                    const id = node.textContent.trim()\n                    if (children[id]) fn(node, children[id], id)\n                }\n\n                const childNodes = node.childNodes\n                if (!childNodes) return\n\n                for (let i = 0; i < childNodes.length; i++) {\n                    walk(childNodes[i], fn)\n                }\n            }\n\n            walk(target, (node, children, id) => {\n                for (const child of children) {\n                    node.parentNode.insertBefore(child, node)\n                }\n                delete Tonic._children[this._id][id]\n                node.parentNode.removeChild(node)\n            })\n        } else {\n            target.innerHTML = ''\n            target.appendChild(content.cloneNode(true))\n        }\n    }\n\n    connectedCallback () {\n        this.root = this.shadowRoot || this // here for back compat\n\n        if (super.id && !Tonic._refIds.includes(super.id)) {\n            Tonic._refIds.push(super.id)\n        }\n        const cc = s => s.replace(/-(.)/g, (_, m) => m.toUpperCase())\n\n        for (const { name: _name, value } of this.attributes) {\n            const name = cc(_name)\n            const p = (this.props as { [key:string]:any })[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__');\n                (this.props as { [key:string]:any })[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                (this.props as { [key:string]:any })[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                (this.props as { [key:string]:any })[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                (this.props as { [key:string]:any })[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':');\n                (this.props as { [key:string]:any })[name] =\n                    Tonic._children[root][p][0]\n            }\n        }\n\n        this.props = Object.assign(\n            this.defaults(),\n            this.props\n        )\n\n        this._id = this._id || Tonic._createId()\n\n        this.willConnect && this.willConnect()\n\n        if (!this.isInDocument(this.root)) return\n        if (!this.preventRenderOnReconnect) {\n            if (!this._source) {\n                this._source = this.innerHTML\n            } else {\n                this.innerHTML = this._source\n            }\n            const p = this._set(this.root, this.render)\n            if (p && p.then) {\n                return p.then(() => this.connected && this.connected())\n            }\n        }\n\n        this.connected && this.connected()\n    }\n\n    isInDocument (target:HTMLElement|ShadowRoot):boolean {\n        const root = target.getRootNode()\n        return root === document || root.toString() === '[object ShadowRoot]'\n    }\n\n    disconnectedCallback ():void {\n        this.disconnected && this.disconnected()\n        delete Tonic._data[this._id]\n        delete Tonic._children[this._id]\n    }\n}\n\nexport default Tonic\n"],
-  "mappings": "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",
+  "sourcesContent": ["import morphdom from '@substrate-system/morphdom'\n\nexport class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|TemplateStringsArray|null\n    isTonicTemplate:true\n\n    constructor (\n        rawText,\n        templateStrings?:string[]|TemplateStringsArray|null,\n        unsafe?:boolean\n    ) {\n        this.isTonicTemplate = true\n        this.unsafe = !!unsafe\n        this.rawText = rawText\n        this.templateStrings = templateStrings\n    }\n\n    valueOf () { return this.rawText }\n    toString () { return this.rawText }\n}\n\n/**\n * Class Tonic\n *\n * @template {T extends object = Record<string, any>} T Type of the props\n */\nexport abstract class Tonic<\n    T extends { [key:string]:any}=Record<string, any>\n> extends window.HTMLElement {\n    private static _tags = ''\n    private static _refIds:string[] = []\n    private static _data = {}\n    private static _states = {}\n    private static _children = {}\n    private static _reg = {}\n    private static _stylesheetRegistry:(()=>string)[] = []\n    private static _index = 0\n    // @ts-expect-error VERSION is injected during build\n    static get version () { return VERSION ?? null }\n    static get SPREAD () { return /\\.\\.\\.\\s?(__\\w+__\\w+__)/g }\n    static get ESC () { return /[\"&'<>`/]/g }\n    static get AsyncFunctionGenerator ():AsyncGeneratorFunctionConstructor {\n        return (async function * () {\n        }.constructor) as AsyncGeneratorFunctionConstructor\n    }\n    // eslint-disable-next-line\n    static get AsyncFunction ():Function {\n        return (async function () {}.constructor)\n    }\n\n    static get MAP () {\n        /* eslint-disable object-property-newline, object-property-newline,\n        object-curly-newline */\n        return { '\"': '&quot;', '&': '&amp;', '\\'': '&#x27;', '<': '&lt;',\n            '>': '&gt;', '`': '&#x60;', '/': '&#x2F;' }\n    }\n\n    static ssr\n    static nonce\n\n    private _state:any\n    stylesheet?:()=>string\n    styles:()=>string\n    props:T\n    preventRenderOnReconnect:boolean\n    private _id:string\n    pendingReRender?:Promise<this>|null\n    updated?:((props:Record<string, any>)=>any)\n    willRender?:(()=>any)\n    root?:ShadowRoot|this\n    willConnect?:()=>any\n    private _source?:string\n    connected?:()=>void\n    disconnected?:()=>void\n\n    private elements:Element[] & { __children__? }\n    private nodes:ChildNode[] & { __children__? }\n    private _props = Tonic.getPropertyNames(this)\n\n    constructor () {\n        super()\n        const state = Tonic._states[super.id]\n        delete Tonic._states[super.id]\n        this._state = state || {}\n        this.preventRenderOnReconnect = false\n        this.props = {} as T\n        this.elements = [...this.children]\n        this.elements.__children__ = true\n        this.nodes = [...this.childNodes]\n        this.nodes.__children__ = true\n        this._events()\n    }\n\n    abstract render ():TonicTemplate|Promise<TonicTemplate>\n\n    defaults ():Record<string, any> {\n        return {}\n    }\n\n    get isTonicComponent ():true {\n        return true\n    }\n\n    /**\n     * Get a namespaced event name, given a non-namespaced string.\n     *\n     * @example\n     * MyElement.event('example')  // => my-element:example\n     *\n     * @param {string} type The name of the event\n     * @returns {string} The namespaced event name\n     */\n    static event (type:string):string {\n        return `${this.tag}:${type}`\n    }\n\n    /**\n     * Get the tag name of this component.\n     */\n    static get tag ():string {\n        return Tonic.getTagName(this.name)\n    }\n\n    private static _createId () {\n        return `tonic${Tonic._index++}`\n    }\n\n    private static _normalizeAttrs (o, x = {}) {\n        [...o].forEach(o => (x[o.name] = o.value))\n        return x\n    }\n\n    private _checkId () {\n        const _id = super.id\n        if (!_id) {\n            const html = this.outerHTML.replace(this.innerHTML, '...')\n            throw new Error(`Component: ${html} has no id`)\n        }\n        return _id\n    }\n\n    /**\n     * Get the component state property.\n     */\n    get state () {\n        return (this._checkId(), this._state)\n    }\n\n    set state (newState) {\n        this._state = (this._checkId(), newState)\n    }\n\n    private _events () {\n        const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype)\n        // this is where we map methods like `handle_click` to event handlers.\n        // look at the HTMLElement prototype, and if it is has a method like\n        // `onclick`, then add an event listener for 'click'\n        for (const p of this._props) {\n            if (!p.includes('handle_')) continue\n            const evName = p.split('_')[1]\n\n            if (hp.indexOf('on' + evName) === -1) continue\n            this.addEventListener(evName, this)\n        }\n    }\n\n    private _prop (o) {\n        const id = this._id\n        const p = `__${id}__${Tonic._createId()}__`\n        Tonic._data[id] = Tonic._data[id] || {}\n        Tonic._data[id][p] = o\n        return p\n    }\n\n    private _placehold (r) {\n        const id = this._id\n        const ref = `placehold:${id}:${Tonic._createId()}__`\n        Tonic._children[id] = Tonic._children[id] || {}\n        Tonic._children[id][ref] = r\n        return ref\n    }\n\n    static match (el:HTMLElement, s:string) {\n        if (!el.matches) el = el.parentElement!\n        return el.matches(s) ? el : el.closest(s)\n    }\n\n    static getTagName (camelName:string) {\n        return camelName.match(/[A-Z][a-z0-9]*/g)!.join('-').toLowerCase()\n    }\n\n    /**\n     * Add all methods to this._props\n     */\n    static getPropertyNames (proto) {\n        const props:string[] = []\n        while (proto && proto !== Tonic.prototype) {\n            props.push(...Object.getOwnPropertyNames(proto))\n            proto = Object.getPrototypeOf(proto)\n        }\n        return props\n    }\n\n    /**\n     * Add a component. Calls `window.customElements.define` with the\n     * component's name.\n     *\n     * @param {Tonic} c Component to add\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add (c, htmlName?:string) {\n        const hasValidName = htmlName || (c.name && c.name.length > 1)\n        if (!hasValidName) {\n            throw Error('Mangling. https://bit.ly/2TkJ6zP')\n        }\n\n        if (!htmlName) htmlName = Tonic.getTagName(c.name)\n        if (!Tonic.ssr && window.customElements.get(htmlName)) {\n            throw new Error(`Cannot Tonic.add(${c.name}, '${htmlName}') twice`)\n        }\n\n        if (!c.prototype || !c.prototype.isTonicComponent) {\n            const tmp = { [c.name]: class extends Tonic { render } }[c.name]\n            tmp.prototype.render = c\n            c = tmp\n        }\n\n        c.prototype._props = Tonic.getPropertyNames(c.prototype)\n\n        Tonic._reg[htmlName] = c\n        Tonic._tags = Object.keys(Tonic._reg).join()\n        window.customElements.define(htmlName, c as unknown as CustomElementConstructor)\n\n        if (typeof c.stylesheet === 'function') {\n            Tonic.registerStyles(c.stylesheet)\n        }\n\n        return c\n    }\n\n    static registerStyles (stylesheetFn:()=>string) {\n        if (Tonic._stylesheetRegistry.includes(stylesheetFn)) return\n        Tonic._stylesheetRegistry.push(stylesheetFn)\n\n        const styleNode = document.createElement('style')\n        if (Tonic.nonce) styleNode.setAttribute('nonce', Tonic.nonce)\n        styleNode.appendChild(document.createTextNode(stylesheetFn()))\n        if (document.head) document.head.appendChild(styleNode)\n    }\n\n    static escape (s:string):string {\n        return s.replace(Tonic.ESC, c => Tonic.MAP[c])\n    }\n\n    static unsafeRawString (\n        s:string,\n        templateStrings:string[]\n    ):InstanceType<typeof TonicTemplate> {\n        return new TonicTemplate(s, templateStrings, true)\n    }\n\n    /**\n     * Emit a regular, non-namespaced event.\n     *\n     * @param {string} eventName Event name as a string.\n     * @param {any} detail Any data to go with the event.\n     */\n    dispatch (eventName:string, detail:any = null):void {\n        const opts = { bubbles: true, detail }\n        this.dispatchEvent(new window.CustomEvent(eventName, opts))\n    }\n\n    /**\n     * Emit a namespaced event, using a convention for event names.\n     *\n     * @example\n     * myComponent.emit('test')  // => `my-compnent:test`\n     *\n     * @param {string} type The event type, comes after `:` in event name.\n     * @param {string|object|any[]} detail detail for Event constructor\n     * @param {{ bubbles?:boolean, cancelable?:boolean }} opts `Cancelable` and\n     * `bubbles`\n     * @returns {boolean}\n     */\n    emit (type:string, detail:string|object|any[] = {}, opts:Partial<{\n        bubbles:boolean;\n        cancelable:boolean\n    }> = {}):boolean {\n        const namespace = Tonic.getTagName(this.constructor.name)\n        const event = new CustomEvent(`${namespace}:${type}`, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    html (\n        strings:string[]|TemplateStringsArray,\n        ...values\n    ):InstanceType<typeof TonicTemplate> {\n        const refs = o => {\n            if (o && o.__children__) return this._placehold(o)\n            if (o && o.isTonicTemplate) return o.rawText\n            switch (Object.prototype.toString.call(o)) {\n                case '[object HTMLCollection]':\n                case '[object NodeList]': return this._placehold([...o])\n                case '[object Array]': {\n                    if (o.every(x => x.isTonicTemplate && !x.unsafe)) {\n                        return new TonicTemplate(o.join('\\n'), null, false)\n                    }\n                    return this._prop(o)\n                }\n                case '[object Object]':\n                case '[object Function]':\n                case '[object AsyncFunction]':\n                case '[object Set]':\n                case '[object Map]':\n                case '[object WeakMap]':\n                case '[object File]':\n                    return this._prop(o)\n                case '[object NamedNodeMap]':\n                    return this._prop(Tonic._normalizeAttrs(o))\n                case '[object Number]': return `${o}__float`\n                case '[object String]': return Tonic.escape(o)\n                case '[object Boolean]': return `${o}__boolean`\n                case '[object Null]': return `${o}__null`\n                case '[object HTMLElement]':\n                    return this._placehold([o])\n            }\n            if (\n                typeof o === 'object' && o && o.nodeType === 1 &&\n                typeof o.cloneNode === 'function'\n            ) {\n                return this._placehold([o])\n            }\n            return o\n        }\n\n        const out:string[] = []\n        for (let i = 0; i < strings.length - 1; i++) {\n            out.push(strings[i], refs(values[i]))\n        }\n        out.push(strings[strings.length - 1])\n\n        const htmlStr = out.join('').replace(Tonic.SPREAD, (_, p) => {\n            const o = Tonic._data[p.split('__')[1]][p]\n            return Object.entries(o).map(([key, value]) => {\n                const k = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n                if (value === true) return k\n                else if (value) return `${k}=\"${Tonic.escape(String(value))}\"`\n                else return ''\n            }).filter(Boolean).join(' ')\n        })\n            // Process type markers in template content\n            .replace(/(\\d+(?:\\.\\d+)?)__float/g, '$1')\n            .replace(/(true|false)__boolean/g, '$1')\n            .replace(/null__null/g, 'null')\n\n        return new TonicTemplate(htmlStr, strings, false)\n    }\n\n    scheduleReRender (oldProps:any):Promise<this> {\n        if (this.pendingReRender) return this.pendingReRender\n\n        this.pendingReRender = new Promise(resolve => setTimeout(() => {\n            if (!this.isInDocument(this.shadowRoot || this)) return\n            const p = this._set(this.shadowRoot || this, this.render)\n            this.pendingReRender = null\n\n            if (p && p.then) {\n                return p.then(() => {\n                    this.updated && this.updated(oldProps)\n                    resolve(this)\n                })\n            }\n\n            this.updated && this.updated(oldProps)\n            resolve(this)\n        }, 0))\n\n        return this.pendingReRender\n    }\n\n    /**\n     * Update the view\n     */\n    reRender (o:T|((props:T)=>T) = this.props):Promise<this> {\n        const oldProps = { ...this.props }\n        this.props = typeof o === 'function' ? (o as (props:T)=>T)(oldProps) : o\n        return this.scheduleReRender(oldProps)\n    }\n\n    /**\n     * If there is a method with the same name as the event type,\n     * then call the method.\n     * @see {@link https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#what-is-the-handleevent-method What is the handleEvent() method?}\n     */\n    handleEvent (ev:Event):void {\n        this['handle_' + ev.type] && this['handle_' + ev.type](ev)\n    }\n\n    private _drainIterator (target, iterator) {\n        return iterator.next().then((result) => {\n            this._set(target, null, result.value)\n            if (result.done) return\n            return this._drainIterator(target, iterator)\n        })\n    }\n\n    /**\n     * _set\n     * @param {Element|InstanceType<typeof Tonic>|ShadowRoot} target\n     * @param {()=>any} render\n     * @param {string} content\n     * @returns {Promise<void>|void}\n     * @private\n     */\n    private _set (target, render, content = ''):Promise<void>|void {\n        this.willRender && this.willRender()\n        for (const node of target.querySelectorAll(Tonic._tags)) {\n            if (!node.isTonicComponent) continue\n\n            const id = node.getAttribute('id')\n            if (!id || !Tonic._refIds.includes(id)) continue\n            Tonic._states[id] = node.state\n        }\n\n        if (render instanceof Tonic.AsyncFunction) {\n            return ((render as ()=>any)\n                .call(this, this.html, this.props)\n                .then(content => this._apply(target, content))\n            )\n        } else if (render instanceof Tonic.AsyncFunctionGenerator) {\n            return this._drainIterator(target, (render as AsyncGeneratorFunction).call(this))\n        } else if (render === null) {\n            this._apply(target, content)\n        } else if (render instanceof Function) {\n            this._apply(target, render.call(this, this.html, this.props) || '')\n        }\n    }\n\n    private _apply (target, content) {\n        if (content && content.isTonicTemplate) {\n            content = content.rawText\n        } else if (typeof content === 'string') {\n            content = Tonic.escape(content)\n        }\n\n        if (typeof content === 'string') {\n            if (this.stylesheet) {\n                content = `<style nonce=${Tonic.nonce || ''}>${this.stylesheet()}</style>${content}`\n            }\n\n            // Check if we should use morphdom for DOM state preservation\n            const hasFormElements = target.querySelector && (\n                target.querySelector('input') ||\n                target.querySelector('textarea') ||\n                target.querySelector('select')\n            )\n\n            const shouldUseMorphdom = (\n                hasFormElements &&\n                document.activeElement &&\n                (\n                    target.contains(document.activeElement) ||\n                    target === document.activeElement\n                )\n            )\n\n            if (shouldUseMorphdom) {\n                // Use morphdom to preserve DOM state during updates\n                const tempContainer = document.createElement('div')\n                tempContainer.innerHTML = content\n\n                morphdom(target, tempContainer, {\n                    childrenOnly: true,\n                    onBeforeElUpdated: (fromEl, toEl) => {\n                        // Skip updating if the elements are the same and preserve form state\n                        if (fromEl.isEqualNode && fromEl.isEqualNode(toEl)) {\n                            return false\n                        }\n\n                        // For inputs, preserve value and selection\n                        if (fromEl.tagName === 'INPUT' && toEl.tagName === 'INPUT') {\n                            const fromInput = fromEl as HTMLInputElement\n                            const toInput = toEl as HTMLInputElement\n\n                            // Preserve form values\n                            if (fromInput.value !== '') {\n                                toInput.value = fromInput.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromInput) {\n                                toInput.setAttribute('data-preserve-focus', 'true')\n                                toInput.setAttribute('data-selection-start', String(fromInput.selectionStart || 0))\n                                toInput.setAttribute('data-selection-end', String(fromInput.selectionEnd || 0))\n                            }\n                        }\n\n                        // For textareas, preserve value and selection\n                        if (fromEl.tagName === 'TEXTAREA' && toEl.tagName === 'TEXTAREA') {\n                            const fromTextarea = fromEl as HTMLTextAreaElement\n                            const toTextarea = toEl as HTMLTextAreaElement\n\n                            // Preserve form values\n                            if (fromTextarea.value !== '') {\n                                toTextarea.value = fromTextarea.value\n                            }\n\n                            // Preserve selection/cursor position\n                            if (document.activeElement === fromTextarea) {\n                                toTextarea.setAttribute('data-preserve-focus', 'true')\n                                toTextarea.setAttribute('data-selection-start', String(fromTextarea.selectionStart || 0))\n                                toTextarea.setAttribute('data-selection-end', String(fromTextarea.selectionEnd || 0))\n                            }\n                        }\n\n                        return true\n                    },\n\n                    onElUpdated: (el) => {\n                        // Restore focus and selection after update\n                        if (el.hasAttribute('data-preserve-focus')) {\n                            const startPos = parseInt(el.getAttribute('data-selection-start') || '0', 10)\n                            const endPos = parseInt(el.getAttribute('data-selection-end') || '0', 10)\n\n                            // Clean up attributes\n                            el.removeAttribute('data-preserve-focus')\n                            el.removeAttribute('data-selection-start')\n                            el.removeAttribute('data-selection-end')\n\n                            // Focus and restore selection\n                            el.focus()\n                            if ('setSelectionRange' in el) {\n                                (el as HTMLInputElement|HTMLTextAreaElement).setSelectionRange(startPos, endPos)\n                            }\n                        }\n                    }\n                })\n            } else {\n                // Use original innerHTML approach\n                target.innerHTML = content\n            }\n\n            if (this.styles) {\n                const styles = this.styles()\n                for (const node of target.querySelectorAll('[styles]')) {\n                    for (const s of node.getAttribute('styles').split(/\\s+/)) {\n                        Object.assign(node.style, styles[s.trim()])\n                    }\n                }\n            }\n\n            const children = Tonic._children[this._id] || {}\n\n            const walk = (node, fn) => {\n                if (node.nodeType === 3) {\n                    const id = node.textContent.trim()\n                    if (children[id]) fn(node, children[id], id)\n                }\n\n                const childNodes = node.childNodes\n                if (!childNodes) return\n\n                for (let i = 0; i < childNodes.length; i++) {\n                    walk(childNodes[i], fn)\n                }\n            }\n\n            walk(target, (node, children, id) => {\n                for (const child of children) {\n                    node.parentNode.insertBefore(child, node)\n                }\n                delete Tonic._children[this._id][id]\n                node.parentNode.removeChild(node)\n            })\n        } else {\n            target.innerHTML = ''\n            target.appendChild(content.cloneNode(true))\n        }\n    }\n\n    connectedCallback () {\n        this.root = this.shadowRoot || this // here for back compat\n\n        if (super.id && !Tonic._refIds.includes(super.id)) {\n            Tonic._refIds.push(super.id)\n        }\n        const cc = s => s.replace(/-(.)/g, (_, m) => m.toUpperCase())\n\n        for (const { name: _name, value } of this.attributes) {\n            const name = cc(_name)\n            const p = (this.props as { [key:string]:any })[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__');\n                (this.props as { [key:string]:any })[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                (this.props as { [key:string]:any })[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                (this.props as { [key:string]:any })[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                (this.props as { [key:string]:any })[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':');\n                (this.props as { [key:string]:any })[name] =\n                    Tonic._children[root][p][0]\n            }\n        }\n\n        this.props = Object.assign(\n            this.defaults(),\n            this.props\n        )\n\n        this._id = this._id || Tonic._createId()\n\n        this.willConnect && this.willConnect()\n\n        if (!this.isInDocument(this.root)) return\n        if (!this.preventRenderOnReconnect) {\n            if (!this._source) {\n                this._source = this.innerHTML\n            } else {\n                this.innerHTML = this._source\n            }\n            const p = this._set(this.root, this.render)\n            if (p && p.then) {\n                return p.then(() => this.connected && this.connected())\n            }\n        }\n\n        this.connected && this.connected()\n    }\n\n    isInDocument (target:HTMLElement|ShadowRoot):boolean {\n        const root = target.getRootNode()\n        return root === document || root.toString() === '[object ShadowRoot]'\n    }\n\n    disconnectedCallback ():void {\n        this.disconnected && this.disconnected()\n        delete Tonic._data[this._id]\n        delete Tonic._children[this._id]\n    }\n}\n\nexport default Tonic\n"],
+  "mappings": "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",
   "names": ["o", "content", "children"]
 }

package/dist/index.min.cjs

@@ -0,0 +1,3 @@
+var b=Object.create;var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var f=(d,p)=>m(d,"name",{value:p,configurable:!0});var E=(d,p)=>{for(var e in p)m(d,e,{get:p[e],enumerable:!0})},g=(d,p,e,t)=>{if(p&&typeof p=="object"||typeof p=="function")for(let n of w(p))!A.call(d,n)&&n!==e&&m(d,n,{get:()=>p[n],enumerable:!(t=v(p,n))||t.enumerable});return d};var S=(d,p,e)=>(e=d!=null?b(R(d)):{},g(p||!d||!d.__esModule?m(e,"default",{value:d,enumerable:!0}):e,d)),j=d=>g(m({},"__esModule",{value:!0}),d);var N={};E(N,{Tonic:()=>s,TonicTemplate:()=>_,default:()=>T});module.exports=j(N);var y=S(require("@substrate-system/morphdom"),1);class _{static{f(this,"TonicTemplate")}constructor(p,e,t){this.isTonicTemplate=!0,this.unsafe=!!t,this.rawText=p,this.templateStrings=e}valueOf(){return this.rawText}toString(){return this.rawText}}class s extends window.HTMLElement{constructor(){super();this._props=s.getPropertyNames(this);const e=s._states[super.id];delete s._states[super.id],this._state=e||{},this.preventRenderOnReconnect=!1,this.props={},this.elements=[...this.children],this.elements.__children__=!0,this.nodes=[...this.childNodes],this.nodes.__children__=!0,this._events()}static{f(this,"Tonic")}static{this._tags=""}static{this._refIds=[]}static{this._data={}}static{this._states={}}static{this._children={}}static{this._reg={}}static{this._stylesheetRegistry=[]}static{this._index=0}static get version(){return VERSION??null}static get SPREAD(){return/\.\.\.\s?(__\w+__\w+__)/g}static get ESC(){return/["&'<>`/]/g}static get AsyncFunctionGenerator(){return async function*(){}.constructor}static get AsyncFunction(){return async function(){}.constructor}static get MAP(){return{'"':"&quot;","&":"&amp;","'":"&#x27;","<":"&lt;",">":"&gt;","`":"&#x60;","/":"&#x2F;"}}defaults(){return{}}get isTonicComponent(){return!0}static event(e){return`${this.tag}:${e}`}static get tag(){return s.getTagName(this.name)}static _createId(){return`tonic${s._index++}`}static _normalizeAttrs(e,t={}){return[...e].forEach(n=>t[n.name]=n.value),t}_checkId(){const e=super.id;if(!e){const t=this.outerHTML.replace(this.innerHTML,"...");throw new Error(`Component: ${t} has no id`)}return e}get state(){return this._checkId(),this._state}set state(e){this._state=(this._checkId(),e)}_events(){const e=Object.getOwnPropertyNames(window.HTMLElement.prototype);for(const t of this._props){if(!t.includes("handle_"))continue;const n=t.split("_")[1];e.indexOf("on"+n)!==-1&&this.addEventListener(n,this)}}_prop(e){const t=this._id,n=`__${t}__${s._createId()}__`;return s._data[t]=s._data[t]||{},s._data[t][n]=e,n}_placehold(e){const t=this._id,n=`placehold:${t}:${s._createId()}__`;return s._children[t]=s._children[t]||{},s._children[t][n]=e,n}static match(e,t){return e.matches||(e=e.parentElement),e.matches(t)?e:e.closest(t)}static getTagName(e){return e.match(/[A-Z][a-z0-9]*/g).join("-").toLowerCase()}static getPropertyNames(e){const t=[];for(;e&&e!==s.prototype;)t.push(...Object.getOwnPropertyNames(e)),e=Object.getPrototypeOf(e);return t}static add(e,t){if(!(t||e.name&&e.name.length>1))throw Error("Mangling. https://bit.ly/2TkJ6zP");if(t||(t=s.getTagName(e.name)),!s.ssr&&window.customElements.get(t))throw new Error(`Cannot Tonic.add(${e.name}, '${t}') twice`);if(!e.prototype||!e.prototype.isTonicComponent){const o={[e.name]:class extends s{}}[e.name];o.prototype.render=e,e=o}return e.prototype._props=s.getPropertyNames(e.prototype),s._reg[t]=e,s._tags=Object.keys(s._reg).join(),window.customElements.define(t,e),typeof e.stylesheet=="function"&&s.registerStyles(e.stylesheet),e}static registerStyles(e){if(s._stylesheetRegistry.includes(e))return;s._stylesheetRegistry.push(e);const t=document.createElement("style");s.nonce&&t.setAttribute("nonce",s.nonce),t.appendChild(document.createTextNode(e())),document.head&&document.head.appendChild(t)}static escape(e){return e.replace(s.ESC,t=>s.MAP[t])}static unsafeRawString(e,t){return new _(e,t,!0)}dispatch(e,t=null){const n={bubbles:!0,detail:t};this.dispatchEvent(new window.CustomEvent(e,n))}emit(e,t={},n={}){const o=s.getTagName(this.constructor.name),c=new CustomEvent(`${o}:${e}`,{bubbles:n.bubbles===void 0?!0:n.bubbles,cancelable:n.cancelable===void 0?!0:n.cancelable,detail:t});return this.dispatchEvent(c)}html(e,...t){const n=f(r=>{if(r&&r.__children__)return this._placehold(r);if(r&&r.isTonicTemplate)return r.rawText;switch(Object.prototype.toString.call(r)){case"[object HTMLCollection]":case"[object NodeList]":return this._placehold([...r]);case"[object Array]":return r.every(l=>l.isTonicTemplate&&!l.unsafe)?new _(r.join(`
+`),null,!1):this._prop(r);case"[object Object]":case"[object Function]":case"[object AsyncFunction]":case"[object Set]":case"[object Map]":case"[object WeakMap]":case"[object File]":return this._prop(r);case"[object NamedNodeMap]":return this._prop(s._normalizeAttrs(r));case"[object Number]":return`${r}__float`;case"[object String]":return s.escape(r);case"[object Boolean]":return`${r}__boolean`;case"[object Null]":return`${r}__null`;case"[object HTMLElement]":return this._placehold([r])}return typeof r=="object"&&r&&r.nodeType===1&&typeof r.cloneNode=="function"?this._placehold([r]):r},"refs"),o=[];for(let r=0;r<e.length-1;r++)o.push(e[r],n(t[r]));o.push(e[e.length-1]);const c=o.join("").replace(s.SPREAD,(r,l)=>{const a=s._data[l.split("__")[1]][l];return Object.entries(a).map(([u,i])=>{const h=u.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();return i===!0?h:i?`${h}="${s.escape(String(i))}"`:""}).filter(Boolean).join(" ")}).replace(/(\d+(?:\.\d+)?)__float/g,"$1").replace(/(true|false)__boolean/g,"$1").replace(/null__null/g,"null");return new _(c,e,!1)}scheduleReRender(e){return this.pendingReRender?this.pendingReRender:(this.pendingReRender=new Promise(t=>setTimeout(()=>{if(!this.isInDocument(this.shadowRoot||this))return;const n=this._set(this.shadowRoot||this,this.render);if(this.pendingReRender=null,n&&n.then)return n.then(()=>{this.updated&&this.updated(e),t(this)});this.updated&&this.updated(e),t(this)},0)),this.pendingReRender)}reRender(e=this.props){const t={...this.props};return this.props=typeof e=="function"?e(t):e,this.scheduleReRender(t)}handleEvent(e){this["handle_"+e.type]&&this["handle_"+e.type](e)}_drainIterator(e,t){return t.next().then(n=>{if(this._set(e,null,n.value),!n.done)return this._drainIterator(e,t)})}_set(e,t,n=""){this.willRender&&this.willRender();for(const o of e.querySelectorAll(s._tags)){if(!o.isTonicComponent)continue;const c=o.getAttribute("id");!c||!s._refIds.includes(c)||(s._states[c]=o.state)}if(t instanceof s.AsyncFunction)return t.call(this,this.html,this.props).then(o=>this._apply(e,o));if(t instanceof s.AsyncFunctionGenerator)return this._drainIterator(e,t.call(this));t===null?this._apply(e,n):t instanceof Function&&this._apply(e,t.call(this,this.html,this.props)||"")}_apply(e,t){if(t&&t.isTonicTemplate?t=t.rawText:typeof t=="string"&&(t=s.escape(t)),typeof t=="string"){if(this.stylesheet&&(t=`<style nonce=${s.nonce||""}>${this.stylesheet()}</style>${t}`),e.querySelector&&(e.querySelector("input")||e.querySelector("textarea")||e.querySelector("select"))&&document.activeElement&&(e.contains(document.activeElement)||e===document.activeElement)){const l=document.createElement("div");l.innerHTML=t,(0,y.default)(e,l,{childrenOnly:!0,onBeforeElUpdated:f((a,u)=>{if(a.isEqualNode&&a.isEqualNode(u))return!1;if(a.tagName==="INPUT"&&u.tagName==="INPUT"){const i=a,h=u;i.value!==""&&(h.value=i.value),document.activeElement===i&&(h.setAttribute("data-preserve-focus","true"),h.setAttribute("data-selection-start",String(i.selectionStart||0)),h.setAttribute("data-selection-end",String(i.selectionEnd||0)))}if(a.tagName==="TEXTAREA"&&u.tagName==="TEXTAREA"){const i=a,h=u;i.value!==""&&(h.value=i.value),document.activeElement===i&&(h.setAttribute("data-preserve-focus","true"),h.setAttribute("data-selection-start",String(i.selectionStart||0)),h.setAttribute("data-selection-end",String(i.selectionEnd||0)))}return!0},"onBeforeElUpdated"),onElUpdated:f(a=>{if(a.hasAttribute("data-preserve-focus")){const u=parseInt(a.getAttribute("data-selection-start")||"0",10),i=parseInt(a.getAttribute("data-selection-end")||"0",10);a.removeAttribute("data-preserve-focus"),a.removeAttribute("data-selection-start"),a.removeAttribute("data-selection-end"),a.focus(),"setSelectionRange"in a&&a.setSelectionRange(u,i)}},"onElUpdated")})}else e.innerHTML=t;if(this.styles){const l=this.styles();for(const a of e.querySelectorAll("[styles]"))for(const u of a.getAttribute("styles").split(/\s+/))Object.assign(a.style,l[u.trim()])}const c=s._children[this._id]||{},r=f((l,a)=>{if(l.nodeType===3){const i=l.textContent.trim();c[i]&&a(l,c[i],i)}const u=l.childNodes;if(u)for(let i=0;i<u.length;i++)r(u[i],a)},"walk");r(e,(l,a,u)=>{for(const i of a)l.parentNode.insertBefore(i,l);delete s._children[this._id][u],l.parentNode.removeChild(l)})}else e.innerHTML="",e.appendChild(t.cloneNode(!0))}connectedCallback(){this.root=this.shadowRoot||this,super.id&&!s._refIds.includes(super.id)&&s._refIds.push(super.id);const e=f(t=>t.replace(/-(.)/g,(n,o)=>o.toUpperCase()),"cc");for(const{name:t,value:n}of this.attributes){const o=e(t),c=this.props[o]=n;if(/__\w+__\w+__/.test(c)){const{1:r}=c.split("__");this.props[o]=s._data[r][c]}else if(/\d+__float/.test(c))this.props[o]=parseFloat(c);else if(c==="null__null")this.props[o]=null;else if(/\w+__boolean/.test(c))this.props[o]=c.includes("true");else if(/placehold:\w+:\w+__/.test(c)){const{1:r}=c.split(":");this.props[o]=s._children[r][c][0]}}if(this.props=Object.assign(this.defaults(),this.props),this._id=this._id||s._createId(),this.willConnect&&this.willConnect(),!!this.isInDocument(this.root)){if(!this.preventRenderOnReconnect){this._source?this.innerHTML=this._source:this._source=this.innerHTML;const t=this._set(this.root,this.render);if(t&&t.then)return t.then(()=>this.connected&&this.connected())}this.connected&&this.connected()}}isInDocument(e){const t=e.getRootNode();return t===document||t.toString()==="[object ShadowRoot]"}disconnectedCallback(){this.disconnected&&this.disconnected(),delete s._data[this._id],delete s._children[this._id]}}var T=s;
+//# sourceMappingURL=index.min.cjs.map