@ape-egg/vibe 1.1.2 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,145 @@
 # Changelog
 
+## [1.3.0] - 2025-02-06
+
+### Added
+
+- **Static Analysis Compiler**: Replaced browser-based manifest generation with pure Rust static analysis
+  - New compiler modules: `state_extractor.rs`, `manifest_builder.rs`, `value_stamper.rs`
+  - ~3000x performance improvement (10-100 seconds → ~6ms for manifest generation)
+  - Pre-rendering support for iterations with initial state values
+  - Graceful handling of unparseable state (skips files instead of failing entire compilation)
+
+- **Enhanced vibe() and component() API**:
+  - Added `config` parameter (second argument) for runtime configuration
+  - Added `targetSelector` parameter (third argument) for custom root element selection
+  - Multiple calls accumulate state, config/targetSelector use "first wins" strategy
+  - Example: `vibe({ count: 0 }, { debug: true }, 'body')`
+
+- **Expanded Compilation Scope**: Compiler now processes all HTML files recursively
+  - Compiles all `<source-root>/**/*.html` (excluding `components/` directory)
+  - Generates manifests for all `<output-dir>/**/*.html` (excluding `components/`)
+  - Previously limited to `<source-root>/pages/` only
+
+### Changed
+
+- **Iteration Restoration**: Improved DOM restoration algorithm
+  - Uses TreeWalker to find iteration comment pairs (more robust)
+  - Avoids index-based lookup that breaks after DOM structure changes
+  - Runtime now fully controls iteration nodes (skipped during manifest merge)
+
+- **Compiler Output**: Enhanced user experience with better formatting
+  - Manifest generation occurs before "Compilation successful!" message
+  - Verbose mode (`--verbose`) shows only warnings/errors for manifest generation
+  - Clean title: "Generating manifests (static analysis)"
+  - Summary format: `Generated manifests (X files, Y skipped) in Zms`
+  - Positioned between "Compiled HTML" and "Copied files" in output
+
+- **Debug Logging**: Refined hyperspeed detection messages
+  - Removed redundant path-specific log
+  - Changed to: "Detected vibe-hyperspeed. Applying pre-compiled manifest."
+
+### Removed
+
+- **Browser Automation Dependencies**: Eliminated heavy runtime dependencies
+  - Removed: chromiumoxide, tiny_http, tokio, futures
+  - Deleted 414 lines of browser automation code (`manifest.rs`)
+  - Pure Rust implementation with no external processes or async complexity
+
+### Fixed
+
+- Manifest merge conflicts between hyperspeed (pre-compiled) and runtime trees
+- Index shifting bugs during restoration phase that caused key mismatches
+- Iteration rendering producing duplicate items (3x3 instead of 3)
+- Pre-rendered iteration content not being properly replaced with reactive templates
+
+### Performance
+
+- Manifest generation: 10-100 seconds → ~6ms (~3000x faster)
+- Total compilation time: Typically completes in 200-300ms for medium projects
+- Zero browser startup overhead
+- Reduced memory footprint (no Chromium instance)
+
+---
+
+## [1.2.0] - 2026-02-03
+
+### Added
+
+- **Component state isolation**: Components now have their own isolated state using `<script type="component">` blocks
+  - Each component gets a unique ID (`_cTIMESTAMP_RANDOM`) automatically generated and stored in `data-vibe-component-id` attribute
+  - Component state lives at `$[componentId].property` in the global state object
+  - Variable declarations (`let count = 0`) are automatically transformed to property assignments (`this.count = 0`)
+  - Clean separation between global state and component-specific state
+  - Example component (subject to change!):
+    ```html
+    <script type="component">
+      let count = 0;
+      let increment = () => { this.count++; };
+    </script>
+    <button onclick="this.increment()">Clicked @[this.count] times</button>
+    ```
+- **`this.property` syntax**: Reference component-scoped state from anywhere inside a component
+  - Works in bindings: `@[this.count]`
+  - Works in attributes: `value="@[this.inputValue]"`
+  - Works in event handlers: `onclick="this.increment()"`
+  - Works in name bindings: `@[this.iconName]`
+  - Works in conditionals: `<!-- if this.isVisible -->`
+  - Works in iterations: `<!-- each this.items as item -->`
+  - Runtime automatically resolves `this.property` → `$['componentId'].property`
+- **Component script execution**: `<script type="component">` blocks execute in their own scope
+  - Scripts run when component HTML is fetched (runtime `<component>` resolution)
+  - State is registered in global `$` object under component ID
+  - All siblings after the script tag inherit the component ID via `data-vibe-component-id` attribute
+  - Multiple component scripts in same HTML create separate component instances with unique IDs
+- **Props and slots integration**: Component state works seamlessly with existing `<component>` features
+  - Props can set component state: `<component src="/card.html" theme="@[userTheme]">`
+  - Props work with `this.` references: `@[this.theme]` inside card.html
+  - Slots work inside component-scoped HTML
+  - Components can be nested with isolated state at each level
+
+### Changed
+
+- **Component ID tagging**: DOM elements are now tagged with `data-vibe-component-id` during component processing (previously only scripts had this attribute)
+  - All siblings after a `<script type="component">` get tagged with the same component ID
+  - Tagging stops when hitting another component script or end of HTML
+  - Enables `this.property` resolution in any context (bindings, events, conditionals, iterations)
+- **Event handler rewriting**: Event handlers with `this.property` are now rewritten at parse time
+  - `onclick="this.increment()"` → `onclick="$['_c123_abc'].increment()"`
+  - DOM properties (like `this.value`, `this.checked`) are preserved and not rewritten
+  - Prevents conflicts between component state access and native DOM properties
+
+### Technical Details
+
+- **Component state lifecycle**:
+  1. `<component src="/path.html">` fetches HTML
+  2. HTML is parsed in temporary container
+  3. `<script type="component">` blocks are found and executed
+  4. Each script generates unique component ID
+  5. Script and following siblings are tagged with `data-vibe-component-id`
+  6. Component state is registered at `$[componentId]`
+  7. Props are applied (with `this.` reference rewriting)
+  8. Slots are replaced
+  9. Transformed HTML replaces `<component>` element
+  10. MutationObserver triggers reactive hydration with component context
+- **`this.property` resolution**: Helper function `resolveThisPath()` in utils.js walks up DOM tree to find nearest `data-vibe-component-id`, then rewrites path from `this.property` → `componentId.property`
+- **Expression evaluation**: `evalInScope()` in utils.js handles both global (`$.property`) and component-scoped (`$['componentId'].property`) state access, with case-insensitive fallback for HTML-lowercased attribute names
+
+---
+
+## [1.1.3] - 2026-02-02
+
+### Added
+
+- **MutationObserver performance optimization**: Fast filter with short-circuit evaluation
+  - New `shouldProcessNode()` function checks for Vibe syntax before expensive processing
+  - Short-circuits on first match: most Vibe nodes contain `@[`, so check exits immediately
+  - Filters out third-party framework mutations (React, Vue, etc.) with cheap string operations
+  - Only walks DOM tree for nodes that actually contain Vibe syntax (`@[`, `<!-- each`, `<!-- if`, `<component>`)
+  - Enables efficient coexistence with other frameworks on the same page
+
+---
+
 ## [1.1.2] - 2026-02-01
 
 ### Fixed

