@substrate-system/tonic 16.1.3 → 16.1.4

package/README.md

@@ -25,6 +25,9 @@ with all modern browsers and built on top of Web Components.
   * [Bundler](#bundler)
   * [Pre-bundled](#pre-bundled)
 - [Examples](#examples)
+- [API](#api)
+  * [Event listeners](#event-listeners)
+- [Example](#example-1)
 - [fork](#fork)
   * [DOM state](#dom-state)
   * [docs](#docs)
@@ -116,6 +119,37 @@ After adding your Javascript to your HTML, you can use your component anywhere.
 </html>
 ```
 
+## API
+
+### Event listeners
+
+Add a method with an event name, and it will be called with any matching events.
+
+#### Example
+
+```js
+import { Tonic } from '@substrate-system/tonic'
+
+class MyClicker extends Tonic {
+  click (ev:MouseEvent) {
+    // automatically called on any click
+    ev.preventDefault()
+    console.log('click')
+  }
+
+  render () {
+    return this.html`<div>
+      <button>click the button</button>
+    </div>`
+  }
+}
+
+Tonic.add(MyClicker)
+```
+
+## Example
+
+
 ## fork
 
 This is a fork of [@socketsupply/tonic](https://github.com/socketsupply/tonic).
@@ -246,7 +280,6 @@ el.dispatch('more testing', 'some data', {
 
 ## Useful links
 - [Tonic components](https://github.com/socketsupply/components)
-- [Migration from the early versions of Tonic](./MIGRATION.md)
 - [API](./API.md)
 - [Troubleshooting](./HELP.md)
 - [Web Component lifecycle methods](https://gomakethings.com/the-web-component-lifecycle-methods/)

package/dist/index.js

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

package/dist/index.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/tonic",
-  "version": "16.1.3",
+  "version": "16.1.4",
   "description": "A component framework.",
   "main": "dist/index.js",
   "files": [