@substrate-system/tonic 16.0.16 → 16.1.0

package/LICENSE

@@ -0,0 +1,168 @@
+# Big Time Public License
+
+Version 2.0.2
+
+<https://bigtimelicense.com/versions/2.0.2>
+
+## Purpose
+
+These terms let you use and share this software for noncommercial purposes
+and in small business for free, while also guaranteeing that paid licenses
+for big businesses will be available on fair, reasonable, and
+nondiscriminatory terms.
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as
+both strict obligations and conditions to all your licenses.
+
+## Noncommercial Purposes
+
+You may use the software for any noncommercial purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for the benefit of
+public knowledge, personal study, private entertainment, hobby projects,
+amateur pursuits, or religious observance, without any anticipated
+commercial application, count as use for noncommercial purposes.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution, public
+research organization, public safety or health organization, environmental
+protection organization, or government institution counts as use for
+noncommercial purposes, regardless of the source of funding or obligations
+resulting from the funding.
+
+## Small Business
+
+You may use the software for the benefit of your company if it meets all
+these criteria:
+
+1.  had fewer than 20 total individuals working as employees and
+    independent contractors at all times during the last tax year
+
+2.  earned less than $1,000,000 total revenue in the last tax year
+
+3.  received less than $1,000,000 total debt, equity, and other investment
+    in the last five tax years, counting investment in predecessor
+    companies that reorganized into, merged with, or spun out your company
+
+All dollar figures are United States dollars as of 2019.  Adjust for them
+inflation according to the United States Bureau of Labor Statistics'
+consumer price index for all urban consumers, United States city average,
+for all items, not seasonally adjusted, with 1982–1984=100 reference base.
+
+## Big Business
+
+You may use the software for the benefit of your company:
+
+1.  for 128 days after your company stops qualifying under
+    [Small Business](#small-business)
+
+2.  indefinitely, if the licensor or their legal successor does not offer
+fair, reasonable, and nondiscriminatory terms for a commercial license for
+the software within 32 days of [written request](#how-to-request) and
+negotiate in good faith to conclude a deal
+
+## How to Request
+
+If this software includes an address for the licensor or an agent of the
+licensor in a standard place, such as in documentation, software package
+metadata, or an "about" page or screen, try to request a fair commercial
+license at that address.  If this package includes both online and offline
+addresses, try online before offline.  If you can't deliver a request that
+way, or this software doesn't include any addressees, spend one hour online
+researching an address, recording all your searches and inquiries as you
+go, and try any addresses that you find.  If you can't find any addresses,
+or if those addresses also fail, that counts as failure to offer a fair
+commercial license by the licensor under [Big Business](#big-business).
+
+## Fair, Reasonable, and Nondiscriminatory Terms
+
+Fair, reasonable, and nondiscriminatory terms may license the software
+perpetually or for a term, and may or may not cover new versions of the
+software.  If the licensor advertises license terms and a pricing structure
+for generally available commercial licenses, the licensor proposes license
+terms and a price as advertised, and a customer not affiliated with the
+licensor has bought a commercial license for the software on substantially
+equivalent terms in the past year, the proposal is fair, reasonable, and
+nondiscriminatory.
+
+## Copyright License
+
+The licensor grants you a copyright license to do everything with the
+software that would otherwise infringe the licensor's copyright in it for
+any purpose allowed by these terms.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software
+from you also gets a copy of these terms or the URL for them above, as well
+as copies of any plain-text lines beginning with `Required Notice:` that
+the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Nick Thomas (https://nichoth.com)
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers
+patent claims the licensor can license, or becomes able to license, that
+you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms
+do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses
+to anyone else, or prevent the licensor from granting licenses to anyone
+else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to
+infringement of any patent, your patent license for the software granted
+under these terms ends immediately. If your company makes such a claim,
+your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of
+these terms, or done anything with the software not covered by your
+licenses, your licenses can nonetheless continue if you come into full
+compliance with these terms, and take practical steps to correct past
+violations, within 32 days of receiving notice.  Otherwise, all your
+licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty
+or condition, and the licensor will not be liable to you for any damages
+arising out of these terms or the use or nature of the software, under any
+kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and
+the **software** is the software the licensor makes available under these
+terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all organizations that have control
+over, are under the control of, or are under common control with that
+organization.  **Control** means ownership of substantially all the assets
+of an entity, or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software
+under these terms.
+
+**Use** means anything you do with the software requiring one of your
+licenses.
+

package/README.md

@@ -1,11 +1,11 @@
 [![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/tonic/nodejs.yml?style=flat-square)](https://github.com/substrate-system/tonic/actions/workflows/nodejs.yml)
 [![GZip size](https://img.shields.io/bundlephobia/minzip/@substrate-system/tonic?style=flat-square&label=GZip%20size&color=97ca00)](https://bundlephobia.com/result?p=@substrate-system/tonic)
 [![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/tonic?)](https://packagephobia.com/result?p=@substrate-system/tonic)
-[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
 [![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)
-[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
+[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
+
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/substrate-system/tonic/fork/readme-tonic-dark.png">
@@ -13,14 +13,13 @@
   <img alt="tonic" src="https://raw.githubusercontent.com/substrate-system/tonic/fork/readme-tonic.png">
 </picture>
 
-<p align="center">
-  https://tonicframework.dev
-</p>
-
 <br/>
 <br/>
 
-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 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.
 
 [See the API docs](https://substrate-system.github.io/tonic/index.html)
 
@@ -35,6 +34,7 @@ Tonic is a low profile component framework for the web. It's one file, less than
   * [Pre-bundled](#pre-bundled)
 - [Examples](#examples)
 - [fork](#fork)
+  * [DOM state](#dom-state)
   * [docs](#docs)
   * [types](#types)
   * [`tag`](#tag)
@@ -125,7 +125,13 @@ After adding your Javascript to your HTML, you can use your component anywhere.
 ```
 
 ## fork
+
 This is a fork of [@socketsupply/tonic](https://github.com/socketsupply/tonic).
+Here are some things unique to the fork:
+
+### DOM state
+
+The DOM does contain some state.
 
 ### docs
 See [API docs](https://substrate-system.github.io/tonic/).

package/dist/index.cjs

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
@@ -23,6 +33,7 @@ __export(index_exports, {
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
+var import_morphdom = __toESM(require("@substrate-system/morphdom"), 1);
 class TonicTemplate {
   static {
     __name(this, "TonicTemplate");
@@ -200,7 +211,7 @@ class Tonic extends window.HTMLElement {
    * Add a component. Calls `window.customElements.define` with the
    * component's name.
    *
-   * @param {Tonic} c
+   * @param {Tonic} c Component to add
    * @param {string} [htmlName] Name of the element, default to the class name
    * @returns {Tonic}
    */
@@ -326,7 +337,7 @@ class Tonic extends window.HTMLElement {
         else if (value) return `${k}="${Tonic.escape(String(value))}"`;
         else return "";
       }).filter(Boolean).join(" ");
-    });
+    }).replace(/(\d+(?:\.\d+)?)__float/g, "$1").replace(/(true|false)__boolean/g, "$1").replace(/null__null/g, "null");
     return new TonicTemplate(htmlStr, strings, false);
   }
   scheduleReRender(oldProps) {
@@ -405,7 +416,60 @@ class Tonic extends window.HTMLElement {
       if (this.stylesheet) {
         content = `<style nonce=${Tonic.nonce || ""}>${this.stylesheet()}</style>${content}`;
       }
-      target.innerHTML = content;
+      const hasFormElements = target.querySelector && (target.querySelector("input") || target.querySelector("textarea") || target.querySelector("select"));
+      const shouldUseMorphdom = hasFormElements && document.activeElement && (target.contains(document.activeElement) || target === document.activeElement);
+      if (shouldUseMorphdom) {
+        const tempContainer = document.createElement("div");
+        tempContainer.innerHTML = content;
+        (0, import_morphdom.default)(target, tempContainer, {
+          childrenOnly: true,
+          onBeforeElUpdated: /* @__PURE__ */ __name((fromEl, toEl) => {
+            if (fromEl.isEqualNode && fromEl.isEqualNode(toEl)) {
+              return false;
+            }
+            if (fromEl.tagName === "INPUT" && toEl.tagName === "INPUT") {
+              const fromInput = fromEl;
+              const toInput = toEl;
+              if (fromInput.value !== "") {
+                toInput.value = fromInput.value;
+              }
+              if (document.activeElement === fromInput) {
+                toInput.setAttribute("data-preserve-focus", "true");
+                toInput.setAttribute("data-selection-start", String(fromInput.selectionStart || 0));
+                toInput.setAttribute("data-selection-end", String(fromInput.selectionEnd || 0));
+              }
+            }
+            if (fromEl.tagName === "TEXTAREA" && toEl.tagName === "TEXTAREA") {
+              const fromTextarea = fromEl;
+              const toTextarea = toEl;
+              if (fromTextarea.value !== "") {
+                toTextarea.value = fromTextarea.value;
+              }
+              if (document.activeElement === fromTextarea) {
+                toTextarea.setAttribute("data-preserve-focus", "true");
+                toTextarea.setAttribute("data-selection-start", String(fromTextarea.selectionStart || 0));
+                toTextarea.setAttribute("data-selection-end", String(fromTextarea.selectionEnd || 0));
+              }
+            }
+            return true;
+          }, "onBeforeElUpdated"),
+          onElUpdated: /* @__PURE__ */ __name((el) => {
+            if (el.hasAttribute("data-preserve-focus")) {
+              const startPos = parseInt(el.getAttribute("data-selection-start") || "0", 10);
+              const endPos = parseInt(el.getAttribute("data-selection-end") || "0", 10);
+              el.removeAttribute("data-preserve-focus");
+              el.removeAttribute("data-selection-start");
+              el.removeAttribute("data-selection-end");
+              el.focus();
+              if ("setSelectionRange" in el) {
+                el.setSelectionRange(startPos, endPos);
+              }
+            }
+          }, "onElUpdated")
+        });
+      } else {
+        target.innerHTML = content;
+      }
       if (this.styles) {
         const styles = this.styles();
         for (const node of target.querySelectorAll("[styles]")) {
@@ -475,7 +539,9 @@ class Tonic extends window.HTMLElement {
         this.innerHTML = this._source;
       }
       const p = this._set(this.root, this.render);
-      if (p && p.then) return p.then(() => this.connected && this.connected());
+      if (p && p.then) {
+        return p.then(() => this.connected && this.connected());
+      }
     }
     this.connected && this.connected();
   }

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export 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 object=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 * () {}.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\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add <\n        T extends typeof Tonic,\n        C extends T & { stylesheet?: ()=>string }\n    > (c:C, htmlName?:string):C {\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 as unknown as C\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\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(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            target.innerHTML = content\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[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__')\n                this.props[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                this.props[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                this.props[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                this.props[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':')\n                this.props[name] = 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) return p.then(() => this.connected && this.connected())\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"]
+  "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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",
+  "names": ["o", "content", "morphdom", "children"]
 }

package/dist/index.d.ts

@@ -12,7 +12,9 @@ export declare class TonicTemplate {
  *
  * @template {T extends object = Record<string, any>} T Type of the props
  */
-export declare abstract class Tonic<T extends object = Record<string, any>> extends window.HTMLElement {
+export declare abstract class Tonic<T extends {
+    [key: string]: any;
+} = Record<string, any>> extends window.HTMLElement {
     private static _tags;
     private static _refIds;
     private static _data;
@@ -90,13 +92,11 @@ export declare abstract class Tonic<T extends object = Record<string, any>> exte
      * Add a component. Calls `window.customElements.define` with the
      * component's name.
      *
-     * @param {Tonic} c
+     * @param {Tonic} c Component to add
      * @param {string} [htmlName] Name of the element, default to the class name
      * @returns {Tonic}
      */
-    static add<T extends typeof Tonic, C extends T & {
-        stylesheet?: () => string;
-    }>(c: C, htmlName?: string): C;
+    static add(c: any, htmlName?: string): any;
     static registerStyles(stylesheetFn: () => string): void;
     static escape(s: string): string;
     static unsafeRawString(s: string, templateStrings: string[]): InstanceType<typeof TonicTemplate>;

package/dist/index.js

@@ -1,5 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import morphdom from "@substrate-system/morphdom";
 export class TonicTemplate {
   static {
     __name(this, "TonicTemplate");
@@ -61,7 +62,7 @@ export class Tonic extends window.HTMLElement {
   }
   // @ts-expect-error VERSION is injected during build
   static get version() {
-    return "16.0.16";
+    return "16.1.0";
   }
   static get SPREAD() {
     return /\.\.\.\s?(__\w+__\w+__)/g;
@@ -177,7 +178,7 @@ export class Tonic extends window.HTMLElement {
    * Add a component. Calls `window.customElements.define` with the
    * component's name.
    *
-   * @param {Tonic} c
+   * @param {Tonic} c Component to add
    * @param {string} [htmlName] Name of the element, default to the class name
    * @returns {Tonic}
    */
@@ -303,7 +304,7 @@ export class Tonic extends window.HTMLElement {
         else if (value) return `${k}="${Tonic.escape(String(value))}"`;
         else return "";
       }).filter(Boolean).join(" ");
-    });
+    }).replace(/(\d+(?:\.\d+)?)__float/g, "$1").replace(/(true|false)__boolean/g, "$1").replace(/null__null/g, "null");
     return new TonicTemplate(htmlStr, strings, false);
   }
   scheduleReRender(oldProps) {
@@ -382,7 +383,60 @@ export class Tonic extends window.HTMLElement {
       if (this.stylesheet) {
         content = `<style nonce=${Tonic.nonce || ""}>${this.stylesheet()}</style>${content}`;
       }
-      target.innerHTML = content;
+      const hasFormElements = target.querySelector && (target.querySelector("input") || target.querySelector("textarea") || target.querySelector("select"));
+      const shouldUseMorphdom = hasFormElements && document.activeElement && (target.contains(document.activeElement) || target === document.activeElement);
+      if (shouldUseMorphdom) {
+        const tempContainer = document.createElement("div");
+        tempContainer.innerHTML = content;
+        morphdom(target, tempContainer, {
+          childrenOnly: true,
+          onBeforeElUpdated: /* @__PURE__ */ __name((fromEl, toEl) => {
+            if (fromEl.isEqualNode && fromEl.isEqualNode(toEl)) {
+              return false;
+            }
+            if (fromEl.tagName === "INPUT" && toEl.tagName === "INPUT") {
+              const fromInput = fromEl;
+              const toInput = toEl;
+              if (fromInput.value !== "") {
+                toInput.value = fromInput.value;
+              }
+              if (document.activeElement === fromInput) {
+                toInput.setAttribute("data-preserve-focus", "true");
+                toInput.setAttribute("data-selection-start", String(fromInput.selectionStart || 0));
+                toInput.setAttribute("data-selection-end", String(fromInput.selectionEnd || 0));
+              }
+            }
+            if (fromEl.tagName === "TEXTAREA" && toEl.tagName === "TEXTAREA") {
+              const fromTextarea = fromEl;
+              const toTextarea = toEl;
+              if (fromTextarea.value !== "") {
+                toTextarea.value = fromTextarea.value;
+              }
+              if (document.activeElement === fromTextarea) {
+                toTextarea.setAttribute("data-preserve-focus", "true");
+                toTextarea.setAttribute("data-selection-start", String(fromTextarea.selectionStart || 0));
+                toTextarea.setAttribute("data-selection-end", String(fromTextarea.selectionEnd || 0));
+              }
+            }
+            return true;
+          }, "onBeforeElUpdated"),
+          onElUpdated: /* @__PURE__ */ __name((el) => {
+            if (el.hasAttribute("data-preserve-focus")) {
+              const startPos = parseInt(el.getAttribute("data-selection-start") || "0", 10);
+              const endPos = parseInt(el.getAttribute("data-selection-end") || "0", 10);
+              el.removeAttribute("data-preserve-focus");
+              el.removeAttribute("data-selection-start");
+              el.removeAttribute("data-selection-end");
+              el.focus();
+              if ("setSelectionRange" in el) {
+                el.setSelectionRange(startPos, endPos);
+              }
+            }
+          }, "onElUpdated")
+        });
+      } else {
+        target.innerHTML = content;
+      }
       if (this.styles) {
         const styles = this.styles();
         for (const node of target.querySelectorAll("[styles]")) {
@@ -452,7 +506,9 @@ export class Tonic extends window.HTMLElement {
         this.innerHTML = this._source;
       }
       const p = this._set(this.root, this.render);
-      if (p && p.then) return p.then(() => this.connected && this.connected());
+      if (p && p.then) {
+        return p.then(() => this.connected && this.connected());
+      }
     }
     this.connected && this.connected();
   }

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export 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 object=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 * () {}.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\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add <\n        T extends typeof Tonic,\n        C extends T & { stylesheet?: ()=>string }\n    > (c:C, htmlName?:string):C {\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 as unknown as C\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\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(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            target.innerHTML = content\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[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__')\n                this.props[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                this.props[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                this.props[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                this.props[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':')\n                this.props[name] = 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) return p.then(() => this.connected && this.connected())\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>|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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",
   "names": ["o", "content", "children"]
 }

package/dist/index.min.js

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

package/dist/index.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export 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 object=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 * () {}.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\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {Tonic}\n     */\n    static add <\n        T extends typeof Tonic,\n        C extends T & { stylesheet?: ()=>string }\n    > (c:C, htmlName?:string):C {\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 as unknown as C\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\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(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            target.innerHTML = content\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[name] = value\n\n            if (/__\\w+__\\w+__/.test(p)) {\n                const { 1: root } = p.split('__')\n                this.props[name] = Tonic._data[root][p]\n            } else if (/\\d+__float/.test(p)) {\n                this.props[name] = parseFloat(p)\n            } else if (p === 'null__null') {\n                this.props[name] = null\n            } else if (/\\w+__boolean/.test(p)) {\n                this.props[name] = p.includes('true')\n            } else if (/placehold:\\w+:\\w+__/.test(p)) {\n                const { 1: root } = p.split(':')\n                this.props[name] = 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) return p.then(() => this.connected && this.connected())\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": ["__name", "rawText", "templateStrings", "unsafe", "state", "type", "o", "x", "_id", "html", "newState", "hp", "p", "id", "r", "ref", "el", "s", "camelName", "proto", "props", "c", "htmlName", "tmp", "stylesheetFn", "styleNode", "eventName", "detail", "opts", "namespace", "event", "strings", "values", "refs", "out", "i", "htmlStr", "_", "key", "value", "k", "oldProps", "resolve", "ev", "target", "iterator", "result", "render", "content", "node", "styles", "children", "walk", "fn", "childNodes", "child", "cc", "m", "_name", "name", "root"]
+  "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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",
+  "names": ["morphdom", "__name", "rawText", "templateStrings", "unsafe", "state", "type", "o", "x", "_id", "html", "newState", "hp", "p", "id", "r", "ref", "el", "s", "camelName", "proto", "props", "c", "htmlName", "tmp", "stylesheetFn", "styleNode", "eventName", "detail", "opts", "namespace", "event", "strings", "values", "refs", "out", "i", "htmlStr", "_", "key", "value", "k", "oldProps", "resolve", "ev", "target", "iterator", "result", "render", "content", "node", "tempContainer", "fromEl", "toEl", "fromInput", "toInput", "fromTextarea", "toTextarea", "startPos", "endPos", "styles", "children", "walk", "fn", "childNodes", "child", "cc", "m", "_name", "name", "root"]
 }

package/dist/meta.json

@@ -1,7 +1,7 @@
 {
   "inputs": {
     "src/index.ts": {
-      "bytes": 17942,
+      "bytes": 22792,
       "imports": [],
       "format": "esm"
     }
@@ -11,10 +11,16 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 28375
+      "bytes": 34769
     },
     "dist/index.min.js": {
-      "imports": [],
+      "imports": [
+        {
+          "path": "@substrate-system/morphdom",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
       "exports": [
         "Tonic",
         "TonicTemplate",
@@ -23,10 +29,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 8256
+          "bytesInOutput": 9765
         }
       },
-      "bytes": 8374
+      "bytes": 9883
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/tonic",
-  "version": "16.0.16",
+  "version": "16.1.0",
   "description": "A component framework.",
   "main": "dist/index.js",
   "files": [
@@ -9,7 +9,7 @@
   "type": "module",
   "scripts": {
     "lint": "eslint ./src/index.ts ./test/index.js",
-    "test": "npm run build && npm run lint && esbuild --bundle test/index.js | tape-run | tap-spec",
+    "test": "npm run build && esbuild --bundle test/index.js | tapout",
     "test:open": "npm run build && esbuild --bundle test/index.js | tape-run --browser chrome --keep-open",
     "build-cjs": "esbuild src/index.ts --format=cjs --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.cjs --sourcemap",
     "build-cjs:min": "esbuild src/index.ts --format=cjs --minify --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.min.cjs --sourcemap",
@@ -18,13 +18,18 @@
     "build-docs": "typedoc ./src/index.ts",
     "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build:minify && npm run build:main",
     "toc": "markdown-toc --maxdepth 3 -i README.md",
+    "start": "vite",
     "preversion": "npm run lint",
     "version": "npm run toc && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
     "postversion": "git push --follow-tags && npm publish",
     "prepublishOnly": "npm run build"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@substrate-system/morphdom": "2.7.7"
+  },
   "devDependencies": {
+    "@substrate-system/debug": "0.9.23",
+    "@substrate-system/tapout": "0.0.17",
     "@substrate-system/tapzero": "0.10.15",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
@@ -34,10 +39,12 @@
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "markdown-toc": "1.2.0",
+    "postcss-nesting": "13.0.2",
     "tap-spec": "5.0.0",
     "tape-run": "^11.0.0",
     "typedoc": "0.26.6",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "vite": "7.1.4"
   },
   "exports": {
     ".": {
@@ -60,7 +67,7 @@
       "email": "raynos2@gmail.com"
     }
   ],
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "directories": {
     "test": "test"
   },
@@ -71,5 +78,5 @@
   "bugs": {
     "url": "https://github.com/substrate-system/tonic/issues"
   },
-  "homepage": "https://tonicframework.dev"
+  "homepage": "https://github.com/substrate-system/tonic"
 }

package/LICENSE.txt

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