@stacksjs/stx 0.2.92 → 0.2.94

package/dist/web-components/reactive-generator.js

@@ -1,2 +1,419 @@
 // @bun
-import{a,b,c,d}from"../chunk-0fmsckh1.js";import"../chunk-6r70w54p.js";export{d as generateReactiveRuntime,a as generateReactiveMixin,c as generateReactiveComponentTS,b as generateReactiveComponentJS};
+import"../chunk-3jm3snz8.js";function F(){return`
+/**
+ * Reactive mixin for stx web components
+ * Adds reactive state management to custom elements
+ */
+function StxReactive(Base) {
+  return class extends Base {
+    #state = {};
+    #watchers = new Map();
+    #computed = new Map();
+    #dirty = new Set();
+    #updateScheduled = false;
+
+    constructor() {
+      super();
+      this.#initializeState();
+    }
+
+    #initializeState() {
+      // Initialize reactive properties from static definition
+      const props = this.constructor.reactiveProperties || {};
+      for (const [name, config] of Object.entries(props)) {
+        this.#state[name] = config.default;
+        this.#defineProperty(name, config);
+      }
+    }
+
+    #defineProperty(name, config) {
+      Object.defineProperty(this, name, {
+        get: () => this.#state[name],
+        set: (value) => {
+          const oldValue = this.#state[name];
+          if (oldValue !== value) {
+            this.#state[name] = value;
+            this.#markDirty(name);
+            this.#notifyWatchers(name, value, oldValue);
+            if (config.reflect) {
+              this.#reflectAttribute(name, value);
+            }
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+
+    #reflectAttribute(name, value) {
+      const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();
+      if (value === null || value === undefined || value === false) {
+        this.removeAttribute(attrName);
+      }
+else if (value === true) {
+        this.setAttribute(attrName, '');
+      }
+else {
+        this.setAttribute(attrName, String(value));
+      }
+    }
+
+    #markDirty(name) {
+      this.#dirty.add(name);
+      this.#scheduleUpdate();
+    }
+
+    #scheduleUpdate() {
+      if (!this.#updateScheduled) {
+        this.#updateScheduled = true;
+        queueMicrotask(() => {
+          this.#updateScheduled = false;
+          this.#performUpdate();
+        });
+      }
+    }
+
+    #performUpdate() {
+      // Recompute computed properties that depend on dirty state
+      for (const [name, { deps, getter }] of this.#computed) {
+        if (deps.some(dep => this.#dirty.has(dep))) {
+          this.#state[name] = getter.call(this);
+        }
+      }
+
+      // Clear dirty set and trigger re-render
+      this.#dirty.clear();
+      if (typeof this.render === 'function') {
+        this.render();
+      }
+    }
+
+    #notifyWatchers(name, newValue, oldValue) {
+      const handlers = this.#watchers.get(name) || [];
+      for (const handler of handlers) {
+        try {
+          handler.call(this, newValue, oldValue);
+        }
+catch (e) {
+          console.error(\`Watcher error for "\${name}":\`, e);
+        }
+      }
+    }
+
+    $watch(property, handler, options = {}) {
+      if (!this.#watchers.has(property)) {
+        this.#watchers.set(property, []);
+      }
+      this.#watchers.get(property).push(handler);
+
+      if (options.immediate) {
+        handler.call(this, this.#state[property], undefined);
+      }
+
+      // Return unwatch function
+      return () => {
+        const handlers = this.#watchers.get(property);
+        const index = handlers.indexOf(handler);
+        if (index > -1) {
+          handlers.splice(index, 1);
+        }
+      };
+    }
+
+    $computed(name, deps, getter) {
+      this.#computed.set(name, { deps, getter });
+      Object.defineProperty(this, name, {
+        get: () => {
+          if (!(name in this.#state)) {
+            this.#state[name] = getter.call(this);
+          }
+          return this.#state[name];
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+
+    $set(property, value) {
+      this[property] = value;
+    }
+
+    $batch(fn) {
+      // Temporarily disable updates during batch
+      const prevScheduled = this.#updateScheduled;
+      this.#updateScheduled = true;
+      try {
+        fn();
+      }
+finally {
+        this.#updateScheduled = prevScheduled;
+        if (!prevScheduled) {
+          this.#scheduleUpdate();
+        }
+      }
+    }
+  };
+}
+`}function R(q,K,L={}){let{properties:J=[],computed:O=[],watchers:P=[],methods:Q={},lifecycle:B={}}=L,z=q.name,U=q.tag,H=q.shadowDOM!==!1,W=J.map((k)=>{let j=k.default!==void 0?JSON.stringify(k.default):V(k.type);return`    ${k.name}: { type: '${k.type}', default: ${j}, reflect: ${!!k.reflect} }`}).join(`,
+`),X=O.map((k)=>{let j=JSON.stringify(k.dependencies);return`    this.$computed('${k.name}', ${j}, ${k.getter});`}).join(`
+`),Y=P.map((k)=>{let j=k.immediate||k.deep?`, { immediate: ${!!k.immediate}, deep: ${!!k.deep} }`:"";return`    this.$watch('${k.property}', ${k.handler}${j});`}).join(`
+`),Z=Object.entries(Q).map(([k,j])=>`  ${k}${j}`).join(`
+
+`),_=B.connected||"",$=B.disconnected||"",G=B.adopted||"",I=B.attributeChanged||"",A=K.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$/g,"\\$");return`
+${F()}
+
+class ${z} extends StxReactive(HTMLElement) {
+  static reactiveProperties = {
+${W}
+  };
+
+  static get observedAttributes() {
+    return ${JSON.stringify(q.attributes||[])};
+  }
+
+  #shadowRoot;
+
+  constructor() {
+    super();
+    ${H?"this.#shadowRoot = this.attachShadow({ mode: 'open' });":""}
+    this.#setupComputed();
+    this.#setupWatchers();
+  }
+
+  #setupComputed() {
+${X}
+  }
+
+  #setupWatchers() {
+${Y}
+  }
+
+  connectedCallback() {
+    this.render();
+    ${_}
+  }
+
+  disconnectedCallback() {
+    ${$}
+  }
+
+  adoptedCallback() {
+    ${G}
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Convert attribute name to property name (kebab-case to camelCase)
+    const propName = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+
+    // Get the property type
+    const propConfig = ${z}.reactiveProperties[propName];
+    if (propConfig) {
+      let value = newValue;
+
+      // Convert based on type
+      switch (propConfig.type) {
+        case 'number':
+          value = newValue !== null ? Number(newValue) : propConfig.default;
+          break;
+        case 'boolean':
+          value = newValue !== null;
+          break;
+        case 'object':
+        case 'array':
+          try {
+            value = newValue !== null ? JSON.parse(newValue) : propConfig.default;
+          }
+catch (e) {
+            value = propConfig.default;
+          }
+          break;
+      }
+
+      this[propName] = value;
+    }
+
+    ${I}
+  }
+
+  render() {
+    const root = ${H?"this.#shadowRoot":"this"};
+    root.innerHTML = this.#template();
+  }
+
+  #template() {
+    return \`${A}\`;
+  }
+
+${Z}
+}
+
+customElements.define('${U}', ${z});
+
+export { ${z} };
+`}function v(q,K,L={}){let{properties:J=[],computed:O=[],watchers:P=[],methods:Q={},lifecycle:B={}}=L,z=q.name,U=q.tag,H=q.shadowDOM!==!1,W=J.map((j)=>{let E=x(j.type);return`  ${j.name}: ${E};`}).join(`
+`),X=J.map((j)=>{let E=j.default!==void 0?JSON.stringify(j.default):V(j.type);return`    ${j.name}: { type: '${j.type}' as const, default: ${E}, reflect: ${!!j.reflect} }`}).join(`,
+`),Y=O.map((j)=>{let E=JSON.stringify(j.dependencies);return`    this.$computed('${j.name}', ${E}, ${j.getter});`}).join(`
+`),Z=P.map((j)=>{let E=j.immediate||j.deep?`, { immediate: ${!!j.immediate}, deep: ${!!j.deep} }`:"";return`    this.$watch('${j.property}', ${j.handler}${E});`}).join(`
+`),_=Object.entries(Q).map(([j,E])=>`  ${j}${E}`).join(`
+
+`),$=B.connected||"",G=B.disconnected||"",I=B.adopted||"",A=B.attributeChanged||"",k=K.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$/g,"\\$");return`
+interface ${z}Props {
+${W}
+}
+
+interface ReactivePropertyConfig {
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array';
+  default: unknown;
+  reflect: boolean;
+}
+
+interface ReactiveElement extends HTMLElement {
+  $watch(property: string, handler: (newVal: unknown, oldVal: unknown) => void, options?: { immediate?: boolean; deep?: boolean }): () => void;
+  $computed(name: string, deps: string[], getter: () => unknown): void;
+  $set(property: string, value: unknown): void;
+  $batch(fn: () => void): void;
+}
+
+${F()}
+
+class ${z} extends StxReactive(HTMLElement) implements ReactiveElement {
+  static reactiveProperties: Record<string, ReactivePropertyConfig> = {
+${X}
+  };
+
+  static get observedAttributes(): string[] {
+    return ${JSON.stringify(q.attributes||[])};
+  }
+
+  #shadowRoot: ShadowRoot | null = null;
+
+  constructor() {
+    super();
+    ${H?"this.#shadowRoot = this.attachShadow({ mode: 'open' });":""}
+    this.#setupComputed();
+    this.#setupWatchers();
+  }
+
+  #setupComputed(): void {
+${Y}
+  }
+
+  #setupWatchers(): void {
+${Z}
+  }
+
+  connectedCallback(): void {
+    this.render();
+    ${$}
+  }
+
+  disconnectedCallback(): void {
+    ${G}
+  }
+
+  adoptedCallback(): void {
+    ${I}
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+    const propName = name.replace(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+
+    const propConfig = ${z}.reactiveProperties[propName];
+    if (propConfig) {
+      let value: unknown = newValue;
+
+      switch (propConfig.type) {
+        case 'number':
+          value = newValue !== null ? Number(newValue) : propConfig.default;
+          break;
+        case 'boolean':
+          value = newValue !== null;
+          break;
+        case 'object':
+        case 'array':
+          try {
+            value = newValue !== null ? JSON.parse(newValue) : propConfig.default;
+          }
+catch {
+            value = propConfig.default;
+          }
+          break;
+      }
+
+      (this as Record<string, unknown>)[propName] = value;
+    }
+
+    ${A}
+  }
+
+  render(): void {
+    const root = ${H?"this.#shadowRoot":"this"};
+    if (root) {
+      root.innerHTML = this.#template();
+    }
+  }
+
+  #template(): string {
+    return \`${k}\`;
+  }
+
+${_}
+}
+
+customElements.define('${U}', ${z});
+
+export { ${z} };
+export type { ${z}Props };
+`}function V(q){switch(q){case"string":return"''";case"number":return"0";case"boolean":return"false";case"array":return"[]";case"object":return"{}";default:return"undefined"}}function x(q){switch(q){case"string":return"string";case"number":return"number";case"boolean":return"boolean";case"array":return"unknown[]";case"object":return"Record<string, unknown>";default:return"unknown"}}function D(){return`
+(function() {
+  'use strict';
+
+  // StxReactive mixin for dynamic component creation
+  window.StxReactive = ${F().replace(/\n/g," ").replace(/\s+/g," ")};
+
+  // Helper to create reactive components dynamically
+  window.createReactiveComponent = function(tag, config) {
+    const { properties = {}, template, methods = {}, lifecycle = {} } = config;
+
+    class DynamicComponent extends StxReactive(HTMLElement) {
+      static reactiveProperties = properties;
+      static get observedAttributes() {
+        return Object.keys(properties).map(p =>
+          p.replace(/([A-Z])/g, '-$1').toLowerCase()
+        );
+      }
+
+      constructor() {
+        super();
+        if (config.shadow !== false) {
+          this.attachShadow({ mode: 'open' });
+        }
+      }
+
+      connectedCallback() {
+        this.render();
+        if (lifecycle.connected) lifecycle.connected.call(this);
+      }
+
+      disconnectedCallback() {
+        if (lifecycle.disconnected) lifecycle.disconnected.call(this);
+      }
+
+      render() {
+        const root = this.shadowRoot || this;
+        root.innerHTML = typeof template === 'function'
+          ? template.call(this)
+          : template;
+      }
+    }
+
+    // Add methods
+    Object.entries(methods).forEach(([name, fn]) => {
+      DynamicComponent.prototype[name] = fn;
+    });
+
+    customElements.define(tag, DynamicComponent);
+    return DynamicComponent;
+  };
+})();
+`}export{D as generateReactiveRuntime,F as generateReactiveMixin,v as generateReactiveComponentTS,R as generateReactiveComponentJS};

