@neuralfog/elemix 0.1.8 → 0.2.0

package/README.md

@@ -1 +1,356 @@
-WIP
+# ⚡ Elemix
+
+Reactive elements based on Custom Elements.
+
+This is a personal project built for my own use. It is not open source and comes with no guarantees, warranties, or support.
+
+## Why?
+
+Because I can. The goal is a lean approach that utilizes as much of the native web platform as possible, with absolute freedom in how the application is architected by the implementer.
+
+## Reactivity
+
+There is no virtual DOM. Rendering is handled by [elemix-renderer](https://github.com/neuralfog/elemix-renderer) which performs direct DOM mutations. Elemix uses a pub/sub model built on JS proxies. State objects are wrapped in a `Proxy` that intercepts property mutations. When a value is set, the proxy notifies all subscribed components, triggering a re-render. Nested objects are lazily wrapped in proxies on access, so deep mutations are also reactive. Components subscribe automatically when using `@state()` or `signals`.
+
+Render scheduling is batched via `setTimeout(0)` — multiple state mutations in the same synchronous frame are coalesced into a single render. Once a render is scheduled, further mutations are locked until the next microtask, preventing redundant DOM updates.
+
+Collections (`Map`, `Set`, `WeakMap`, `WeakSet`) are not supported in reactive state.
+
+## Init
+
+```typescript
+import { initApp } from '@neuralfog/elemix/app';
+import { makeCssStylesheet } from '@neuralfog/elemix/utilities';
+
+import reset from './styles/reset.scss?inline';
+
+initApp({
+    baseStyles: [makeCssStylesheet(reset)],
+    entryPoint: () => import('./components/MainApp'),
+});
+```
+
+## Hello World Component
+
+```typescript
+import { Component } from '@neuralfog/elemix';
+import { component } from '@neuralfog/elemix/decorators';
+import { html, type Template } from '@neuralfog/elemix/types';
+
+@component()
+export class HelloWorld extends Component {
+    template = (): Template => {
+        return html`<h1>Hello World!</h1>`;
+    };
+}
+```
+
+## Styles
+
+```typescript
+import { Component, html, type Template } from '@neuralfog/elemix';
+import { component } from '@neuralfog/elemix/decorators';
+
+import css from './HelloWorld.scss?inline';
+
+@component({ styles: [css] })
+export class HelloWorld extends Component {
+    template(): Template {
+        return html`<h1>Hello World!</h1>`;
+    }
+}
+```
+
+## Rendering
+
+Renders are triggered implicitly by mutating `@state()` properties or subscribed signals. To trigger a render manually, call `this.render()`. This is useful when you want fine control over rendering without reactivity getting in the way.
+
+```typescript
+@component()
+export class UserCard extends Component {
+    private name = 'John';
+
+    updateName(name: string): void {
+        this.name = name;
+        this.render();
+    }
+
+    template(): Template {
+        return html`<p>${this.name}</p>`;
+    }
+}
+```
+
+## Props
+
+Primitive props are shallow-diffed and only trigger updates when the value changes. Object props are passed through reactively. Functions are assigned once.
+
+```typescript
+import { Component, html, type Template } from '@neuralfog/elemix';
+import { component } from '@neuralfog/elemix/decorators';
+
+type Props = {
+    name: string;
+    age: number;
+    handler: () => void;
+    meta: { role: string; active: boolean };
+};
+
+@component()
+export class UserCard extends Component<Props> {
+    template(): Template {
+        const { name, age, handler, meta } = this.props;
+
+        return html`<div>
+            <p>${name}</p>
+            <p>${age}</p>
+            <p>${meta.role}</p>
+            <button @click=${handler}>Click</button>
+        </div>`;
+    }
+}
+```
+
+```typescript
+html`<user-card
+    :name=${'John'}
+    :age=${25}
+    :handler=${() => console.log('clicked')}
+    :meta=${{ role: 'admin', active: true }}
+/>`;
+```
+
+Object props can be freely mutated — proxies retain reactivity and trigger updates for all subscribed components.
+
+## State
+
+Local state is managed via the `@state()` decorator. Mutating any property on the state object will automatically trigger a re-render.
+
+```typescript
+import { Component, html, type Template } from '@neuralfog/elemix';
+import { component, state } from '@neuralfog/elemix/decorators';
+
+@component()
+export class UserProfile extends Component {
+    @state()
+    state = { name: 'John', email: 'john@example.com', active: true };
+
+    template(): Template {
+        const { name, email, active } = this.state;
+
+        return html`<div>
+            <p>${name}</p>
+            <p>${email}</p>
+            <p>${active ? 'Online' : 'Offline'}</p>
+        </div>`;
+    }
+}
+```
+
+## Events
+
+Use the `@` prefix to bind native DOM events directly in templates.
+
+```typescript
+@component()
+export class Counter extends Component {
+    @state()
+    state = { count: 0 };
+
+    template(): Template {
+        return html`<div>
+            <p>${this.state.count}</p>
+            <button @click=${() => this.state.count++}>Increment</button>
+            <input @input=${(e: Event) => console.log((e.target as HTMLInputElement).value)} />
+        </div>`;
+    }
+}
+```
+
+## Model Binding
+
+Use the `~model` prefix for two-way binding on input elements. The bound value must be an object with a `value` property.
+
+```typescript
+@component()
+export class SearchBox extends Component {
+    @state()
+    state = { query: { value: '' } };
+
+    template(): Template {
+        const { query } = this.state;
+
+        return html`<div>
+            <input ~model=${query} />
+            <p>${query.value}</p>
+        </div>`;
+    }
+}
+```
+
+## Ref
+
+The `ref` helper creates a `{ value }` wrapper. Use `:ref` to capture a DOM element reference, or pass it to `~model` for two-way binding.
+
+```typescript
+import { Component, html, type Template } from '@neuralfog/elemix';
+import { component, state } from '@neuralfog/elemix/decorators';
+import { ref } from '@neuralfog/elemix/utilities';
+
+@component()
+export class Form extends Component {
+    @state()
+    input = ref('');
+    heading = ref<HTMLHeadingElement>();
+
+    template(): Template {
+        return html`<div>
+            <h1 :ref=${this.heading}>Title</h1>
+            <input ~model=${this.input} />
+            <p>${this.input.value}</p>
+        </div>`;
+    }
+}
+```
+
+## Signals
+
+Signals are reactive stores shared across components. Define a signal as a standalone module and subscribe components via the `@component` decorator.
+
+### Definition
+
+```typescript
+import { signal } from '@neuralfog/elemix/signal';
+
+export const counter = signal({
+    count: 0,
+    label: 'Clicks',
+});
+```
+
+### Usage
+
+Subscribe to a signal by passing it to the `signals` array. Access its state via `signal.value` and mutate it directly to trigger re-renders in all subscribed components.
+
+```typescript
+import { Component, html, type Template } from '@neuralfog/elemix';
+import { component } from '@neuralfog/elemix/decorators';
+
+import { counter } from '../signals/counter';
+
+@component({ signals: [counter] })
+export class CounterDisplay extends Component {
+    template(): Template {
+        const { count, label } = counter.value;
+
+        return html`<div>
+            <p>${label}: ${count}</p>
+            <button @click=${() => counter.value.count++}>Increment</button>
+        </div>`;
+    }
+}
+```
+
+## Lifecycle Hooks
+
+Components support four lifecycle hooks: `beforeMount`, `onMount`, `onRender`, and `onDispose`.
+
+```typescript
+@component()
+export class Dashboard extends Component {
+    beforeMount(): void {
+        // Called before initialization
+    }
+
+    onMount(): void {
+        // Called after first render
+    }
+
+    onRender(renderTriggers?: string[]): void {
+        // Called after each render with triggers that caused the update
+    }
+
+    onDispose(): void {
+        // Called when component is removed from DOM
+    }
+
+    template(): Template {
+        return html`<div>Dashboard</div>`;
+    }
+}
+```
+
+## Conditionals
+
+Use ternary expressions in templates.
+
+```typescript
+html`${isActive ? html`<p>Active</p>` : html`<p>Inactive</p>`}`;
+```
+
+## Repeat
+
+Use the `repeat` directive to render lists. Pass an optional key function for efficient diffing.
+
+```typescript
+import { repeat } from '@neuralfog/elemix/directives';
+
+@component()
+export class UserList extends Component {
+    @state()
+    state = {
+        users: [
+            { id: '1', name: 'Alice' },
+            { id: '2', name: 'Bob' },
+        ],
+    };
+
+    template(): Template {
+        const { users } = this.state;
+
+        return html`<ul>
+            ${repeat(
+                users,
+                (user) => html`<li>${user.name}</li>`,
+                (user) => user.id,
+            )}
+        </ul>`;
+    }
+}
+```
+
+## Direct Property Assignment
+
+Use the `.` prefix to set properties directly on HTML elements.
+
+```typescript
+html`<input .value=${'Hello'} />`;
+
+html`<div .textContent=${'Updated text'} />`;
+```
+
+## Dynamic Classes
+
+Use the `.class` prefix to bind classes dynamically. Accepts a string or an object mapping class names to booleans.
+
+```typescript
+html`<div .class=${'active highlight'}>String</div>`;
+
+html`<div .class=${{ active: isActive, disabled: isDisabled }}>Object</div>`;
+```
+
+## Bind Attributes
+
+Use `.bind-attrs` to dynamically set multiple attributes from an object.
+
+```typescript
+html`<div .bind-attrs=${{ 'data-id': '123', 'aria-label': 'Card' }}>Content</div>`;
+```
+
+## Bind Events
+
+Use `.bind-events` to dynamically attach multiple event handlers from an object.
+
+```typescript
+html`<div .bind-events=${{ click: onClick, input: onInput }}>Content</div>`;
+```

package/dist/App-tMVVu8H5.js

@@ -0,0 +1 @@
+var e=class e{static config={};static mergeConfigs(t){e.config={...e.config,...t}}},t=t=>{e.mergeConfigs(t),e.config.entryPoint?.()};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/dist/Reactive-BR9C38bG.js

@@ -0,0 +1 @@
+var e=class{renderTrigger;subscribers=new Set;proxy;proxySet=new WeakSet;get value(){return this.proxy}constructor(e,t){this.renderTrigger=t,this.proxy=this.create(e)}subscribe(e){return this.subscribers.has(e)||this.subscribers.add(e),this}unsubscribe(e){return this.subscribers.delete(e),this}create(e){let t=this;return new Proxy(e,{get(e,r){let i=e[r];if(n(i),typeof i==`object`&&i&&!t.proxySet.has(i)){let e=new Proxy(i,this);return t.proxySet.add(e),e}return i},set(e,r,i){return e[r]=i,n(e),t.notify(),!0}})}notify(){for(let e of this.subscribers)e.render(this.renderTrigger)}},t=`Reactive state does not support collections: Map, WeakMap, Set, WeakSet`,n=e=>{if(e instanceof Map||e instanceof WeakMap||e instanceof Set||e instanceof WeakSet)throw Error(t)};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/dist/app.js

@@ -1 +1 @@
-"use strict";var g=Object.defineProperty;var s=(t,i,n)=>i in t?g(t,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[i]=n;var c=(t,i,n)=>s(t,typeof i!="symbol"?i+"":i,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=class o{static mergeConfigs(i){o.config={...o.config,...i}}};c(o,"config",{});let e=o;const f=t=>{var i,n;e.mergeConfigs(t),(n=(i=e.config).entryPoint)==null||n.call(i)};exports.App=e;exports.initApp=f;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./App-tMVVu8H5.js");exports.App=e.t,exports.initApp=e.n;

package/dist/chunk-NGjzN6Tu.js

@@ -0,0 +1 @@
+var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/dist/decorators.js

@@ -1 +1 @@
-"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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./types-v1ChTfwQ.js"),t=require("./utilities-BN8G-efH.js");var n=(e,t)=>{customElements.get(e)===void 0&&customElements.define(e,t)},r=e=>r=>{let i=t.t(r.name),a=class extends r{constructor(){if(super(),e?.signals?.length)for(let t of e.signals)t.subscribe(this)}};r.$signals=e?.signals||[],r.$styles=e?.styles||[],n(i,a)},i=t=>(n,r)=>{n.stateProperties||=new Map,n.stateProperties.has(r)||n.stateProperties.set(r,t||e.t.LOCAL_STATE)};exports.component=r,exports.state=i;

package/dist/directives.d.ts

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

package/dist/directives.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var o={},a;function l(){return a||(a=1,function(t){Object.defineProperty(t,Symbol.toStringTag,{value:"Module"});const v=(e,r,i)=>e.map((c,n)=>{const u=r(c,n);return u.key=(i==null?void 0:i(c,n))||String(n),u}),s=(e,r,i)=>(typeof e=="function"?e():e)?r:i;t.condition=s,t.repeat=v}(o)),o}var d=l();exports.condition=d.condition;exports.repeat=d.repeat;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=require("./chunk-NGjzN6Tu.js").t((e=>{Object.defineProperty(e,Symbol.toStringTag,{value:`Module`}),e.repeat=(e,t,n)=>e.map((e,r)=>{let i=t(e,r);return i.key=n?.(e,r)||String(r),i})}))();exports.repeat=e.repeat;

package/dist/index.js

@@ -1 +1 @@
-"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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./types-v1ChTfwQ.js"),t=require("./renderers-DuXHBLlK.js"),n=require("./Reactive-BR9C38bG.js"),r=require("./App-tMVVu8H5.js");let i=require("@neuralfog/elemix-renderer");var a=class{component;locked=!1;scheduledRenderTriggers=new Set;constructor(e){this.component=e}schedule(e,n=!1){this.component.template()&&(e&&this.scheduledRenderTriggers.add(e),this.locked||(this.locked=!0,t.t.add(this),setTimeout(()=>{this.render(Array.from(this.scheduledRenderTriggers)),this.scheduledRenderTriggers.clear(),this.locked=!1,t.t.delete(this),n&&this.component.onMount()},0)))}render(e){(0,i.render)(this.component.template(),this.component.root),this.component.onRender(e)}},o=class{component;constructor(e){this.component=e}initialize(){let e=this.component.constructor.prototype.stateProperties;if(e)for(let[t,r]of e){let e=this.component;e[t]=new n.t(e[t],r).subscribe(this.component).value}}},s=class{component;data={};constructor(e){this.component=e}initialize(){this.data=new n.t(this.data,e.t.PROPS).subscribe(this.component).value}setReactive(e,t){this.data[e]=t}set(e,t){if(typeof t==`object`&&t){this.setReactive(e,t);return}let n=this.data[e];if(typeof t==`function`){this.data[e]||this.setReactive(e,t);return}n!==t&&this.setReactive(e,t)}},c=class{component;styles;constructor(e){this.component=e,this.styles=this.component.constructor.$styles}initialize(){if(this.component.shadowRoot&&this.styles.length){let e=new CSSStyleSheet;e.replaceSync(this.styles.join(` `));let t=r.t.config.baseStyles||[];this.component.shadowRoot.adoptedStyleSheets=[...t,e,...this.component.controlStyles]}}},l=class extends HTMLElement{$props=new s(this);$renderer=new a(this);$localState=new o(this);$styles=new c(this);$controlStyles;get root(){return this.shadowRoot}get props(){return this.$props.data}get styles(){return this.$styles}get controlStyles(){return this.$controlStyles||[]}constructor(){super(),this.attachShadow({mode:`open`})}connectedCallback(){this.beforeMount(),this.$styles.initialize(),this.$props.initialize(),this.$localState.initialize(),this.render(e.t.ON_MOUNT,!0)}disconnectedCallback(){t.t.delete(this.$renderer),this.unsubscribeFromSignals(),this.onDispose()}template(){}onRender(e){}beforeMount(){}onMount(){}onDispose(){}render(e,t=!1){this.$renderer.schedule(e,t)}setControlStyles(e){this.$controlStyles=e}unsubscribeFromSignals(){for(let e of this.constructor.$signals)e.unsubscribe(this)}};exports.Component=l,exports.RenderTrigger=e.t,exports.html=e.n;

package/dist/reactive.js

@@ -1 +1 @@
-"use strict";var b=Object.defineProperty;var h=(r,e,t)=>e in r?b(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var n=(r,e,t)=>h(r,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class S{constructor(e,t){n(this,"subscribers",new Set);n(this,"proxy");n(this,"proxySet",new WeakSet);this.renderTrigger=t,this.proxy=this.create(e)}get value(){return this.proxy}subscribe(e){return this.subscribers.has(e)||this.subscribers.add(e),this}unsubscribe(e){return this.subscribers.delete(e),this}create(e){const t=this;return new Proxy(e,{get(i,o){const s=i[o];if(u(s),typeof s=="object"&&s!==null&&!t.proxySet.has(s)){const c=new Proxy(s,this);return t.proxySet.add(c),c}return s},set(i,o,s){return i[o]=s,u(i),Array.isArray(i)&&o==="length",t.notify(),!0}})}notify(){for(const e of this.subscribers)e.render(this.renderTrigger)}}const a="Reactive state does not support collections: Map, WeakMap, Set, WeakSet",u=r=>{if(r instanceof Map||r instanceof WeakMap||r instanceof Set||r instanceof WeakSet)throw new Error(a)};exports.Reactive=S;exports.UNSUPPORTED_COLLECTION_ERROR_MESSAGE=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Reactive-BR9C38bG.js");exports.Reactive=e.t,exports.UNSUPPORTED_COLLECTION_ERROR_MESSAGE=e.n;

package/dist/renderers-DuXHBLlK.js

@@ -0,0 +1 @@
+var e=new Set;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/dist/signal.js

@@ -1 +1 @@
-"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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./types-v1ChTfwQ.js"),t=require("./Reactive-BR9C38bG.js");var n=(n,r)=>new t.t(n,r||e.t.SIGNAL);exports.signal=n;

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, unknown>>;
+    subscribers: Set<Component<unknown>>;
     private proxy;
     private proxySet;
     get value(): State;

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

@@ -1,15 +1,13 @@
 import { type RenderTriggerType, type Template } from '../types';
 import { Styles } from './Styles';
-export declare class Component<ComponentProps = unknown, ComponentEmits = unknown> extends HTMLElement {
+export declare class Component<ComponentProps = 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();

package/dist/test/renderer/attribute-bindings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/renderer/conditionals.test.d.ts

@@ -1 +1 @@
-import '../fixtures/renderer/ConditionalRendering.ts';
+import '../fixtures/renderer/ConditionalRendering';

package/dist/test/renderer/directives.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/renderer/edge-cases.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/renderer/event-bindings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/renderer/merge-classes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/renderer/multiple-root-nodes.test.d.ts

@@ -1 +1 @@
-import '../fixtures/renderer/MultilpleRootNodes.ts';
+import '../fixtures/renderer/MultilpleRootNodes';

package/dist/types-v1ChTfwQ.js

@@ -0,0 +1 @@
+var e=require("@neuralfog/elemix-renderer").html,t={PROPS:`PROPS`,SIGNAL:`SIGNAL`,LOCAL_STATE:`LOCAL_STATE`,ON_MOUNT:`ON_MOUNT`};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});

package/dist/utilities-BN8G-efH.js

@@ -0,0 +1 @@
+const e=require("./renderers-DuXHBLlK.js");var t=(e=void 0)=>({value:e}),n=()=>Math.floor(performance.now()*1e3).toString(36)+Math.random().toString(36).slice(2,6);function r(){return new Promise(t=>{let n=()=>{e.t.size===0?t(!1):setTimeout(n,0)};n()})}var i=e=>(e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|[0-9]*$)|[A-Z]?[a-z]+|[A-Z]|[0-9]+/g)||[]).map(e=>e.toLowerCase()).join(`-`),a=e=>{let t=new CSSStyleSheet;return t.replaceSync(e),t};Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/dist/utilities.js

