@neuralfog/elemix 0.1.1 → 0.1.3

package/dist/decorators.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./types-xKcmJSD7.js"),d=(t,e)=>{customElements.get(t)===void 0&&customElements.define(t,e)},f=({tag:t,signals:e,styles:s})=>r=>{const i=class extends r{constructor(){if(super(),e!=null&&e.length)for(const o of e)o.subscribe(this)}};r.$signals=e||[],r.$styles=s||[],d(t,i)},u=t=>(e,s)=>{e.stateProperties||(e.stateProperties=new Map),e.stateProperties.has(s)||e.stateProperties.set(s,t||c.RenderTrigger.LOCAL_STATE)};exports.component=f;exports.state=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./types-D5TcFW7H.js"),d=(t,e)=>{customElements.get(t)===void 0&&customElements.define(t,e)},f=({tag:t,signals:e,styles:s})=>r=>{const i=class extends r{constructor(){if(super(),e!=null&&e.length)for(const o of e)o.subscribe(this)}};r.$signals=e||[],r.$styles=s||[],d(t,i)},u=t=>(e,s)=>{e.stateProperties||(e.stateProperties=new Map),e.stateProperties.has(s)||e.stateProperties.set(s,t||c.RenderTrigger.LOCAL_STATE)};exports.component=f;exports.state=u;

package/dist/directives.d.ts

@@ -1 +1,2 @@
-export * from '@neuralfog/elemix-renderer/directives';
+import { repeat, condition } from '@neuralfog/elemix-renderer/directives';
+export { repeat, condition };

package/dist/directives.js

