@substrate-system/tonic 16.1.0 → 16.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -11
- package/dist/index.js +1 -1
- package/dist/index.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,12 @@
|
|
|
1
1
|
[](https://github.com/substrate-system/tonic/actions/workflows/nodejs.yml)
|
|
2
|
-
[](https://bundlephobia.com/result?p=@substrate-system/tonic)
|
|
3
3
|
[](https://packagephobia.com/result?p=@substrate-system/tonic)
|
|
4
4
|
[](README.md)
|
|
5
5
|
[](https://semver.org/)
|
|
6
6
|
[](./CHANGELOG.md)
|
|
7
7
|
[](LICENSE)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
<picture>
|
|
11
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/substrate-system/tonic/fork/readme-tonic-dark.png">
|
|
12
|
-
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/substrate-system/tonic/fork/readme-tonic.png">
|
|
13
|
-
<img alt="tonic" src="https://raw.githubusercontent.com/substrate-system/tonic/fork/readme-tonic.png">
|
|
14
|
-
</picture>
|
|
15
|
-
|
|
16
|
-
<br/>
|
|
17
|
-
<br/>
|
|
9
|
+
# Tonic
|
|
18
10
|
|
|
19
11
|
Tonic is a low profile component framework for the web. It's one file,
|
|
20
12
|
less than 3kb gzipped and has no dependencies.
|
|
@@ -131,7 +123,7 @@ Here are some things unique to the fork:
|
|
|
131
123
|
|
|
132
124
|
### DOM state
|
|
133
125
|
|
|
134
|
-
|
|
126
|
+
DOM state (like element focus) should be preserved across re-renders.
|
|
135
127
|
|
|
136
128
|
### docs
|
|
137
129
|
See [API docs](https://substrate-system.github.io/tonic/).
|
package/dist/index.js
CHANGED
package/dist/index.min.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
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.
|
|
1
|
+
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{'"':""","&":"&","'":"'","<":"<",">":">","`":"`","/":"/"}}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(`
|
|
2
2
|
`),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;
|
|
3
3
|
//# sourceMappingURL=index.min.js.map
|