npm - @ape-egg/vibe - Versions diffs - 1.6.1 → 1.7.0 - Mend

@ape-egg/vibe 1.6.1 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/CHANGELOG.md +44 -1
package/README.md +19 -8
package/boot.js +11 -0
package/compiler/native/vibe-compiler-darwin-arm64 +0 -0
package/compiler/src/Cargo.lock +1 -1
package/compiler/src/Cargo.toml +1 -1
package/compiler/src/compiler/compile.rs +38 -12
package/compiler/src/compiler/component_tagger.rs +22 -3
package/compiler/src/compiler/value_stamper.rs +75 -5
package/compiler/src/compiler/watcher.rs +69 -2
package/compiler/src/config.rs +10 -0
package/compiler/src/main.rs +39 -15
package/compiler/src/parser/html.rs +61 -9
package/index.js +34 -5
package/llms.txt +1 -1
package/package.json +1 -1
package/runtime/cleanup.js +0 -9
package/runtime/component.js +14 -18
package/runtime/index.js +13 -2
package/runtime/iterate.js +63 -15
package/runtime/parse.js +3 -2
package/runtime/pre-compiled-manifest.js +111 -58

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,48 @@
 # Changelog
+## [1.7.0] - 2026-02-19
+### Fixed
+- **Watch mode stale component cache** - Incremental recompilation no longer uses stale component content
+  - Component cache is cleared before every recompile trigger, ensuring components are always re-read from disk
+  - Component cache and parser element cache are also invalidated immediately when a component file changes
+  - Fixes corrupted output (old event handlers, wrong attributes) that appeared on every watch-mode save after the first
+- **Custom element transform — nested hyphenated tags** (`elementsAsIs: false`)
+  - `<accordion-content>` inside `<accordion>` previously produced `<div class="accordion" -content>` due to the `<accordion>` regex partially matching the longer tag name
+  - Fixed by requiring whitespace or end-of-tag immediately after the tag name in the opening tag regex
+  - Tags are now also sorted by descending length so more specific names (e.g. `accordion-content`) are always processed before their prefixes (`accordion`)
+- **Custom element transform — existing class preserved** (`elementsAsIs: false`)
+  - `<crow class="i-should-preserve">` previously compiled to `<div class="crow">`, discarding the original class
+  - Existing `class="..."` is now merged: result is `<div class="crow i-should-preserve">`
+- **`elementsAsIs` config respected in dependency scanning**
+  - `fetch_components_for_files` and `fetch_all_components` were hardcoded to `elements_as_is: false`, ignoring the project config
+  - Both functions now correctly read `self.config.elements_as_is` and `self.config.reserved_elements`
+- **`vibe-dehydrate` protected during manifest stamping**
+  - Content inside `<template vibe-dehydrate>` was incorrectly processed during value stamping
+  - Dehydrated regions are now extracted before processing and restored afterwards
+- **Conditional evaluation errors handled gracefully**
+  - A failed `<!-- if ... -->` expression (undefined variable, syntax error) now defaults to `false` instead of crashing
+### Changed
+- **Lifecycle event API** — `vibe()` now returns an object that supports `.on(event, callback)` before boot completes
+  - `$.on('ready', cb)` — fires once after all components load and initial processing completes
+  - `$.on('afterUpdate', cb)` — fires on every state change
+  - `$.on('afterDomMutation', cb)` — fires after every DOM mutation batch
+  - Listeners registered before boot are queued and replayed once the runtime is ready
+- **Component `onComplete` timing** — deferred via `queueMicrotask` to give user code a chance to register listeners before the ready callback fires
+- **Iteration performance** — `cloneTreeNode` avoids spread operator; `nameBindings` now correctly carried through cloned iteration trees
+---
 ## [1.6.1] - 2026-02-12
 ### Fixed
