npm - @substrate-system/tonic - Versions diffs - 16.1.4 → 17.1.0 - Mend

@substrate-system/tonic 16.1.4 → 17.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/README.md +323 -52
package/dist/index.cjs +8 -3
package/dist/index.cjs.map +2 -2
package/dist/index.d.ts +4 -1
package/dist/index.js +9 -4
package/dist/index.js.map +2 -2
package/dist/index.min.cjs +3 -0
package/dist/index.min.cjs.map +7 -0
package/dist/index.min.mjs +3 -0
package/dist/index.min.mjs.map +7 -0
package/dist/index.mjs +536 -0
package/dist/index.mjs.map +7 -0
package/dist/meta.json +36 -6
package/dist/render-to-string.cjs +112 -0
package/dist/render-to-string.cjs.map +7 -0
package/dist/render-to-string.d.ts +22 -0
package/dist/render-to-string.js +81 -0
package/dist/render-to-string.js.map +7 -0
package/dist/render-to-string.min.cjs +2 -0
package/dist/render-to-string.min.cjs.map +7 -0
package/dist/render-to-string.min.mjs +2 -0
package/dist/render-to-string.min.mjs.map +7 -0
package/dist/render-to-string.mjs +84 -0
package/dist/render-to-string.mjs.map +7 -0
package/package.json +17 -9
package/dist/index.min.js +0 -3
package/dist/index.min.js.map +0 -7

package/README.md CHANGED Viewed

@@ -8,10 +8,10 @@
 # Tonic
