@ape-egg/vibe 1.3.2 → 1.6.0

package/compiler/src/parser/html.rs

@@ -82,25 +82,25 @@ impl HtmlParser {
         &self.cache
     }
 
-    /// Process HTML content: transform custom tags to <component>, optionally inline, apply accessibility
+    /// Process HTML content: transform custom tags to <component>, optionally inline, transform custom elements
     pub fn process_html(
         &self,
         content: &str,
-        accessibility: bool,
-        exclude_tags: &[String],
         elements_as_is: bool,
+        reserved_elements: &[String],
+        components_as_is: bool,
         components_dir: &str,
     ) -> String {
-        self.process_html_with_cache(content, accessibility, exclude_tags, elements_as_is, components_dir, &HashMap::new())
+        self.process_html_with_cache(content, elements_as_is, reserved_elements, components_as_is, components_dir, &HashMap::new())
     }
 
     pub fn process_html_with_cache(
         &self,
         content: &str,
-        accessibility: bool,
-        exclude_tags: &[String],
         elements_as_is: bool,
-        components_dir: &str,
+        reserved_elements: &[String],
+        components_as_is: bool,
+        _components_dir: &str,
         external_cache: &HashMap<String, String>,
     ) -> String {
         // Extract and preserve DOCTYPE declaration if present
@@ -109,17 +109,22 @@ impl HtmlParser {
 
         let mut result = content.to_string();
 
-        // Step 1: Transform custom tags matching element files to <component> tags
-        result = self.transform_custom_tags_to_component(&result, components_dir);
+        // Step 1: Inline custom elements directly (ALWAYS, even with components_as_is)
+        // Custom elements like <card> are always inlined because runtime doesn't know about /components directory
+        result = self.inline_custom_elements(&result);
 
-        // Step 2: If elements_as_is is false, recursively inline all <component> elements
-        if !elements_as_is {
+        // Step 2: Handle explicit <component src="..."> elements
+        // If components_as_is is false, recursively inline all <component> elements
+        if !components_as_is {
             result = self.inline_component_elements(&result, external_cache);
+
+            // NOTE: Don't run inline_custom_elements again here - it causes infinite recursion
+            // Custom elements inside components are already processed when the component was cached
         }
 
-        // Step 3: Accessibility transform if requested
-        if accessibility {
-            result = transform_custom_tags_to_divs(&result, exclude_tags);
+        // Step 3: Transform custom elements to divs if elements_as_is is false (accessible by default)
+        if !elements_as_is {
+            result = transform_custom_tags_to_divs(&result, reserved_elements);
         }
 
         // Step 4: Restore DOCTYPE if it was present
@@ -133,134 +138,237 @@ impl HtmlParser {
         result
     }
 
-    /// Transform custom tags that match element files to <component src="..."> tags
-    fn transform_custom_tags_to_component(&self, content: &str, components_dir: &str) -> String {
-        let mut result = content.to_string();
-
-        // Find all tags that match loaded elements
-        for tag_name in self.cache.keys() {
-            // Match opening and closing tags with any attributes and children
-            let tag_pattern = format!(r"<{}(\s[^>]*)?>", regex::escape(tag_name));
-            let tag_re = regex::Regex::new(&tag_pattern).unwrap();
-            let closing_pattern = format!(r"</{}>", regex::escape(tag_name));
-
-            // Find all occurrences and transform them
-            let mut matches: Vec<(usize, usize, String, Option<String>)> = Vec::new();
-
-            // Find opening tags
-            for cap in tag_re.find_iter(&result) {
-                let start = cap.start();
-                let tag_with_attrs = cap.as_str();
-
-                // Extract attributes (everything between tag name and >)
-                let attrs = if tag_with_attrs.ends_with('>') {
-                    let inner = &tag_with_attrs[tag_name.len() + 1..tag_with_attrs.len() - 1];
-                    if inner.trim().is_empty() {
-                        None
-                    } else {
-                        Some(inner.to_string())
-                    }
-                } else {
-                    None
-                };
-
-                // Find corresponding closing tag
-                if let Some(closing_pos) = result[cap.end()..].find(&closing_pattern) {
-                    let closing_start = cap.end() + closing_pos;
-                    let closing_end = closing_start + closing_pattern.len();
-                    let children = result[cap.end()..closing_start].to_string();
-
-                    matches.push((start, closing_end, children, attrs));
-                }
-            }
-
-            // Replace from end to start to maintain indices
-            matches.reverse();
-            for (start, end, children, attrs) in matches {
-                let attrs_str = attrs.map(|a| format!(" {}", a)).unwrap_or_default();
-                let replacement = format!("<component src=\"/{}/{}.html\"{}>{}</component>", components_dir, tag_name, attrs_str, children);
-                result.replace_range(start..end, &replacement);
-            }
+    /// Inline custom elements directly with their HTML content (ALWAYS, even with components_as_is)
+    /// Custom elements like <card> are always inlined because runtime doesn't know about /components directory
+    fn inline_custom_elements(&self, content: &str) -> String {
+        if self.cache.is_empty() {
+            return content.to_string(); // No custom elements to inline
         }
 
-        result
-    }
-
-    /// Recursively inline all <component> elements with their HTML content
-    fn inline_component_elements(&self, content: &str, external_cache: &HashMap<String, String>) -> String {
         let mut result = content.to_string();
         let mut changed = true;
         let mut iterations = 0;
-        const MAX_ITERATIONS: usize = 100; // Prevent infinite loops
+        const MAX_ITERATIONS: usize = 10; // Reasonable limit for deeply nested custom elements
 
         while changed && iterations < MAX_ITERATIONS {
             changed = false;
             iterations += 1;
 
-            // Match <component src="..." attrs...>children</component>
-            // Handles internal (/components/file.html) and external (http://... or https://...)
-            // Use (?s) flag to make . match newlines
-            let component_re = regex::Regex::new(
-                r#"(?s)<component\s+src="([^"]+)"([^>]*)>(.*?)</component>"#
-            ).unwrap();
+            // Find all tags that match loaded elements
+            for (tag_name, element) in &self.cache {
+                // Match opening and closing tags with any attributes and children
+                let tag_pattern = format!(r"<{}(\s[^>]*)?>", regex::escape(tag_name));
+                let tag_re = regex::Regex::new(&tag_pattern).unwrap();
+                let closing_pattern = format!(r"</{}>", regex::escape(tag_name));
+
+                // Find all occurrences
+                let mut matches: Vec<(usize, usize, String, HashMap<String, String>)> = Vec::new();
+
+                // Find opening tags
+                for cap in tag_re.find_iter(&result) {
+                    let start = cap.start();
+                    let tag_with_attrs = cap.as_str();
+
+                    // Extract attributes and parse as props
+                    let attrs_str = if tag_with_attrs.ends_with('>') {
+                        let inner = &tag_with_attrs[tag_name.len() + 1..tag_with_attrs.len() - 1];
+                        inner.to_string()
+                    } else {
+                        String::new()
+                    };
+                    let props = Self::parse_props(&attrs_str);
 
-            let matches: Vec<_> = component_re.captures_iter(&result).map(|cap| {
-                let full_match = cap.get(0).unwrap();
-                let src = cap.get(1).unwrap().as_str();
-                let attrs_str = cap.get(2).map(|m| m.as_str().to_string()).unwrap_or_default();
-                let slot_content = cap.get(3).map(|m| m.as_str().to_string());
+                    // Find corresponding closing tag
+                    if let Some(closing_pos) = result[cap.end()..].find(&closing_pattern) {
+                        let closing_start = cap.end() + closing_pos;
+                        let closing_end = closing_start + closing_pattern.len();
+                        let slot_content = result[cap.end()..closing_start].to_string();
 
-                // Parse attributes into a map (prop_name -> prop_value)
-                let props = Self::parse_props(&attrs_str);
+                        matches.push((start, closing_end, slot_content, props));
+                    }
+                }
 
-                (full_match.start(), full_match.end(), src.to_string(), props, slot_content)
-            }).collect();
+                if !matches.is_empty() {
+                    changed = true;
+                }
 
-            if !matches.is_empty() {
-                changed = true;
-            }
+                // Replace from end to start to maintain indices
+                matches.reverse();
+                for (start, end, slot_content, props) in matches {
+                    let mut replacement = element.content.clone();
 
-            // Replace from end to start
-            for (start, end, src, props, slot_content) in matches.iter().rev() {
-                // Check if it's an external URL
-                let replacement_content = if src.starts_with("http://") || src.starts_with("https://") {
-                    // External component - get from cache
-                    external_cache.get(src).cloned()
-                } else {
-                    // Internal component - get element name from filename (e.g., "card.html" -> "card")
-                    let element_name = src
-                        .trim_start_matches("./")
-                        .trim_start_matches('/')
-                        .split('/')
-                        .last()
-                        .unwrap_or(src)
-                        .trim_end_matches(".html");
-
-                    self.cache.get(element_name).map(|e| e.content.clone())
-                };
-
-                if let Some(mut replacement) = replacement_content {
                     // Replace props: for each prop like headline="@[pageTitle]",
                     // replace @[headline] in content with @[pageTitle]
                     for (prop_name, prop_value) in props {
                         let prop_binding = format!("@[{}]", prop_name);
-                        replacement = replacement.replace(&prop_binding, prop_value);
+                        replacement = replacement.replace(&prop_binding, &prop_value);
                     }
 
                     // Replace <slot> tags with content, or remove if empty/missing
-                    let slot_replacement = slot_content
-                        .as_ref()
-                        .filter(|s| !s.trim().is_empty())
-                        .map(|s| s.as_str())
-                        .unwrap_or("");
-
+                    let slot_replacement = if slot_content.trim().is_empty() {
+                        ""
+                    } else {
+                        &slot_content
+                    };
                     replacement = replacement.replace("<slot></slot>", slot_replacement);
                     replacement = replacement.replace("<slot/>", slot_replacement);
                     replacement = replacement.replace("<slot />", slot_replacement);
 
-                    result.replace_range(*start..*end, &replacement);
+                    // Keep the wrapper for consistency with runtime (using generic <component> wrapper)
+                    // No src attribute = wrapper won't be re-processed
+                    let wrapper = format!("<component>{}</component>", replacement);
+                    result.replace_range(start..end, &wrapper);
+                }
+            }
+        }
+
+        result
+    }
+
+    /// Recursively inline all <component> elements with their HTML content
+    /// Inline a single component (one pass, no looping)
+    /// Used during recursive component fetching to resolve nested components
+    pub fn inline_single_component(&self, content: &str, component_src: &str, component_content: &str) -> String {
+        let mut result = content.to_string();
+
+        // Normalize the src for matching
+        let normalized_src = if component_src.starts_with("http://") || component_src.starts_with("https://") {
+            component_src.to_string()
+        } else {
+            let without_prefix = component_src.trim_start_matches("./");
+            if without_prefix.starts_with('/') {
+                without_prefix.to_string()
+            } else {
+                format!("/{}", without_prefix)
+            }
+        };
+
+        // Match <component src="..." attrs...>children</component>
+        // OR <div class="component" src="..." attrs...>children</div>
+        let pattern = format!(r#"(?s)<(component|div)\s+([^>]*)\bsrc="{}"\s*([^>]*)>(.*?)</(component|div)>"#, regex::escape(&normalized_src));
+        let component_re = regex::Regex::new(&pattern).unwrap();
+
+        let matches: Vec<_> = component_re.captures_iter(&result).map(|cap| {
+            let full_match = cap.get(0).unwrap();
+            let tag_name = cap.get(1).unwrap().as_str();
+            let attrs_before = cap.get(2).map(|m| m.as_str()).unwrap_or("");
+            let attrs_after = cap.get(3).map(|m| m.as_str()).unwrap_or("");
+            let slot_content = cap.get(4).map(|m| m.as_str().to_string());
+
+            // For <div>, verify it has class="component"
+            if tag_name == "div" {
+                let combined_attrs = format!("{} {}", attrs_before, attrs_after);
+                if !combined_attrs.contains("class=") || !combined_attrs.contains("component") {
+                    return None; // Not a component div, skip
                 }
-                // If not found in cache or internal elements, leave as-is
+            }
+
+            // Combine all attributes
+            let attrs_str = format!("{} {}", attrs_before, attrs_after);
+            let props = Self::parse_props(&attrs_str);
+
+            Some((full_match.start(), full_match.end(), props, slot_content))
+        }).flatten().collect();
+
+        // Replace from end to start
+        for (start, end, props, slot_content) in matches.iter().rev() {
+            let mut replacement = component_content.to_string();
+
+            // Replace props
+            for (prop_name, prop_value) in props {
+                let prop_binding = format!("@[{}]", prop_name);
+                replacement = replacement.replace(&prop_binding, prop_value);
+            }
+
+            // Replace slots
+            let slot_replacement = slot_content
+                .as_ref()
+                .filter(|s| !s.trim().is_empty())
+                .map(|s| s.as_str())
+                .unwrap_or("");
+
+            replacement = replacement.replace("<slot></slot>", slot_replacement);
+            replacement = replacement.replace("<slot/>", slot_replacement);
+            replacement = replacement.replace("<slot />", slot_replacement);
+
+            // Keep the <component> wrapper
+            let wrapper = format!("<component>{}</component>", replacement);
+            result.replace_range(*start..*end, &wrapper);
+        }
+
+        result
+    }
+
+    fn inline_component_elements(&self, content: &str, external_cache: &HashMap<String, String>) -> String {
+        let mut result = content.to_string();
+
+        // Single pass - all components in cache are already fully resolved
+        // Match <component src="..." attrs...>children</component>
+        // OR <div class="component" src="..." attrs...>children</div> (after accessibility transformation)
+        // Both signatures require src attribute (wrappers without src are already processed)
+        let component_re = regex::Regex::new(
+            r#"(?s)<(component|div)\s+([^>]*)\bsrc="([^"]+)"([^>]*)>(.*?)</(component|div)>"#
+        ).unwrap();
+
+        let matches: Vec<_> = component_re.captures_iter(&result).map(|cap| {
+            let full_match = cap.get(0).unwrap();
+            let tag_name = cap.get(1).unwrap().as_str();
+            let attrs_before = cap.get(2).map(|m| m.as_str()).unwrap_or("");
+            let src = cap.get(3).unwrap().as_str();
+            let attrs_after = cap.get(4).map(|m| m.as_str()).unwrap_or("");
+            let slot_content = cap.get(5).map(|m| m.as_str().to_string());
+
+            // For <div>, verify it has class="component" (or class="component other-classes")
+            if tag_name == "div" {
+                let combined_attrs = format!("{} {}", attrs_before, attrs_after);
+                if !combined_attrs.contains("class=") || !combined_attrs.contains("component") {
+                    return None; // Not a component div, skip
+                }
+            }
+
+            // Combine all attributes (excluding src which we already extracted)
+            let attrs_str = format!("{} {}", attrs_before, attrs_after);
+            let props = Self::parse_props(&attrs_str);
+
+            Some((full_match.start(), full_match.end(), src.to_string(), props, slot_content))
+        }).flatten().collect();
+
+        // Replace from end to start
+        for (start, end, src, props, slot_content) in matches.iter().rev() {
+            // Normalize path
+            let normalized_src = if src.starts_with("http://") || src.starts_with("https://") {
+                src.to_string()
+            } else {
+                let without_prefix = src.trim_start_matches("./");
+                if without_prefix.starts_with('/') {
+                    without_prefix.to_string()
+                } else {
+                    format!("/{}", without_prefix)
+                }
+            };
+
+            // Get fully resolved component from cache
+            if let Some(mut replacement) = external_cache.get(&normalized_src).cloned() {
+                // Replace props
+                for (prop_name, prop_value) in props {
+                    let prop_binding = format!("@[{}]", prop_name);
+                    replacement = replacement.replace(&prop_binding, prop_value);
+                }
+
+                // Replace slots
+                let slot_replacement = slot_content
+                    .as_ref()
+                    .filter(|s| !s.trim().is_empty())
+                    .map(|s| s.as_str())
+                    .unwrap_or("");
+
+                replacement = replacement.replace("<slot></slot>", slot_replacement);
+                replacement = replacement.replace("<slot/>", slot_replacement);
+                replacement = replacement.replace("<slot />", slot_replacement);
+
+                // Keep the <component> wrapper
+                let wrapper = format!("<component>{}</component>", replacement);
+                result.replace_range(*start..*end, &wrapper);
             }
         }
 
@@ -286,7 +394,7 @@ impl HtmlParser {
 }
 
 /// Transform custom HTML elements to divs with classes
-fn transform_custom_tags_to_divs(content: &str, exclude_tags: &[String]) -> String {
+fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) -> String {
     let mut result = content.to_string();
 
     // Standard HTML5 elements (should not be transformed)
@@ -318,13 +426,13 @@ fn transform_custom_tags_to_divs(content: &str, exclude_tags: &[String]) -> Stri
     let tag_pattern = regex::Regex::new(r"<([a-z][a-z0-9-]*)([^>]*)>").unwrap();
     let _closing_pattern = regex::Regex::new(r"</([a-z][a-z0-9-]*)>").unwrap();
 
-    // Collect unique custom tags first
+    // Collect unique custom tags (excluding standard HTML tags and reserved elements)
     let mut custom_tags: Vec<String> = Vec::new();
     for cap in tag_pattern.captures_iter(&result.clone()) {
         if let Some(m) = cap.get(1) {
             let tag = m.as_str().to_string();
             if !standard_tags.contains(tag.as_str())
-                && !exclude_tags.contains(&tag)
+                && !reserved_elements.contains(&tag)
                 && !custom_tags.contains(&tag)
             {
                 custom_tags.push(tag);
@@ -345,5 +453,8 @@ fn transform_custom_tags_to_divs(content: &str, exclude_tags: &[String]) -> Stri
         result = close_re.replace_all(&result, "</div>").to_string();
     }
 
+    // Note: <component> tags are NOT transformed - they are a framework element, not a custom element
+    // Only user-defined custom elements are transformed to divs
+
     result
 }

package/component.js

@@ -11,33 +11,45 @@
 // Or with class:
 //   <div class="component">...</div>
 
-import { generateComponentId } from './runtime/component-state.js';
+import { generateComponentId } from './runtime/component.js';
 import { ensureBoot } from './boot.js';
 
 const component = (state = {}, config, targetSelector) => {
+  // Initialize component registry
+  if (!window.__vibeComponents) {
+    window.__vibeComponents = {};
+  }
+
   // Find the first unprocessed INLINE component wrapper
   // Skip <component src=""> (fetched components) - they don't need state tagging
   // Scripts execute in DOM order, so we claim wrappers in DOM order too
   // Supports: <component> or <div class="component">
   const allWrappers = Array.from(document.querySelectorAll('component:not([src]), div.component:not([src])'));
-  const wrapper = allWrappers.find(el => !el.hasAttribute('data-vibe-component-id'));
+
+  // Try to find unprocessed component (runtime mode)
+  let wrapper = allWrappers.find(el => !el.hasAttribute('data-vibe-component-id'));
+
+  // If not found, try to find pre-compiled component that hasn't registered state yet (compiled mode)
+  if (!wrapper) {
+    wrapper = allWrappers.find(el => {
+      const existingId = el.getAttribute('data-vibe-component-id');
+      return existingId && !window.__vibeComponents[existingId];
+    });
+  }
 
   if (!wrapper) {
     console.warn('[vibe] component() must be called inside <component> or <div class="component">');
     return;
   }
 
-  // Generate unique component ID
-  const componentId = generateComponentId();
-
-  // Tag only the wrapper element
-  // All descendants will find it via element.closest('[data-vibe-component-id]')
-  wrapper.setAttribute('data-vibe-component-id', componentId);
+  // Get or generate component ID
+  let componentId = wrapper.getAttribute('data-vibe-component-id');
+  if (!componentId) {
+    componentId = generateComponentId();
+    wrapper.setAttribute('data-vibe-component-id', componentId);
+  }
 
   // Register component state in shared registry
-  if (!window.__vibeComponents) {
-    window.__vibeComponents = {};
-  }
   window.__vibeComponents[componentId] = state;
 
   // Store config (first caller wins)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.3.2",
+  "version": "1.6.0",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/cleanup.js

@@ -1,5 +1,5 @@
 import { debugLog } from './debug.js';
-import { PHASE_READY, FOUC_CLASS_OR_ATTR } from './constants.js';
+import { PHASE_READY, FOUC_CLASS_OR_ATTR, DEHYDRATE_CLASS_OR_ATTR } from './constants.js';
 
 /**
  * Check if all Vibe processing is complete and cleanup can run
@@ -20,7 +20,7 @@ export const shouldCleanup = (rootElement) => {
       // Check if this text node is inside a dehydrated element
       let parent = node.parentElement;
       while (parent && parent !== rootElement) {
-        if (parent.hasAttribute('dehydrate')) {
+        if (parent.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || parent.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
           return NodeFilter.FILTER_REJECT; // Skip dehydrated content
         }
         parent = parent.parentElement;
@@ -57,14 +57,14 @@ export const cleanup = (rootElement, debug = false) => {
     // Remove class from all elements in document that have it
     const elements = document.querySelectorAll(`.${cleanName}`);
     elements.forEach((el) => el.classList.remove(cleanName));
-    debugLog(PHASE_READY, `removing .${cleanName} class from ${elements.length} elements`, debug);
+    debugLog(PHASE_READY, `Removing .${cleanName} class from ${elements.length} ${elements.length === 1 ? 'element' : 'elements'}`, debug);
   } else {
     // Remove attribute from all elements in document that have it
     const elements = document.querySelectorAll(`[${cleanName}]`);
     elements.forEach((el) => el.removeAttribute(cleanName));
     debugLog(
       PHASE_READY,
-      `removing [${cleanName}] attribute from ${elements.length} elements`,
+      `Removing [${cleanName}] attribute from ${elements.length} ${elements.length === 1 ? 'element' : 'elements'}`,
       debug,
     );
   }