@ape-egg/vibe 1.2.0 → 1.3.0

package/compiler/src/compiler/value_stamper.rs

@@ -0,0 +1,222 @@
+use regex::{Regex, Captures};
+use serde_json::Value;
+
+pub struct ValueStamper<'a> {
+    state: &'a Value,
+    binding_regex: Regex,
+    iteration_regex: Regex,
+}
+
+impl<'a> ValueStamper<'a> {
+    pub fn new(state: &'a Value) -> Self {
+        Self {
+            state,
+            binding_regex: Regex::new(r"@\[((?:[^\[\]]|\[[^\]]*\])+)\]").unwrap(),
+            iteration_regex: Regex::new(r"(?s)<!--\s*each\s+(\w+(?:\.\w+)*)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*-->(.*?)<!--\s*/each\s*-->").unwrap(),
+        }
+    }
+
+    pub fn stamp_html(&self, html: String) -> Result<String, String> {
+        // First, render iterations (expands templates into multiple instances)
+        let html = self.render_iterations(html)?;
+
+        // Then stamp all bindings (including those in rendered iterations)
+        Ok(self.binding_regex.replace_all(&html, |caps: &Captures| {
+            let path = &caps[1];
+            self.resolve_state_path(path)
+                .unwrap_or_else(|| caps[0].to_string())  // Keep marker if can't resolve
+        }).to_string())
+    }
+
+    fn render_iterations(&self, html: String) -> Result<String, String> {
+        let result = self.iteration_regex.replace_all(&html, |caps: &Captures| {
+            let array_path = &caps[1];
+            let item_alias = &caps[2];
+            let index_alias = caps.get(3).map(|m| m.as_str()).unwrap_or("index");
+            let template = &caps[4];
+
+            // Get array from state
+            let array = match self.resolve_array_path(array_path) {
+                Some(arr) => arr,
+                None => {
+                    // Array not found, keep iteration block as-is
+                    return caps[0].to_string();
+                }
+            };
+
+            // Render each item
+            let mut rendered_items = Vec::new();
+            for (idx, item) in array.iter().enumerate() {
+                let mut item_html = template.to_string();
+
+                // Replace @[item] and @[index] in template
+                item_html = item_html.replace(
+                    &format!("@[{}]", item_alias),
+                    &self.value_to_string(item)
+                );
+                item_html = item_html.replace(
+                    &format!("@[{}]", index_alias),
+                    &idx.to_string()
+                );
+
+                rendered_items.push(item_html);
+            }
+
+            // Reconstruct with comments (preserve index alias if it was in original)
+            let index_part = if caps.get(3).is_some() {
+                format!(", {}", index_alias)
+            } else {
+                String::new()
+            };
+
+            format!(
+                "<!-- each {} as {}{} -->{}<!-- /each -->",
+                array_path,
+                item_alias,
+                index_part,
+                rendered_items.join("")
+            )
+        });
+
+        Ok(result.to_string())
+    }
+
+    fn resolve_array_path(&self, path: &str) -> Option<&Vec<Value>> {
+        let parts: Vec<&str> = path.split('.').collect();
+        let mut current = self.state;
+
+        for part in parts {
+            current = current.get(part)?;
+        }
+
+        current.as_array()
+    }
+
+    fn resolve_state_path(&self, path: &str) -> Option<String> {
+        // Navigate state by dot path: "user.name" -> state["user"]["name"]
+        let parts: Vec<&str> = path.split('.').collect();
+        let mut current = self.state;
+
+        for part in parts {
+            // Handle array access: items[0]
+            if let Some(bracket_pos) = part.find('[') {
+                let array_name = &part[..bracket_pos];
+                let index_str = &part[bracket_pos+1..part.len()-1];
+                let index: usize = index_str.parse().ok()?;
+
+                current = current.get(array_name)?.get(index)?;
+            } else {
+                current = current.get(part)?;
+            }
+        }
+
+        Some(self.value_to_string(current))
+    }
+
+    fn value_to_string(&self, val: &Value) -> String {
+        match val {
+            Value::String(s) => s.clone(),
+            Value::Number(n) => n.to_string(),
+            Value::Bool(b) => b.to_string(),
+            Value::Null => String::new(),
+            Value::Array(_) | Value::Object(_) => val.to_string(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+
+    #[test]
+    fn stamp_simple_binding() {
+        let state = json!({ "name": "World" });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>Hello @[name]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<div>Hello World</div>");
+    }
+
+    #[test]
+    fn stamp_multiple_bindings() {
+        let state = json!({ "firstName": "John", "lastName": "Doe" });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>@[firstName] @[lastName]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<div>John Doe</div>");
+    }
+
+    #[test]
+    fn stamp_nested_binding() {
+        let state = json!({ "user": { "name": "John" } });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>Hello @[user.name]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<div>Hello John</div>");
+    }
+
+    #[test]
+    fn stamp_array_binding() {
+        let state = json!({ "items": ["first", "second", "third"] });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>@[items[0]]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<div>first</div>");
+    }
+
+    #[test]
+    fn stamp_number_binding() {
+        let state = json!({ "count": 42 });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>Count: @[count]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<div>Count: 42</div>");
+    }
+
+    #[test]
+    fn stamp_boolean_binding() {
+        let state = json!({ "isActive": true });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>Active: @[isActive]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<div>Active: true</div>");
+    }
+
+    #[test]
+    fn stamp_missing_binding() {
+        let state = json!({ "name": "World" });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from("<div>Hello @[missing]</div>");
+        let result = stamper.stamp_html(html).unwrap();
+        // Should keep the binding marker if value doesn't exist
+        assert_eq!(result, "<div>Hello @[missing]</div>");
+    }
+
+    #[test]
+    fn stamp_attribute_binding() {
+        let state = json!({ "firstName": "John" });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from(r#"<input value="@[firstName]">"#);
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, r#"<input value="John">"#);
+    }
+
+    #[test]
+    fn render_simple_iteration() {
+        let state = json!({ "items": [1, 2, 3] });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from(r#"<!-- each items as item --><div>@[item]</div><!-- /each -->"#);
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, r#"<!-- each items as item --><div>1</div><div>2</div><div>3</div><!-- /each -->"#);
+    }
+
+    #[test]
+    fn render_iteration_with_index() {
+        let state = json!({ "items": ["a", "b", "c"] });
+        let stamper = ValueStamper::new(&state);
+        let html = String::from(r#"<!-- each items as item, idx --><span>[@[idx]] @[item]</span><!-- /each -->"#);
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, r#"<!-- each items as item, idx --><span>[0] a</span><span>[1] b</span><span>[2] c</span><!-- /each -->"#);
+    }
+}

package/compiler/src/config.rs

@@ -31,8 +31,6 @@ pub struct VibeCompilerConfig {
     #[serde(default)]
     pub accessibility: bool,
     #[serde(default)]
-    pub manifest: bool,
-    #[serde(default)]
     pub validate: bool,
     #[serde(default)]
     pub source_maps: bool,
@@ -61,7 +59,6 @@ impl Default for VibeCompilerConfig {
             root: None,
             minify: false,
             accessibility: false,
-            manifest: false,
             validate: false,
             source_maps: false,
             exclude_tags: vec![],
@@ -83,7 +80,6 @@ pub struct Config {
     pub _root: Option<String>,
     pub minify: bool,
     pub accessibility: bool,
-    pub manifest: bool,
     pub validate: bool,
     pub source_maps: bool,
     pub exclude_tags: Vec<String>,
@@ -124,7 +120,6 @@ impl Config {
             _root: config.root,
             minify: config.minify,
             accessibility: config.accessibility,
-            manifest: config.manifest,
             validate: config.validate,
             source_maps: config.source_maps,
             exclude_tags: config.exclude_tags,

package/compiler/src/main.rs

@@ -5,7 +5,6 @@ mod compiler;
 use clap::Parser as ClapParser;
 use colored::Colorize;
 use std::path::PathBuf;
-use std::time::Instant;
 
 use config::Config;
 use compiler::compile::CompileError;
@@ -16,11 +15,11 @@ use compiler::Compiler;
 struct ConfigOverrides {
     minify: bool,
     accessibility: bool,
-    manifest: bool,
     validate: bool,
     source_maps: bool,
     node_modules_as_is: bool,
     components_as_is: bool,
+    runtime_as_is: bool,
 }
 
 /// Vibe Compiler - Compiles Vibe source files into optimized output
@@ -50,10 +49,6 @@ struct Args {
     #[arg(long)]
     accessibility: bool,
 
-    /// Generate hydration manifest
-    #[arg(long, name = "create-manifest")]
-    create_manifest: bool,
-
     /// Generate source maps
     #[arg(long, name = "source-maps")]
     source_maps: bool,
@@ -81,11 +76,14 @@ struct Args {
     /// Keep components directory and <component> tags as-is (don't inline components)
     #[arg(long, name = "components-as-is")]
     components_as_is: bool,
+
+    /// Skip manifest generation - output will use runtime-only mode (no FOUC prevention)
+    #[arg(long, name = "runtime-as-is")]
+    runtime_as_is: bool,
 }
 
 fn main() {
     let args = Args::parse();
-    let start = Instant::now();
 
     // Determine working directory
     let working_dir = args.cwd
@@ -117,7 +115,6 @@ fn main() {
     // Store original config values before applying flag overrides
     let original_minify = config.minify;
     let original_accessibility = config.accessibility;
-    let original_manifest = config.manifest;
     let original_validate = config.validate;
     let original_source_maps = config.source_maps;
     let original_node_modules_as_is = config.node_modules_as_is;
@@ -134,10 +131,6 @@ fn main() {
         overrides.accessibility = !original_accessibility;
         config.accessibility = true;
     }
-    if args.create_manifest {
-        overrides.manifest = !original_manifest;
-        config.manifest = true;
-    }
     if args.validate {
         overrides.validate = !original_validate;
         config.validate = true;
@@ -190,12 +183,12 @@ fn main() {
         println!("  {}: {}", format!("{:<18}", "components").cyan(), format_value_no_flag(&config.components));
         println!("  {}: {}", format!("{:<18}", "components-as-is").cyan(), format_bool_with_flag(config.components_as_is, overrides.components_as_is, original_components_as_is));
         println!("  {}: {}", format!("{:<18}", "exclude-tags").cyan(), format_value_no_flag(format!("{:?}", config.exclude_tags)));
-        println!("  {}: {}", format!("{:<18}", "manifest").cyan(), format_bool_with_flag(config.manifest, overrides.manifest, original_manifest));
         println!("  {}: {}", format!("{:<18}", "minify").cyan(), format_bool_with_flag(config.minify, overrides.minify, original_minify));
         println!("  {}: {}", format!("{:<18}", "node-modules-as-is").cyan(), format_bool_with_flag(config.node_modules_as_is, overrides.node_modules_as_is, original_node_modules_as_is));
         println!("  {}: {}", format!("{:<18}", "output").cyan(), format_value_no_flag(&config._output_str));
         println!("  {}: {}", format!("{:<18}", "pages").cyan(), format_value_no_flag(&config.pages));
         println!("  {}: {}", format!("{:<18}", "root").cyan(), format_value_no_flag(config._root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
+        println!("  {}: {}", format!("{:<18}", "runtime-as-is").cyan(), if overrides.runtime_as_is { "true (flag)".green().to_string() } else { "false".to_string() });
         println!("  {}: {}", format!("{:<18}", "source").cyan(), format_value_no_flag(&config._source_str));
         println!("  {}: {}", format!("{:<18}", "source-maps").cyan(), format_bool_with_flag(config.source_maps, overrides.source_maps, original_source_maps));
         println!("  {}: {}", format!("{:<18}", "validate").cyan(), format_bool_with_flag(config.validate, overrides.validate, original_validate));
@@ -206,13 +199,28 @@ fn main() {
 
     match compiler.compile() {
         Ok(stats) => {
-            let duration = start.elapsed();
+            // Generate manifests BEFORE showing success (unless --runtime-as-is flag is passed)
+            let mut manifest_time_ms = 0.0;
+            let mut manifest_stats_result = None;
+            if !args.runtime_as_is {
+                match compiler.generate_manifests() {
+                    Ok(manifest_stats) => {
+                        manifest_time_ms = manifest_stats.total_time_ms;
+                        manifest_stats_result = Some(manifest_stats);
+                    }
+                    Err(e) => {
+                        eprintln!("\n{}: Manifest generation failed: {}", "Warning".yellow(), e);
+                        eprintln!("Compilation succeeded but manifests were not generated.");
+                        eprintln!("Use --runtime-as-is to skip manifest generation.");
+                    }
+                }
+            }
 
             // Show success headline
             println!("\n{}", "Compilation successful! ✅".green().bold());
             println!();
 
-            // Show individual phase timings (validation first, then components, HTML, copied)
+            // Show individual phase timings (validation first, then components, HTML, manifests, copied)
 
             // Show validation time if it happened
             if let Some(validation_time) = stats.validation_time_ms {
@@ -240,6 +248,16 @@ fn main() {
                 );
             }
 
+            // Show manifest stats between HTML and Copied files
+            if let Some(manifest_stats) = manifest_stats_result {
+                println!("* Generated manifests ({} file{}, {} skipped) in {:.0}ms",
+                    manifest_stats.pages_processed,
+                    if manifest_stats.pages_processed == 1 { "" } else { "s" },
+                    manifest_stats.pages_skipped,
+                    manifest_stats.total_time_ms
+                );
+            }
+
             if stats.files_copied > 0 {
                 println!("* Copied files ({} file{}) in {:.0}ms",
                     stats.files_copied,
@@ -257,7 +275,18 @@ fn main() {
                 }
             }
 
-            println!("\n{} in {:.0}ms", "Compiled".green(), duration.as_secs_f64() * 1000.0);
+            // Calculate total duration as sum of all individual operations
+            let total_duration_ms = stats.validation_time_ms.unwrap_or(0.0)
+                + stats.components_time_ms
+                + stats.compile_time_ms
+                + stats.copy_time_ms
+                + stats.node_modules_time_ms.unwrap_or(0.0)
+                + manifest_time_ms;
+
+            println!("\n{} in {:.0}ms", "Compiled".green(), total_duration_ms);
+
+            // Exit explicitly to kill background server thread
+            std::process::exit(0);
         }
         Err(e) => {
             match e {
@@ -277,8 +306,4 @@ fn main() {
             std::process::exit(1);
         }
     }
-
-    if args.watch {
-        println!("{}", "Watch mode not yet implemented".yellow());
-    }
 }

package/compiler/src/parser/html.rs

@@ -103,6 +103,10 @@ impl HtmlParser {
         components_dir: &str,
         external_cache: &HashMap<String, String>,
     ) -> String {
+        // Extract and preserve DOCTYPE declaration if present
+        let doctype_re = regex::Regex::new(r"(?i)^\s*<!DOCTYPE[^>]*>\s*").unwrap();
+        let doctype = doctype_re.find(content).map(|m| m.as_str().to_string());
+
         let mut result = content.to_string();
 
         // Step 1: Transform custom tags matching element files to <component> tags
@@ -118,6 +122,14 @@ impl HtmlParser {
             result = transform_custom_tags_to_divs(&result, exclude_tags);
         }
 
+        // Step 4: Restore DOCTYPE if it was present
+        if let Some(dt) = doctype {
+            // Remove any existing DOCTYPE that might have been left behind
+            result = doctype_re.replace(&result, "").to_string();
+            // Prepend the original DOCTYPE
+            result = format!("{}{}", dt, result);
+        }
+
         result
     }
 
@@ -235,14 +247,16 @@ impl HtmlParser {
                         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);
-                        }
-                    }
+                    // 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("");
+
+                    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);
                 }

package/index.js

@@ -1,96 +1,40 @@
 // Universal entry point for Vibe
-// Usage: <script src="vibe/index.js">$.count = 0;</script>  (global)
-//        <script src="vibe/index.js">let count = 0;</script>  (component)
+// Usage: import vibe from 'vibe/index.js'; vibe({ initialState }, { debug: true }, 'body');
 
-(async () => {
-  const script = document.currentScript;
-  const scriptContent = script?.textContent?.trim() || '';
+import { ensureBoot, boot, isBooted } from './boot.js';
 
-  // Determine if this is component state (has let/const/var) or global state (uses $)
-  const hasDeclarations = /\b(let|const|var)\s+\w+/.test(scriptContent);
-  const isComponent = hasDeclarations;
-
-  // Boot Vibe if not already initialized or booting
-  if (!window.__vibeInitialized && !window.__vibeBooting) {
-    window.__vibeBooting = true;
-
-    // Process ALL scripts on the page BEFORE booting
-    const { generateComponentId, executeComponentScript } = await import('./runtime/component-state.js');
-    const allComponentScripts = document.querySelectorAll('script[src*="index.js"]');
-    const initialState = {};
-    const globalStateScripts = [];
-
-    allComponentScripts.forEach((s) => {
-      const content = s.textContent?.trim() || '';
-      if (!content) return;
-
-      const hasDecl = /\b(let|const|var)\s+\w+/.test(content);
-      if (hasDecl) {
-        // This is a component script
-        const componentId = generateComponentId();
-
-        // Tag script and siblings
-        s.setAttribute('data-vibe-component-id', componentId);
-        s.setAttribute('type', 'component');
+const vibe = (state = {}, config, targetSelector) => {
+  if (isBooted()) {
+    // Already booted - mutate live state
+    Object.assign(window.$, state);
+    return window.$;
+  }
 
-        let sibling = s.nextElementSibling;
-        while (sibling) {
-          if (sibling.tagName === 'SCRIPT' && /\b(let|const|var)\s+\w+/.test(sibling.textContent || '')) {
-            break;
-          }
-          sibling.setAttribute('data-vibe-component-id', componentId);
-          sibling = sibling.nextElementSibling;
-        }
+  // Not booted yet - accumulate in global state registry
+  if (!window.__vibeGlobalState) {
+    window.__vibeGlobalState = {};
+  }
+  Object.assign(window.__vibeGlobalState, state);
 
-        // Execute component script to get state
-        const componentState = executeComponentScript(content);
-        initialState[componentId] = componentState;
-      } else {
-        // This is a global state script - save for later
-        globalStateScripts.push(content);
-      }
-    });
+  // Store config (first caller wins)
+  if (config && !window.__vibeConfig) {
+    window.__vibeConfig = config;
+  }
 
-    // Execute global state scripts into initialState BEFORE booting
-    // This ensures global state is available during initial parse/hydrate
-    if (globalStateScripts.length > 0) {
-      const captured = {};
-      const fakeState = new Proxy(captured, {
-        set(target, key, value) {
-          target[key] = value;
-          return true;
-        }
-      });
+  // Store targetSelector (first caller wins)
+  if (targetSelector && !window.__vibeTargetSelector) {
+    window.__vibeTargetSelector = targetSelector;
+  }
 
-      globalStateScripts.forEach(code => {
-        const $ = fakeState;
-        eval(code);
-      });
+  // Explicit boot call (no state passed means "boot now")
+  if (Object.keys(state).length === 0 && Object.keys(window.__vibeGlobalState).length > 0) {
+    return boot();
+  }
 
-      // Merge global state into initialState
-      Object.assign(initialState, captured);
-    }
+  // Ensure boot happens in microtask
+  ensureBoot();
 
-    // Boot Vibe with both component and global states
-    const { default: main } = await import('./runtime/index.js');
-    window.$ = main(initialState, 'vibe', {});
-    window.__vibeInitialized = true;
-    window.__vibeBooting = false;
-  } else {
-    // Vibe already booted - just execute global code if any
-    if (window.__vibeBooting) {
-      await new Promise(resolve => {
-        const check = setInterval(() => {
-          if (window.__vibeInitialized) {
-            clearInterval(check);
-            resolve();
-          }
-        }, 10);
-      });
-    }
+  return null;
+};
 
-    if (!isComponent && scriptContent) {
-      eval(scriptContent);
-    }
-  }
-})();
+export default vibe;

package/package.json

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

package/runtime/affected.js

@@ -7,9 +7,12 @@ import { evalInScope, resolveThisPath } from './utils.js';
 const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
 // Helper function to check if a match references a specific key
-const matchesKey = (matchStr, key) => matchStr === key || matchStr.startsWith(key + '.');
+const matchesKey = (matchStr, key) =>
+  matchStr === key ||
+  matchStr.startsWith(key + '.') ||
+  matchStr.startsWith(key + '[');
 
-const recursive = (tree, state, newState, affected, scopedStateForHydration = null) => {
+const recursive = (tree, state, newState, affected, scopedStateForHydration = null, depth = 0) => {
   // Handle iteration nodes specially
   if (tree.type === 'iteration') {
     // Handle this.property for component-scoped arrays
@@ -38,7 +41,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           // Merge newState into scopedState to get updated global values
           const mergedNewState = { ...instance.scopedState, ...newState };
           // Pass the Proxy as scopedState so evalInScope can access iteration variables
-          recursive(instance.tree, instance.scopedState, mergedNewState, affected, instance.scopedState);
+          recursive(instance.tree, instance.scopedState, mergedNewState, affected, instance.scopedState, depth + 1);
         }
       }
     }
@@ -63,7 +66,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
 
     // Condition didn't change, check for affected elements inside active branch
     if (tree.runtime.activeInstance && tree.runtime.activeInstance.parsedTree) {
-      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected, scopedStateForHydration);
+      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected, scopedStateForHydration, depth + 1);
     }
 
     return affected;
@@ -234,7 +237,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
     for (const key in children) {
       const child = children[key];
       if (child && typeof child === 'object') {
-        recursive(child, state, newState, affected, scopedStateForHydration);
+        recursive(child, state, newState, affected, scopedStateForHydration, depth + 1);
       }
     }
   }
@@ -242,4 +245,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
   return affected;
 };
 
-export default (tree, state, newState) => recursive(tree, state, newState, [], null);
+export default (tree, state, newState) => {
+  const affected = recursive(tree, state, newState, [], null, 0);
+  return affected;
+};