@ape-egg/vibe 1.0.5 → 1.1.2

package/compiler/src/parser/html.rs

@@ -0,0 +1,335 @@
+use std::fs;
+use std::path::Path;
+use std::collections::{HashMap, HashSet};
+use thiserror::Error;
+
+use super::element::{Element, ElementCache};
+
+#[derive(Error, Debug)]
+pub enum ParseError {
+    #[error("Failed to read file {path}: {source}")]
+    ReadError {
+        path: String,
+        #[source]
+        source: std::io::Error,
+    },
+    #[error("Element not found: {0}")]
+    #[allow(dead_code)]
+    ElementNotFound(String),
+}
+
+pub struct HtmlParser {
+    components_dir: std::path::PathBuf,
+    cache: ElementCache,
+}
+
+impl HtmlParser {
+    pub fn new(components_dir: std::path::PathBuf) -> Self {
+        Self {
+            components_dir,
+            cache: ElementCache::new(),
+        }
+    }
+
+    /// Load all elements from the elements directory
+    pub fn load_elements(&mut self) -> Result<(), ParseError> {
+        if !self.components_dir.exists() {
+            return Ok(()); // No elements directory is fine
+        }
+
+        self.load_elements_recursive(&self.components_dir.clone())
+    }
+
+    fn load_elements_recursive(&mut self, dir: &Path) -> Result<(), ParseError> {
+        let entries = fs::read_dir(dir).map_err(|e| ParseError::ReadError {
+            path: dir.display().to_string(),
+            source: e,
+        })?;
+
+        for entry in entries.flatten() {
+            let path = entry.path();
+
+            if path.is_dir() {
+                self.load_elements_recursive(&path)?;
+            } else if path.extension().map_or(false, |ext| ext == "html") {
+                let tag_name = path
+                    .file_stem()
+                    .and_then(|s| s.to_str())
+                    .unwrap_or("")
+                    .to_string();
+
+                let content = fs::read_to_string(&path).map_err(|e| ParseError::ReadError {
+                    path: path.display().to_string(),
+                    source: e,
+                })?;
+
+                let element = Element::new(tag_name.clone(), path.clone(), content);
+                self.cache.insert(tag_name, element);
+            }
+        }
+
+        Ok(())
+    }
+
+    /// Get an element by tag name
+    pub fn _get_element(&self, tag_name: &str) -> Option<&Element> {
+        self.cache.get(tag_name)
+    }
+
+    /// Get all loaded elements
+    #[allow(dead_code)]
+    pub fn elements(&self) -> &ElementCache {
+        &self.cache
+    }
+
+    /// Process HTML content: transform custom tags to <component>, optionally inline, apply accessibility
+    pub fn process_html(
+        &self,
+        content: &str,
+        accessibility: bool,
+        exclude_tags: &[String],
+        elements_as_is: bool,
+        components_dir: &str,
+    ) -> String {
+        self.process_html_with_cache(content, accessibility, exclude_tags, elements_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,
+        external_cache: &HashMap<String, String>,
+    ) -> String {
+        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 2: If elements_as_is is false, recursively inline all <component> elements
+        if !elements_as_is {
+            result = self.inline_component_elements(&result, external_cache);
+        }
+
+        // Step 3: Accessibility transform if requested
+        if accessibility {
+            result = transform_custom_tags_to_divs(&result, exclude_tags);
+        }
+
+        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);
+            }
+        }
+
+        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
+
+        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();
+
+            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());
+
+                // Parse attributes into a map (prop_name -> prop_value)
+                let props = Self::parse_props(&attrs_str);
+
+                (full_match.start(), full_match.end(), src.to_string(), props, slot_content)
+            }).collect();
+
+            if !matches.is_empty() {
+                changed = true;
+            }
+
+            // 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);
+                    }
+
+                    // Replace <slot></slot> with slot content if present
+                    if let Some(ref slot) = slot_content {
+                        if !slot.trim().is_empty() {
+                            replacement = replacement.replace("<slot></slot>", slot);
+                            replacement = replacement.replace("<slot/>", slot);
+                            replacement = replacement.replace("<slot />", slot);
+                        }
+                    }
+
+                    result.replace_range(*start..*end, &replacement);
+                }
+                // If not found in cache or internal elements, leave as-is
+            }
+        }
+
+        result
+    }
+
+    /// Parse component props from attributes string
+    /// Example: ` headline="@[pageTitle]" theme="dark"` -> {"headline": "@[pageTitle]", "theme": "dark"}
+    fn parse_props(attrs_str: &str) -> HashMap<String, String> {
+        let mut props = HashMap::new();
+
+        // Match attribute="value" pairs
+        let attr_re = regex::Regex::new(r#"(\w+)="([^"]*)""#).unwrap();
+
+        for cap in attr_re.captures_iter(attrs_str) {
+            if let (Some(name), Some(value)) = (cap.get(1), cap.get(2)) {
+                props.insert(name.as_str().to_string(), value.as_str().to_string());
+            }
+        }
+
+        props
+    }
+}
+
+/// Transform custom HTML elements to divs with classes
+fn transform_custom_tags_to_divs(content: &str, exclude_tags: &[String]) -> String {
+    let mut result = content.to_string();
+
+    // Standard HTML5 elements (should not be transformed)
+    let standard_tags: HashSet<&str> = [
+        "a", "abbr", "address", "area", "article", "aside", "audio",
+        "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button",
+        "canvas", "caption", "cite", "code", "col", "colgroup",
+        "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt",
+        "em", "embed",
+        "fieldset", "figcaption", "figure", "footer", "form",
+        "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html",
+        "i", "iframe", "img", "input", "ins",
+        "kbd",
+        "label", "legend", "li", "link",
+        "main", "map", "mark", "menu", "meta", "meter",
+        "nav", "noscript",
+        "object", "ol", "optgroup", "option", "output",
+        "p", "param", "picture", "pre", "progress",
+        "q",
+        "rp", "rt", "ruby",
+        "s", "samp", "script", "search", "section", "select", "slot", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg",
+        "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track",
+        "u", "ul",
+        "var", "video",
+        "wbr",
+    ].into_iter().collect();
+
+    // Find all custom tags and transform them
+    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
+    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)
+                && !custom_tags.contains(&tag)
+            {
+                custom_tags.push(tag);
+            }
+        }
+    }
+
+    // Transform each custom tag
+    for tag in custom_tags {
+        // Opening tag: <custom-tag attrs> -> <div class="custom-tag" attrs>
+        let open_re = regex::Regex::new(&format!(r"<{}([^>]*)>", regex::escape(&tag))).unwrap();
+        result = open_re
+            .replace_all(&result, format!("<div class=\"{}\"$1>", tag).as_str())
+            .to_string();
+
+        // Closing tag: </custom-tag> -> </div>
+        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(&tag))).unwrap();
+        result = close_re.replace_all(&result, "</div>").to_string();
+    }
+
+    result
+}