package/README.md

@@ -18,20 +18,18 @@ The core reactive runtime. Works directly in the browser without any build tools
 
 ```html
 <html>
-<head>
-  <link rel="stylesheet" href="@ape-egg/vibe/vibe.css">
-  <script type="module">
-    import state from "@ape-egg/vibe";
-    // Attaches to element with attribute "vibe" by default
-    window.$ = state({ name: "World", count: 0 });
-  </script>
-</head>
-<body vibe>
-
-<h1>Hello, @[name]!</h1>
-<button onclick="$.count++">Clicked @[count] times</button>
-
-</body>
+  <head>
+    <link rel="stylesheet" href="./node_modules/@ape-egg/vibe/vibe.css" />
+    <script type="module">
+      import state from './node_modules/@ape-egg/vibe/runtime/index.js';
+      // Attaches to element with attribute "vibe" by default
+      window.$ = state({ name: 'World', count: 0 });
+    </script>
+  </head>
+  <body vibe-fouc>
+    <h1>Hello, @[name]!</h1>
+    <button onclick="$.count++">Clicked @[count] times</button>
+  </body>
 </html>
 ```
 
@@ -49,12 +47,14 @@ The CSS targets `[vibe]` and hides it until hydration completes. Once Vibe finis
 Vibe supports bindings in three positions:
 
 **Text content** — Inside element tags:
