@stacksjs/stx 0.2.92 → 0.2.93

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-xv34zbp4.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{Dr as a,Er as b,Fr as c,Gr as d,Hr as e,Ir as f,Jr as g,Kr as h,Lr as i,Mr as j,Nr as k,Or as l,Pr as m}from"./chunk-1xz0w746.js";import"./chunk-m8448qby.js";import"./chunk-kx6eb6ma.js";import"./chunk-g1vt329s.js";import"./chunk-7074g241.js";import"./chunk-9cf97f9p.js";import"./chunk-6djzdes9.js";import"./chunk-v7f8jj15.js";import"./chunk-keawsbpn.js";import"./chunk-8b3z0zd5.js";import"./chunk-hbgxbgam.js";import"./chunk-ejh8fyak.js";import"./chunk-krqn0ddk.js";import"./chunk-y1k17c8b.js";import"./chunk-2j21d3ka.js";import"./chunk-frg705zq.js";import"./chunk-hjm2xab3.js";import"./chunk-07y6m5xx.js";import"./chunk-wazkqv7n.js";import"./chunk-x05nxhyv.js";import"./chunk-31dr4bys.js";import"./chunk-mgj88zeq.js";import"./chunk-m167kjhv.js";import"./chunk-3a4qsygv.js";import"./chunk-dqn9gyhb.js";import"./chunk-988dw6q3.js";import"./chunk-8qc1bsym.js";import"./chunk-xyg1r5w0.js";import"./chunk-7gd339hd.js";import"./chunk-4deg33rw.js";import"./chunk-pa9zb7ty.js";import"./chunk-a2g2qb2y.js";import"./chunk-h5jxydqq.js";import"./chunk-nhv099jv.js";import"./chunk-shv88d2d.js";import"./chunk-0dx4q6yq.js";import"./chunk-ek2w6zvy.js";import"./chunk-9wmq2272.js";import"./chunk-7dkz6z2s.js";import"./chunk-9ecv8aqj.js";import"./chunk-bdk6g1vj.js";import"./chunk-xqq1vxb6.js";import"./chunk-amaa1bev.js";import"./chunk-r5m9xtm7.js";import"./chunk-bs3gmfxz.js";import"./chunk-1zgsgk4b.js";import"./chunk-2jxbwnkz.js";import"./chunk-zen6ax1y.js";import"./chunk-yb1t2h8h.js";import"./chunk-fjk3x41y.js";import"./chunk-5shey2e4.js";import"./chunk-27zsyhrd.js";import"./chunk-7ed3tean.js";import"./chunk-8vtm0m84.js";import"./chunk-tzwtg722.js";import"./chunk-ah88wzbg.js";import"./chunk-v8j49spx.js";import"./chunk-tg2f1mzq.js";import"./chunk-n9dhs1dw.js";import"./chunk-rwrv9wbf.js";import"./chunk-wg9k6h8w.js";import"./chunk-9jtj77jx.js";import"./chunk-qygvvygy.js";import"./chunk-gz5fmp3q.js";import"./chunk-vjbefncc.js";import"./chunk-8xj7c3mf.js";import"./chunk-qvrbjpdc.js";import"./chunk-w3b6m427.js";import"./chunk-rz2ec6g7.js";import"./chunk-35faj94w.js";import"./chunk-djddhmcc.js";import"./chunk-knm8a8yx.js";import"./chunk-xv34zbp4.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-xv34zbp4.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.93",
   "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.93",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.92",
+    "bun-plugin-stx": "0.2.93",
     "bunfig": "^0.15.14",
-    "stx-router": "0.2.92",
+    "stx-router": "0.2.93",
     "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.93"
   }
 }