@stacksjs/stx 0.2.94 → 0.2.96

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

@@ -1,5 +1,5 @@
-// @bun
-import"../chunk-3jm3snz8.js";function F(){return`
+export function generateReactiveMixin() {
+  return `
 /**
  * Reactive mixin for stx web components
  * Adds reactive state management to custom elements
@@ -154,51 +154,64 @@ finally {
     }
   };
 }
-`}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) {
+`;
+}
+export function generateReactiveComponentJS(component, template, options = {}) {
+  const { properties = [], computed = [], watchers = [], methods = {}, lifecycle = {} } = options, className = component.name, tagName = component.tag, useShadow = component.shadowDOM !== !1, propsDefinition = properties.map((prop) => {
+    const defaultValue = prop.default !== void 0 ? JSON.stringify(prop.default) : getDefaultForType(prop.type);
+    return `    ${prop.name}: { type: '${prop.type}', default: ${defaultValue}, reflect: ${!!prop.reflect} }`;
+  }).join(`,
+`), computedSetup = computed.map((c) => {
+    const depsArray = JSON.stringify(c.dependencies);
+    return `    this.$computed('${c.name}', ${depsArray}, ${c.getter});`;
+  }).join(`
+`), watchersSetup = watchers.map((w) => {
+    const opts = w.immediate || w.deep ? `, { immediate: ${!!w.immediate}, deep: ${!!w.deep} }` : "";
+    return `    this.$watch('${w.property}', ${w.handler}${opts});`;
+  }).join(`
+`), methodsCode = Object.entries(methods).map(([name, body]) => `  ${name}${body}`).join(`
+
+`), connectedCode = lifecycle.connected || "", disconnectedCode = lifecycle.disconnected || "", adoptedCode = lifecycle.adopted || "", attributeChangedCode = lifecycle.attributeChanged || "", escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+  return `
+${generateReactiveMixin()}
+
+class ${className} extends StxReactive(HTMLElement) {
   static reactiveProperties = {
-${W}
+${propsDefinition}
   };
 
   static get observedAttributes() {
-    return ${JSON.stringify(q.attributes||[])};
+    return ${JSON.stringify(component.attributes || [])};
   }
 
   #shadowRoot;
 
   constructor() {
     super();
-    ${H?"this.#shadowRoot = this.attachShadow({ mode: 'open' });":""}
+    ${useShadow ? "this.#shadowRoot = this.attachShadow({ mode: 'open' });" : ""}
     this.#setupComputed();
     this.#setupWatchers();
   }
 
   #setupComputed() {
-${X}
+${computedSetup}
   }
 
   #setupWatchers() {
-${Y}
+${watchersSetup}
   }
 
   connectedCallback() {
     this.render();
-    ${_}
+    ${connectedCode}
   }
 
   disconnectedCallback() {
-    ${$}
+    ${disconnectedCode}
   }
 
   adoptedCallback() {
-    ${G}
+    ${adoptedCode}
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -206,7 +219,7 @@ ${Y}
     const propName = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 
     // Get the property type
-    const propConfig = ${z}.reactiveProperties[propName];
+    const propConfig = ${className}.reactiveProperties[propName];
     if (propConfig) {
       let value = newValue;
 
@@ -232,33 +245,49 @@ catch (e) {
       this[propName] = value;
     }
 
-    ${I}
+    ${attributeChangedCode}
   }
 
   render() {
-    const root = ${H?"this.#shadowRoot":"this"};
+    const root = ${useShadow ? "this.#shadowRoot" : "this"};
     root.innerHTML = this.#template();
   }
 
   #template() {
-    return \`${A}\`;
+    return \`${escapedTemplate}\`;
   }
 
-${Z}
+${methodsCode}
 }
 
-customElements.define('${U}', ${z});
+customElements.define('${tagName}', ${className});
 
-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}
+export { ${className} };
+`;
+}
+export function generateReactiveComponentTS(component, template, options = {}) {
+  const { properties = [], computed = [], watchers = [], methods = {}, lifecycle = {} } = options, className = component.name, tagName = component.tag, useShadow = component.shadowDOM !== !1, propsInterface = properties.map((prop) => {
+    const tsType = getTypeScriptType(prop.type);
+    return `  ${prop.name}: ${tsType};`;
+  }).join(`
+`), propsDefinition = properties.map((prop) => {
+    const defaultValue = prop.default !== void 0 ? JSON.stringify(prop.default) : getDefaultForType(prop.type);
+    return `    ${prop.name}: { type: '${prop.type}' as const, default: ${defaultValue}, reflect: ${!!prop.reflect} }`;
+  }).join(`,
+`), computedSetup = computed.map((c) => {
+    const depsArray = JSON.stringify(c.dependencies);
+    return `    this.$computed('${c.name}', ${depsArray}, ${c.getter});`;
+  }).join(`
+`), watchersSetup = watchers.map((w) => {
+    const opts = w.immediate || w.deep ? `, { immediate: ${!!w.immediate}, deep: ${!!w.deep} }` : "";
+    return `    this.$watch('${w.property}', ${w.handler}${opts});`;
+  }).join(`
+`), methodsCode = Object.entries(methods).map(([name, body]) => `  ${name}${body}`).join(`
+
+`), connectedCode = lifecycle.connected || "", disconnectedCode = lifecycle.disconnected || "", adoptedCode = lifecycle.adopted || "", attributeChangedCode = lifecycle.attributeChanged || "", escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+  return `
+interface ${className}Props {
+${propsInterface}
 }
 
 interface ReactivePropertyConfig {
@@ -274,51 +303,51 @@ interface ReactiveElement extends HTMLElement {
   $batch(fn: () => void): void;
 }
 
-${F()}
+${generateReactiveMixin()}
 
-class ${z} extends StxReactive(HTMLElement) implements ReactiveElement {
+class ${className} extends StxReactive(HTMLElement) implements ReactiveElement {
   static reactiveProperties: Record<string, ReactivePropertyConfig> = {
-${X}
+${propsDefinition}
   };
 
   static get observedAttributes(): string[] {
-    return ${JSON.stringify(q.attributes||[])};
+    return ${JSON.stringify(component.attributes || [])};
   }
 
   #shadowRoot: ShadowRoot | null = null;
 
   constructor() {
     super();
-    ${H?"this.#shadowRoot = this.attachShadow({ mode: 'open' });":""}
+    ${useShadow ? "this.#shadowRoot = this.attachShadow({ mode: 'open' });" : ""}
     this.#setupComputed();
     this.#setupWatchers();
   }
 
   #setupComputed(): void {
-${Y}
+${computedSetup}
   }
 
   #setupWatchers(): void {
-${Z}
+${watchersSetup}
   }
 
   connectedCallback(): void {
     this.render();
-    ${$}
+    ${connectedCode}
   }
 
   disconnectedCallback(): void {
-    ${G}
+    ${disconnectedCode}
   }
 
   adoptedCallback(): void {
-    ${I}
+    ${adoptedCode}
   }
 
   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];
+    const propConfig = ${className}.reactiveProperties[propName];
     if (propConfig) {
       let value: unknown = newValue;
 
@@ -343,33 +372,68 @@ catch {
       (this as Record<string, unknown>)[propName] = value;
     }
 
-    ${A}
+    ${attributeChangedCode}
   }
 
   render(): void {
-    const root = ${H?"this.#shadowRoot":"this"};
+    const root = ${useShadow ? "this.#shadowRoot" : "this"};
     if (root) {
       root.innerHTML = this.#template();
     }
   }
 
   #template(): string {
-    return \`${k}\`;
+    return \`${escapedTemplate}\`;
   }
 
-${_}
+${methodsCode}
 }
 
-customElements.define('${U}', ${z});
+customElements.define('${tagName}', ${className});
 
-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`
+export { ${className} };
+export type { ${className}Props };
+`;
+}
+function getDefaultForType(type) {
+  switch (type) {
+    case "string":
+      return "''";
+    case "number":
+      return "0";
+    case "boolean":
+      return "false";
+    case "array":
+      return "[]";
+    case "object":
+      return "{}";
+    default:
+      return "undefined";
+  }
+}
+function getTypeScriptType(type) {
+  switch (type) {
+    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";
+  }
+}
+export function generateReactiveRuntime() {
+  return `
 (function() {
   'use strict';
 
   // StxReactive mixin for dynamic component creation
-  window.StxReactive = ${F().replace(/\n/g," ").replace(/\s+/g," ")};
+  window.StxReactive = ${generateReactiveMixin().replace(/\n/g, " ").replace(/\s+/g, " ")};
 
   // Helper to create reactive components dynamically
   window.createReactiveComponent = function(tag, config) {
@@ -416,4 +480,5 @@ export type { ${z}Props };
     return DynamicComponent;
   };
 })();
-`}export{D as generateReactiveRuntime,F as generateReactiveMixin,v as generateReactiveComponentTS,R as generateReactiveComponentJS};
+`;
+}