@dlightjs/dlight - npm Package Compare versions

Comparing version 0.3.5 to 0.3.6

dist/index.d.ts

@@ -263,3 +263,3 @@ declare enum DLNodeType {
 
-declare const View: typeof CustomNode;
+declare const View: any;
 declare function render(idOrEl: string | HTMLElement, dl: {
@@ -266,0 +266,0 @@ new (): CustomNode;

dist/index.js

@@ -1,1 +0,1 @@
-function T(d){for(let e of d){if(Array.isArray(e)){T(e);continue}e._$init()}}function g(d,e){for(let t of d){if(Array.isArray(t)){g(t,e);continue}t._$parentNode=e}}function p(d,e){for(let t of d)e(t)&&p(t._$nodes,e)}function f(d,e,t=!0){for(let s of d)[0,1].includes(s._$nodeType)?(e(s._$el,s),t&&f(s._$nodes,e)):f(s._$nodes,e,t)}function j(d){let e=[];return f(d,(t,s)=>{s._$nodeType===0&&e.push(t)},!1),e}var c=(r=>(r[r.HTML=0]="HTML",r[r.Text=1]="Text",r[r.Custom=2]="Custom",r[r.For=3]="For",r[r.If=4]="If",r[r.Env=5]="Env",r[r.Expression=6]="Expression",r))(c||{}),u=class{_$nodeType;__$el;get _$el(){return this.__$el??j(this._$nodes)}set _$el(e){this.__$el=e}_$parentNode;_$nodes=[];_$depObjectIds=[];_$detach(){this._$parentNode=void 0,this._$nodes=[],this._$depObjectIds=[],[1,0].includes(this._$nodeType)||(this.__$el=void 0),this._$beforeInitSubNodes=function(){}}_$beforeInitSubNodes(){}_$addBeforeInitSubNodes(e){let t=this._$beforeInitSubNodes;this._$beforeInitSubNodes=function(){t.call(this),e.call(this)}}_$bindNodes(){g(this._$nodes,this),this._$beforeInitSubNodes(),T(this._$nodes)}constructor(e){this._$nodeType=e}_$init(){}};function w(d,e,t,s,o,n,i){if(t in d){if(!n){d[t]=s;return}if(!(d[`_$$${t}`]!==`_$${e}`&&!(`_$$${t}`in d))){if(d[`_$$${t}`]===`_$${e}`){k(o,d,t,s,n);return}if(i&&`_$$${n[0]}`in o){B(o,d,t,s,n);return}q(o,d,t,s,n)}}}function k(d,e,t,s,o){let n={};e._$depObjectIds.push(n),e[t]=s(),d._$addDeps(o,n,()=>{e[t]=s(),e._$runDeps(t)})}function B(d,e,t,s,o){let n={};e._$depObjectIds.push(n);for(let i of o){let r=()=>d[i]=e[t];e._$addDeps([t],n,r),e[t]=s(),d._$addDeps(o,n,()=>{e._$deleteDep(t,n),e[t]=s(),e._$addDeps([t],n,r)})}}function q(d,e,t,s,o){let n={};e._$depObjectIds.push(n),e[`_$${t}`]=s(),d._$addDeps(o,n,()=>{e[`_$${t}`]=s(),e._$runDeps(t)})}function F(d,e){p(e,t=>{switch(t._$nodeType){case 1:case 0:d._$el.appendChild(t._$el);break;default:F(d,t._$nodes);break}return!1})}function y(d){J(d),f(d,(e,t)=>{!document.body.contains(e)||(t._$nodeType===0&&t.willDisappear(e,t),e.remove(),t._$nodeType===0&&t.didDisappear(e,t))}),Q(d)}function N(d){for(let e of d)e._$detach()}function $(d,e){p(d,t=>{for(let s of t._$depObjectIds)e._$deleteDeps(s);return t._$nodeType===2&&$(t._$children,e),!0})}function L(d,e,t,s){let o=s??t.childNodes.length;return z(d),f(d,(n,i)=>{let r=document.body.contains(n);[0].includes(i._$nodeType)&&!r&&i.willAppear(n,i),e===o?t.appendChild(n):t.insertBefore(n,t.childNodes[e]),[0].includes(i._$nodeType)&&!r&&i.didAppear(n,i),e++,o++},!1),G(d),[e,o]}function x(d,e){return O(d._$nodes,e)}function C(d){return O(d,void 0)}function O(d,e){let t=0,s=!1;return p(d,o=>s?!1:o===e?(s=!0,!1):[1,0].includes(o._$nodeType)?(t++,!1):!0),t}function M(d,e){p(d,t=>([2].includes(t._$nodeType)&&t[e](t),!0))}function z(d){M(d,"willMount")}function G(d){M(d,"didMount")}function J(d){M(d,"willUnmount")}function Q(d){M(d,"didUnmount")}var I=class extends u{_$deps={};_$envNodes;_$derivedPairs;_$tag="";constructor(){super(2)}_$addAfterset(e){let t=this.Afterset.bind(this);this.Afterset=function(){t(),e()}.bind(this)}_$runDeps(e){if(this._$deps[e]===void 0){console.warn(`${e} is not a dependency in ${this.constructor.name}`);return}for(let t of this._$deps[e].values())t.call(this)}_$children=[];_$addChildren(e){this._$children=e}_$resetChildren(){for(let e of this._$children)e._$nodes=[]}_$initDecorators(){if(this._$derivedPairs)for(let[e,t]of Object.entries(this._$derivedPairs)){let s=this[e];if(typeof s!="function")return;this[e]=this[e]();let o=this[e];this._$addDeps(t,{},()=>{let n=s();n!==o&&(this[e]=n,o=n,this._$runDeps(e))})}}_$addDeps(e,t,s){for(let o of e)this._$deps[o].set(t,s)}_$deleteDep(e,t){this._$deps[e].delete(t)}_$deleteDeps(e){for(let t in this._$deps)this._$deleteDep(t,e)}AfterConstruct(){}Preset(){}Afterset(){}_$init(){this.AfterConstruct(),this._$initDecorators(),this.Preset(),this._$nodes=(this.Body.bind(this)??(()=>[]))(),this.Afterset(),this._$bindNodes()}_$addProp(e,t,s,o,n){w(this,"prop",e,t,s,o,n)}willMount(e,t){}didMount(e,t){}willUnmount(e,t){}didUnmount(e,t){}_$addLifeCycle(e,t){let s=this[t];this[t]=function(o,n){e.call(this,this._$el,this),s.call(this,this._$el,this)}}render(e){let t=new E("div");t._$addNodes([this]),t._$addProp("id",typeof e=="string"?e:e.id),t._$init(),this.willMount(this._$el,this),p(this._$nodes,s=>{switch(s._$nodeType){case 0:s.willAppear(s._$el,s);break;case 2:s.willMount(s._$el,s);break}return!0}),typeof e=="string"&&(e=document.getElementById(e)),e.replaceWith(t._$el),p(this._$nodes,s=>{switch(s._$nodeType){case 0:s.didAppear(s._$el,s);break;case 2:s.didMount(s._$el,s);break}return!0}),this.didMount(this._$el,this)}_$detach(){super._$detach(),N(this._$children)}};var E=class extends u{_$envNodes=[];constructor(e){super(0),this._$el=document.createElement(e)}_$init(){this._$bindNodes(),F(this,this._$nodes)}_$addNodes(e){this._$nodes=e}_$addProp(e,t,s,o){let n;if(e[0]==="_")n=a=>this._$el.style[e.slice(1)]=a;else if(e==="className"){let a=this._$el.className;n=v=>this._$el.className=`${a} ${v}`.trim()}else n=a=>this._$el[e]=a;if(!o){n(t);return}let i=t();n(i);let r=()=>{let a=t();i!==a&&(n(a),i=a)},h={};this._$depObjectIds.push(h),s._$addDeps(o,h,r)}willAppear(e,t){}didAppear(e,t){}willDisappear(e,t){}didDisappear(e,t){}_$addLifeCycle(e,t){let s=this[t];this[t]=function(o,n,...i){return s.call(this,o,n),e.call(this,o,n)}}};var D=class extends u{afterUpdateNewNodes(e){}addAfterUpdateNewNodesFunc(e){let t=this.afterUpdateNewNodes;this.afterUpdateNewNodes=function(s){e.call(this,s),t.call(this,s)}}onUpdateNodes(e,t){}addOnUpdateNodesFunc(e){let t=this.onUpdateNodes;this.onUpdateNodes=function(s,o){e.call(this,s,o),t.call(this,s,o)}}_$bindNewNodes(e){g(e,this),this._$beforeInitSubNodes(),T(e),this.afterUpdateNewNodes(e)}_$detach(){super._$detach()}};var U=class extends D{keys=[];array=[];_$nodess=[];nodeFunc;keyFunc;arrayFunc;dlScope;listenDeps;nodesFunc;constructor(){super(3)}duplicatedOrNoKey=!1;_$getItem(e,t){let s=this.duplicatedOrNoKey?t:this.keys.indexOf(e);return this.array[s]}_$addNodeFunc(e){this.nodeFunc=e}_$addKeyFunc(e){this.keyFunc=e}_$addArrayFunc(e,t,s){this.dlScope=e,this.arrayFunc=t,this.listenDeps=s}_$addNodess(e){this.nodesFunc=e}setArray(){this.array=[...this.arrayFunc()]}setKeys(){if(!this.keyFunc){this.duplicatedOrNoKey=!0;return}let e=[...this.keyFunc()];if(e.length===[...new Set(e)].length){this.keys=e;return}this.keys=[...Array(this.array.length).keys()],console.warn("\u91CD\u590Dkey\u4E86"),this.duplicatedOrNoKey=!0}_$init(){if(!this.listenDeps){this._$nodess=this.nodesFunc(),this._$nodes=this._$nodess.flat(1),this._$bindNodes();return}let e=this._$parentNode;for(;e&&e._$nodeType!==0;)e=e._$parentNode;if(!e)return;let t=this.keyFunc?()=>this.updateWithKey(e):()=>this.updateWithOutKey(e),s={};if(this._$depObjectIds.push(s),this.dlScope._$addDeps(this.listenDeps,s,t),this.setArray(),this.setKeys(),this.duplicatedOrNoKey)for(let o of this.array.keys())this._$nodess.push(this.nodeFunc(null,o,this));else for(let[o,n]of this.keys.entries())this._$nodess.push(this.nodeFunc(n,o,this));this._$nodes=this._$nodess.flat(1),this._$bindNodes()}getNewNodes(e,t){let s=this.nodeFunc(e,t,this);return this._$bindNewNodes(s),s}updateWithOutKey(e){let t=e._$el,s=this.array.length;this.setArray();let o=this.array.length;if(s!==o){if(s<o){let n=x(e,this),i=t.childNodes.length;for(let r=0;r<o;r++){if(r<s){n+=C(this._$nodess[r]);continue}let h=this.getNewNodes(null,r);[n,i]=L(h,n,t,i),this._$nodess.push(h)}this._$nodes=this._$nodess.flat(1);return}for(let n=o;n<s;n++)$(this._$nodess[n],this.dlScope),y(this._$nodess[n]),N(this._$nodess[n]);this._$nodess=this._$nodess.slice(0,o),this._$nodes=this._$nodess.flat(1)}}updateWithKey(e){let t=e._$el,s=x(e,this),o=this.keys,n=[...this.array],i=[...this._$nodess],r=[...this._$nodes];this.setArray(),this.setKeys(),this.duplicatedOrNoKey&&(o=[...Array(n.length).keys()]);let h=[],a=[],v=[];for(let[l,_]of o.entries()){if(this.keys.includes(_)){h.push(_),a.push(i[l]);continue}$(i[l],this.dlScope),y(i[l]),N(i[l]),v.push(l)}o=h;let b=s,H=t.childNodes.length;for(let[l,_]of this.keys.entries()){if(o.includes(_)){b+=C(a[o.indexOf(_)]);continue}let m=this.getNewNodes(_,l);[b,H]=L(m,b,t,H),a.splice(l,0,m),o.splice(l,0,_)}b=s;for(let[l,_]of this.keys.entries()){let m=o.indexOf(_);if(m===l){b+=C(a[l]);continue}let A=a[m],V=o[m];[b,H]=L(A,b,t,H),a.splice(m,1),o.splice(m,1),a.splice(l+1,0,A),o.splice(l+1,0,V)}this._$nodess=a,this._$nodes=this._$nodess.flat(1),this.onUpdateNodes(r,this._$nodes)}_$listen(e,t,s,o){let n={};e._$depObjectIds.push(n),e._$addDeps(s,n,()=>{let i=t();if(i===void 0){e._$deleteDeps(n);return}o(i)})}_$detach(){super._$detach(),this._$nodess=[]}};var S=class extends D{conditionPairs=[];condition;listenDeps=[];dlScope;_$envNodes=[];constructor(){super(4)}_$addCond(e,t,s,o){this.conditionPairs.push({condition:e,node:t}),o&&(this.dlScope||(this.dlScope=s),this.listenDeps.push(...o))}_$init(){let e=[];for(let s of this.conditionPairs)if(s.condition()){this.condition=s.condition.toString(),e=s.node();break}this._$nodes=e;let t=this._$parentNode;for(;t&&t._$nodeType!==0;)t=t._$parentNode;if(t){let s={};this._$depObjectIds.push(s),this.dlScope?._$addDeps(this.listenDeps,s,()=>this.update(t))}this._$bindNodes()}update(e){let t=this._$nodes,s=this.condition;this._$nodes=[];for(let i of this.conditionPairs)if(i.condition()){this.condition!==i.condition.toString()?($(t,this.dlScope),y(t),this.condition=i.condition.toString(),this._$nodes=i.node(),this._$bindNewNodes(this._$nodes)):this._$nodes=t;break}if(t.length!==0&&this._$nodes.length===0&&(this.condition="[none]",$(t,this.dlScope),y(t)),s===this.condition)return;let o=x(e,this),n=e._$el;L(this._$nodes,o,n,n.childNodes.length),N(t),this.onUpdateNodes(t,this._$nodes)}};var P=class extends u{constructor(e,t,s){if(super(1),!s){this._$el=document.createTextNode(e);return}e=e;let o=e();this._$el=document.createTextNode(o);let n=()=>{let r=e();o!==r&&(this._$el.nodeValue=r,o=r)},i={};this._$depObjectIds.push(i),t._$addDeps(s,i,n)}};var K=class extends u{addPropFuncs=[];constructor(){super(5)}_$addNodes(e){this._$nodes=e}_$addProp(e,t,s,o){this.addPropFuncs.push(n=>w(n,"env",e,t,s,o))}addProps(e){for(let t of this.addPropFuncs)t(e)}addPropsToNodes(e){p(e._$nodes,t=>(t._$addBeforeInitSubNodes(()=>{this.addPropsToNodes(t)}),t._$nodeType===2&&this.addProps(t),!1))}_$init(){this.addPropsToNodes(this),this._$bindNodes()}};var W=class extends D{nodeOrFunc;listenDeps;dlScope;propFuncs=[];constructor(e,t,s){if(super(6),!s){this._$nodes=this.formatNodes(e);return}this.nodeOrFunc=e,this.listenDeps=s,this.dlScope=t,this._$nodes=this.formatNodes(this.nodeOrFunc())}_$onUpdateNodes(e){p(this._$nodes,t=>([4,3,6].includes(t._$nodeType)&&t.addOnUpdateNodesFunc(e),!0))}_$addProp(e,t,s,o){let n=i=>{if(["willAppear","didAppear","willDisappear","didDisappear"].includes(e)){i._$addLifeCycle(t,e);return}e[0]==="_"&&(i._$el.style[e.slice(1)]??"").trim()!==""||!["className"].includes(e)&&e[0]!=="_"&&i._$el[e]!==void 0||i._$addProp(e,t,s,o)};this.propFuncs.push(()=>{for(let i of this._$nodes)switch(i._$nodeType){case 0:n(i);break;case 3:case 4:case 6:i.addAfterUpdateNewNodesFunc(r=>{f(r,(h,a)=>{a._$nodeType===0&&n(a)},!1)});default:f(i._$nodes,(r,h)=>{h._$nodeType===0&&n(h)},!1)}})}formatNodes(e){return Array.isArray(e)||(e=[e]),e=e.flat(1),e=e.filter(t=>t!=null&&typeof t!="boolean").map(t=>t._$nodeType!==void 0?t:new P(t)),e}_$init(){if(this.listenDeps===void 0){this._$bindNodes();for(let s of this.propFuncs)s();return}let e=this._$parentNode;for(;e&&e._$nodeType!==0;)e=e._$parentNode;if(!e)return;let t={};this._$depObjectIds.push(t),this.dlScope._$addDeps(this.listenDeps,t,()=>this.update(e)),this._$bindNodes();for(let s of this.propFuncs){s();let o={};this._$depObjectIds.push(o),this.dlScope._$addDeps(this.listenDeps,o,s)}}update(e){let t=this._$nodes;$(this._$nodes,this.dlScope),y(this._$nodes),this._$nodes=this.formatNodes(this.nodeOrFunc()),this._$bindNewNodes(this._$nodes);let s=e._$el,o=x(e,this);L(this._$nodes,o,s,s.childNodes.length),N(t),this.onUpdateNodes(t,this._$nodes)}};var Ye=I;function Ze(d,e){new e().render(d)}export{I as CustomNode,u as DLNode,c as DLNodeType,K as EnvNode,W as ExpressionNode,U as ForNode,E as HtmlNode,S as IfNode,P as TextNode,Ye as View,g as bindParentNode,T as initNodes,f as loopEls,p as loopNodes,Ze as render,j as toEls};
+function T(d){for(let e of d){if(Array.isArray(e)){T(e);continue}e._$init()}}function g(d,e){for(let t of d){if(Array.isArray(t)){g(t,e);continue}t._$parentNode=e}}function p(d,e){for(let t of d)e(t)&&p(t._$nodes,e)}function f(d,e,t=!0){for(let s of d)[0,1].includes(s._$nodeType)?(e(s._$el,s),t&&f(s._$nodes,e)):f(s._$nodes,e,t)}function j(d){let e=[];return f(d,(t,s)=>{s._$nodeType===0&&e.push(t)},!1),e}var c=(r=>(r[r.HTML=0]="HTML",r[r.Text=1]="Text",r[r.Custom=2]="Custom",r[r.For=3]="For",r[r.If=4]="If",r[r.Env=5]="Env",r[r.Expression=6]="Expression",r))(c||{}),u=class{_$nodeType;__$el;get _$el(){return this.__$el??j(this._$nodes)}set _$el(e){this.__$el=e}_$parentNode;_$nodes=[];_$depObjectIds=[];_$detach(){this._$parentNode=void 0,this._$nodes=[],this._$depObjectIds=[],[1,0].includes(this._$nodeType)||(this.__$el=void 0),this._$beforeInitSubNodes=function(){}}_$beforeInitSubNodes(){}_$addBeforeInitSubNodes(e){let t=this._$beforeInitSubNodes;this._$beforeInitSubNodes=function(){t.call(this),e.call(this)}}_$bindNodes(){g(this._$nodes,this),this._$beforeInitSubNodes(),T(this._$nodes)}constructor(e){this._$nodeType=e}_$init(){}};function w(d,e,t,s,o,n,i){if(t in d){if(!n){d[t]=s;return}if(!(d[`_$$${t}`]!==`_$${e}`&&!(`_$$${t}`in d))){if(d[`_$$${t}`]===`_$${e}`){k(o,d,t,s,n);return}if(i&&`_$$${n[0]}`in o){B(o,d,t,s,n);return}q(o,d,t,s,n)}}}function k(d,e,t,s,o){let n={};e._$depObjectIds.push(n),e[t]=s(),d._$addDeps(o,n,()=>{e[t]=s(),e._$runDeps(t)})}function B(d,e,t,s,o){let n={};e._$depObjectIds.push(n);for(let i of o){let r=()=>d[i]=e[t];e._$addDeps([t],n,r),e[t]=s(),d._$addDeps(o,n,()=>{e._$deleteDep(t,n),e[t]=s(),e._$addDeps([t],n,r)})}}function q(d,e,t,s,o){let n={};e._$depObjectIds.push(n),e[`_$${t}`]=s(),d._$addDeps(o,n,()=>{e[`_$${t}`]=s(),e._$runDeps(t)})}function F(d,e){p(e,t=>{switch(t._$nodeType){case 1:case 0:d._$el.appendChild(t._$el);break;default:F(d,t._$nodes);break}return!1})}function y(d){J(d),f(d,(e,t)=>{document.body.contains(e)&&(t._$nodeType===0&&t.willDisappear(e,t),e.remove(),t._$nodeType===0&&t.didDisappear(e,t))}),Q(d)}function N(d){for(let e of d)e._$detach()}function $(d,e){p(d,t=>{for(let s of t._$depObjectIds)e._$deleteDeps(s);return t._$nodeType===2&&$(t._$children,e),!0})}function L(d,e,t,s){let o=s??t.childNodes.length;return z(d),f(d,(n,i)=>{let r=document.body.contains(n);[0].includes(i._$nodeType)&&!r&&i.willAppear(n,i),e===o?t.appendChild(n):t.insertBefore(n,t.childNodes[e]),[0].includes(i._$nodeType)&&!r&&i.didAppear(n,i),e++,o++},!1),G(d),[e,o]}function x(d,e){return O(d._$nodes,e)}function C(d){return O(d,void 0)}function O(d,e){let t=0,s=!1;return p(d,o=>s?!1:o===e?(s=!0,!1):[1,0].includes(o._$nodeType)?(t++,!1):!0),t}function M(d,e){p(d,t=>([2].includes(t._$nodeType)&&t[e](t),!0))}function z(d){M(d,"willMount")}function G(d){M(d,"didMount")}function J(d){M(d,"willUnmount")}function Q(d){M(d,"didUnmount")}var I=class extends u{_$deps={};_$envNodes;_$derivedPairs;_$tag="";constructor(){super(2)}_$addAfterset(e){let t=this.Afterset.bind(this);this.Afterset=function(){t(),e()}.bind(this)}_$runDeps(e){if(this._$deps[e]===void 0){console.warn(`${e} is not a dependency in ${this.constructor.name}`);return}for(let t of this._$deps[e].values())t.call(this)}_$children=[];_$addChildren(e){this._$children=e}_$resetChildren(){for(let e of this._$children)e._$nodes=[]}_$initDecorators(){if(this._$derivedPairs)for(let[e,t]of Object.entries(this._$derivedPairs)){let s=this[e];if(typeof s!="function")return;this[e]=this[e]();let o=this[e];this._$addDeps(t,{},()=>{let n=s();n!==o&&(this[e]=n,o=n,this._$runDeps(e))})}}_$addDeps(e,t,s){for(let o of e)this._$deps[o].set(t,s)}_$deleteDep(e,t){this._$deps[e].delete(t)}_$deleteDeps(e){for(let t in this._$deps)this._$deleteDep(t,e)}AfterConstruct(){}Preset(){}Afterset(){}_$init(){this.AfterConstruct(),this._$initDecorators(),this.Preset(),this._$nodes=(this.Body.bind(this)??(()=>[]))(),this.Afterset(),this._$bindNodes()}_$addProp(e,t,s,o,n){w(this,"prop",e,t,s,o,n)}willMount(e,t){}didMount(e,t){}willUnmount(e,t){}didUnmount(e,t){}_$addLifeCycle(e,t){let s=this[t];this[t]=function(o,n){e.call(this,this._$el,this),s.call(this,this._$el,this)}}render(e){let t=new E("div");t._$addNodes([this]),t._$addProp("id",typeof e=="string"?e:e.id),t._$init(),this.willMount(this._$el,this),p(this._$nodes,s=>{switch(s._$nodeType){case 0:s.willAppear(s._$el,s);break;case 2:s.willMount(s._$el,s);break}return!0}),typeof e=="string"&&(e=document.getElementById(e)),e.replaceWith(t._$el),p(this._$nodes,s=>{switch(s._$nodeType){case 0:s.didAppear(s._$el,s);break;case 2:s.didMount(s._$el,s);break}return!0}),this.didMount(this._$el,this)}_$detach(){super._$detach(),N(this._$children)}};var E=class extends u{_$envNodes=[];constructor(e){super(0),this._$el=document.createElement(e)}_$init(){this._$bindNodes(),F(this,this._$nodes)}_$addNodes(e){this._$nodes=e}_$addProp(e,t,s,o){let n;if(e[0]==="_")n=a=>this._$el.style[e.slice(1)]=a;else if(e==="className"){let a=this._$el.className;n=v=>this._$el.className=`${a} ${v}`.trim()}else n=a=>this._$el[e]=a;if(!o){n(t);return}let i=t();n(i);let r=()=>{let a=t();i!==a&&(n(a),i=a)},h={};this._$depObjectIds.push(h),s._$addDeps(o,h,r)}willAppear(e,t){}didAppear(e,t){}willDisappear(e,t){}didDisappear(e,t){}_$addLifeCycle(e,t){let s=this[t];this[t]=function(o,n,...i){return s.call(this,o,n),e.call(this,o,n)}}};var D=class extends u{afterUpdateNewNodes(e){}addAfterUpdateNewNodesFunc(e){let t=this.afterUpdateNewNodes;this.afterUpdateNewNodes=function(s){e.call(this,s),t.call(this,s)}}onUpdateNodes(e,t){}addOnUpdateNodesFunc(e){let t=this.onUpdateNodes;this.onUpdateNodes=function(s,o){e.call(this,s,o),t.call(this,s,o)}}_$bindNewNodes(e){g(e,this),this._$beforeInitSubNodes(),T(e),this.afterUpdateNewNodes(e)}_$detach(){super._$detach()}};var U=class extends D{keys=[];array=[];_$nodess=[];nodeFunc;keyFunc;arrayFunc;dlScope;listenDeps;nodesFunc;constructor(){super(3)}duplicatedOrNoKey=!1;_$getItem(e,t){let s=this.duplicatedOrNoKey?t:this.keys.indexOf(e);return this.array[s]}_$addNodeFunc(e){this.nodeFunc=e}_$addKeyFunc(e){this.keyFunc=e}_$addArrayFunc(e,t,s){this.dlScope=e,this.arrayFunc=t,this.listenDeps=s}_$addNodess(e){this.nodesFunc=e}setArray(){this.array=[...this.arrayFunc()]}setKeys(){if(!this.keyFunc){this.duplicatedOrNoKey=!0;return}let e=[...this.keyFunc()];if(e.length===[...new Set(e)].length){this.keys=e;return}this.keys=[...Array(this.array.length).keys()],console.warn("\u91CD\u590Dkey\u4E86"),this.duplicatedOrNoKey=!0}_$init(){if(!this.listenDeps){this._$nodess=this.nodesFunc(),this._$nodes=this._$nodess.flat(1),this._$bindNodes();return}let e=this._$parentNode;for(;e&&e._$nodeType!==0;)e=e._$parentNode;if(!e)return;let t=this.keyFunc?()=>this.updateWithKey(e):()=>this.updateWithOutKey(e),s={};if(this._$depObjectIds.push(s),this.dlScope._$addDeps(this.listenDeps,s,t),this.setArray(),this.setKeys(),this.duplicatedOrNoKey)for(let o of this.array.keys())this._$nodess.push(this.nodeFunc(null,o,this));else for(let[o,n]of this.keys.entries())this._$nodess.push(this.nodeFunc(n,o,this));this._$nodes=this._$nodess.flat(1),this._$bindNodes()}getNewNodes(e,t){let s=this.nodeFunc(e,t,this);return this._$bindNewNodes(s),s}updateWithOutKey(e){let t=e._$el,s=this.array.length;this.setArray();let o=this.array.length;if(s!==o){if(s<o){let n=x(e,this),i=t.childNodes.length;for(let r=0;r<o;r++){if(r<s){n+=C(this._$nodess[r]);continue}let h=this.getNewNodes(null,r);[n,i]=L(h,n,t,i),this._$nodess.push(h)}this._$nodes=this._$nodess.flat(1);return}for(let n=o;n<s;n++)$(this._$nodess[n],this.dlScope),y(this._$nodess[n]),N(this._$nodess[n]);this._$nodess=this._$nodess.slice(0,o),this._$nodes=this._$nodess.flat(1)}}updateWithKey(e){let t=e._$el,s=x(e,this),o=this.keys,n=[...this.array],i=[...this._$nodess],r=[...this._$nodes];this.setArray(),this.setKeys(),this.duplicatedOrNoKey&&(o=[...Array(n.length).keys()]);let h=[],a=[],v=[];for(let[l,_]of o.entries()){if(this.keys.includes(_)){h.push(_),a.push(i[l]);continue}$(i[l],this.dlScope),y(i[l]),N(i[l]),v.push(l)}o=h;let b=s,H=t.childNodes.length;for(let[l,_]of this.keys.entries()){if(o.includes(_)){b+=C(a[o.indexOf(_)]);continue}let m=this.getNewNodes(_,l);[b,H]=L(m,b,t,H),a.splice(l,0,m),o.splice(l,0,_)}b=s;for(let[l,_]of this.keys.entries()){let m=o.indexOf(_);if(m===l){b+=C(a[l]);continue}let A=a[m],V=o[m];[b,H]=L(A,b,t,H),a.splice(m,1),o.splice(m,1),a.splice(l+1,0,A),o.splice(l+1,0,V)}this._$nodess=a,this._$nodes=this._$nodess.flat(1),this.onUpdateNodes(r,this._$nodes)}_$listen(e,t,s,o){let n={};e._$depObjectIds.push(n),e._$addDeps(s,n,()=>{let i=t();if(i===void 0){e._$deleteDeps(n);return}o(i)})}_$detach(){super._$detach(),this._$nodess=[]}};var S=class extends D{conditionPairs=[];condition;listenDeps=[];dlScope;_$envNodes=[];constructor(){super(4)}_$addCond(e,t,s,o){this.conditionPairs.push({condition:e,node:t}),o&&(this.dlScope||(this.dlScope=s),this.listenDeps.push(...o))}_$init(){let e=[];for(let s of this.conditionPairs)if(s.condition()){this.condition=s.condition.toString(),e=s.node();break}this._$nodes=e;let t=this._$parentNode;for(;t&&t._$nodeType!==0;)t=t._$parentNode;if(t){let s={};this._$depObjectIds.push(s),this.dlScope?._$addDeps(this.listenDeps,s,()=>this.update(t))}this._$bindNodes()}update(e){let t=this._$nodes,s=this.condition;this._$nodes=[];for(let i of this.conditionPairs)if(i.condition()){this.condition!==i.condition.toString()?($(t,this.dlScope),y(t),this.condition=i.condition.toString(),this._$nodes=i.node(),this._$bindNewNodes(this._$nodes)):this._$nodes=t;break}if(t.length!==0&&this._$nodes.length===0&&(this.condition="[none]",$(t,this.dlScope),y(t)),s===this.condition)return;let o=x(e,this),n=e._$el;L(this._$nodes,o,n,n.childNodes.length),N(t),this.onUpdateNodes(t,this._$nodes)}};var P=class extends u{constructor(e,t,s){if(super(1),!s){this._$el=document.createTextNode(e);return}e=e;let o=e();this._$el=document.createTextNode(o);let n=()=>{let r=e();o!==r&&(this._$el.nodeValue=r,o=r)},i={};this._$depObjectIds.push(i),t._$addDeps(s,i,n)}};var K=class extends u{addPropFuncs=[];constructor(){super(5)}_$addNodes(e){this._$nodes=e}_$addProp(e,t,s,o){this.addPropFuncs.push(n=>w(n,"env",e,t,s,o))}addProps(e){for(let t of this.addPropFuncs)t(e)}addPropsToNodes(e){p(e._$nodes,t=>(t._$addBeforeInitSubNodes(()=>{this.addPropsToNodes(t)}),t._$nodeType===2&&this.addProps(t),!1))}_$init(){this.addPropsToNodes(this),this._$bindNodes()}};var W=class extends D{nodeOrFunc;listenDeps;dlScope;propFuncs=[];constructor(e,t,s){if(super(6),!s){this._$nodes=this.formatNodes(e);return}this.nodeOrFunc=e,this.listenDeps=s,this.dlScope=t,this._$nodes=this.formatNodes(this.nodeOrFunc())}_$onUpdateNodes(e){p(this._$nodes,t=>([4,3,6].includes(t._$nodeType)&&t.addOnUpdateNodesFunc(e),!0))}_$addProp(e,t,s,o){let n=i=>{if(["willAppear","didAppear","willDisappear","didDisappear"].includes(e)){i._$addLifeCycle(t,e);return}e[0]==="_"&&(i._$el.style[e.slice(1)]??"").trim()!==""||!["className"].includes(e)&&e[0]!=="_"&&i._$el[e]!==void 0||i._$addProp(e,t,s,o)};this.propFuncs.push(()=>{for(let i of this._$nodes)switch(i._$nodeType){case 0:n(i);break;case 3:case 4:case 6:i.addAfterUpdateNewNodesFunc(r=>{f(r,(h,a)=>{a._$nodeType===0&&n(a)},!1)});default:f(i._$nodes,(r,h)=>{h._$nodeType===0&&n(h)},!1)}})}formatNodes(e){return Array.isArray(e)||(e=[e]),e=e.flat(1),e=e.filter(t=>t!=null&&typeof t!="boolean").map(t=>t._$nodeType!==void 0?t:new P(t)),e}_$init(){if(this.listenDeps===void 0){this._$bindNodes();for(let s of this.propFuncs)s();return}let e=this._$parentNode;for(;e&&e._$nodeType!==0;)e=e._$parentNode;if(!e)return;let t={};this._$depObjectIds.push(t),this.dlScope._$addDeps(this.listenDeps,t,()=>this.update(e)),this._$bindNodes();for(let s of this.propFuncs){s();let o={};this._$depObjectIds.push(o),this.dlScope._$addDeps(this.listenDeps,o,s)}}update(e){let t=this._$nodes;$(this._$nodes,this.dlScope),y(this._$nodes),this._$nodes=this.formatNodes(this.nodeOrFunc()),this._$bindNewNodes(this._$nodes);let s=e._$el,o=x(e,this);L(this._$nodes,o,s,s.childNodes.length),N(t),this.onUpdateNodes(t,this._$nodes)}};var Ye=I;function Ze(d,e){new e().render(d)}export{I as CustomNode,u as DLNode,c as DLNodeType,K as EnvNode,W as ExpressionNode,U as ForNode,E as HtmlNode,S as IfNode,P as TextNode,Ye as View,g as bindParentNode,T as initNodes,f as loopEls,p as loopNodes,Ze as render,j as toEls};

package.json

 {
   "name": "@dlightjs/dlight",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "files": [
@@ -10,3 +10,3 @@ "dist"
   "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "module": "src/index.ts",
   "typings": "dist/index.d.ts",
@@ -13,0 +13,0 @@ "devDependencies": {

README.md

@@ -40,5 +40,53 @@ # DLight
 
-First thing first, DLight is not using template/functional components. It uses **Class component** instead, but not like React Class component. We are not fans of writing nesting logic inside your view and want to **split the view and logic**, so we choose not to use functional component with its returned value as view. In the meantime, we want to make our component **as flexible as possible**,so here we comes the DLight class component. We realize there's one big burden to write a class component -- 'this'. You have to use this.xxx to access a class property. So **currently we're building a babel plugin to 'eliminate this' in a class and auto find the binding object**. Sadly now you have to write 'this.value'. But it's still okay, right?
+First thing first, DLight is not using template/functional components. 
+It uses **Class component** instead, but not like React Class component. 
+We are not fans of writing nesting logic inside your view and want to **split the view and logic**, 
+so we choose not to use functional component with its returned value as view. In the meantime, 
+we want to make our component **as flexible as possible**,
+so here we comes the DLight class component. 
 
+We realize there's one big burden to write a class component -- 'this'. 
+You have to use this.xxx to access a class property. 
+So **currently we're building a babel plugin to 'eliminate this' in a class and auto find the binding object**. 
+And now it's **done**!!
+
+We offer a babel plugin called `babel-plugin-optional-this` for any js/ts code to eliminate the ugly `this`, e.g.:
+```js
+export class MyComp extends View {
+  @State count = 0  
+
+  Body() {
+    div(this.count)
+  }
+}
+```
+now becomes:
+
 ```jsx
+export class MyComp extends View {
+  @State count = 0  
+
+  Body() {
+    div(count)
+  }
+}
+````
+(we've of course considered some scenarios like params of a function, a member expression.... So just don't hesitate to use it)
+Enable it in dlight is pretty easy, in vite.config.ts, just replace:
+```js
+...
+dlight()
+...
+```
+with
+```js
+...
+dlight({optionalThis: true})
+...
+```
+Then you're all set! 
+
+Let's go back to **Write your own component**
+
+```jsx
 // -> ./MyComp.jsd
@@ -100,3 +148,4 @@ import {View} from "@dlightjs/dlight"
          })
-       MyOtherComp({countProp: this.count})
+       MyOtherComp()
+       	.countProp(this.count)
      }
@@ -135,3 +184,4 @@ }
          .id("mycomp")
-       MyOtherComp({countPropState: this.count})
+       MyOtherComp()
+       	.countPropState(this.count)
      }
@@ -158,3 +208,4 @@ }
   div("this auto set it inner text")