@@ -1 +1 @@
-"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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./chunk-NGjzN6Tu.js"),t=require("./utilities-BN8G-efH.js");var n=e.t((e=>{var t={EVENT:0,PROP:1,MODEL:2,STD:3,REF:4,BIND_ATTRS:5,BIND_EVENTS:6,DIRECT_CLASS:7},n=RegExp(`₥(\\d+)`),r=e=>{let t=e.match(n);if(!t)throw Error(`Unable to extract index from hole comment`);return Number(t[1])},i=e=>`<!--₥${e}-->`,a=e=>e.replace(/(\S+)=((<!--[\s\S]*?-->)|([^\s">]+))/g,`$1="$2"`),o=e=>e.replace(/([A-Z])/g,e=>`-${e.toLowerCase()}`),s=(e,t)=>{let n=new Set,r=``,i=e=>{let t=e.split(` `);for(let e=0;e<t.length;e++){let i=t[e];i&&!n.has(i)&&(n.add(i),r.length&&(r+=` `),r+=i)}};return i(e),i(t),r};Object.defineProperty(e,"a",{enumerable:!0,get:function(){return s}}),Object.defineProperty(e,"i",{enumerable:!0,get:function(){return i}}),Object.defineProperty(e,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(e,"o",{enumerable:!0,get:function(){return t}}),Object.defineProperty(e,"r",{enumerable:!0,get:function(){return r}}),Object.defineProperty(e,"t",{enumerable:!0,get:function(){return o}})})),r=e.t((e=>{Object.defineProperty(e,Symbol.toStringTag,{value:`Module`}),e.mergeClasses=n().a}))();exports.camelToKebabCase=t.t,exports.fastUID=t.n,exports.makeCssStylesheet=t.r,Object.defineProperty(exports,"mergeClasses",{enumerable:!0,get:function(){return r.mergeClasses}}),exports.ref=t.i,exports.render=t.a;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@neuralfog/elemix",
-    "version": "0.1.8",
+    "version": "0.2.0",
     "license": "MIT",
     "author": "brownhounds",
     "main": "dist/index.js",
@@ -26,20 +26,21 @@
         "test-nc": "vitest run",
         "test-ui": "npx vitest --api.host 0.0.0.0 --ui",
         "lint": "tsc --noEmit && biome format && biome lint",
+        "lint:fix": "biome format --write && biome lint --fix",
         "release": "npm run clean && npm run build && npm publish --access public"
     },
     "devDependencies": {
         "@neuralfog/biome-config": "0.1.2",
-        "@neuralfog/elemix-testing": "0.1.4",
-        "@neuralfog/ts-config": "0.1.1",
-        "@vitest/coverage-v8": "3.0.7",
-        "@vitest/ui": "3.0.7",
-        "jsdom": "26.0.0",
-        "typescript": "5.8.2",
-        "vite": "6.2.3",
-        "vitest": "3.0.7"
+        "@neuralfog/elemix-testing": "0.2.0",
+        "@neuralfog/ts-config": "0.1.2",
+        "@vitest/coverage-v8": "4.1.7",
+        "@vitest/ui": "4.1.7",
+        "jsdom": "29.1.1",
+        "typescript": "6.0.3",
+        "vite": "8.0.14",
+        "vitest": "4.1.7"
     },
     "peerDependencies": {
-        "@neuralfog/elemix-renderer": "0.1.8"
+        "@neuralfog/elemix-renderer": "0.3.0"
     }
 }

package/dist/renderers-CTogHRY2.js

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

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

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

package/dist/test/fixtures/renderer/SelfClosed.d.ts

@@ -1,5 +0,0 @@
-import { Component } from '../../../src/component/Component';
-import { type Template } from '../../../src/types';
-export declare class SelfClosed extends Component {
-    template: () => Template;
-}

package/dist/test/fixtures/renderer/SelfClosingTags.d.ts

@@ -1,16 +0,0 @@
-import { Component } from '../../../src/component/Component';
-import { type Template } from '../../../src/types';
-import './SelfClosed';
-export declare enum State {
-    SINGLE = 0,
-    START = 1,
-    END = 2,
-    MIDDLE = 3
-}
-export declare class SelfClosingTags extends Component {
-    state: {
-        case: State;
-    };
-    partial: () => Template;
-    template: () => Template;
-}

package/dist/test/renderer/self-closing.test.d.ts

@@ -1 +0,0 @@
-import '../fixtures/renderer/SelfClosingTags';

package/dist/types-D5TcFW7H.js

@@ -1 +0,0 @@
-"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-oGilfnVK.js

@@ -1 +0,0 @@
-"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;