@neuralfog/elemix 0.1.4 → 0.1.6

package/dist/index.js

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

package/dist/src/App.d.ts

@@ -1,5 +1,5 @@
 type AppConfig = {
-    cssReset?: string;
+    baseStyles?: CSSStyleSheet[];
     entryPoint?: () => Promise<any>;
 };
 export declare class App {

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

@@ -11,11 +11,11 @@ export declare class Component<ComponentProps = unknown> extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    template?: () => Template;
-    onRender?: (renderTriggers?: RenderTriggerType[]) => void;
-    beforeMount?: () => void;
-    onMount?: () => void;
-    onDispose?: () => void;
+    template(): Template;
+    onRender(renderTriggers?: RenderTriggerType[]): void;
+    beforeMount(): void;
+    onMount(): void;
+    onDispose(): void;
     render(renderTrigger?: RenderTriggerType, isConnectedCallback?: boolean): void;
     private unsubscribeFromSignals;
 }

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

@@ -2,8 +2,6 @@ import type { Component } from './Component';
 export declare class Styles {
     private component;
     styles: string[];
-    sheet?: CSSStyleSheet;
     constructor(component: Component);
     initialize(): void;
-    private prependStyles;
 }

package/dist/src/utilities.d.ts

@@ -4,3 +4,4 @@ export declare const ref: <Value>(value?: Value | undefined) => {
 export declare const fastUID: () => string;
 export declare function render(): Promise<boolean>;
 export declare const camelToKebabCase: (input: string) => string;
+export declare const makeCssStylesheet: (styles: string) => CSSStyleSheet;

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

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

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

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

package/dist/utilities.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@neuralfog/elemix",
-    "version": "0.1.4",
+    "version": "0.1.6",
     "license": "MIT",
     "author": "brownhounds",
     "main": "dist/index.js",
@@ -40,6 +40,6 @@
         "vitest": "3.0.7"
     },
     "peerDependencies": {
-        "@neuralfog/elemix-renderer": "0.1.5"
+        "@neuralfog/elemix-renderer": "0.1.6"
     }
 }

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

@@ -1,6 +0,0 @@
-import { Component } from '../../src/component/Component';
-import { type Template } from '../../src/types';
-export declare const MOCK_CSS = ".styles { color: 'green'; }";
-export declare class StyledApp extends Component {
-    template: () => Template;
-}

package/dist/test/styles.test.d.ts

@@ -1,2 +0,0 @@
-import './fixtures/StyledApp';
-import './fixtures/ListApp';