+
 ```html
 <div>@[firstName] @[lastName]</div>
 <h1>Hello, @[name]!</h1>
 ```
 
 **Attribute values** — In attribute value position:
+
 ```html
 <input value="@[username]" />
 <div class="@[theme]" style="color: @[color]"></div>
@@ -62,15 +62,19 @@ Vibe supports bindings in three positions:
 ```
 
 **Attribute names** — In attribute name position (useful for dynamic attributes):
+
 ```html
 <icon @[iconName]></icon>
 <button @[state]>Click me</button>
 ```
 
 **CSS** — Bindings also work in style tags:
+
 ```html
 <style>
-  .box { background: @[themeColor]; }
+  .box {
+    background: @[themeColor];
+  }
 </style>
 ```
 
@@ -78,7 +82,7 @@ Vibe supports bindings in three positions:
 
 ```html
 <!-- each items as item, index -->
-  <li>@[index]: @[item]</li>
+<li>@[index]: @[item]</li>
 <!-- /each -->
 ```
 
@@ -86,9 +90,9 @@ Nested iteration with dot paths:
 
 ```html
 <!-- each categories as category -->
-  <!-- each category.items as item -->
-    <span>@[item.name]</span>
-  <!-- /each -->
+<!-- each category.items as item -->
+<span>@[item.name]</span>
+<!-- /each -->
 <!-- /each -->
 ```
 
@@ -96,9 +100,9 @@ Nested iteration with dot paths:
 
 ```html
 <!-- if user.isAdmin -->
-  <admin-badge>Admin</admin-badge>
+<admin-badge>Admin</admin-badge>
 <!-- else -->
-  <span>User</span>
+<span>User</span>
 <!-- /if -->
 ```
 
@@ -126,9 +130,9 @@ Vibe uses recursive proxies to detect changes at any nesting level:
 
 ```javascript
 // All of these trigger reactive updates:
-$.user.name = "Alice";
+$.user.name = 'Alice';
 $.todos[2].completed = true;
-$.config.theme.colors.primary = "#007bff";
+$.config.theme.colors.primary = '#007bff';
 ```
 
 No need for immutable update patterns or spread operators. Just mutate and Vibe handles the rest.
@@ -211,6 +215,7 @@ Add to your `package.json`:
 ```
 
 **Defaults** (when no config):
+
 - `source`: `./`
 - `output`: `./compiled`
 - `components`: `<source>/components`
@@ -238,6 +243,7 @@ By default, the compiler creates deployable output by installing production depe
 3. Removes `package.json` and lockfile from output (cleanup)
 
 This ensures:
+
 - Compiled output only includes runtime dependencies (from `dependencies`, not `devDependencies`)
 - Local `node_modules` is never modified
 - Faster than copying (no intermediate copy step)
@@ -294,6 +300,7 @@ cp target/release/vibe-compiler ../native/vibe-compiler-darwin-arm64
 ```
 
 Supported platforms:
+
 - `vibe-compiler-darwin-arm64` (macOS Apple Silicon) ✅ Included
 - `vibe-compiler-darwin-x64` (macOS Intel)
 - `vibe-compiler-linux-x64`

package/compiler/src/compiler/compile.rs

@@ -100,6 +100,12 @@ pub struct CompileStats {
     pub components_as_is: bool,
 }
 