@@ -540,7 +583,7 @@
 - **Iteration**: `<!-- each items as item, i -->` with efficient diffing
 - **Nested iteration**: `<!-- each category.items as item -->`
 - **Conditionals**: `<!-- if condition -->...<!-- else -->...<!-- /if -->`
-- **Dehydrate**: `<div dehydrate>` to skip reactive processing
+- **Dehydrate**: `<div vibe-dehydrate>` to skip reactive processing
 - **Expression evaluation**: `@[count * 2]`, `@[firstName + ' ' + lastName]`
 ### Performance

package/README.md CHANGED Viewed

@@ -23,9 +23,9 @@ The core reactive runtime. Works directly in the browser without any build tools
   <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 });
+      import vibe from './node_modules/@ape-egg/vibe/index.js';
+      vibe({ name: 'World', count: 0 });
     </script>
   </head>
   <body vibe-fouc>
@@ -123,7 +123,7 @@ Runtime component loading with props and slots:
 Skip reactive processing for an element:
 ```html
-<code dehydrate>@[this] displays literally</code>
+<code vibe-dehydrate>@[this] displays literally</code>
 ```
 ### Reserved Words & Gotchas
@@ -133,28 +133,35 @@ Vibe uses specific patterns and keywords that have special meaning. Avoid using
 #### Classes & Attributes
 - **`vibe-fouc`** — Class or attribute for FOUC (Flash of Unstyled Content) prevention. Automatically removed after hydration completes.
   ```html
-  <body vibe-fouc>  <!-- or class="vibe-fouc" -->
+  <body vibe-fouc>
+    <!-- or class="vibe-fouc" -->
+  </body>
   ```
 - **`vibe-dehydrate`** — Class or attribute to skip reactive processing. Useful for displaying literal `@[...]` syntax in documentation.
   ```html
-  <code vibe-dehydrate>@[variable]</code>  <!-- or class="vibe-dehydrate" -->
+  <code vibe-dehydrate>@[variable]</code>
+  <!-- or class="vibe-dehydrate" -->
   ```
 #### Element Names & Classes
 - **`<component>`** — Element name for component system. Used with `src` attribute for runtime component loading, or as a wrapper for inlined components.
   ```html
   <component src="/path/to/component.html"></component>
   ```
 - **`class="component"`** — Alternative syntax for components using standard HTML elements. Useful for HTML validation or accessibility.
   ```html
   <div class="component" src="/path/to/component.html"></div>
   ```
 - **`<slot>`** — Element name for component content injection. Gets replaced with content passed between component tags.
   ```html
   <!-- In component file -->
   <slot></slot>
@@ -168,6 +175,7 @@ Vibe uses specific patterns and keywords that have special meaning. Avoid using
 #### Comment Syntax
 - **`<!-- each -->`** / **`<!-- /each -->`** — Iteration block markers.
   ```html
   <!-- each items as item -->
   <!-- /each -->
@@ -190,9 +198,10 @@ Vibe uses specific patterns and keywords that have special meaning. Avoid using
 #### Global Properties
 - **`window.$`** — Global reactive state object. All reactive data should be accessed through this.
   ```javascript
   window.$ = state({ count: 0 });
-  $.count++;  // Triggers reactive updates
+  $.count++; // Triggers reactive updates
   ```
 - **`window.__vibeManifest`** — Internal manifest data. Used by the compiler for optimization. Don't modify.
@@ -208,13 +217,14 @@ Vibe uses specific patterns and keywords that have special meaning. Avoid using
 - **`vibe:ready`** — Custom event fired when Vibe completes initial hydration.
   ```javascript
   document.addEventListener('vibe:ready', () => {
-    console.log('Vibe is ready');
+    console.info('Vibe is ready');
   });
   ```
 #### Special Attribute Meanings
 - **`src`** on **`<component>`** or **`<div class="component">`** — Triggers runtime component fetching. Components without `src` are treated as inline wrappers.
   ```html
   <!-- Both work the same way -->
   <component src="/components/card.html"></component>
@@ -385,6 +395,7 @@ bunx vibe compile --watch
 ```
 Features:
 - **Incremental builds** — Only recompiles changed files (~100ms)
 - **Dependency tracking** — Changes to components trigger recompilation of pages using them
 - **Debounced** — 300ms debounce prevents excessive compilation during rapid changes