@@ -1 +1 @@
-"use strict";var n={},a;function v(){return a||(a=1,function(i){Object.defineProperty(i,Symbol.toStringTag,{value:"Module"});const s=(e,r,t)=>e.map((c,u)=>{const o=t(c,u);return o.key=r(c,u),o}),f=(e,r,t)=>(typeof e=="function"?e():e)?r:t;i.condition=f,i.repeat=s}(n)),n}v();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var n={},a;function f(){return a||(a=1,function(t){Object.defineProperty(t,Symbol.toStringTag,{value:"Module"});const s=(e,i,r)=>e.map((o,c)=>{const u=r(o,c);return u.key=i(o,c),u}),v=(e,i,r)=>(typeof e=="function"?e():e)?i:r;t.condition=v,t.repeat=s}(n)),n}var d=f();exports.condition=d.condition;exports.repeat=d.repeat;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var a=(i,e,t)=>e in i?l(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var s=(i,e,t)=>a(i,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./types-xKcmJSD7.js"),h=require("./reactive.js"),c=require("./app.js");class p{constructor(e){s(this,"locked",!1);s(this,"scheduledRenderTriggers",new Set);this.component=e}schedule(e,t=!1){this.component.template&&(e&&this.scheduledRenderTriggers.add(e),this.locked||(this.locked=!0,setTimeout(()=>{var o,n;this.render(Array.from(this.scheduledRenderTriggers)),this.scheduledRenderTriggers.clear(),this.locked=!1,t&&((n=(o=this.component).onMount)==null||n.call(o))},0)))}render(e){var t,o;this.component.template&&(r.distExports.render(this.component.template(),this.component.root),(o=(t=this.component).onRender)==null||o.call(t,e))}}class d{constructor(e){this.component=e}initialize(){const e=this.component.constructor.prototype.stateProperties;if(e)for(const[t,o]of e){const n=this.component;n[t]=new h.Reactive(n[t],o).subscribe(this.component).value}}}class u{constructor(e){s(this,"data",{});this.component=e}initialize(){this.data=new h.Reactive(this.data,r.RenderTrigger.PROPS).subscribe(this.component).value}setReactive(e,t){this.data[e]=t}set(e,t){if(typeof t=="object"&&t!==null){this.setReactive(e,t);return}const o=this.data[e];if(typeof t=="function"){this.data[e]||this.setReactive(e,t);return}o!==t&&this.setReactive(e,t)}}class f{constructor(e){s(this,"styles");s(this,"sheet");this.component=e,this.styles=this.component.constructor.$styles}initialize(){var e,t;this.component.shadowRoot&&!((e=this.component.shadowRoot.adoptedStyleSheets)!=null&&e.length)&&((t=c.App.config.cssReset)!=null&&t.length&&(this.styles=this.prependStyles(c.App.config.cssReset,this.styles)),this.styles.length&&(this.sheet=new CSSStyleSheet,this.sheet.replaceSync(this.styles.join(" ")),this.component.shadowRoot.adoptedStyleSheets=[this.sheet]))}prependStyles(e,t){const o=t.slice();return o.unshift(e),o}}class g extends HTMLElement{constructor(){super();s(this,"$props",new u(this));s(this,"$renderer",new p(this));s(this,"$localState",new d(this));s(this,"$styles",new f(this));s(this,"template");s(this,"onRender");s(this,"beforeMount");s(this,"onMount");s(this,"onDispose");this.attachShadow({mode:"open"})}get root(){return this.shadowRoot}get props(){return this.$props.data}get styles(){return this.$styles}connectedCallback(){var t;this.$styles.initialize(),this.$props.initialize(),this.$localState.initialize(),(t=this.beforeMount)==null||t.call(this),this.render(r.RenderTrigger.ON_MOUNT,!0)}disconnectedCallback(){var t;this.unsubscribeFromSignals(),(t=this.onDispose)==null||t.call(this)}render(t,o=!1){this.$renderer.schedule(t,o)}unsubscribeFromSignals(){for(const t of this.constructor.$signals)t.unsubscribe(this)}}exports.RenderTrigger=r.RenderTrigger;exports.html=r.html;exports.Component=g;
+"use strict";var a=Object.defineProperty;var d=(o,e,t)=>e in o?a(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var s=(o,e,t)=>d(o,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./types-D5TcFW7H.js"),p=require("@neuralfog/elemix-renderer"),c=require("./renderers-CTogHRY2.js"),l=require("./reactive.js"),h=require("./app.js");class u{constructor(e){s(this,"locked",!1);s(this,"scheduledRenderTriggers",new Set);this.component=e}schedule(e,t=!1){this.component.template&&(e&&this.scheduledRenderTriggers.add(e),this.locked||(this.locked=!0,c.activeRenderers.add(this),setTimeout(()=>{var i,n;this.render(Array.from(this.scheduledRenderTriggers)),this.scheduledRenderTriggers.clear(),this.locked=!1,c.activeRenderers.delete(this),t&&((n=(i=this.component).onMount)==null||n.call(i))},0)))}render(e){var t,i;this.component.template&&(p.render(this.component.template(),this.component.root),(i=(t=this.component).onRender)==null||i.call(t,e))}}class f{constructor(e){this.component=e}initialize(){const e=this.component.constructor.prototype.stateProperties;if(e)for(const[t,i]of e){const n=this.component;n[t]=new l.Reactive(n[t],i).subscribe(this.component).value}}}class m{constructor(e){s(this,"data",{});this.component=e}initialize(){this.data=new l.Reactive(this.data,r.RenderTrigger.PROPS).subscribe(this.component).value}setReactive(e,t){this.data[e]=t}set(e,t){if(typeof t=="object"&&t!==null){this.setReactive(e,t);return}const i=this.data[e];if(typeof t=="function"){this.data[e]||this.setReactive(e,t);return}i!==t&&this.setReactive(e,t)}}class g{constructor(e){s(this,"styles");s(this,"sheet");this.component=e,this.styles=this.component.constructor.$styles}initialize(){var e,t;this.component.shadowRoot&&!((e=this.component.shadowRoot.adoptedStyleSheets)!=null&&e.length)&&((t=h.App.config.cssReset)!=null&&t.length&&(this.styles=this.prependStyles(h.App.config.cssReset,this.styles)),this.styles.length&&(this.sheet=new CSSStyleSheet,this.sheet.replaceSync(this.styles.join(" ")),this.component.shadowRoot.adoptedStyleSheets=[this.sheet]))}prependStyles(e,t){const i=t.slice();return i.unshift(e),i}}class R extends HTMLElement{constructor(){super();s(this,"$props",new m(this));s(this,"$renderer",new u(this));s(this,"$localState",new f(this));s(this,"$styles",new g(this));s(this,"template");s(this,"onRender");s(this,"beforeMount");s(this,"onMount");s(this,"onDispose");this.attachShadow({mode:"open"})}get root(){return this.shadowRoot}get props(){return this.$props.data}get styles(){return this.$styles}connectedCallback(){var t;this.$styles.initialize(),this.$props.initialize(),this.$localState.initialize(),(t=this.beforeMount)==null||t.call(this),this.render(r.RenderTrigger.ON_MOUNT,!0)}disconnectedCallback(){var t;c.activeRenderers.delete(this.$renderer),this.unsubscribeFromSignals(),(t=this.onDispose)==null||t.call(this)}render(t,i=!1){this.$renderer.schedule(t,i)}unsubscribeFromSignals(){for(const t of this.constructor.$signals)t.unsubscribe(this)}}exports.RenderTrigger=r.RenderTrigger;exports.html=r.html;exports.Component=R;

package/dist/renderers-CTogHRY2.js

@@ -0,0 +1 @@
+"use strict";const e=new Set;exports.activeRenderers=e;

package/dist/signal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./reactive.js"),i=require("./types-xKcmJSD7.js"),n=(e,r)=>new t.Reactive(e,r||i.RenderTrigger.SIGNAL);exports.signal=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./reactive.js"),i=require("./types-D5TcFW7H.js"),n=(e,r)=>new t.Reactive(e,r||i.RenderTrigger.SIGNAL);exports.signal=n;

package/dist/src/renderers.d.ts

@@ -0,0 +1,2 @@
+import type { Renderer } from './component/Renderer';
+export declare const activeRenderers: Set<Renderer>;

package/dist/src/utilities.d.ts

@@ -1,3 +1,5 @@
 export declare const ref: <Value>(value?: Value | undefined) => {
     value?: Value;
 };
+export declare const fastUID: () => string;
+export declare function render(): Promise<boolean>;

package/dist/types-D5TcFW7H.js

@@ -0,0 +1 @@
+"use strict";const e=require("@neuralfog/elemix-renderer"),r=e.html,t={PROPS:"PROPS",SIGNAL:"SIGNAL",LOCAL_STATE:"LOCAL_STATE",ON_MOUNT:"ON_MOUNT"};exports.RenderTrigger=t;exports.html=r;

package/dist/utilities.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(e=void 0)=>({value:e});exports.ref=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./renderers-CTogHRY2.js"),n=(e=void 0)=>({value:e}),o=()=>Math.floor(performance.now()*1e3).toString(36)+Math.random().toString(36).slice(2,6);function s(){return new Promise(e=>{const r=()=>{t.activeRenderers.size===0?e(!1):setTimeout(r,0)};r()})}exports.fastUID=o;exports.ref=n;exports.render=s;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@neuralfog/elemix",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "license": "MIT",
     "author": "brownhounds",
     "main": "dist/index.js",
@@ -17,7 +17,7 @@
         "./utilities": "./dist/utilities.js"
     },
     "scripts": {
-        "clean": "rm -rf ./dist",
+        "clean": "rm -rf ./dist ./coverage",
         "emit-declarations": "tsc --emitDeclarationOnly --declaration --outDir ./dist",
         "build-lib": "vite build",
         "build": "npm run clean && npm run build-lib && npm run emit-declarations",
@@ -29,7 +29,7 @@
     },
     "devDependencies": {
         "@neuralfog/biome-config": "0.1.2",
-        "@neuralfog/elemix-testing": "0.1.0",
+        "@neuralfog/elemix-testing": "0.1.1",
         "@neuralfog/ts-config": "0.1.1",
         "@vitest/coverage-v8": "3.0.7",
         "@vitest/ui": "3.0.7",

package/dist/types-xKcmJSD7.js

@@ -1 +0,0 @@
-"use strict";var T={},L;function st(){return L||(L=1,function(p){var M=Object.defineProperty,$=(r,t,s)=>t in r?M(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,h=(r,t,s)=>$(r,typeof t!="symbol"?t+"":t,s);Object.defineProperty(p,Symbol.toStringTag,{value:"Module"});const R=r=>{const t=r;return t.$cache||(t.$cache={template:new Map}),t.$cache};class N{constructor(t,s){h(this,"key",""),this.strings=t,this.values=s}}const g="₥";var c=(r=>(r[r.EVENT=0]="EVENT",r[r.PROP=1]="PROP",r[r.DIRECT=2]="DIRECT",r[r.MODEL=3]="MODEL",r[r.STD=4]="STD",r[r.REF=5]="REF",r))(c||{});const V=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,H=r=>{const t=new RegExp(`${g}(\\d+)`),s=r.match(t);if(!s)throw new Error("Unable to extract index from hole comment");return Number(s[1])},b=r=>`<!--${g}${r}-->`,P=r=>r.replace(/<([a-zA-Z][^\s/>]*)([^>]*)\/>/g,(t,s,e)=>V.test(s)?t:`<${s}${e}></${s}>`),D=r=>r.replace(/(\S+)=((<!--[\s\S]*?-->)|([^\s">]+))/g,'$1="$2"');class I{constructor(t,s){this.node=t,this.definition=s}setValue(t){const s=this.definition.name.slice(1);this.node[s]=t}}class C{constructor(t,s){this.node=t,this.definition=s}setValue(t){const s=this.definition.name.slice(1);this.node[`on${s}`]=t}}class x{constructor(t,s){this.node=t,this.definition=s}setValue(t){const s=e=>{t.value=e.target.value};this.node.oninput||(this.node.value=t.value,this.node.oninput=s)}}class F{constructor(t,s){this.node=t,this.definition=s}setValue(t){const s=this.definition.name.slice(1),e=this.node;e.$props&&e.$props.set(s,t)}}class _{constructor(t,s){this.node=t,this.definition=s}setValue(t){t.value=this.node}}let j=class{constructor(r,t){this.node=r,this.definition=t}setValue(r){this.node.setAttribute(this.definition.name,String(r))}};const K=(r,t)=>{const s=/(\S+)(?==(?:["']?)$)/,e=r.match(s);if(e){const n={index:t,name:e[1],value:b(t),virtual:!1,type:c.STD};switch(e[1][0]){case"@":return n.type=c.EVENT,n.virtual=!0,n;case":":return e[1].endsWith(":ref")?(n.type=c.REF,n.virtual=!0,n):(n.type=c.PROP,n.virtual=!0,n);case".":return n.type=c.DIRECT,n.virtual=!0,n;case"~":return e[1].startsWith("~model")&&(n.type=c.MODEL,n.virtual=!0),n;default:return n}}},W=(r,t)=>{const s=r.querySelector(q(t.name,t.value,t.virtual));if(s)switch(t.virtual&&s.removeAttribute(t.name),t.type){case c.EVENT:return new C(s,t);case c.PROP:return new F(s,t);case c.DIRECT:return new I(s,t);case c.MODEL:return new x(s,t);case c.REF:return new _(s,t);default:return new j(s,t)}},q=(r,t,s)=>s?`[\\${r}='${t}']`:`[${r}='${t}']`,U=(r,t)=>{const s=r.length,e=t.length,n=Object.create(null);let i,l,o;for(i=0;i<s;i++)l=r[i].key,n[l]=i;const a=new Array(e),d=[],u=[],E=Object.create(null);for(i=0;i<e;i++){const m=t[i].key;E[m]=!0;const v=n[m];v===void 0?a[i]=-1:(a[i]=v,d.push(v),u.push(i))}const w=G(d),y=new Array(e);for(i=0;i<e;i++)y[i]=!1;const et=w.length;for(i=0;i<et;i++)y[u[w[i]]]=!0;const S=[],A=[],k=[];for(i=0;i<s;i++)o=r[i].key,E[o]!==!0&&S.push({key:o});for(i=0;i<e;i++){o=t[i].key;const m=i+1<e?t[i+1].key:void 0;a[i]===-1?A.push({key:o,value:t[i],beforeKey:m}):y[i]||k.push({key:o,beforeKey:m})}return{deletes:S,inserts:A,moves:k}},G=r=>{const t=r.length,s=new Array(t),e=[];let n,i,l,o;for(n=0;n<t;n++){for(i=0,l=e.length;i<l;)o=i+l>>>1,r[e[o]]<r[n]?i=o+1:l=o;i===e.length?e.push(n):e[i]=n,s[n]=i>0?e[i-1]:-1}const a=e.length,d=new Array(a);let u=e[a-1];for(n=a-1;n>=0;n--)d[n]=u,u=s[u];return d};class z{constructor(t){h(this,"cache",{listTemplate:new Map,listNodes:new Map,listHtmlTemplate:[]}),this.commentNode=t}renderListElement(t,s){if(!this.commentNode)throw new Error("renderList method needs to accept instance of HTMLElement");if(!t.key)throw new Error("use repeat directive when rendering the lists");let e=this.cache.listTemplate.get(t.key);return e||(e=new f(t),this.cache.listTemplate.set(t.key,e),e.mountListElement(this.commentNode,t.key,t.values,this.cache,s)),e}renderAllItems(t){const s=t.length;for(let e=0;e<s;e++)this.renderListElement(t[e]).update(t[e].values)}emptyList(){for(const[,t]of this.cache.listNodes)t.remove();this.cache.listTemplate.clear(),this.cache.listNodes.clear()}deleteNodes(t){const s=t.length;for(let e=s-1;e>=0;e--){const n=this.cache.listNodes.get(t[e].key);n&&n.remove(),this.cache.listNodes.delete(t[e].key),this.cache.listTemplate.delete(t[e].key)}}moveNodes(t){const s=t.length;for(let e=s-1;e>=0;e--){const n=this.cache.listNodes.get(t[e].key),i=this.cache.listNodes.get(t[e].beforeKey);n&&i&&(i==null||i.before(n)),!i&&n&&this.commentNode.before(n)}}insertNodes(t){const s=t.length;for(let e=s-1;e>=0;e--){const n=this.cache.listNodes.get(t[e].beforeKey);this.renderListElement(t[e].value,n)}}updateAllItems(t){const s=t.length;for(let e=0;e<s;e++){const n=this.cache.listTemplate.get(t[e].key);n==null||n.update(t[e].values)}}render(t){if(!this.cache.listHtmlTemplate.length){this.renderAllItems(t),this.cache.listHtmlTemplate=t;return}if(!t.length){this.emptyList(),this.cache.listHtmlTemplate=t;return}const{deletes:s,inserts:e,moves:n}=U(this.cache.listHtmlTemplate,t);if(s.length===t.length||e.length===t.length){this.emptyList(),this.renderAllItems(t),this.cache.listHtmlTemplate=t;return}s.length&&this.deleteNodes(s),n.length&&this.moveNodes(n),e.length&&this.insertNodes(e),this.updateAllItems(t),this.cache.listHtmlTemplate=t}}class Z{constructor(t){h(this,"renderer"),this.commentNode=t,this.renderer=new z(t)}setValue(t){this.renderer.render(t)}}class B{constructor(t){h(this,"node",document.createTextNode("")),this.commentNode=t,t.before(this.node)}setValue(t){const s=t!=null?String(t):"";this.node.textContent!==s&&(this.node.textContent=s)}}class J{constructor(t){h(this,"cache",{nodes:[]}),this.commentNode=t}removeNodes(){if(!this.cache.nodes.length)return;const t=this.cache.nodes.length;for(let s=0;s<t;s++)this.cache.nodes[s].remove();this.cache.nodes=[]}render(t){this.cache.strings!==t.strings&&(this.cache.fragment=void 0,this.removeNodes()),this.cache.fragment||(this.cache.fragment=new f(t),this.cache.strings=t.strings,this.cache.nodes=this.cache.fragment.mountTemplate(this.commentNode,t.values)),this.cache.fragment.update(t.values)}}class Q{constructor(t){h(this,"renderer"),this.commentNode=t,this.renderer=new J(t)}setValue(t){this.renderer.render(t)}}const Y=(r,t)=>Array.isArray(r)?new Z(t):r instanceof N?new Q(t):new B(t);class f{constructor(t){h(this,"holes",new Map),h(this,"htmlString",""),h(this,"attributeMap",[]),this.parse(t.strings)}parse(t){const s=t.length;for(let e=0;e<s;e++)if(this.htmlString+=t[e],e<t.length-1){const n=K(this.htmlString,e);n&&this.attributeMap.push(n),this.htmlString+=b(e)}this.htmlString=P(this.htmlString),this.htmlString=D(this.htmlString)}initFragment(){const t=document.createElement("template");return t.innerHTML=this.htmlString,t.content}hydrateAttributes(t){const s=this.attributeMap.length;for(let e=0;e<s;e++){const n=W(t,this.attributeMap[e]);n&&this.holes.set(this.attributeMap[e].index,n)}return t}hydrateTemplateHoles(t,s){var e;const n=document.createTreeWalker(t,NodeFilter.SHOW_COMMENT,null);for(;n.nextNode();){const i=n.currentNode;if((e=i.nodeValue)!=null&&e.includes(g)){const l=H(i.nodeValue),o=Y(s[l],i);this.holes.set(l,o)}}return t}mount(t,s){const e=this.initFragment();this.hydrateTemplateHoles(e,s),this.hydrateAttributes(e),t.appendChild(e)}mountTemplate(t,s){const e=this.initFragment();this.hydrateTemplateHoles(e,s),this.hydrateAttributes(e);const n=Array.from(e.childNodes);return t.before(e),n}mountListElement(t,s,e,n,i){const l=this.initFragment();this.hydrateTemplateHoles(l,e),this.hydrateAttributes(l),i&&i.before(l),t.before(l);const o=i?i.previousSibling:t.previousSibling;o&&n&&n.listNodes.set(s,o)}update(t){for(const[s,e]of this.holes)e.setValue(t[s])}}const X=(r,...t)=>new N(r,t),tt=(r,t)=>{if(!t)throw new Error("render method needs to accept instance of HTMLElement");const s=R(t);let e=s.template.get(r.strings);e||(e=new f(r),s.template.set(r.strings,e),e.mount(t,r.values)),e.update(r.values)};p.html=X,p.render=tt}(T)),T}var O=st();const rt=O.html,nt={PROPS:"PROPS",SIGNAL:"SIGNAL",LOCAL_STATE:"LOCAL_STATE",ON_MOUNT:"ON_MOUNT"};exports.RenderTrigger=nt;exports.distExports=O;exports.html=rt;