package/dist/web-components.js

@@ -1,2 +1,2 @@
 // @bun
-import{Au as d,Bu as e,Cu as f,Du as g,Eu as h,Fu as i,Gu as j,Hu as k,Iu as l,Ju as m,xu as a,yu as b,zu as c}from"./chunk-tzd81m7r.js";import"./chunk-ktpc2rc4.js";import"./chunk-2aydpj2n.js";import"./chunk-nwfa5766.js";import"./chunk-9p45wwff.js";import"./chunk-m911bf2b.js";import"./chunk-zwdargbj.js";import"./chunk-a50svyjn.js";import"./chunk-7aph6rw7.js";import"./chunk-y92w0240.js";import"./chunk-v9199ywv.js";import"./chunk-a4zj7qpt.js";import"./chunk-zepv7y44.js";import"./chunk-v0s45ek4.js";import"./chunk-2rd0ykrg.js";import"./chunk-6sx4d083.js";import"./chunk-r7d26vjj.js";import"./chunk-ccgmxmjk.js";import"./chunk-593x2ccf.js";import"./chunk-1bzckhs2.js";import"./chunk-a2xzs4kd.js";import"./chunk-fk0m346m.js";import"./chunk-npj33yqb.js";import"./chunk-dtcj9r7p.js";import"./chunk-5tv1swsr.js";import"./chunk-8g0jb444.js";import"./chunk-h1035wzj.js";import"./chunk-ms6793rw.js";import"./chunk-zr8631g4.js";import"./chunk-c9f5k95v.js";import"./chunk-9fj7hpwa.js";import"./chunk-rdaavfsg.js";import"./chunk-e792k31a.js";import"./chunk-tavtph8x.js";import"./chunk-0t75nh4z.js";import"./chunk-exfw0aqe.js";import"./chunk-fh1d8bxd.js";import"./chunk-w719zps0.js";import"./chunk-eghdf4qq.js";import"./chunk-xgmza98t.js";import"./chunk-zxxt0c9q.js";import"./chunk-xqq1vxb6.js";import"./chunk-xw9skf0n.js";import"./chunk-t7ghqd7e.js";import"./chunk-xmjedbkt.js";import"./chunk-1zgsgk4b.js";import"./chunk-xzjrrd36.js";import"./chunk-gcsqn7x9.js";import"./chunk-7t4hkmxb.js";import"./chunk-pjaa8q7x.js";import"./chunk-b0w1cm1s.js";import"./chunk-jm460jxs.js";import"./chunk-srq3dkj8.js";import"./chunk-h6s1thg6.js";import"./chunk-yssvz8zs.js";import"./chunk-rkr7cgs8.js";import"./chunk-md4j8nch.js";import"./chunk-qvmrwh8n.js";import"./chunk-3rgj1qn6.js";import"./chunk-4ep9gk7d.js";import"./chunk-zvyc82ke.js";import"./chunk-1w3354fv.js";import"./chunk-sd2c11bp.js";import"./chunk-sk1gmrr8.js";import"./chunk-hkjq64we.js";import"./chunk-9ezvda3j.js";import"./chunk-c23697dp.js";import"./chunk-r6sb1sm4.js";import"./chunk-p5j0686t.js";import"./chunk-bg1xym0q.js";import"./chunk-08ncwhv7.js";import"./chunk-6jhqq7es.js";import"./chunk-r1m8g439.js";import"./chunk-6r70w54p.js";export{m as webComponentDirectiveHandler,d as scopeHTML,c as scopeCSS,k as parseSFCComponent,e as getScopeAttribute,b as generateScopeId,l as generateSFCWebComponent,h as generateReactiveWebComponentTS,g as generateReactiveWebComponent,j as generateReactiveRuntime,i as generateReactiveMixin,f as extractAndScopeStyles,a as buildWebComponents};
+import{Er as a,Fr as b,Gr as c,Hr as d,Ir as e,Jr as f,Kr as g,Lr as h,Mr as i,Nr as j,Or as k,Pr as l,Qr as m}from"./chunk-w01y57f5.js";import"./chunk-x1hjv24z.js";import"./chunk-0g4gece6.js";import"./chunk-nap11ntr.js";import"./chunk-03c26pjz.js";import"./chunk-13yz561y.js";import"./chunk-nanw7yhz.js";import"./chunk-ghrx0hn1.js";import"./chunk-82t27pvd.js";import"./chunk-fhawx87n.js";import"./chunk-gc84b1d2.js";import"./chunk-yr1gdceh.js";import"./chunk-baa7h4yz.js";import"./chunk-kdxa9epn.js";import"./chunk-g2hekckm.js";import"./chunk-x39sfpvm.js";import"./chunk-tr0z0e1g.js";import"./chunk-4j188175.js";import"./chunk-eds0f8f1.js";import"./chunk-dyjnn5k8.js";import"./chunk-8fgwhhb8.js";import"./chunk-tj6zfxeb.js";import"./chunk-7xcfy2fn.js";import"./chunk-9yz5d003.js";import"./chunk-fms20x0n.js";import"./chunk-fe7r1mq1.js";import"./chunk-rb1e4cnb.js";import"./chunk-j4s5qwd7.js";import"./chunk-b0cyc09a.js";import"./chunk-0tatqxj2.js";import"./chunk-bykjk6vj.js";import"./chunk-7b0xdy5h.js";import"./chunk-ywkrxp2h.js";import"./chunk-y25pr13j.js";import"./chunk-q6h6yvzb.js";import"./chunk-qdc3aav1.js";import"./chunk-6wn85hn6.js";import"./chunk-qd5461tt.js";import"./chunk-77tga15w.js";import"./chunk-rv002yn0.js";import"./chunk-hke99a0v.js";import"./chunk-mwbng54r.js";import"./chunk-wxvyj65q.js";import"./chunk-yw2fzq86.js";import"./chunk-mrehzhxv.js";import"./chunk-1zgsgk4b.js";import"./chunk-48cw2nde.js";import"./chunk-jjvp4t5w.js";import"./chunk-94g3cahw.js";import"./chunk-ht4j68cs.js";import"./chunk-fch9tk1k.js";import"./chunk-cz25azze.js";import"./chunk-q60knhjf.js";import"./chunk-hrampcrj.js";import"./chunk-t37dp99j.js";import"./chunk-5kt3ay7x.js";import"./chunk-95w08s8v.js";import"./chunk-ceg2c2q2.js";import"./chunk-04mvcmcr.js";import"./chunk-n46a5g1g.js";import"./chunk-vv9wfz1c.js";import"./chunk-dzw95th7.js";import"./chunk-46mkpbkk.js";import"./chunk-3rh7va1z.js";import"./chunk-2xen423s.js";import"./chunk-cp3kwv17.js";import"./chunk-hpqr9e3x.js";import"./chunk-adqh2m9z.js";import"./chunk-8qbax8xn.js";import"./chunk-x64kb787.js";import"./chunk-gcf5v18y.js";import"./chunk-pc31m5x5.js";import"./chunk-3jm3snz8.js";export{m as webComponentDirectiveHandler,d as scopeHTML,c as scopeCSS,k as parseSFCComponent,e as getScopeAttribute,b as generateScopeId,l as generateSFCWebComponent,h as generateReactiveWebComponentTS,g as generateReactiveWebComponent,j as generateReactiveRuntime,i as generateReactiveMixin,f as extractAndScopeStyles,a as buildWebComponents};