-  div {
+  div()
+  {
     button("first child")
@@ -164,7 +215,9 @@ .onclick(() => {
       })
-    div({id: "second-child-div", innerText: "you can also set prop like this"})
+    div()
+      .id("second-child-div")
+      .innerText("you can also set prop like this")
   }
   "plain text node"
   `this is text node too, ${this.anyMessage}`
-  Exp("this is expression")
+  _("this is expression")
 }
@@ -180,7 +233,7 @@ ...
 
-2. Tag that starts with a uppercase letter is a custom component tag, e.g. `MyComp` `MyOtherComp`
+2. Tag that starts with an uppercase letter is a custom component tag, e.g. `MyComp` `MyOtherComp`
 
-3. Tag that starts with a uppercase letter maybe an internal tag.
+3. Tag that starts with a lowercase letter maybe an internal tag.
 
-   Current internal tag includes: `If` `ElseIf` `Else` `For` `Env` `Exp`
+   Current internal tag includes: `if` `else if` `else` `for` `env` `_`
 
@@ -204,3 +257,3 @@ We also have invisible tag: strings wrapped with `"` \ `'` \ ` are called textNode. It's created by `document.createTextNode()`
 
-In jsd, we use `Exp` to identifier expression. And inside the expression, we use `@{}` to mark that the content inside it is a sub-block of jsd Body. e.g.
+In jsd, we use `_` to identifier expression. And inside the expression, we use `do {}` to mark that the content inside it is a sub-block of jsd Body. e.g.
 
@@ -210,5 +263,6 @@ ```jsx
 Body() {
-  div {
-    Exp(!console.log("expression just like you used to write") && "display this sentence")
-    Exp(this.show && @{
+  div()
+  {
+    _(!console.log("expression just like you used to write") && "display this sentence")
+    _(this.show && do {
       div("will show if this.show is true")
@@ -223,9 +277,5 @@ })
 
-Three ways to set a prop, the 1st and 2nd ones are equal.
+Two ways to set a prop
 
 1. ```js
-   TagName({ prop1: "hello", prop2: "world" })
-   ```
-
-2. ```TagName()
    TagName()
@@ -236,3 +286,3 @@ .prop1("hello")
 
-3. ```js
+2. ```js
    TagName("your _$content prop")
@@ -245,11 +295,11 @@ ```
 
-   - 1/2 prop means html element attributes.
+   - 1 prop means html element attributes.
 
      e.g. `div("hello").id("hello-div")` => `el.id = "hello-div"`
 
-   - 1/2 prop that starts with a "_" is a shorthand of style attributes.
+   - 1 prop that starts with a "_" is a shorthand of style attributes.
 
      e.g. `div("hello")._color("red")` => `el.style.color = "red"`
 
-   - 3 prop sets html element innerText and will be replaced by its children.
+   - 2 prop sets html element innerText and will be replaced by its children.
 
@@ -266,5 +316,5 @@ e.g. `div("hello")` => `el.style.innerText = "hello"`
 
-   - 1/2 prop means custom component props as `Quick start - pass a prop` section describes.
+   - 1 prop means custom component props as `Quick start - pass a prop` section describes.
 
-   - 3 prop set the custom component prop named `_$content`
+   - 2 prop set the custom component prop named `_$content`
 
@@ -529,3 +579,3 @@ ```js
   Body() {
-    div 
+    div()
       .willAppear(() => {
@@ -598,3 +648,4 @@ console.log("I will appear")
   Body() {
-    MySubComp {
+    MySubComp()
+    {
       div("hello")
@@ -653,2 +704,57 @@ div("dlight")
 
+## Sub views
+
+Build reusable subviews inside your components. Props inside @View will automatically be reactive.
+
+```js
+class MyComp extends View {
+  @View
+  MyButton({id}) {
+    button(`I am button ${id}`)
+  }
+  Body() {
+    for (let i of [1,2,3]) {
+      this.MyButton()
+      	.id(i)
+    }
+  }
+}
+```
+
+## Complex tag
+
+Force a expression to be a custom tag.
+
+```js
+class MySubComp extends View {
+  Body() {
+    "hello"
+  }
+}
+
+class MyComp extends View {
+  myTagObject = {
+    getTag: () => MySubComp
+  }
+  Body() {
+    tag(this.myTagObject.getTag())()
+  }
+}
+```
+
+Force a expression to be a html tag.
+
+```js
+class MyComp extends View {
+  myTagObject = {
+    getTag: () => "span"
+  }
+  Body() {
+    html(this.myTagObject.getTag())()
+  }
+}
+```
+
+
+
 # Internal tags
@@ -663,4 +769,5 @@
    Body() {
-     div {
-       Exp(this.array.map(item => @{
+     div()
+     {
+       _(this.array.map(item => do {
            div(item)
@@ -682,4 +789,5 @@ }))
    Body() {
-     div {
-       For (let item of this.array) {
+     div()
+     {
+       for (let item of this.array) {
          div(item)
@@ -697,4 +805,5 @@ }
    Body() {
-     div {
-       For (let {id, item} of this.array)[id] {
+     div()
+     {
+       for (let {id, item} of this.array) { [id]
          div(item)
@@ -724,8 +833,9 @@ }
    Body() {
-     div {
-       If (this.show) {
+     div()
+     {
+       if (this.show) {
          "show me"
-       } ElseIf (this.alsoShow) {
+       } else if (this.alsoShow) {
          "also show me"
-       } Else {
+       } else {
          "don't show me"
@@ -771,3 +881,5 @@ }
   Body() {
-    Env({myMessage: "use me anywhere inside this environment"}) {
+    Env()
+    	.myMessage("use me anywhere inside this environment") 
+    {
       MySubComp1()
@@ -774,0 +886,0 @@ MySubComp2()

No alert changes

Improved metrics

Total package byte prevSize

57760

increased by2.37%

Number of lines in readme file

871

increased by14.76%

No dependency changes