package/boot.js CHANGED Viewed

@@ -2,6 +2,7 @@
 // Used by both index.js (global state) and component.js (component state)
 import main from './runtime/index.js';
+import { getPendingListeners } from './index.js';
 let bootQueued = false;
 let booted = false;
@@ -39,6 +40,16 @@ export const boot = () => {
   // Boot with merged state
   window.$ = main(mergedState, config, targetSelector);
+  // Apply pending listeners from vibe instance
+  const pendingListeners = getPendingListeners();
+  if (pendingListeners) {
+    Object.keys(pendingListeners).forEach(event => {
+      pendingListeners[event].forEach(callback => {
+        window.$.on(event, callback);
+      });
+    });
+  }
   return window.$;
 };

package/compiler/native/vibe-compiler-darwin-arm64 CHANGED Viewed

Binary file

package/compiler/src/Cargo.lock CHANGED Viewed

@@ -2061,7 +2061,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 [[package]]
 name = "vibe-compiler"
-version = "1.6.1"
+version = "1.7.0"
 dependencies = [
  "clap",
  "colored",

package/compiler/src/Cargo.toml CHANGED Viewed

@@ -1,6 +1,6 @@
 [package]
 name = "vibe-compiler"
-version = "1.6.1"
+version = "1.7.0"
 edition = "2021"
 description = "Vibe framework compiler - compiles Vibe source files into optimized output"
 authors = ["Kim Korte"]

package/compiler/src/compiler/compile.rs CHANGED Viewed

@@ -40,9 +40,8 @@ const MIRROR_EXTENSIONS: &[&str] = &[
 // Files and directories to skip when walking source (supports glob patterns)
 // Note: Output directory is checked dynamically (not hardcoded here)
+// Note: Dotfiles are handled by starts_with('.') check in should_skip_path()
 pub const SKIP_FILES: &[&str] = &[
-    ".git",
-    ".claude",
     "target",            // Rust build artifacts
     "tests",             // Test files
     "test-results",
@@ -56,6 +55,11 @@ pub const SKIP_FILES: &[&str] = &[
 /// Check if a path should be skipped based on SKIP_FILES patterns
 pub fn should_skip_path(path: &Path, name: &str) -> bool {
+    // Check if name starts with dot (dotfiles/directories)
+    if name.starts_with('.') {
+        return true;
+    }
     // Check exact name match (for directories and simple filenames)
     if SKIP_FILES.contains(&name) {
         return true;
@@ -433,6 +437,11 @@ impl Compiler {
         }
     }
+    /// Clear all cached component content (forces re-fetch on next compile)
+    pub fn clear_component_cache(&mut self) {
+        self.component_cache.clear();
+    }
     pub fn compile(&mut self) -> Result<CompileStats, CompileError> {
         let mut stats = CompileStats {
             files_compiled: 0,
@@ -492,6 +501,19 @@ impl Compiler {
             }
         }
+        // Clean output directory if not in no-clean mode
+        if !self.config.no_clean && self.config.output.exists() {
+            if self.verbose {
+                println!("  Cleaning output directory: {}", self.config.output.display());
+            }
+            fs::remove_dir_all(&self.config.output).map_err(|e| {
+                CompileError::WriteError {
+                    path: self.config.output.display().to_string(),
+                    source: e,
+                }
+            })?;
+        }
         // Create output directory
         if !self.config.output.exists() {
             fs::create_dir_all(&self.config.output).map_err(|_| {
@@ -800,10 +822,9 @@ impl Compiler {
         // Stamp values (pre-render) AFTER building manifest
         // When components_as_is is true, skip stamping inside component elements (runtime will handle them)
         let stamper = ValueStamper::new(&state, components_as_is)?;
-        let mut pre_rendered = stamper.stamp_html(html.to_string())?;
+        let pre_rendered = stamper.stamp_html(html.to_string())?;
-        // Remove FOUC prevention since HTML is pre-rendered
-        pre_rendered = remove_fouc_prevention(pre_rendered);
+        // Note: FOUC removal happens in compile_html_file(), not here
         // Write pre-rendered HTML
         fs::write(html_path, pre_rendered)
@@ -1099,12 +1120,17 @@ impl Compiler {
         );
         // Minify if requested
-        let output = if self.config.minify {
+        let mut output = if self.config.minify {
             minify_html(&processed)
         } else {
             processed
         };
+        // Remove FOUC prevention unless fouc_as_is is enabled
+        if !self.config.fouc_as_is {
+            output = remove_fouc_prevention(output);
+        }
         // Write to output
         let output_path = self.get_output_path(path, relative_path)?;
         fs::write(&output_path, output).map_err(|e| CompileError::WriteError {
@@ -1212,8 +1238,8 @@ impl Compiler {
             // Transform custom tags to <component> tags
             let transformed = parser.process_html(
                 &content,
-                false, // elements_as_is
-                &[], // reserved_elements
+                self.config.elements_as_is,
+                &self.config.reserved_elements,
                 true, // components_as_is (don't inline, just transform)
                 &self.config.components,
             );
@@ -1249,8 +1275,8 @@ impl Compiler {
             // Transform custom tags to <component> tags
             let transformed = parser.process_html(
                 &content,
-                false, // elements_as_is
-                &[], // reserved_elements
+                self.config.elements_as_is,
+                &self.config.reserved_elements,
                 true, // components_as_is (don't inline, just transform)
                 &self.config.components,
             );
@@ -1463,8 +1489,8 @@ impl Compiler {
             let file_name = entry.file_name();
             let file_name_str = file_name.to_string_lossy();
-            // Skip hidden files and specific directories/patterns
-            if file_name_str.starts_with('.') || should_skip_path(&path, &file_name_str) {
+            // Skip specific directories/patterns (includes dotfiles via SKIP_FILES)
+            if should_skip_path(&path, &file_name_str) {
                 continue;
             }

package/compiler/src/compiler/component_tagger.rs CHANGED Viewed

@@ -20,10 +20,23 @@ pub struct TaggedResult {
 impl ComponentTagger {
     /// Find component wrappers, add deterministic IDs, and structure state
     pub fn tag_components(html: &str, base_path: &PathBuf) -> Result<TaggedResult, String> {
-        // Parse HTML
+        // Extract ALL <template> content to protect it from HTML parser
+        // HTML parsers can strip content from <template> tags during serialization
+        let template_regex = regex::Regex::new(r"(?s)<template[^>]*>.*?</template>").unwrap();
+        let mut template_placeholders: Vec<String> = Vec::new();
+        let mut html_with_placeholders = html.to_string();
+        for (i, mat) in template_regex.find_iter(html).enumerate() {
+            let content = mat.as_str();
+            let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);
+            template_placeholders.push(content.to_string());
+            html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
+        }
+        // Parse HTML (with placeholders instead of actual vibe-dehydrate content)
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
-            .read_from(&mut html.as_bytes())
+            .read_from(&mut html_with_placeholders.as_bytes())
             .map_err(|e| format!("Failed to parse HTML: {:?}", e))?;
         // Find all component wrappers and extract their state
@@ -39,9 +52,15 @@ impl ComponentTagger {
             SerializeOpts::default()
         ).map_err(|e| format!("Failed to serialize HTML: {:?}", e))?;
-        let modified_html = String::from_utf8(modified_html_bytes)
+        let mut modified_html = String::from_utf8(modified_html_bytes)
             .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
+        // Restore template content from placeholders
+        for (i, content) in template_placeholders.iter().enumerate() {
+            let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);
+            modified_html = modified_html.replace(&placeholder, content);
+        }
         // Extract all state from HTML
         let all_state = StateExtractor::extract_from_html(html, base_path)?;

package/compiler/src/compiler/value_stamper.rs CHANGED Viewed

@@ -79,8 +79,21 @@ impl<'a> ValueStamper<'a> {
     }
     pub fn stamp_html(&self, html: String) -> Result<String, String> {
+        // Extract vibe-dehydrate content to protect it from processing
+        // This prevents @[...] markers and iterations/conditionals from being processed
+        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        let mut dehydrate_placeholders: Vec<String> = Vec::new();
+        let mut html_with_placeholders = html.clone();
+        for (i, mat) in dehydrate_regex.find_iter(&html).enumerate() {
+            let content = mat.as_str();
+            let placeholder = format!("<!--VIBE_DEHYDRATE_PLACEHOLDER_{}-->", i);
+            dehydrate_placeholders.push(content.to_string());
+            html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
+        }
         // First, render iterations (expands templates into multiple instances)
-        let html = self.render_iterations(html)?;
+        let html = self.render_iterations(html_with_placeholders)?;
         // Then, render conditionals (resolve if/else branches)
         let html = self.render_conditionals(html)?;
@@ -95,6 +108,13 @@ impl<'a> ValueStamper<'a> {
             }
         }
+        // Skip elements with vibe-dehydrate attribute (content should not be processed)
+        // This is a secondary protection in case placeholders aren't used
+        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        for mat in dehydrate_regex.find_iter(&html) {
+            skip_regions.push((mat.start(), mat.end()));
+        }
         // When components_as_is is true, skip component elements (runtime will handle them)
         // Match both <component> and <div class="component"> elements
         if self.components_as_is {
@@ -148,6 +168,15 @@ impl<'a> ValueStamper<'a> {
         // Add remaining text
         result.push_str(&html[last_pos..]);
+        // Clean up attributes that still contain unresolved markers
+        result = self.cleanup_unresolved_attributes(result);
+        // Restore vibe-dehydrate content from placeholders
+        for (i, content) in dehydrate_placeholders.iter().enumerate() {
+            let placeholder = format!("<!--VIBE_DEHYDRATE_PLACEHOLDER_{}-->", i);
+            result = result.replace(&placeholder, content);
+        }
         // Finally, clean up boolean-like attributes with falsy values
         // When components_as_is is true, skip cleanup inside component elements
         Ok(self.cleanup_boolean_attributes(result, &skip_regions))
@@ -238,13 +267,19 @@ impl<'a> ValueStamper<'a> {
                     // Render nested iterations first
                     let mut item_html = temp_stamper.render_iterations_recursive(template.clone())?;
-                    // Then stamp all bindings in this item's context
+                    // Then render conditionals with this item's context
+                    item_html = temp_stamper.render_conditionals(item_html)?;
+                    // Finally stamp all bindings in this item's context
                     item_html = temp_stamper.binding_regex.replace_all(&item_html, |caps: &Captures| {
                         let expr = &caps[1];
                         temp_stamper.eval_expression(expr)
                             .unwrap_or_else(|| caps[0].to_string())
                     }).to_string();
+                    // Clean up attributes with unresolved markers (e.g., data-tutorial="@[item.id]" when item.id is undefined)
+                    item_html = temp_stamper.cleanup_unresolved_attributes(item_html);
                     rendered_items.push(item_html);
                 }
@@ -500,9 +535,31 @@ impl<'a> ValueStamper<'a> {
     fn try_eval_condition(&self, condition: &str) -> Option<bool> {
         self.context.with(|ctx| -> Option<bool> {
             // Try to evaluate condition
-            // If it fails (e.g., references undefined iteration variables), return None
-            let result: rquickjs::Value = ctx.eval(condition).ok()?;
-            result.as_bool()
+            let result: rquickjs::Value = match ctx.eval(condition) {
+                Ok(val) => val,
+                Err(_) => {
+                    // Evaluation failed (undefined variable, syntax error, etc.)
+                    // Default to false as per requirements
+                    return Some(false);
+                }
+            };
+            // Use JavaScript truthiness rules instead of requiring boolean type
+            // This allows conditions like "item.id" to work correctly
+            if result.is_bool() {
+                result.as_bool()
+            } else if result.is_null() || result.is_undefined() {
+                Some(false)
+            } else if result.is_number() {
+                // 0, NaN are falsy
+                result.as_number().map(|n| n != 0.0 && !n.is_nan())
+            } else if result.is_string() {
+                // Empty string is falsy
+                result.as_string().and_then(|s| s.to_string().ok()).map(|s| !s.is_empty())
+            } else {
+                // Objects, arrays are truthy
+                Some(true)
+            }
         })
     }
@@ -510,6 +567,19 @@ impl<'a> ValueStamper<'a> {
     /// Boolean-like attributes (not in VALUE_ATTRS) should be:
     /// - Removed entirely when falsy
     /// - Present with empty value when truthy (HTML5 boolean attribute syntax)
+    /// Remove attributes that still contain unresolved markers (e.g., data-tutorial="@[item.id]")
+    /// These occur when iterating over items where some don't have the referenced property
+    fn cleanup_unresolved_attributes(&self, html: String) -> String {
+        // Match attributes with marker values: attr="@[...]"
+        // Use non-greedy match and look for closing "]" at end of attribute value
+        let attr_with_marker = Regex::new(r#"\s+([\w-]+)="@\[.+?\]""#).unwrap();
+        attr_with_marker.replace_all(&html, |_caps: &Captures| {
+            // Remove the entire attribute when it has an unresolved marker
+            String::new()
+        }).to_string()
+    }
     fn cleanup_boolean_attributes(&self, html: String, skip_regions: &[(usize, usize)]) -> String {
         // Create a set for faster lookup
         let value_attrs: HashSet<&str> = VALUE_ATTRS.iter().copied().collect();

package/compiler/src/compiler/watcher.rs CHANGED Viewed

@@ -328,7 +328,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
     // Keep compiler and parser alive to reuse component cache across incremental compilations
     let mut watch_compiler = Compiler::new(config.clone(), false);
-    let parser = {
+    let mut parser = {
         use crate::parser::HtmlParser;
         let mut p = HtmlParser::new(config.components_path());
         if let Err(e) = p.load_elements() {
@@ -396,10 +396,52 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                 let dependent_pages = graph.get_all_dependent_pages(&path_canonical);
                                 if !dependent_pages.is_empty() {
                                     println!("{} {} changed", "[watch]".cyan(), relative_path.display());
+                                    // Invalidate component cache so stale content isn't used
+                                    watch_compiler.clear_component_cache();
+                                    // Reload the changed component in the parser's element cache
+                                    // (used for custom element syntax like <Layout>)
+                                    if path.exists() {
+                                        let _ = parser.reload_element(path);
+                                    }
                                     pages_to_recompile.extend(dependent_pages);
                                 }
                             } else if let Some(ext) = path.extension() {
                                 if ext == "html" {
+                                    // Check if file still exists (handle deletions)
+                                    if !path.exists() {
+                                        // File was deleted - clean up dependency graph
+                                        println!("{} {} deleted", "[watch]".yellow(), relative_path.display());
+                                        if let Some(old_deps) = graph.page_to_components.remove(path) {
+                                            for dep in old_deps {
+                                                if let Some(pages) = graph.component_to_pages.get_mut(&dep) {
+                                                    pages.remove(path);
+                                                }
+                                            }
+                                        }
+                                        // Delete corresponding compiled output
+                                        let output_path = canonical_output.join(relative_path);
+                                        if output_path.exists() {
+                                            if let Err(e) = std::fs::remove_file(&output_path) {
+                                                eprintln!("{}: Failed to delete {}: {}", "Warning".yellow(), output_path.display(), e);
+                                            }
+                                        }
+                                        // Delete corresponding manifest
+                                        let manifest_path = canonical_output.join("vibe-hyperspeed").join(format!("{}.manifest.js", relative_path.display()));
+                                        if manifest_path.exists() {
+                                            if let Err(e) = std::fs::remove_file(&manifest_path) {
+                                                eprintln!("{}: Failed to delete manifest {}: {}", "Warning".yellow(), manifest_path.display(), e);
+                                            }
+                                        }
+                                        continue;
+                                    }
                                     // Page changed - recompile just this page
                                     println!("{} {} changed", "[watch]".cyan(), relative_path.display());
                                     pages_to_recompile.insert(path.clone());
@@ -431,7 +473,10 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                         }
                         // Separate HTML files (from dependency graph) and CSS/JS assets (from changed_paths)
-                        let html_files: Vec<PathBuf> = pages_to_recompile.into_iter().collect();
+                        // Filter out deleted files
+                        let html_files: Vec<PathBuf> = pages_to_recompile.into_iter()
+                            .filter(|p| p.exists())
+                            .collect();
                         let mut asset_files: Vec<PathBuf> = Vec::new();
                         for path in &changed_paths {
@@ -446,6 +491,24 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                 continue;
                             }
+                            // Handle deleted asset files
+                            if !path.exists() {
+                                if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
+                                    if ext == "css" || ext == "js" {
+                                        let relative_path = path.strip_prefix(&config.source).unwrap_or(path);
+                                        let output_path = canonical_output.join(relative_path);
+                                        if output_path.exists() {
+                                            if let Err(e) = std::fs::remove_file(&output_path) {
+                                                eprintln!("{}: Failed to delete {}: {}", "Warning".yellow(), output_path.display(), e);
+                                            } else {
+                                                println!("{} {} deleted", "[watch]".yellow(), relative_path.display());
+                                            }
+                                        }
+                                    }
+                                }
+                                continue;
+                            }
                             if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
                                 if ext == "css" || ext == "js" {
                                     asset_files.push(path.clone());
@@ -482,6 +545,10 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                         // Compile HTML files
                         if !html_files.is_empty() {
+                                // Always clear component cache before recompiling so components
+                                // are read fresh from disk (prevents stale cache from previous triggers)
+                                watch_compiler.clear_component_cache();
                                 match watch_compiler.compile_specific_html_files(&html_files, &parser) {
                                     Ok(stats) => {
                                         total_stats.files_compiled = stats.files_compiled;

package/compiler/src/config.rs CHANGED Viewed

@@ -44,6 +44,10 @@ pub struct VibeCompilerConfig {
     pub runtime_as_is: bool,
     #[serde(default)]
     pub iterations_as_is: bool,
+    #[serde(default)]
+    pub no_clean: bool,
+    #[serde(default)]
+    pub fouc_as_is: bool,
 }
 fn default_source() -> String { "./".to_string() }
@@ -99,6 +103,8 @@ impl Default for VibeCompilerConfig {
             components_as_is: false,
             runtime_as_is: false,
             iterations_as_is: false,
+            no_clean: false,
+            fouc_as_is: false,
         }
     }
 }
@@ -122,6 +128,8 @@ pub struct Config {
     pub components_as_is: bool,
     pub runtime_as_is: bool,
     pub iterations_as_is: bool,
+    pub no_clean: bool,
+    pub fouc_as_is: bool,
     pub working_dir: PathBuf,
 }
@@ -168,6 +176,8 @@ impl Config {
             components_as_is: config.components_as_is,
             runtime_as_is: config.runtime_as_is,
             iterations_as_is: config.iterations_as_is,
+            no_clean: config.no_clean,
+            fouc_as_is: config.fouc_as_is,
             working_dir,
         }
     }