-Tonic is a low profile component framework for the web. It's one file,
-less than 3kb gzipped and has no dependencies.
-It's designed to be used with modern Javascript and is compatible
-with all modern browsers and built on top of Web Components.
+Tonic is a low profile component framework for the web.
+It's designed to be used with contemporary Javascript and is compatible
+with all modern browsers. It's built on top of
+[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
 [See the API docs](https://substrate-system.github.io/tonic/index.html)
@@ -24,18 +24,28 @@ with all modern browsers and built on top of Web Components.
 - [Use](#use)
   * [Bundler](#bundler)
   * [Pre-bundled](#pre-bundled)
-- [Examples](#examples)
+- [Get Started](#get-started)
+  * [Register](#register)
+  * [HTML](#html-1)
+  * [Render](#render)
+  * [Rerender](#rerender)
+  * [Events](#events)
+  * [State](#state)
+- [Server-Side Rendering](#server-side-rendering)
+  * [SSR Example](#ssr-example)
+  * [Async Components](#async-components)
+- [docs](#docs)
+- [types](#types)
 - [API](#api)
   * [Event listeners](#event-listeners)
-- [Example](#example-1)
-- [fork](#fork)
-  * [DOM state](#dom-state)
-  * [docs](#docs)
-  * [types](#types)
   * [`tag`](#tag)
   * [`emit`](#emit)
   * [`static event`](#static-event)
   * [`dispatch`](#dispatch)
+- [Develop](#develop)
+  * [build ESM](#build-esm)
+  * [build Common JS](#build-common-js)
+  * [build UMD modules](#build-umd-modules)
 - [Useful links](#useful-links)
 <!-- tocstop -->
@@ -50,7 +60,14 @@ npm i -S @substrate-system/tonic
 ## tl;dr
-You can pass full JS objects into components, not just strings, as in HTML.
+This is a front-end view library, like React, but using web components.
+> [!TIP]
+> DOM state, such as element focus and input values, is preserved
+> across multiple calls to `reRender`.
+-------
 ## Use
@@ -77,55 +94,285 @@ cp ./node_modules/@substrate-system/tonic/dist/index.min.js ./public/tonic.min.j
 <script type="module" src="./tonic.min.js"></script>
 ```
-## Examples
+-----------------------------------
-You can use functions as components. They can be async or even an async
-generator function.
+## Get Started
+Building a component with Tonic starts by creating a function or a
+[class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes).
+The class should have at least one method named *render* which returns
+a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+of HTML.
 ```js
-async function MyGreeting () {
-  const data = await (await fetch('https://example.com/data')).text()
-  return this.html`<h1>Hello, ${data}</h1>`
+import Tonic from '@substrate-system/tonic'
+class MyGreeting extends Tonic {
+  render () {
+    return this.html`<div>Hello, World.</div>`
+  }
 }
 ```
-Or you can use classes. Every class must have a render method.
+or
 ```js
-class MyGreeting extends Tonic {
-  async * render () {
-    yield this.html`<div>Loading...</div>`
-    const data = await (await fetch('https://example.com/data')).text()
-    return this.html`<div>Hello, ${data}.</div>`
-  }
+function MyGreeting () {
+  return this.html`
+    <div>Hello, World.</div>
+  `
 }
 ```
+---
+The HTML tag for your component will match the class or function name.
+> [!NOTE]
+> Tonic is a thin wrapper around `web components`. Web
+> components require a name with two or more parts. So your class name should
+> be `CamelCased` (starting with an uppercase letter). For example, `MyGreeting`
+> becomes `<my-greeting></my-greeting>`.
+>
+---
+### Register
+Next, register your component with `Tonic.add(ClassName)`.
 ```js
-Tonic.add(MyGreeting, 'my-greeting')
+Tonic.add(MyGreeting)
 ```
+---
+### HTML
 After adding your Javascript to your HTML, you can use your component anywhere.
+```html
+<html>
+  <body>
+    <my-greeting></my-greeting>
+    <script src="index.js"></script>
+  </body>
+</html>
+```
+>
+> [!NOTE]
+> Custom tags (in all browsers) require a closing tag even if
+> they have no children. Tonic doesn't add any "magic" to change how this works.
+>
+---
+### Render
+When the component is rendered by the browser, the result of your render
+function will be inserted into the component tag.
 ```html
 <html>
   <head>
-    <script src="my-greeting.js"></script>
+    <script src="index.js"></script>
   </head>
   <body>
-    <my-greeting></my-greeting>
+    <my-greeting>
+      <div>Hello, World.</div>
+    </my-greeting>
   </body>
 </html>
 ```
+A component (or its render function) may be an `async` or an `async generator`.
+```js
+class GithubUrls extends Tonic {
+  async * render () {
+    yield this.html`<p>Loading...</p>`
+    const res = await fetch('https://api.github.com/')
+    const urls = await res.json()
+    return this.html`
+      <pre>
+        ${JSON.stringify(urls, 2, 2)}
+      </pre>
+    `
+  }
+}
+```
+### Rerender
+Call `tonicInstance.reRender()` to render your component again with updated
+state. This is totally decoupled from any kind of state machine, so you can
+choose how to batch state updates, and just re-render when necessary.
+> [!TIP]
+> DOM state, such as focus and input values, is preserved
+> across multiple calls to `reRender`.
+### Events
+There is a convention for event handler method names. Name a method like
+`handle_example`, and the method will be called with any `example` type
+event.
+#### Events Example
+```js
+import { Tonic } from '@substrate-system/tonic'
+class ButtonExample extends Tonic {
+  handle_click (ev) {
+    ev.preventDefault()
+    if (Tonic.match(ev.target as HTMLButtonElement, 'button')) {
+      // button clicks only
+      this.increment()
+    }
+    this.props.onbtnclick('hello')
+  }
+  render () {
+    return this.html`<div id="test">
+      example
+      <button id="btn">clicker</button>
+    </div>`
+  }
+}
+```
+### State
+`this.state` is a plain-old javascript object. Its value will be persisted if
+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
+rendering only happens only when necessary.
+Remember to clean up! States are just a set of key-value pairs on the Tonic
+object. So if you create temporary components that use state,
+clean up their state after you delete them. For example,
+if I have a component with thousands of temporary child elements that
+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
 Add a method with an event name, and it will be called with any matching events.
-#### Example
+#### Event Listener Example
 ```js
 import { Tonic } from '@substrate-system/tonic'
@@ -147,29 +394,16 @@ class MyClicker extends Tonic {
 Tonic.add(MyClicker)
 ```
-## Example
-## fork
-This is a fork of [@socketsupply/tonic](https://github.com/socketsupply/tonic).
-Here are some things unique to the fork:
-### DOM state
-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
@@ -192,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
@@ -278,8 +514,43 @@ el.dispatch('more testing', 'some data', {
 })
 ```
+## Develop
+On any version bump, we run `npm run build`, which calls all the other
+build scripts.
+### build ESM
+```sh
+npm run build-esm
+```
+```sh
+npm run build-esm:min
+```
+### build Common JS
+```sh
+npm run build-cjs
+```
+```sh
+npm run build-cjs:min
+```
+### build UMD modules
+```sh
+npm run build:main
+```
+```sh
+npm run build:minify
+```
 ## Useful links
-- [Tonic components](https://github.com/socketsupply/components)
 - [API](./API.md)
 - [Troubleshooting](./HELP.md)
 - [Web Component lifecycle methods](https://gomakethings.com/the-web-component-lifecycle-methods/)

package/dist/index.cjs CHANGED Viewed

@@ -174,8 +174,10 @@ class Tonic extends window.HTMLElement {
   _events() {
     const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype);
     for (const p of this._props) {
-      if (hp.indexOf("on" + p) === -1) continue;
-      this.addEventListener(p, this);
+      if (!p.includes("handle_")) continue;
+      const evName = p.split("_")[1];
+      if (hp.indexOf("on" + evName) === -1) continue;
+      this.addEventListener(evName, this);
     }
   }
   _prop(o) {
@@ -199,6 +201,9 @@ class Tonic extends window.HTMLElement {
   static getTagName(camelName) {
     return camelName.match(/[A-Z][a-z0-9]*/g).join("-").toLowerCase();
   }
+  /**
+   * Add all methods to this._props
+   */
   static getPropertyNames(proto) {
     const props = [];
     while (proto && proto !== Tonic.prototype) {
@@ -371,7 +376,7 @@ class Tonic extends window.HTMLElement {
    * @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?}
    */
   handleEvent(ev) {
-    this[ev.type] && this[ev.type](ev);
+    this["handle_" + ev.type] && this["handle_" + ev.type](ev);
   }
   _drainIterator(target, iterator) {
     return iterator.next().then((result) => {

package/dist/index.cjs.map CHANGED Viewed

@@ -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        for (const p of this._props) {\n            if (hp.indexOf('on' + p) === -1) continue\n            this.addEventListener(p, 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    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[ev.type] && this[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"]
 }