@neuralfog/elemix 0.1.6 → 0.1.8

package/dist/decorators.js

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

package/dist/index.js

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

package/dist/src/Reactive.d.ts

@@ -2,7 +2,7 @@ import type { Component } from './component/Component';
 import type { RenderTriggerType } from './types';
 export declare class Reactive<State> {
     private renderTrigger?;
-    subscribers: Set<Component<unknown>>;
+    subscribers: Set<Component<unknown, unknown>>;
     private proxy;
     private proxySet;
     get value(): State;

package/dist/src/component/Component.d.ts

@@ -1,13 +1,17 @@
 import { type RenderTriggerType, type Template } from '../types';
 import { Styles } from './Styles';
-export declare class Component<ComponentProps = unknown> extends HTMLElement {
+export declare class Component<ComponentProps = unknown, ComponentEmits = unknown> extends HTMLElement {
     private $props;
+    private $emits;
     private $renderer;
     private $localState;
     private $styles;
+    private $controlStyles?;
     get root(): HTMLElement | ShadowRoot | null;
     get props(): ComponentProps;
+    get emits(): ComponentEmits;
     get styles(): Styles;
+    get controlStyles(): CSSStyleSheet[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -17,5 +21,6 @@ export declare class Component<ComponentProps = unknown> extends HTMLElement {
     onMount(): void;
     onDispose(): void;
     render(renderTrigger?: RenderTriggerType, isConnectedCallback?: boolean): void;
+    setControlStyles(styles: CSSStyleSheet[]): void;
     private unsubscribeFromSignals;
 }

package/dist/src/component/Emits.d.ts

@@ -0,0 +1,4 @@
+export declare class Emits<ComponentEmits = unknown> {
+    data: ComponentEmits;
+    set(name: string, value: unknown): void;
+}

package/dist/src/decorators/component.d.ts

@@ -1,6 +1,5 @@
 import type { Reactive } from '../Reactive';
 type ComponentDecoratorConfig = {
-    tag?: string;
     signals?: Reactive<unknown>[];
     styles?: string[];
 };

package/dist/test/fixtures/ViewModelBinding.d.ts

@@ -1,6 +1,6 @@
 import { Component } from '../../src/component/Component';
 import { type Template } from '../../src/types';
-export declare class ViewModelBinding extends Component {
+export declare class ViewModelBindingApp extends Component {
     state: {
         input: {
             value?: string | undefined;

package/dist/utilities-oGilfnVK.js

@@ -0,0 +1 @@
+"use strict";const r=require("./renderers-CTogHRY2.js"),s=(e=void 0)=>({value:e}),n=()=>Math.floor(performance.now()*1e3).toString(36)+Math.random().toString(36).slice(2,6);function o(){return new Promise(e=>{const t=()=>{r.activeRenderers.size===0?e(!1):setTimeout(t,0)};t()})}const a=e=>(e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|[0-9]*$)|[A-Z]?[a-z]+|[A-Z]|[0-9]+/g)||[]).map(t=>t.toLowerCase()).join("-"),c=e=>{const t=new CSSStyleSheet;return t.replaceSync(e),t};exports.camelToKebabCase=a;exports.fastUID=n;exports.makeCssStylesheet=c;exports.ref=s;exports.render=o;

package/dist/utilities.d.ts

@@ -1 +1,2 @@
+export { mergeClasses } from '@neuralfog/elemix-renderer/utils';
 export * from './src/utilities';

package/dist/utilities.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./renderers-CTogHRY2.js"),s=(e=void 0)=>({value:e}),n=()=>Math.floor(performance.now()*1e3).toString(36)+Math.random().toString(36).slice(2,6);function o(){return new Promise(e=>{const t=()=>{r.activeRenderers.size===0?e(!1):setTimeout(t,0)};t()})}const a=e=>(e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|[0-9]*$)|[A-Z]?[a-z]+|[A-Z]|[0-9]+/g)||[]).map(t=>t.toLowerCase()).join("-"),c=e=>{const t=new CSSStyleSheet;return t.replaceSync(e),t};exports.camelToKebabCase=a;exports.fastUID=n;exports.makeCssStylesheet=c;exports.ref=s;exports.render=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./utilities-oGilfnVK.js");var o={},r={},n;function f(){if(n)return r;n=1;const s="₥";var l=(e=>(e[e.EVENT=0]="EVENT",e[e.PROP=1]="PROP",e[e.MODEL=2]="MODEL",e[e.STD=3]="STD",e[e.REF=4]="REF",e[e.EMIT=5]="EMIT",e[e.BIND_ATTRS=6]="BIND_ATTRS",e[e.BIND_EVENTS=7]="BIND_EVENTS",e[e.DIRECT_CLASS=8]="DIRECT_CLASS",e))(l||{});const m=e=>{const t=new RegExp(`${s}(\\d+)`),a=e.match(t);if(!a)throw new Error("Unable to extract index from hole comment");return Number(a[1])},E=e=>`<!--${s}${e}-->`,T=e=>e.replace(/<([a-zA-Z][^\s/>]*)([\s\S]*?)\/>/g,(t,a,R)=>a.includes("-")?`<${a}${R}></${a}>`:t),c=e=>e.replace(/(\S+)=((<!--[\s\S]*?-->)|([^\s">]+))/g,'$1="$2"'),S=e=>e.replace(/([A-Z])/g,t=>"-"+t.toLowerCase()),C=(e,t)=>Array.from(new Set([...e.split(" "),...t.split(" ")].filter(Boolean))).join(" ").trim();return r.Attributes=l,r.TEMPLATE_MARKER_GLYPH=s,r.camelToKebab=S,r.fixAttributeQuotes=c,r.fixSelfClosingTags=T,r.getIndexFromComment=m,r.makeMarkerComment=E,r.mergeClasses=C,r}var u;function g(){return u||(u=1,function(s){Object.defineProperty(s,Symbol.toStringTag,{value:"Module"});const l=f();s.mergeClasses=l.mergeClasses}(o)),o}var b=g();exports.camelToKebabCase=i.camelToKebabCase;exports.fastUID=i.fastUID;exports.makeCssStylesheet=i.makeCssStylesheet;exports.ref=i.ref;exports.render=i.render;exports.mergeClasses=b.mergeClasses;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@neuralfog/elemix",
-    "version": "0.1.6",
+    "version": "0.1.8",
     "license": "MIT",
     "author": "brownhounds",
     "main": "dist/index.js",
@@ -36,10 +36,10 @@
         "@vitest/ui": "3.0.7",
         "jsdom": "26.0.0",
         "typescript": "5.8.2",
-        "vite": "6.2.0",
+        "vite": "6.2.3",
         "vitest": "3.0.7"
     },
     "peerDependencies": {
-        "@neuralfog/elemix-renderer": "0.1.6"
+        "@neuralfog/elemix-renderer": "0.1.8"
     }
 }