@zenithbuild/core 0.4.6 → 0.4.7

package/dist/zen-preview.js

@@ -8441,7 +8441,12 @@ function generateExpressionId() {
   return `expr_${expressionIdCounter++}`;
 }
 function stripBlocks(html) {
-  let stripped = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+  let stripped = html.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, content) => {
+    if (attrs.includes("src=")) {
+      return match;
+    }
+    return "";
+  });
   stripped = stripped.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
   return stripped;
 }
@@ -8942,6 +8947,8 @@ function parseComponentFile(filePath) {
     slots,
     props,
     styles,
+    script: ir.script?.raw || null,
+    scriptAttributes: ir.script?.attributes || null,
     hasScript: ir.script !== null,
     hasStyles: ir.styles.length > 0
   };
@@ -9133,13 +9140,20 @@ function resolveComponentsInIR(ir, components) {
   usedComponents.clear();
   const resolvedNodes = resolveComponentsInNodes(ir.template.nodes, components);
   const componentStyles = Array.from(usedComponents).map((name) => components.get(name)).filter((meta) => meta !== undefined && meta.styles.length > 0).flatMap((meta) => meta.styles.map((raw) => ({ raw })));
+  const componentScripts = Array.from(usedComponents).map((name) => components.get(name)).filter((meta) => meta !== undefined && meta.script !== null).map((meta) => ({
+    name: meta.name,
+    script: meta.script,
+    props: meta.props,
+    scriptAttributes: meta.scriptAttributes || {}
+  }));
   return {
     ...ir,
     template: {
       ...ir.template,
       nodes: resolvedNodes
     },
-    styles: [...ir.styles, ...componentStyles]
+    styles: [...ir.styles, ...componentStyles],
+    componentScripts: [...ir.componentScripts || [], ...componentScripts]
   };
 }
 function resolveComponentsInNodes(nodes, components, depth = 0) {
@@ -9199,20 +9213,24 @@ function resolveComponent(componentNode, components, depth = 0) {
   }
   const templateNodes = JSON.parse(JSON.stringify(componentMeta.nodes));
   const resolvedTemplate = resolveSlots(templateNodes, resolvedSlots);
-  const forwardedTemplate = forwardAttributesToRoot(resolvedTemplate, componentNode.attributes, componentNode.loopContext);
+  const forwardedTemplate = forwardAttributesToRoot(resolvedTemplate, componentNode.attributes, componentNode.loopContext, componentMeta.hasScript ? componentName : undefined);
   const fullyResolved = resolveComponentsInNodes(forwardedTemplate, components, depth + 1);
   return fullyResolved;
 }