package/compiler/src/parser/mod.rs

@@ -0,0 +1,8 @@
+pub mod html;
+mod element;
+
+pub use html::HtmlParser;
+#[allow(unused_imports)]
+pub use html::ParseError;
+#[allow(unused_imports)]
+pub use element::Element;

package/index.js

@@ -1,248 +1,2 @@
-import state from './state.js';
-import parse from './parse.js';
-import link from './link.js';
-import hydrate, { setPreviousState } from './hydrate.js';
-import affected from './affected.js';
-import { deepMerge, hash } from './utils.js';
-import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
-import { renderAllConditionals } from './conditionals.js';
-import { NON_REACTIVE_ELEMENTS } from './constants.js';
-
-// Wire up cross-module dependency after all modules are loaded
-setRenderAllConditionals(renderAllConditionals);
-
-// Check if node itself or any ancestor is non-reactive or dehydrated
-const isNonReactiveOrInside = (node) => {
-  let current = node;
-  while (current && current !== document.body) {
-    if (NON_REACTIVE_ELEMENTS.includes(current.nodeName)) {
-      return true;
-    }
-    if (current.hasAttribute?.('dehydrate')) {
-      return true;
-    }
-    current = current.parentElement;
-  }
-  return false;
-};
-
-// Navigate tree using dot notation (handles .children at each level)
-const navigateTree = (tree, path) => {
-  if (!path) return tree;
-  return path.split('.').reduce((node, key) => node?.children?.[key], tree);
-};
-
-// Get or create a node in the tree at the given path
-const ensureNode = (tree, path) => {
-  const keys = path.split('.');
-  return keys.reduce((node, key) => {
-    if (!node.children[key]) {
-      node.children[key] = { children: {} };
-    }
-    return node.children[key];
-  }, tree);
-};
-
-const main = (s, attrName = 'vibe') => {
-  // Find element(s) with the specified attribute
-  const elements = document.querySelectorAll(`[${attrName}]`);
-
-  if (elements.length === 0) {
-    console.info(`[vibe] No element found with attribute "${attrName}". Falling back to body.`);
-  } else if (elements.length > 1) {
-    console.info(
-      `[vibe] Multiple elements (${elements.length}) found with attribute "${attrName}". Hydrating the first one.`,
-    );
-  }
-
-  const rootElement = elements[0] || document.body;
-  let parsedTree = parse(rootElement);
-  let linkList = link(parsedTree);
-
-  // Store previous state for comparison
-  let previousState = {};
-
-  // Lifecycle hooks that users can subscribe to
-  const hooks = {
-    afterUpdate: [],
-    afterDomMutation: [],
-  };
-
-  // Observer reference and callback - defined here so state handler can access processMutations
-  let observer = null;
-  let processMutations = null;
-
-  const $ = state(s, (newState) => {
-    const mergedState = deepMerge($, newState);
-    const affectedElements = affected(parsedTree, previousState, mergedState);
-
-    // Capture pending mutations before disconnecting (takeRecords clears the queue)
-    let pendingMutations = [];
-    if (observer) {
-      pendingMutations = observer.takeRecords();
-      observer.disconnect();
-    }
-
-    hydrate(affectedElements, mergedState, linkList);
-
-    if (observer) {
-      observer.observe(rootElement, {
-        attributes: false,
-        characterData: false,
-        childList: true,
-        subtree: true,
-      });
-
-      // Process mutations that were pending before we disconnected
-      if (pendingMutations.length > 0 && processMutations) {
-        processMutations(pendingMutations);
-      }
-    }
-
-    const prev = structuredClone(previousState);
-    previousState = { ...$, ...newState };
-    hooks.afterUpdate.forEach((callback) => callback(structuredClone({ ...$ }), prev));
-  });
-
-  // Add hook subscription method (non-enumerable so it won't be spread/cloned with state)
-  Object.defineProperty($, 'on', {
-    value: (event, callback) => {
-      if (hooks[event]) {
-        hooks[event].push(callback);
-      }
-      return () => (hooks[event] = hooks[event].filter((cb) => cb !== callback));
-    },
-    enumerable: false,
-  });
-
-  // Initial hydration
-  const affectedElements = affected(parsedTree, $, $);
-  hydrate(affectedElements, $, linkList);
-
-  // Render all iterations and conditionals after initial hydration
-  setPreviousState($);
-  previousState = { ...$ };
-  renderAllIterations(parsedTree, $, linkList);
-  renderAllConditionals(parsedTree, $, linkList);
-
-  // Define observer callback as named function so we can call it manually for pending mutations
-  processMutations = (mutations) => {
-    // Early exit if no mutations to process (common case)
-    if (mutations.length === 0) return;
-
-    let hadChanges = false;
-    let parsedParents = null; // Lazy init - only create Set when needed
-
-    mutations.forEach(({ addedNodes, removedNodes, target }) => {
-      removedNodes.forEach((node) => {
-        const entry = Object.entries(linkList).find(([_, element]) => element === node);
-
-        // Skip nodes that aren't tracked (e.g., iteration-generated nodes or nodes outside reactive scope)
-        if (!entry) return;
-
-        const [dotAnnotation] = entry;
-        delete linkList[dotAnnotation];
-
-        const dotPath = dotAnnotation.split('.');
-        const name = dotPath.pop();
-        const parentDotAnnotation = dotPath.join('.');
-
-        const picked = navigateTree(parsedTree, parentDotAnnotation);
-
-        // If we can't navigate to the parent, skip
-        if (!picked || !picked.element) return;
-
-        // Update parent's parsed HTML (only once per parent)
-        if (!parsedParents) parsedParents = new Set();
-        if (!parsedParents.has(picked)) {
-          const { parsed } = parse(picked.element);
-          picked.parsed = parsed;
-          parsedParents.add(picked);
-        }
-
-        // Remove the node from parent's children
-        delete picked.children[name];
-
-        hadChanges = true;
-      });
-
-      addedNodes.forEach((node) => {
-        // Skip if node itself or any ancestor is non-reactive
-        if (isNonReactiveOrInside(node)) {
-          return;
-        }
-
-        const entry = Object.entries(linkList).find(([_, element]) => element === target);
-
-        // If parent isn't tracked, this node is outside the reactive scope
-        if (!entry) return;
-
-        const [dotAnnotation] = entry;
-        const picked = navigateTree(parsedTree, dotAnnotation);
-
-        // If we can't navigate to the parent in the tree, skip
-        if (!picked) return;
-
-        // If parent has no element reference, re-parse from the actual DOM element
-        if (!picked.element) {
-          picked.element = target;
-        }
-
-        // Parse the newly added node
-        const name = `${node.nodeName.toLowerCase()}_${hash()}`;
-        const parsedNode = parse(node);
-
-        // Update parent's parsed HTML (only once per parent)
-        if (!parsedParents) parsedParents = new Set();
-        if (!parsedParents.has(picked)) {
-          const { parsed } = parse(picked.element);
-          picked.parsed = parsed;
-          parsedParents.add(picked);
-        }
-
-        // Add the parsed node to parent's children
-        picked.children[name] = parsedNode;
-
-        linkList[`${dotAnnotation}.${name}`] = node;
-
-        // Only hydrate the newly added node and its descendants, not the entire tree
-        // Use empty object as "previous state" so all bindings in new node are considered affected
-        const affectedElements = affected(parsedNode, {}, $);
-
-        hydrate(affectedElements, $, linkList);
-
-        // Process iterations and conditionals in the newly added node
-        renderAllIterations(parsedNode, $, linkList);
-        renderAllConditionals(parsedNode, $, linkList);
-
-        hadChanges = true;
-      });
-    });
-
-    // Fire hooks once after all mutations are processed (not per-node)
-    if (hadChanges) {
-      hooks.afterDomMutation.forEach((callback) => callback());
-    }
-  };
-
-  observer = new MutationObserver(processMutations);
-
-  observer.observe(rootElement, {
-    attributes: false,
-    characterData: false,
-    childList: true,
-    subtree: true,
-    attributeOldValue: false,
-    characterDataOldValue: false,
-  });
-
-  // Force reflow - ensures layout is applied before transitions re-enable
-  rootElement.offsetHeight;
-
-  // Remove the vibe attribute to reveal content and enable transitions
-  rootElement.removeAttribute(attrName);
-
-  return $;
-};
-
-export default main;
+// Re-export from runtime for backwards compatibility
+export { default } from './runtime/index.js';

package/package.json

@@ -1,10 +1,32 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.0.5",
+  "version": "1.1.2",
   "type": "module",
-  "description": "Runtime-first reactivity",
+  "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",
   "homepage": "https://vibe.korte.kim",
+  "exports": {
+    ".": "./index.js",
+    "./runtime": "./runtime/index.js",
+    "./compiler": "./compiler/bin/vibe-compile.js"
+  },
+  "bin": {
+    "vibe": "./compiler/bin/vibe-compile.js"
+  },
+  "files": [
+    "index.js",
+    "runtime/",
+    "compiler/bin/",
+    "compiler/native/",
+    "compiler/src/Cargo.lock",
+    "compiler/src/Cargo.toml",
+    "compiler/src/compiler/",
+    "compiler/src/config.rs",
+    "compiler/src/main.rs",
+    "compiler/src/parser/",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "keywords": [
     "reactive",
     "framework",
@@ -12,7 +34,8 @@
     "ui",
     "mutation-observer",
     "proxy",
-    "minimalistic"
+    "minimalistic",
+    "compiler"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"