package/dist/x-element.js

@@ -1,5 +1,5 @@
 // @bun
-import"./chunk-6r70w54p.js";function w(){return`<script data-stx-scoped>
+import"./chunk-3jm3snz8.js";function w(){return`<script data-stx-scoped>
 (function() {
   'use strict';
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.92",
+  "sideEffects": false,
+  "version": "0.2.94",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -61,13 +62,13 @@
       "import": "./dist/bundle-analyzer.js"
     },
     "./composables": {
-      "bun": "./dist/composables/index.js",
       "types": "./dist/composables/index.d.ts",
+      "bun": "./dist/composables/index.js",
       "import": "./dist/composables/index.js"
     },
     "./composables/*": {
-      "bun": "./dist/composables/*.js",
       "types": "./dist/composables/*.d.ts",
+      "bun": "./dist/composables/*.js",
       "import": "./dist/composables/*.js"
     },
     "./*": {
@@ -117,16 +118,16 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.6",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/sanitizer": "0.2.92",
+    "@stacksjs/sanitizer": "0.2.94",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.92",
+    "bun-plugin-stx": "0.2.94",
     "bunfig": "^0.15.14",
-    "stx-router": "0.2.92",
+    "stx-router": "0.2.94",
     "ts-broadcasting": "^0.0.5",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "optionalDependencies": {
-    "@stacksjs/desktop": "0.2.92"
+    "@stacksjs/desktop": "0.2.94"
   }
 }