-function forwardAttributesToRoot(nodes, attributes, loopContext) {
-  if (attributes.length === 0) {
-    return nodes;
-  }
+function forwardAttributesToRoot(nodes, attributes, loopContext, componentName) {
   const rootIndex = nodes.findIndex((n) => n.type === "element");
   if (rootIndex === -1) {
     return nodes;
   }
   const root = nodes[rootIndex];
   const mergedAttributes = [...root.attributes];
+  if (componentName) {
+    mergedAttributes.push({
+      name: "data-zen-component",
+      value: componentName,
+      location: { line: 0, column: 0 }
+    });
+  }
   for (const attr of attributes) {
     const existingIndex = mergedAttributes.findIndex((a) => a.name === attr.name);
     const forwardedAttr = {
@@ -10877,10 +10895,73 @@ function transformStateDeclarations(script) {
   transformed = transformed.replace(/export\s+let\s+props(?:\s*:\s*([^;]+))?\s*;?[ \t]*/g, "");
   transformed = transformed.replace(/(?:type|interface)\s+Props\s*=?\s*\{[^}]*(?:\{[^}]*\}[^}]*)*\}[ \t]*;?/gs, "");
   transformed = transformed.replace(/import\s+{[^}]+}\s+from\s+['"]zenith\/runtime['"]\s*;?[ \t]*/g, "");
+  transformed = transformed.replace(/import\s+\w+\s+from\s+['"][^'"]*\.zen['"];?\s*/g, "");
+  transformed = transformed.replace(/import\s+{[^}]*}\s+from\s+['"][^'"]+\.zen['"];?\s*/g, "");
   transformed = transformed.replace(/import\s*{\s*([^}]+)\s*}\s*from\s*['"]zenith:content['"]\s*;?/g, (_, imports) => `const { ${imports.trim()} } = window.__zenith;`);
   return transformed.trim();
 }
 
+// compiler/transform/componentScriptTransformer.ts
+var NAMESPACE_BINDINGS = `const { 
+    signal, state, memo, effect, ref, 
+    batch, untrack, onMount, onUnmount 
+} = __inst;`;
+var ZEN_PREFIX_MAPPINGS = {
+  zenSignal: "signal",
+  zenState: "state",
+  zenMemo: "memo",
+  zenEffect: "effect",
+  zenRef: "ref",
+  zenBatch: "batch",
+  zenUntrack: "untrack",
+  zenOnMount: "onMount",
+  zenOnUnmount: "onUnmount"
+};
+function transformComponentScript(componentName, scriptContent, props) {
+  let transformed = scriptContent;
+  transformed = transformed.replace(/import\s+\w+\s+from\s+['"][^'"]*\.zen['"];?\s*/g, "");
+  transformed = transformed.replace(/import\s+{[^}]*}\s+from\s+['"][^'"]+['"];?\s*/g, "");
+  for (const [zenName, unprefixedName] of Object.entries(ZEN_PREFIX_MAPPINGS)) {
+    const regex = new RegExp(`(?<!\\w)${zenName}\\s*\\(`, "g");
+    transformed = transformed.replace(regex, `${unprefixedName}(`);
+  }
+  return transformed.trim();
+}
+function generateComponentFactory(componentName, transformedScript, propNames) {
+  const propsDestructure = propNames.length > 0 ? `const { ${propNames.join(", ")} } = props || {};` : "";
+  return `
+// Component Factory: ${componentName}
+// Instantiation is driven by hydrator, not by bundle load
+__zenith.defineComponent('${componentName}', function(props, rootElement) {
+    const __inst = __zenith.createInstance('${componentName}', rootElement);
+    
+    // Namespace bindings (instance-scoped primitives)
+    ${NAMESPACE_BINDINGS}
+    
+    ${propsDestructure}
+    
+    // Component script (instance-scoped)
+    ${transformedScript}
+    
+    // Execute mount lifecycle (rootElement is already in DOM)
+    __inst.mount();
+    
+    return __inst;
+});
+`;
+}
+function transformAllComponentScripts(componentScripts) {
+  if (!componentScripts || componentScripts.length === 0) {
+    return "";
+  }
+  const factories = componentScripts.filter((comp) => comp.script && comp.script.trim().length > 0).map((comp) => {
+    const transformed = transformComponentScript(comp.name, comp.script, comp.props);
+    return generateComponentFactory(comp.name, transformed, comp.props);
+  });
+  return factories.join(`
+`);
+}
+
 // compiler/runtime/transformIR.ts
 function transformIR(ir) {
   const expressionDependencies = analyzeAllExpressions(ir.template.expressions, ir.filePath, [], ir.script?.attributes["props"] ? ir.script.attributes["props"].split(",") : [], []);
@@ -10897,6 +10978,7 @@ function transformIR(ir) {
   const propDeclarations = extractProps(scriptContent);
   const stateInitCode = generateStateInitialization(stateDeclarations, [...propDeclarations, ...propKeys]);
   const scriptCode = transformStateDeclarations(scriptContent);
+  const componentScriptCode = transformAllComponentScripts(ir.componentScripts || []);
   const bundle = generateRuntimeBundle({
     expressions,
     expressionRegistry,
@@ -10904,7 +10986,8 @@ function transformIR(ir) {
     navigationRuntime,
     stylesCode,
     scriptCode,
-    stateInitCode
+    stateInitCode,
+    componentScriptCode
   });
   return {
     expressions,
@@ -10940,6 +11023,9 @@ ${functionRegistrations}
 ${parts.stateInitCode ? `// State initialization
 ${parts.stateInitCode}` : ""}
 
+${parts.componentScriptCode ? `// Component factories (instance-scoped)
+${parts.componentScriptCode}` : ""}
+
 // Export hydration functions
 if (typeof window !== 'undefined') {
   window.zenithHydrate = window.__zenith_hydrate || function(state, container) {
@@ -10998,10 +11084,21 @@ if (typeof window !== 'undefined') {
     // Get the router outlet or body
     const container = document.querySelector('#app') || document.body;
     
-    // Hydrate with state
+    // Hydrate with state (expressions, bindings)
     if (window.__zenith_hydrate) {
       window.__zenith_hydrate(state, {}, {}, {}, container);
     }
+    
+    // Hydrate components by discovering data-zen-component markers
+    // This is the ONLY place component instantiation happens - driven by DOM markers
+    if (window.__zenith && window.__zenith.hydrateComponents) {
+      window.__zenith.hydrateComponents(container);
+    }
+    
+    // Trigger page-level mount lifecycle
+    if (window.__zenith && window.__zenith.triggerMount) {
+      window.__zenith.triggerMount();
+    }
   }
   
   // Run on DOM ready
@@ -11333,7 +11430,12 @@ function discoverLayouts(layoutsDir) {
         if (match[1])
           styles.push(match[1].trim());
       }
-      let html = source.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+      let html = source.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match2, attrs, content) => {
+        if (attrs.includes("src=")) {
+          return match2;
+        }
+        return "";
+      });
       html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "").trim();
       layouts.set(name, {
         name,
@@ -11835,6 +11937,144 @@ function generateBundleJS() {
     unmountCallbacks.length = 0;
   }
   
+  // ============================================
+  // Component Instance System
+  // ============================================
+  // Each component instance gets isolated state, effects, and lifecycles
+  // Instances are tied to DOM elements via hydration markers
+  
+  const componentRegistry = {};
+  
+  function createComponentInstance(componentName, rootElement) {
+    const instanceMountCallbacks = [];
+    const instanceUnmountCallbacks = [];
+    const instanceEffects = [];
+    let instanceMounted = false;
+    
+    return {
+      // DOM reference
+      root: rootElement,
+      
+      // Lifecycle hooks (instance-scoped)
+      onMount: function(fn) {
+        if (instanceMounted) {
+          const cleanup = fn();
+          if (typeof cleanup === 'function') {
+            instanceUnmountCallbacks.push(cleanup);
+          }
+        } else {
+          instanceMountCallbacks.push(fn);
+        }
+      },
+      onUnmount: function(fn) {
+        instanceUnmountCallbacks.push(fn);
+      },
+      
+      // Reactivity (uses global primitives but tracks for cleanup)
+      signal: function(initial) {
+        return zenSignal(initial);
+      },
+      state: function(initial) {
+        return zenState(initial);
+      },
+      ref: function(initial) {
+        return zenRef(initial);
+      },
+      effect: function(fn) {
+        const cleanup = zenEffect(fn);
+        instanceEffects.push(cleanup);
+        return cleanup;
+      },
+      memo: function(fn) {
+        return zenMemo(fn);
+      },
+      batch: function(fn) {
+        zenBatch(fn);
+      },
+      untrack: function(fn) {
+        return zenUntrack(fn);
+      },
+      
+      // Lifecycle execution
+      mount: function() {
+        instanceMounted = true;
+        for (let i = 0; i < instanceMountCallbacks.length; i++) {
+          try {
+            const cleanup = instanceMountCallbacks[i]();
+            if (typeof cleanup === 'function') {
+              instanceUnmountCallbacks.push(cleanup);
+            }
+          } catch(e) {
+            console.error('[Zenith] Component mount error:', componentName, e);
+          }
+        }
+        instanceMountCallbacks.length = 0;
+      },
+      unmount: function() {
+        instanceMounted = false;
+        // Cleanup effects
+        for (let i = 0; i < instanceEffects.length; i++) {
+          try { 
+            if (typeof instanceEffects[i] === 'function') instanceEffects[i](); 
+          } catch(e) { 
+            console.error('[Zenith] Effect cleanup error:', e); 
+          }
+        }
+        instanceEffects.length = 0;
+        // Run unmount callbacks
+        for (let i = 0; i < instanceUnmountCallbacks.length; i++) {
+          try { instanceUnmountCallbacks[i](); } catch(e) { console.error('[Zenith] Unmount error:', e); }
+        }
+        instanceUnmountCallbacks.length = 0;
+      }
+    };
+  }
+  
+  function defineComponent(name, factory) {
+    componentRegistry[name] = factory;
+  }
+  
+  function instantiateComponent(name, props, rootElement) {
+    const factory = componentRegistry[name];
+    if (!factory) {
+      console.warn('[Zenith] Component not found:', name);
+      return null;
+    }
+    return factory(props, rootElement);
+  }
+  
+  /**
+   * Hydrate components by discovering data-zen-component markers
+   * This is the ONLY place component instantiation should happen
+   */
+  function hydrateComponents(container) {
+    const componentElements = container.querySelectorAll('[data-zen-component]');
+    
+    for (let i = 0; i < componentElements.length; i++) {
+      const el = componentElements[i];
+      const componentName = el.getAttribute('data-zen-component');
+      
+      // Skip if already hydrated
+      if (el.__zenith_instance) continue;
+      
+      // Parse props from data attribute if present
+      const propsJson = el.getAttribute('data-zen-props') || '{}';
+      let props = {};
+      try {
+        props = JSON.parse(propsJson);
+      } catch(e) {
+        console.warn('[Zenith] Invalid props JSON for', componentName);
+      }
+      
+      // Instantiate component and bind to DOM element
+      const instance = instantiateComponent(componentName, props, el);
+      
+      if (instance) {
+        el.__zenith_instance = instance;
+      }
+    }
+  }
+  
   // ============================================
   // Expression Registry & Hydration
   // ============================================
@@ -12254,8 +12494,13 @@ function generateBundleJS() {
     triggerUnmount: triggerUnmount,
     // Hydration
     hydrate: zenithHydrate,
+    hydrateComponents: hydrateComponents,  // Marker-driven component instantiation
     registerExpression: registerExpression,
-    getExpression: getExpression
+    getExpression: getExpression,
+    // Component instance system
+    createInstance: createComponentInstance,
+    defineComponent: defineComponent,
+    instantiate: instantiateComponent
   };
   
   // Expose with zen* prefix for direct usage