@substrate-system/tonic 16.0.5 → 16.0.7

package/README.md

@@ -30,7 +30,11 @@ The tl;dr is that this allows you to pass full JS objects between components, no
 - [Install](#install)
 - [Use](#use)
 - [fork](#fork)
-  * [additions](#additions)
+  * [types](#types)
+  * [`tag`](#tag)
+  * [`emit`](#emit)
+  * [`static event`](#static-event)
+  * [`dispatch`](#dispatch)
 - [Useful links](#useful-links)
 
 <!-- tocstop -->
@@ -91,13 +95,10 @@ This is a fork of [@socketsupply/tonic](https://github.com/socketsupply/tonic).
 
 See [API docs](https://substrate-system.github.io/tonic/).
 
-### additions
-Things added to the forked version:
-
-#### types
+### types
 See [src/index.ts](./src/index.ts).
 
-#### `tag`
+### `tag`
 Get the HTML tag name given a Tonic class.
 
 ```ts
@@ -115,7 +116,7 @@ ExampleTwo.tag
 // => 'example-two'
 ```
 
-#### `emit`
+### `emit`
 Emit namespaced events, following a naming convention. The return value is the call to [element.dispatchEvent()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent).
 
 Given an event name, the dispatched event will be prefixed with the element name, for example, `my-element:event-name`.
@@ -127,7 +128,7 @@ emit (type:string, detail:string|object|any[] = {}, opts:Partial<{
 }> = {}):boolean
 ```
 
-##### emit example
+#### emit example
 
 ```js
 class EventsExample extends Tonic {
@@ -154,7 +155,7 @@ el.emit('more testing', 'some data', {
 })
 ```
 
-#### `static event`
+### `static event`
 Return the namespaced event name given a string.
 
 ```ts
@@ -165,7 +166,7 @@ class {
 }
 ```
 
-##### example
+#### example
 ```js
 class EventsExample extends Tonic {
   // ...
@@ -175,7 +176,7 @@ EventsExample.event('testing')
 //  => 'events-example:testing'
 ```
 
-#### `dispatch`
+### `dispatch`
 Emit a regular, non-namespaced event.
 
 ```ts
@@ -184,7 +185,7 @@ Emit a regular, non-namespaced event.
 }
 ```
 
-##### `dispatch` example
+#### `dispatch` example
 
 ```js
 class EventsExample extends Tonic {

package/dist/index.cjs

@@ -0,0 +1,490 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  Tonic: () => Tonic,
+  TonicTemplate: () => TonicTemplate,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+class TonicTemplate {
+  static {
+    __name(this, "TonicTemplate");
+  }
+  constructor(rawText, templateStrings, unsafe) {
+    this.isTonicTemplate = true;
+    this.unsafe = !!unsafe;
+    this.rawText = rawText;
+    this.templateStrings = templateStrings;
+  }
+  valueOf() {
+    return this.rawText;
+  }
+  toString() {
+    return this.rawText;
+  }
+}
+class Tonic extends window.HTMLElement {
+  constructor() {
+    super();
+    this._props = Tonic.getPropertyNames(this);
+    const state = Tonic._states[super.id];
+    delete Tonic._states[super.id];
+    this._state = state || {};
+    this.preventRenderOnReconnect = false;
+    this.props = {};
+    this.elements = [...this.children];
+    this.elements.__children__ = true;
+    this.nodes = [...this.childNodes];
+    this.nodes.__children__ = true;
+    this._events();
+  }
+  static {
+    __name(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;
+  }
+  // @ts-expect-error VERSION is injected during build
+  static get version() {
+    return VERSION ?? null;
+  }
+  static get SPREAD() {
+    return /\.\.\.\s?(__\w+__\w+__)/g;
+  }
+  static get ESC() {
+    return /["&'<>`/]/g;
+  }
+  static get AsyncFunctionGenerator() {
+    return async function* () {
+    }.constructor;
+  }
+  // eslint-disable-next-line
+  static get AsyncFunction() {
+    return async function() {
+    }.constructor;
+  }
+  static get MAP() {
+    return {
+      '"': "&quot;",
+      "&": "&amp;",
+      "'": "&#x27;",
+      "<": "&lt;",
+      ">": "&gt;",
+      "`": "&#x60;",
+      "/": "&#x2F;"
+    };
+  }
+  get isTonicComponent() {
+    return true;
+  }
+  /**
+   * Get a namespaced event name, given a non-namespaced string.
+   *
+   * @example
+   * MyElement.event('example')  // => my-element:example
+   *
+   * @param {string} type The name of the event
+   * @returns {string} The namespaced event name
+   */
+  static event(type) {
+    return `${this.tag}:${type}`;
+  }
+  /**
+   * Get the tag name of this component.
+   */
+  static get tag() {
+    return Tonic.getTagName(this.name);
+  }
+  static _createId() {
+    return `tonic${Tonic._index++}`;
+  }
+  static _normalizeAttrs(o, x = {}) {
+    [...o].forEach((o2) => x[o2.name] = o2.value);
+    return x;
+  }
+  _checkId() {
+    const _id = super.id;
+    if (!_id) {
+      const html = this.outerHTML.replace(this.innerHTML, "...");
+      throw new Error(`Component: ${html} has no id`);
+    }
+    return _id;
+  }
+  /**
+   * Get the component state property.
+   */
+  get state() {
+    return this._checkId(), this._state;
+  }
+  set state(newState) {
+    this._state = (this._checkId(), newState);
+  }
+  _events() {
+    const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype);
+    for (const p of this._props) {
+      if (hp.indexOf("on" + p) === -1) continue;
+      this.addEventListener(p, this);
+    }
+  }
+  _prop(o) {
+    const id = this._id;
+    const p = `__${id}__${Tonic._createId()}__`;
+    Tonic._data[id] = Tonic._data[id] || {};
+    Tonic._data[id][p] = o;
+    return p;
+  }
+  _placehold(r) {
+    const id = this._id;
+    const ref = `placehold:${id}:${Tonic._createId()}__`;
+    Tonic._children[id] = Tonic._children[id] || {};
+    Tonic._children[id][ref] = r;
+    return ref;
+  }
+  static match(el, s) {
+    if (!el.matches) el = el.parentElement;
+    return el.matches(s) ? el : el.closest(s);
+  }
+  static getTagName(camelName) {
+    return camelName.match(/[A-Z][a-z0-9]*/g).join("-").toLowerCase();
+  }
+  static getPropertyNames(proto) {
+    const props = [];
+    while (proto && proto !== Tonic.prototype) {
+      props.push(...Object.getOwnPropertyNames(proto));
+      proto = Object.getPrototypeOf(proto);
+    }
+    return props;
+  }
+  /**
+   * Add a component. Calls `window.customElements.define` with the
+   * component's name.
+   *
+   * @param {TonicComponent} c
+   * @param {string} [htmlName] Name of the element, default to the class name
+   * @returns {void}
+   */
+  static add(c, htmlName) {
+    const hasValidName = htmlName || c.name && c.name.length > 1;
+    if (!hasValidName) {
+      throw Error("Mangling. https://bit.ly/2TkJ6zP");
+    }
+    if (!htmlName) htmlName = Tonic.getTagName(c.name);
+    if (!Tonic.ssr && window.customElements.get(htmlName)) {
+      throw new Error(`Cannot Tonic.add(${c.name}, '${htmlName}') twice`);
+    }
+    if (!c.prototype || !c.prototype.isTonicComponent) {
+      const tmp = { [c.name]: class extends Tonic {
+      } }[c.name];
+      tmp.prototype.render = c;
+      c = tmp;
+    }
+    c.prototype._props = Tonic.getPropertyNames(c.prototype);
+    Tonic._reg[htmlName] = c;
+    Tonic._tags = Object.keys(Tonic._reg).join();
+    window.customElements.define(htmlName, c);
+    if (typeof c.stylesheet === "function") {
+      Tonic.registerStyles(c.stylesheet);
+    }
+    return c;
+  }
+  static registerStyles(stylesheetFn) {
+    if (Tonic._stylesheetRegistry.includes(stylesheetFn)) return;
+    Tonic._stylesheetRegistry.push(stylesheetFn);
+    const styleNode = document.createElement("style");
+    if (Tonic.nonce) styleNode.setAttribute("nonce", Tonic.nonce);
+    styleNode.appendChild(document.createTextNode(stylesheetFn()));
+    if (document.head) document.head.appendChild(styleNode);
+  }
+  static escape(s) {
+    return s.replace(Tonic.ESC, (c) => Tonic.MAP[c]);
+  }
+  static unsafeRawString(s, templateStrings) {
+    return new TonicTemplate(s, templateStrings, true);
+  }
+  /**
+   * Emit a regular, non-namespaced event.
+   *
+   * @param {string} eventName Event name as a string.
+   * @param {any} detail Any data to go with the event.
+   */
+  dispatch(eventName, detail = null) {
+    const opts = { bubbles: true, detail };
+    this.dispatchEvent(new window.CustomEvent(eventName, opts));
+  }
+  /**
+   * Emit a namespaced event, using a convention for event names.
+   *
+   * @example
+   * myComponent.emit('test')  // => `my-compnent:test`
+   *
+   * @param {string} type The event type, comes after `:` in event name.
+   * @param {string|object|any[]} detail detail for Event constructor
+   * @param {{ bubbles?:boolean, cancelable?:boolean }} opts `Cancelable` and
+   * `bubbles`
+   * @returns {boolean}
+   */
+  emit(type, detail = {}, opts = {}) {
+    const namespace = Tonic.getTagName(this.constructor.name);
+    const event = new CustomEvent(`${namespace}:${type}`, {
+      bubbles: opts.bubbles === void 0 ? true : opts.bubbles,
+      cancelable: opts.cancelable === void 0 ? true : opts.cancelable,
+      detail
+    });
+    return this.dispatchEvent(event);
+  }
+  html(strings, ...values) {
+    const refs = /* @__PURE__ */ __name((o) => {
+      if (o && o.__children__) return this._placehold(o);
+      if (o && o.isTonicTemplate) return o.rawText;
+      switch (Object.prototype.toString.call(o)) {
+        case "[object HTMLCollection]":
+        case "[object NodeList]":
+          return this._placehold([...o]);
+        case "[object Array]": {
+          if (o.every((x) => x.isTonicTemplate && !x.unsafe)) {
+            return new TonicTemplate(o.join("\n"), null, false);
+          }
+          return this._prop(o);
+        }
+        case "[object Object]":
+        case "[object Function]":
+        case "[object AsyncFunction]":
+        case "[object Set]":
+        case "[object Map]":
+        case "[object WeakMap]":
+        case "[object File]":
+          return this._prop(o);
+        case "[object NamedNodeMap]":
+          return this._prop(Tonic._normalizeAttrs(o));
+        case "[object Number]":
+          return `${o}__float`;
+        case "[object String]":
+          return Tonic.escape(o);
+        case "[object Boolean]":
+          return `${o}__boolean`;
+        case "[object Null]":
+          return `${o}__null`;
+        case "[object HTMLElement]":
+          return this._placehold([o]);
+      }
+      if (typeof o === "object" && o && o.nodeType === 1 && typeof o.cloneNode === "function") {
+        return this._placehold([o]);
+      }
+      return o;
+    }, "refs");
+    const out = [];
+    for (let i = 0; i < strings.length - 1; i++) {
+      out.push(strings[i], refs(values[i]));
+    }
+    out.push(strings[strings.length - 1]);
+    const htmlStr = out.join("").replace(Tonic.SPREAD, (_, p) => {
+      const o = Tonic._data[p.split("__")[1]][p];
+      return Object.entries(o).map(([key, value]) => {
+        const k = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+        if (value === true) return k;
+        else if (value) return `${k}="${Tonic.escape(String(value))}"`;
+        else return "";
+      }).filter(Boolean).join(" ");
+    });
+    return new TonicTemplate(htmlStr, strings, false);
+  }
+  scheduleReRender(oldProps) {
+    if (this.pendingReRender) return this.pendingReRender;
+    this.pendingReRender = new Promise((resolve) => setTimeout(() => {
+      if (!this.isInDocument(this.shadowRoot || this)) return;
+      const p = this._set(this.shadowRoot || this, this.render);
+      this.pendingReRender = null;
+      if (p && p.then) {
+        return p.then(() => {
+          this.updated && this.updated(oldProps);
+          resolve(this);
+        });
+      }
+      this.updated && this.updated(oldProps);
+      resolve(this);
+    }, 0));
+    return this.pendingReRender;
+  }
+  /**
+   * Update the view
+   */
+  reRender(o = this.props) {
+    const oldProps = { ...this.props };
+    this.props = typeof o === "function" ? o(oldProps) : o;
+    return this.scheduleReRender(oldProps);
+  }
+  /**
+   * If there is a method with the same name as the event type,
+   * then call the method.
+   * @see {@link https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#what-is-the-handleevent-method What is the handleEvent() method?}
+   */
+  handleEvent(ev) {
+    this[ev.type] && this[ev.type](ev);
+  }
+  _drainIterator(target, iterator) {
+    return iterator.next().then((result) => {
+      this._set(target, null, result.value);
+      if (result.done) return;
+      return this._drainIterator(target, iterator);
+    });
+  }
+  /**
+   * _set
+   * @param {Element|InstanceType<typeof Tonic>|ShadowRoot} target
+   * @param {()=>any} render
+   * @param {string} content
+   * @returns {Promise<void>|void}
+   * @private
+   */
+  _set(target, render, content = "") {
+    this.willRender && this.willRender();
+    for (const node of target.querySelectorAll(Tonic._tags)) {
+      if (!node.isTonicComponent) continue;
+      const id = node.getAttribute("id");
+      if (!id || !Tonic._refIds.includes(id)) continue;
+      Tonic._states[id] = node.state;
+    }
+    if (render instanceof Tonic.AsyncFunction) {
+      return render.call(this, this.html, this.props).then((content2) => this._apply(target, content2));
+    } else if (render instanceof Tonic.AsyncFunctionGenerator) {
+      return this._drainIterator(target, render.call(this));
+    } else if (render === null) {
+      this._apply(target, content);
+    } else if (render instanceof Function) {
+      this._apply(target, render.call(this, this.html, this.props) || "");
+    }
+  }
+  _apply(target, content) {
+    if (content && content.isTonicTemplate) {
+      content = content.rawText;
+    } else if (typeof content === "string") {
+      content = Tonic.escape(content);
+    }
+    if (typeof content === "string") {
+      if (this.stylesheet) {
+        content = `<style nonce=${Tonic.nonce || ""}>${this.stylesheet()}</style>${content}`;
+      }
+      target.innerHTML = content;
+      if (this.styles) {
+        const styles = this.styles();
+        for (const node of target.querySelectorAll("[styles]")) {
+          for (const s of node.getAttribute("styles").split(/\s+/)) {
+            Object.assign(node.style, styles[s.trim()]);
+          }
+        }
+      }
+      const children = Tonic._children[this._id] || {};
+      const walk = /* @__PURE__ */ __name((node, fn) => {
+        if (node.nodeType === 3) {
+          const id = node.textContent.trim();
+          if (children[id]) fn(node, children[id], id);
+        }
+        const childNodes = node.childNodes;
+        if (!childNodes) return;
+        for (let i = 0; i < childNodes.length; i++) {
+          walk(childNodes[i], fn);
+        }
+      }, "walk");
+      walk(target, (node, children2, id) => {
+        for (const child of children2) {
+          node.parentNode.insertBefore(child, node);
+        }
+        delete Tonic._children[this._id][id];
+        node.parentNode.removeChild(node);
+      });
+    } else {
+      target.innerHTML = "";
+      target.appendChild(content.cloneNode(true));
+    }
+  }
+  connectedCallback() {
+    this.root = this.shadowRoot || this;
+    if (super.id && !Tonic._refIds.includes(super.id)) {
+      Tonic._refIds.push(super.id);
+    }
+    const cc = /* @__PURE__ */ __name((s) => s.replace(/-(.)/g, (_, m) => m.toUpperCase()), "cc");
+    for (const { name: _name, value } of this.attributes) {
+      const name = cc(_name);
+      const p = this.props[name] = value;
+      if (/__\w+__\w+__/.test(p)) {
+        const { 1: root } = p.split("__");
+        this.props[name] = Tonic._data[root][p];
+      } else if (/\d+__float/.test(p)) {
+        this.props[name] = parseFloat(p);
+      } else if (p === "null__null") {
+        this.props[name] = null;
+      } else if (/\w+__boolean/.test(p)) {
+        this.props[name] = p.includes("true");
+      } else if (/placehold:\w+:\w+__/.test(p)) {
+        const { 1: root } = p.split(":");
+        this.props[name] = Tonic._children[root][p][0];
+      }
+    }
+    this.props = Object.assign(
+      this.defaults ? this.defaults() : {},
+      this.props
+    );
+    this._id = this._id || Tonic._createId();
+    this.willConnect && this.willConnect();
+    if (!this.isInDocument(this.root)) return;
+    if (!this.preventRenderOnReconnect) {
+      if (!this._source) {
+        this._source = this.innerHTML;
+      } else {
+        this.innerHTML = this._source;
+      }
+      const p = this._set(this.root, this.render);
+      if (p && p.then) return p.then(() => this.connected && this.connected());
+    }
+    this.connected && this.connected();
+  }
+  isInDocument(target) {
+    const root = target.getRootNode();
+    return root === document || root.toString() === "[object ShadowRoot]";
+  }
+  disconnectedCallback() {
+    this.disconnected && this.disconnected();
+    delete Tonic._data[this._id];
+    delete Tonic._children[this._id];
+  }
+}
+var src_default = Tonic;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|null\n    isTonicTemplate:true\n\n    constructor (rawText, templateStrings?:string[]|null, unsafe?:boolean) {\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    defaults?:()=>Record<string, any>\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    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 {TonicComponent} c\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {void}\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)\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 (strings:string[], ...values):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 ? 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"]
+}

package/dist/index.d.ts

@@ -0,0 +1,151 @@
+export declare class TonicTemplate {
+    rawText: string;
+    unsafe: boolean;
+    templateStrings?: string[] | null;
+    isTonicTemplate: true;
+    constructor(rawText: any, templateStrings?: string[] | null, unsafe?: boolean);
+    valueOf(): string;
+    toString(): string;
+}
+/**
+ * Class Tonic
+ *
+ * @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 {
+    private static _tags;
+    private static _refIds;
+    private static _data;
+    private static _states;
+    private static _children;
+    private static _reg;
+    private static _stylesheetRegistry;
+    private static _index;
+    static get version(): any;
+    static get SPREAD(): RegExp;
+    static get ESC(): RegExp;
+    static get AsyncFunctionGenerator(): AsyncGeneratorFunctionConstructor;
+    static get AsyncFunction(): Function;
+    static get MAP(): {
+        '"': string;
+        '&': string;
+        '\'': string;
+        '<': string;
+        '>': string;
+        '`': string;
+        '/': string;
+    };
+    static ssr: any;
+    static nonce: any;
+    private _state;
+    stylesheet?: () => string;
+    styles: () => string;
+    props: T;
+    preventRenderOnReconnect: boolean;
+    private _id;
+    pendingReRender?: Promise<this> | null;
+    updated?: ((props: Record<string, any>) => any);
+    willRender?: (() => any);
+    root?: ShadowRoot | this;
+    defaults?: () => Record<string, any>;
+    willConnect?: () => any;
+    private _source?;
+    connected?: () => void;
+    disconnected?: () => void;
+    private elements;
+    private nodes;
+    private _props;
+    constructor();
+    abstract render(): TonicTemplate | Promise<TonicTemplate>;
+    get isTonicComponent(): true;
+    /**
+     * Get a namespaced event name, given a non-namespaced string.
+     *
+     * @example
+     * MyElement.event('example')  // => my-element:example
+     *
+     * @param {string} type The name of the event
+     * @returns {string} The namespaced event name
+     */
+    static event(type: string): string;
+    /**
+     * Get the tag name of this component.
+     */
+    static get tag(): string;
+    private static _createId;
+    private static _normalizeAttrs;
+    private _checkId;
+    /**
+     * Get the component state property.
+     */
+    get state(): any;
+    set state(newState: any);
+    private _events;
+    private _prop;
+    private _placehold;
+    static match(el: HTMLElement, s: string): Element;
+    static getTagName(camelName: string): string;
+    static getPropertyNames(proto: any): string[];
+    /**
+     * Add a component. Calls `window.customElements.define` with the
+     * component's name.
+     *
+     * @param {TonicComponent} c
+     * @param {string} [htmlName] Name of the element, default to the class name
+     * @returns {void}
+     */
+    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>;
+    /**
+     * Emit a regular, non-namespaced event.
+     *
+     * @param {string} eventName Event name as a string.
+     * @param {any} detail Any data to go with the event.
+     */
+    dispatch(eventName: string, detail?: any): void;
+    /**
+     * Emit a namespaced event, using a convention for event names.
+     *
+     * @example
+     * myComponent.emit('test')  // => `my-compnent:test`
+     *
+     * @param {string} type The event type, comes after `:` in event name.
+     * @param {string|object|any[]} detail detail for Event constructor
+     * @param {{ bubbles?:boolean, cancelable?:boolean }} opts `Cancelable` and
+     * `bubbles`
+     * @returns {boolean}
+     */
+    emit(type: string, detail?: string | object | any[], opts?: Partial<{
+        bubbles: boolean;
+        cancelable: boolean;
+    }>): boolean;
+    html(strings: string[], ...values: any[]): InstanceType<typeof TonicTemplate>;
+    scheduleReRender(oldProps: any): Promise<this>;
+    /**
+     * Update the view
+     */
+    reRender(o?: T | ((props: T) => T)): Promise<this>;
+    /**
+     * If there is a method with the same name as the event type,
+     * then call the method.
+     * @see {@link https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#what-is-the-handleevent-method What is the handleEvent() method?}
+     */
+    handleEvent(ev: Event): void;
+    private _drainIterator;
+    /**
+     * _set
+     * @param {Element|InstanceType<typeof Tonic>|ShadowRoot} target
+     * @param {()=>any} render
+     * @param {string} content
+     * @returns {Promise<void>|void}
+     * @private
+     */
+    private _set;
+    private _apply;
+    connectedCallback(): Promise<void>;
+    isInDocument(target: HTMLElement | ShadowRoot): boolean;
+    disconnectedCallback(): void;
+}
+export default Tonic;

package/dist/meta.json

@@ -0,0 +1,32 @@
+{
+  "inputs": {
+    "src/index.ts": {
+      "bytes": 17672,
+      "imports": [],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/tonic.min.js.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 28084
+    },
+    "dist/tonic.min.js": {
+      "imports": [],
+      "exports": [
+        "Tonic",
+        "TonicTemplate",
+        "default"
+      ],
+      "entryPoint": "src/index.ts",
+      "inputs": {
+        "src/index.ts": {
+          "bytesInOutput": 8252
+        }
+      },
+      "bytes": 8370
+    }
+  }
+}

package/dist/tonic.js

@@ -1,4 +1,9 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 export class TonicTemplate {
+  static {
+    __name(this, "TonicTemplate");
+  }
   constructor(rawText, templateStrings, unsafe) {
     this.isTonicTemplate = true;
     this.unsafe = !!unsafe;
@@ -27,6 +32,9 @@ export class Tonic extends window.HTMLElement {
     this.nodes.__children__ = true;
     this._events();
   }
+  static {
+    __name(this, "Tonic");
+  }
   static {
     this._tags = "";
   }
@@ -53,7 +61,7 @@ export class Tonic extends window.HTMLElement {
   }
   // @ts-expect-error VERSION is injected during build
   static get version() {
-    return "16.0.5";
+    return "16.0.7";
   }
   static get SPREAD() {
     return /\.\.\.\s?(__\w+__\w+__)/g;
@@ -240,7 +248,7 @@ export class Tonic extends window.HTMLElement {
     return this.dispatchEvent(event);
   }
   html(strings, ...values) {
-    const refs = (o) => {
+    const refs = /* @__PURE__ */ __name((o) => {
       if (o && o.__children__) return this._placehold(o);
       if (o && o.isTonicTemplate) return o.rawText;
       switch (Object.prototype.toString.call(o)) {
@@ -278,7 +286,7 @@ export class Tonic extends window.HTMLElement {
         return this._placehold([o]);
       }
       return o;
-    };
+    }, "refs");
     const out = [];
     for (let i = 0; i < strings.length - 1; i++) {
       out.push(strings[i], refs(values[i]));
@@ -381,7 +389,7 @@ export class Tonic extends window.HTMLElement {
         }
       }
       const children = Tonic._children[this._id] || {};
-      const walk = (node, fn) => {
+      const walk = /* @__PURE__ */ __name((node, fn) => {
         if (node.nodeType === 3) {
           const id = node.textContent.trim();
           if (children[id]) fn(node, children[id], id);
@@ -391,7 +399,7 @@ export class Tonic extends window.HTMLElement {
         for (let i = 0; i < childNodes.length; i++) {
           walk(childNodes[i], fn);
         }
-      };
+      }, "walk");
       walk(target, (node, children2, id) => {
         for (const child of children2) {
           node.parentNode.insertBefore(child, node);
@@ -409,7 +417,7 @@ export class Tonic extends window.HTMLElement {
     if (super.id && !Tonic._refIds.includes(super.id)) {
       Tonic._refIds.push(super.id);
     }
-    const cc = (s) => s.replace(/-(.)/g, (_, m) => m.toUpperCase());
+    const cc = /* @__PURE__ */ __name((s) => s.replace(/-(.)/g, (_, m) => m.toUpperCase()), "cc");
     for (const { name: _name, value } of this.attributes) {
       const name = cc(_name);
       const p = this.props[name] = value;
@@ -456,3 +464,4 @@ export class Tonic extends window.HTMLElement {
   }
 }
 export default Tonic;
+//# sourceMappingURL=tonic.js.map

package/dist/tonic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|null\n    isTonicTemplate:true\n\n    constructor (rawText, templateStrings?:string[]|null, unsafe?:boolean) {\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    defaults?:()=>Record<string, any>\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    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 {TonicComponent} c\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {void}\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)\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 (strings:string[], ...values):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 ? 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"]
+}

package/dist/tonic.min.js

@@ -1,2 +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 VERSION??null}static get SPREAD(){return/\.\.\.\s?(__\w+__\w+__)/g}static get ESC(){return/["&'<>`/]/g}static get AsyncFunctionGenerator(){return async function*(){}.constructor}static get AsyncFunction(){return async function(){}.constructor}static get MAP(){return{'"':"&quot;","&":"&amp;","'":"&#x27;","<":"&lt;",">":"&gt;","`":"&#x60;","/":"&#x2F;"}}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(`
+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.7"}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;"}}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.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;
+//# sourceMappingURL=tonic.min.js.map

package/dist/tonic.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export class TonicTemplate {\n    rawText:string\n    unsafe:boolean\n    templateStrings?:string[]|null\n    isTonicTemplate:true\n\n    constructor (rawText, templateStrings?:string[]|null, unsafe?:boolean) {\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    defaults?:()=>Record<string, any>\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    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 {TonicComponent} c\n     * @param {string} [htmlName] Name of the element, default to the class name\n     * @returns {void}\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)\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 (strings:string[], ...values):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 ? 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"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/tonic",
-  "version": "16.0.5",
+  "version": "16.0.7",
   "description": "A component framework.",
   "main": "dist/tonic.js",
   "files": [
@@ -12,10 +12,12 @@
     "test": "npm run build && npm run lint && esbuild --bundle test/index.js | tape-run | tap-spec",
     "ci:test:tape-run": "esbuild --bundle test/index.js | tape-run",
     "test:open": "npm run build && esbuild --bundle test/index.js | tape-run --browser chrome --keep-open",
-    "build:main": "esbuild src/index.ts --define:VERSION=\\\"$npm_package_version\\\" --outfile=dist/tonic.js",
-    "build:minify": "esbuild src/index.ts --keep-names --minify --outfile=dist/tonic.min.js",
+    "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",
+    "build:main": "esbuild src/index.ts --tsconfig=tsconfig.build.json --sourcemap --keep-names --define:VERSION=\\\"$npm_package_version\\\" --outfile=dist/tonic.js && tsc --emitDeclarationOnly --project tsconfig.build.json --outDir dist",
+    "build:minify": "esbuild src/index.ts --tsconfig=tsconfig.build.json --sourcemap --keep-names --define:VERSION=\\\"$npm_package_version\\\" --metafile=dist/meta.json --minify --outfile=dist/tonic.min.js",
     "build-docs": "typedoc ./src/index.ts",
-    "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build:main && npm run build:minify",
+    "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",
     "preversion": "npm run lint",
     "version": "npm run toc && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
@@ -23,7 +25,7 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@bicycle-codes/tapzero": "0.10.3",
+    "@substrate-system/tapzero": "0.10.5",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
     "auto-changelog": "2.4.0",
@@ -38,8 +40,14 @@
     "uuid": "^10.0.0"
   },
   "exports": {
-    ".": "./dist/tonic.js",
-    "./min": "./dist/tonic.min.js"
+    ".": {
+      "import": "./dist/tonic.js",
+      "require": "./dist/index.cjs"
+    },
+    "./min": {
+      "import": "./dist/tonic.min.js",
+      "require": "./dist/index.min.cjs"
+    }
   },
   "contributors": [
     {
@@ -58,10 +66,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bicycle-codes/tonic.git"
+    "url": "git+https://github.com/substrate-system/tonic.git"
   },
   "bugs": {
-    "url": "https://github.com/bicycle-codes/tonic/issues"
+    "url": "https://github.com/substrate-system/tonic/issues"
   },
   "homepage": "https://tonicframework.dev"
 }