+pub struct ManifestStats {
+    pub pages_processed: usize,
+    pub pages_skipped: usize,
+    pub total_time_ms: f64,
+}
+
 #[derive(Debug, Clone, PartialEq)]
 enum FileOperation {
     Compiled,
@@ -420,7 +426,13 @@ impl Compiler {
 
         // Track compile and copy times separately
         let compile_start = Instant::now();
-        self.process_directory(&self.config.source.clone(), &parser, "", &mut stats)?;
+
+        // Process all HTML files in source (excluding components directory)
+        self.process_directory_html_only(&self.config.source.clone(), &parser, "", &mut stats)?;
+
+        // Process source directory for assets (CSS, JS, images, etc.)
+        self.process_directory_assets_only(&self.config.source.clone(), "", &mut stats)?;
+
         let process_time = compile_start.elapsed();
 
         // Print verbose output after processing (components first, then HTML, then copied)
@@ -493,8 +505,112 @@ impl Compiler {
         Ok(stats)
     }
 
-    /// Recursively walk source, compile HTML, copy CSS/JS (MIRROR_MODE)
-    fn process_directory(
+    /// Generate manifest for a single file
+    fn generate_file_manifest(
+        html: &str,
+        html_path: &Path,
+        output_dir: &Path,
+        relative_path: &str,
+        _verbose: bool,
+    ) -> Result<(), String> {
+        use crate::compiler::state_extractor::StateExtractor;
+        use crate::compiler::manifest_builder::ManifestBuilder;
+        use crate::compiler::value_stamper::ValueStamper;
+
+        // Extract state
+        let state = StateExtractor::extract_from_html(html)?;
+
+        // Build manifest
+        let manifest_builder = ManifestBuilder::new();
+        let manifest = manifest_builder.build_from_html(html, &state)?;
+
+        // Stamp values (pre-render)
+        let stamper = ValueStamper::new(&state);
+        let pre_rendered = stamper.stamp_html(html.to_string())?;
+
+        // Write pre-rendered HTML
+        fs::write(html_path, pre_rendered)
+            .map_err(|e| format!("Failed to write HTML: {}", e))?;
+
+        // Write manifest
+        let manifest_path = output_dir
+            .join("vibe-hyperspeed")
+            .join(format!("{}.manifest.js", relative_path));
+
+        // Ensure directory exists
+        if let Some(parent) = manifest_path.parent() {
+            fs::create_dir_all(parent)
+                .map_err(|e| format!("Failed to create manifest directory: {}", e))?;
+        }
+
+        let manifest_json = serde_json::to_string(&manifest)
+            .map_err(|e| format!("Failed to serialize manifest: {}", e))?;
+
+        let manifest_js = format!(
+            "// Pre-compiled manifest for /{}\n// Generated by Vibe compiler\n\nexport default {};\n",
+            relative_path,
+            manifest_json
+        );
+
+        fs::write(&manifest_path, manifest_js)
+            .map_err(|e| format!("Failed to write manifest: {}", e))?;
+
+        Ok(())
+    }
+
+    /// Generate manifests (called separately from main.rs if needed)
+    pub fn generate_manifests(&self) -> Result<ManifestStats, CompileError> {
+
+        let start = Instant::now();
+        let mut pages_processed = 0;
+        let mut pages_skipped = 0;
+
+        if self.verbose {
+            println!("\nGenerating manifests (static analysis)");
+        }
+
+        // Find all HTML files in compiled output (excluding components directory)
+        let html_files = self.find_all_html_files(&self.config.output)?;
+
+        for html_path in html_files {
+            let relative_path = html_path.strip_prefix(&self.config.output)
+                .unwrap()
+                .to_str()
+                .unwrap();
+
+            // Read compiled HTML
+            let html = fs::read_to_string(&html_path)
+                .map_err(|e| CompileError::ReadError {
+                    path: html_path.display().to_string(),
+                    source: e,
+                })?;
+
+            // Try to generate manifest for this file (skip on error)
+            match Self::generate_file_manifest(&html, &html_path, &self.config.output, relative_path, self.verbose) {
+                Ok(()) => {
+                    pages_processed += 1;
+                }
+                Err(e) => {
+                    pages_skipped += 1;
+                    if self.verbose {
+                        println!("  Skipped ({}): {}", e, relative_path);
+                    }
+                    // Don't fail compilation, just skip this file's manifest
+                }
+            }
+        }
+
+        let total_time_ms = start.elapsed().as_millis() as f64;
+
+        Ok(ManifestStats {
+            pages_processed,
+            pages_skipped,
+            total_time_ms,
+        })
+    }
+
+    /// Process directory for HTML files only (used for pages directory)
+    fn process_directory_html_only(
         &mut self,
         dir: &Path,
         parser: &HtmlParser,
@@ -516,7 +632,84 @@ impl Compiler {
                     continue;
                 }
 
-                // Skip node_modules (handled separately after compilation)
+                // Skip components directory
+                if file_name == self.config.components {
+                    continue;
+                }
+
+                // Recurse into subdirectory
+                let new_relative = if relative_path.is_empty() {
+                    file_name.to_string()
+                } else {
+                    format!("{}/{}", relative_path, file_name)
+                };
+
+                self.process_directory_html_only(&path, parser, &new_relative, stats)?;
+            } else if path.extension().and_then(|e| e.to_str()) == Some("html") {
+                let (internal, external, component_srcs) = self.compile_html_file(&path, parser, relative_path)?;
+                stats.files_compiled += 1;
+                stats.internal_components_total += internal;
+                stats.external_components_total += external;
+
+                // Track unique components
+                for src in &component_srcs {
+                    self.unique_components.insert(src.clone());
+                }
+
+                // Build component relationships and count occurrences before borrowing logger
+                let (component_relationships, all_srcs) = if self.logger.is_some() && !component_srcs.is_empty() {
+                    let relationships = self.build_component_relationships(&component_srcs);
+                    (Some(relationships), Some(component_srcs))
+                } else {
+                    (None, None)
+                };
+
+                if let Some(ref mut logger) = self.logger {
+                    logger.log(&path, FileOperation::Compiled, &self.config.source);
+
+                    // Log each component occurrence (for counting)
+                    if let Some(all_srcs) = all_srcs {
+                        for src in all_srcs {
+                            logger.log_component_occurrence(src);
+                        }
+                    }
+
+                    // Log unique relationships (for tree structure)
+                    if let Some(relationships) = component_relationships {
+                        for (src, children) in relationships {
+                            logger.log_component_children(src, children);
+                        }
+                    }
+                }
+            }
+        }
+
+        Ok(())
+    }
+
+    /// Process directory for assets only (CSS, JS, images, etc.) - skip HTML
+    fn process_directory_assets_only(
+        &mut self,
+        dir: &Path,
+        relative_path: &str,
+        stats: &mut CompileStats,
+    ) -> Result<(), CompileError> {
+        let entries = fs::read_dir(dir).map_err(|e| CompileError::ReadError {
+            path: dir.display().to_string(),
+            source: e,
+        })?;
+
+        for entry in entries.flatten() {
+            let path = entry.path();
+            let file_name = path.file_name().unwrap().to_str().unwrap();
+
+            if path.is_dir() {
+                // Skip special directories
+                if SKIP_DIRECTORIES.contains(&file_name) {
+                    continue;
+                }
+
+                // Skip node_modules (handled separately)
                 if file_name == "node_modules" {
                     continue;
                 }
@@ -543,55 +736,15 @@ impl Compiler {
                     format!("{}/{}", relative_path, file_name)
                 };
 
-                self.process_directory(&path, parser, &new_relative, stats)?;
+                self.process_directory_assets_only(&path, &new_relative, stats)?;
             } else if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
-                match ext {
-                    "html" => {
-                        let (internal, external, component_srcs) = self.compile_html_file(&path, parser, relative_path)?;
-                        stats.files_compiled += 1;
-                        stats.internal_components_total += internal;
-                        stats.external_components_total += external;
-
-                        // Track unique components
-                        for src in &component_srcs {
-                            self.unique_components.insert(src.clone());
-                        }
-
-                        // Build component relationships and count occurrences before borrowing logger
-                        let (component_relationships, all_srcs) = if self.logger.is_some() && !component_srcs.is_empty() {
-                            let relationships = self.build_component_relationships(&component_srcs);
-                            (Some(relationships), Some(component_srcs))
-                        } else {
-                            (None, None)
-                        };
-
-                        if let Some(ref mut logger) = self.logger {
-                            logger.log(&path, FileOperation::Compiled, &self.config.source);
-
-                            // Log each component occurrence (for counting)
-                            if let Some(all_srcs) = all_srcs {
-                                for src in all_srcs {
-                                    logger.log_component_occurrence(src);
-                                }
-                            }
-
-                            // Log unique relationships (for tree structure)
-                            if let Some(relationships) = component_relationships {
-                                for (src, children) in relationships {
-                                    logger.log_component_children(src, children);
-                                }
-                            }
-                        }
-                    }
-                    // MIRROR_MODE: Copy CSS/JS as-is
-                    ext if MIRROR_EXTENSIONS.contains(&ext) => {
-                        self.copy_file(&path, relative_path)?;
-                        stats.files_copied += 1;
-                        if let Some(ref mut logger) = self.logger {
-                            logger.log(&path, FileOperation::Copied, &self.config.source);
-                        }
+                // Only copy non-HTML assets
+                if ext != "html" && MIRROR_EXTENSIONS.contains(&ext) {
+                    self.copy_file(&path, relative_path)?;
+                    stats.files_copied += 1;
+                    if let Some(ref mut logger) = self.logger {
+                        logger.log(&path, FileOperation::Copied, &self.config.source);
                     }
-                    _ => {}
                 }
             }
         }