@mulanjs/mulanjs 1.0.1-dev.20260220155535 → 1.0.1-dev.20260226191318

package/dist/compiler/compiler.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileSFC = void 0;
 const sfc_parser_1 = require("./sfc-parser");
 const script_compiler_1 = require("./script-compiler");
-const template_compiler_1 = require("./template-compiler");
+const dom_compiler_1 = require("./dom-compiler");
 const style_compiler_1 = require("./style-compiler");
 const source_map_1 = require("source-map");
 async function compileSFC(source, filename, options) {
@@ -19,8 +19,8 @@ async function compileSFC(source, filename, options) {
     }
     // 3. Style
     const styleResult = (0, style_compiler_1.compileStyle)(descriptor, filename, options);
-    // 4. Template
-    const templateResult = (0, template_compiler_1.compileTemplate)(descriptor, scriptResult, styleResult.scopedId);
+    // 4. Template (Use the new No-VDOM compiler!)
+    const templateResult = (0, dom_compiler_1.compileToDOM)(descriptor, scriptResult, styleResult.scopedId);
     // Calculate offsets for source map merging
     // 1. Script Code
     // 2. Padding (newlines)

package/dist/compiler/dom-compiler.js

@@ -0,0 +1,393 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileToDOM = void 0;
+function compileToDOM(descriptor, scriptResult, scopedId) {
+    console.log(`[MulanJS DOM Compiler v2.0] Compiling template for: ${descriptor.filename || 'anonymous'}`);
+    const template = descriptor.template;
+    if (!template)
+        return { code: 'function render() { return document.createDocumentFragment(); }', errors: [] };
+    let html = template.content;
+    const errors = [];
+    // 1. Parsing Phase (HTML -> AST) - We can reuse the parser logic, but for now we duplicate it to keep it isolated from the old string compiler
+    const ast = parse(html, errors);
+    // 2. Transform Phase (Scopes, Bindings)
+    transform(ast, scriptResult, scopedId, [], descriptor.filename);
+    // 3. Codegen Phase (AST -> JS DOM Instructions)
+    let uidRef = { current: 0 };
+    const getUid = () => `_el${uidRef.current++}`;
+    // We generate a DocumentFragment at the root
+    let codeChunks = [];
+    codeChunks.push(`const _frag = document.createDocumentFragment();`);
+    // Generate code for all top-level children and append them to the fragment
+    ast.children.forEach(child => {
+        const rootId = generateDOMInstruction(child, codeChunks, getUid, uidRef, scriptResult.bindings || [], []);
+        if (rootId) {
+            codeChunks.push(`_frag.appendChild(${rootId});`);
+        }
+    });
+    const bodyFn = codeChunks.join('\n            ');
+    const renderFn = `function render() { 
+            const _s = (v) => (v && typeof v === 'object' && 'value' in v) ? v.value : v;
+            const _h = (v, raw) => {
+                const val = _s(v);
+                if (raw || typeof val !== 'string') return val;
+                // IRON FORTRESS: Automatic XSS Shield
+                if (typeof Mulan !== 'undefined' && Mulan.Security) {
+                    return Mulan.Security.sanitize(val);
+                }
+                return val;
+            };
+            
+            ${bodyFn}
+
+            return _frag; 
+        }`;
+    return {
+        code: renderFn,
+        errors
+    };
+}
+exports.compileToDOM = compileToDOM;
+// --- Code Generator (AST -> Instructions) ---
+function generateDOMInstruction(node, chunks, getUid, uidRef, bindings, localScope) {
+    if (node.type === 'Text') {
+        const text = node;
+        const id = getUid();
+        // Native template literal interpolation
+        if (text.content.includes('${')) {
+            chunks.push(`const ${id} = document.createTextNode("");`);
+            // Wrap in effect for reactivity
+            chunks.push(`this._bindEffect(() => { ${id}.textContent = \`${text.content}\`; }, ${id});`);
+        }
+        else {
+            chunks.push(`const ${id} = document.createTextNode(${JSON.stringify(text.content)});`);
+        }
+        return id;
+    }
+    if (node.type === 'Interpolation') {
+        const interp = node;
+        const id = getUid();
+        chunks.push(`const ${id} = document.createTextNode("");`);
+        // Fine-grained reactivity!
+        chunks.push(`this._bindEffect(() => { ${id}.textContent = _h(${interp.content}, false); }, ${id});`);
+        return id;
+    }
+    if (node.type === 'Element') {
+        const element = node;
+        const id = getUid();
+        // Handle mu-if (Phase 4 - Dynamic Fragments)
+        if (element.directives.vIf) {
+            const condition = `_s(${processBindings(element.directives.vIf, bindings, localScope)})`;
+            // 1. Create the anchor Comment node where the block belongs
+            chunks.push(`const ${id} = document.createComment("mu-if:${element.directives.vIf}");`);
+            // 2. Generate the inner block rendering function
+            const blockId = `_if_${uidRef.current++}`;
+            const blockChunks = [];
+            blockChunks.push(`const ${blockId}_frag = document.createDocumentFragment();`);
+            blockChunks.push(`const _block_effects = [];`);
+            // 2a. Override bindings for inner effects
+            const localBindMacro = `(fn, targetNode) => { const stop = this._bindEffect(fn, targetNode); _block_effects.push(stop); return stop; }`;
+            let originalLength = blockChunks.length;
+            // 2b. Generate the actual block
+            const elementWithoutIf = { ...element, directives: { ...element.directives, vIf: undefined } };
+            const clonedChildId = generateDOMInstruction(elementWithoutIf, blockChunks, getUid, uidRef, bindings, localScope);
+            if (clonedChildId) {
+                blockChunks.push(`${blockId}_frag.appendChild(${clonedChildId});`);
+            }
+            for (let i = originalLength; i < blockChunks.length; i++) {
+                blockChunks[i] = blockChunks[i].replace(/this\._bindEffect/g, `(${localBindMacro})`);
+            }
+            blockChunks.push(`return { fragment: ${blockId}_frag, effects: _block_effects };`);
+            const renderBlockFn = `() => {\n                ${blockChunks.join('\n                ')}\n            }`;
+            // 3. Register the macro-effect that calls the Reconciler
+            const ifIdHash = `if_${Math.random().toString(36).substr(2, 6)}`;
+            chunks.push(`this._bindEffect(() => { this._reconcileIf("${ifIdHash}", ${id}, !!(${condition}), ${renderBlockFn}); }, ${id});`);
+            return id;
+        }
+        // Handle mu-for (Phase 3 - The Reconciler)
+        if (element.directives.vFor) {
+            const { item, list } = element.directives.vFor;
+            const boundList = `_s(${processBindings(list, bindings, localScope)})`;
+            // 1. Create the anchor Comment node where the list begins
+            chunks.push(`const ${id} = document.createComment("mu-for:${list}");`);
+            // 2. Generate the inner row rendering function
+            const rowChildScope = [...localScope, item];
+            const rowId = `_row_${uidRef.current++}`;
+            const rowChunks = [];
+            rowChunks.push(`const ${rowId}_frag = document.createDocumentFragment();`);
+            rowChunks.push(`const _row_effects = [];`);
+            // 2a. Override the main chunk array temporarily to capture inner bindings
+            const originalBindEffect = 'this._bindEffect';
+            // We use a local array to capture effects created *inside* the row, so we can clean them up if the row is removed
+            const localBindMacro = `(fn, targetNode) => { const stop = this._bindEffect(fn, targetNode); _row_effects.push(stop); return stop; }`;
+            // In the compiler, when traversing children of a mu-for, we need to instruct _bindEffect calls to use the localMacro
+            // For simplicity in this AST generator, we use a string replacement trick on the generated chunks for this subtree
+            let originalLength = rowChunks.length;
+            // 2b. Generate the actual repeating element (the template root of the mu-for)
+            // We strip the vFor directive so it doesn't recurse infinitely
+            const elementWithoutFor = { ...element, directives: { ...element.directives, vFor: undefined } };
+            const clonedChildId = generateDOMInstruction(elementWithoutFor, rowChunks, getUid, uidRef, bindings, rowChildScope);
+            if (clonedChildId) {
+                rowChunks.push(`${rowId}_frag.appendChild(${clonedChildId});`);
+            }
+            // Note: In a robust compiler, we'd pass an `effectRegistry` flag. Here we just regex patch the internal effects.
+            for (let i = originalLength; i < rowChunks.length; i++) {
+                rowChunks[i] = rowChunks[i].replace(/this\._bindEffect/g, `(${localBindMacro})`);
+            }
+            rowChunks.push(`return { fragment: ${rowId}_frag, effects: _row_effects };`);
+            const renderRowFn = `(${item}, _index) => {\n                ${rowChunks.join('\n                ')}\n            }`;
+            // 3. Register the macro-effect that calls the Reconciler when the array changes
+            // The reconciler will only create new rows or move them natively
+            const listIdHash = `list_${Math.random().toString(36).substr(2, 6)}`;
+            // We assume mu-key is passed as a prop, e.g., mu-key="id"
+            let keyProp = 'null';
+            if (element.props['mu-key']) {
+                keyProp = `"${element.props['mu-key']}"`;
+            }
+            chunks.push(`this._bindEffect(() => { this._reconcileList("${listIdHash}", ${id}, ${boundList}, ${keyProp}, ${renderRowFn}); }, ${id});`);
+            return id;
+        }
+        chunks.push(`const ${id} = document.createElement("${element.tag}");`);
+        // Handle standard properties and classes
+        for (const [key, value] of Object.entries(element.props)) {
+            if (key === 'class') {
+                if (value.includes('${')) {
+                    chunks.push(`this._bindEffect(() => { ${id}.className = \`${value}\`; }, ${id});`);
+                }
+                else {
+                    chunks.push(`${id}.className = ${JSON.stringify(value)};`);
+                }
+            }
+            else if (key === 'id') {
+                chunks.push(`${id}.id = ${JSON.stringify(value)};`);
+            }
+            else if (key === 'data-mu-id') {
+                // Ignore internal string compiler metadata
+            }
+            else {
+                if (value.includes('${')) {
+                    chunks.push(`this._bindEffect(() => { ${id}.setAttribute("${key}", \`${value}\`); }, ${id});`);
+                }
+                else {
+                    chunks.push(`${id}.setAttribute("${key}", ${JSON.stringify(value)});`);
+                }
+            }
+        }
+        // Apply property side effects (.prop bindings) generated by transform
+        if (element._propertySideEffects) {
+            const effects = element._propertySideEffects;
+            for (const effect of effects) {
+                // effect strings look like: `this._b('mu_abc', 'style', ...)` 
+                // We need to translate them to direct assignments, but the original transform already stripped the 'data-mu-id'.
+                // Let's rely on the DOM-specific transform logic we will write below.
+            }
+        }
+        // Handle DOM-specific Bindings
+        if (element._domBindings) {
+            for (const b of element._domBindings) {
+                if (b.type === 'prop') {
+                    chunks.push(`this._bindEffect(() => { ${id}['${b.name}'] = ${b.expr}; }, ${id});`);
+                }
+                else if (b.type === 'event') {
+                    chunks.push(`${id}.addEventListener('${b.name}', ${b.expr}.bind(this));`);
+                }
+            }
+        }
+        // Recursively generate children
+        const childScope = [...localScope];
+        element.children.forEach(child => {
+            const childId = generateDOMInstruction(child, chunks, getUid, uidRef, bindings, childScope);
+            if (childId) {
+                chunks.push(`${id}.appendChild(${childId});`);
+            }
+        });
+        return id;
+    }
+    return null;
+}
+// --- Copied Parser and Transformer ---
+// For this standalone compiler test, we duplicate the parser functions.
+// In the final refactor, these will be extracted to a shared `parse.ts` utility.
+function parse(template, errors) {
+    const root = {
+        type: 'Element', tag: 'fragment', props: {}, children: [], directives: {}
+    };
+    const stack = [root];
+    let cursor = 0;
+    while (cursor < template.length) {
+        const char = template[cursor];
+        if (template.startsWith('<!--', cursor)) {
+            const end = template.indexOf('-->', cursor);
+            if (end === -1)
+                break;
+            cursor = end + 3;
+        }
+        else if (char === '<') {
+            if (template[cursor + 1] === '/') {
+                const end = template.indexOf('>', cursor);
+                if (end === -1)
+                    break;
+                stack.pop();
+                cursor = end + 1;
+            }
+            else {
+                const end = template.indexOf('>', cursor);
+                if (end === -1)
+                    break;
+                let tagContent = template.slice(cursor + 1, end);
+                const isSelfClosing = tagContent.endsWith('/') || ['img', 'br', 'input', 'hr'].includes(tagContent.split(' ')[0]);
+                if (tagContent.endsWith('/'))
+                    tagContent = tagContent.slice(0, -1).trim();
+                const { tag, props, directives } = parseTag(tagContent);
+                const element = { type: 'Element', tag, props, children: [], directives };
+                stack[stack.length - 1].children.push(element);
+                if (!isSelfClosing)
+                    stack.push(element);
+                cursor = end + 1;
+            }
+        }
+        else if (char === '{' && template[cursor + 1] === '{') {
+            const end = template.indexOf('}}', cursor);
+            if (end === -1)
+                break;
+            const content = template.slice(cursor + 2, end).trim();
+            stack[stack.length - 1].children.push({ type: 'Interpolation', content });
+            cursor = end + 2;
+        }
+        else {
+            let nextTag = template.indexOf('<', cursor);
+            let nextInterp = template.indexOf('{{', cursor);
+            let end = template.length;
+            if (nextTag !== -1 && nextTag < end)
+                end = nextTag;
+            if (nextInterp !== -1 && nextInterp < end)
+                end = nextInterp;
+            const content = template.slice(cursor, end);
+            if (content.trim() || content === ' ') {
+                stack[stack.length - 1].children.push({ type: 'Text', content });
+            }
+            cursor = end;
+        }
+    }
+    return root;
+}
+function parseTag(content) {
+    const parts = content.split(' ');
+    const tag = parts[0];
+    const props = {};
+    const directives = {};
+    const attrStr = content.slice(tag.length).trim();
+    let i = 0;
+    while (i < attrStr.length) {
+        if (/\s/.test(attrStr[i])) {
+            i++;
+            continue;
+        }
+        const keyStart = i;
+        while (i < attrStr.length && !/\s|=/.test(attrStr[i]))
+            i++;
+        const key = attrStr.slice(keyStart, i);
+        let value = 'true';
+        let peek = i;
+        while (peek < attrStr.length && /\s/.test(attrStr[peek]))
+            peek++;
+        if (peek < attrStr.length && attrStr[peek] === '=') {
+            i = peek + 1;
+            while (i < attrStr.length && /\s/.test(attrStr[i]))
+                i++;
+            if (i < attrStr.length && (attrStr[i] === '"' || attrStr[i] === "'")) {
+                const quote = attrStr[i];
+                i++;
+                const valStart = i;
+                while (i < attrStr.length && attrStr[i] !== quote) {
+                    if (attrStr[i] === '\\' && attrStr[i + 1] === quote)
+                        i += 2;
+                    else
+                        i++;
+                }
+                value = attrStr.slice(valStart, i);
+                i++;
+            }
+            else {
+                const valStart = i;
+                while (i < attrStr.length && !/\s/.test(attrStr[i]))
+                    i++;
+                value = attrStr.slice(valStart, i);
+            }
+        }
+        if (key === 'v-if' || key === 'mu-if')
+            directives.vIf = value;
+        else if (key === 'v-for' || key === 'mu-for') {
+            const parts = value.split(' in ');
+            directives.vFor = { item: parts[0].trim(), list: parts.slice(1).join(' in ').trim() };
+        }
+        else if (key)
+            props[key] = value;
+    }
+    return { tag, props, directives };
+}
+const JS_KEYWORDS = new Set(['true', 'false', 'null', 'undefined', 'this', 'window', 'if', 'else', 'for', 'while', 'return', 'let', 'const', 'typeof', 'instanceof', 'Math', 'Object', 'Array', 'JSON', 'console']);
+function processBindings(exp, bindings, localScope) {
+    const isOptionsAPI = !bindings || bindings.length === 0;
+    const bindingSet = new Set(bindings || []);
+    return exp.replace(/\b([a-zA-Z_$][\w$]*)\b/g, (match, id, offset, str) => {
+        if (offset > 0 && str[offset - 1] === '.')
+            return match;
+        let i = offset + match.length;
+        while (i < str.length && /\s/.test(str[i]))
+            i++;
+        if (str[i] === ':' && str[i + 1] !== '=')
+            return match;
+        if (JS_KEYWORDS.has(id) || localScope.includes(id))
+            return match;
+        if (isOptionsAPI)
+            return `this.${id}`;
+        if (bindingSet.has(id))
+            return `this.${id}`;
+        return match;
+    });
+}
+function transform(node, scriptResult, scopedId, localScope = [], filename) {
+    if (node.type === 'Element') {
+        const element = node;
+        if (scopedId && element.tag !== 'fragment')
+            element.props[scopedId] = '';
+        const domBindings = [];
+        element._domBindings = domBindings;
+        const childScope = [...localScope];
+        if (element.directives.vFor)
+            childScope.push(element.directives.vFor.item);
+        for (const key in element.props) {
+            if (key.startsWith('.')) {
+                const propName = key.slice(1);
+                const rawValue = element.props[key];
+                let expr = "''";
+                if (rawValue.startsWith('${') && rawValue.endsWith('}')) {
+                    expr = processBindings(rawValue.slice(2, -1), scriptResult.bindings, localScope);
+                }
+                else {
+                    expr = JSON.stringify(rawValue);
+                }
+                domBindings.push({ type: 'prop', name: propName, expr });
+                delete element.props[key];
+            }
+            else if (key.startsWith('@') || key.startsWith('v-on:') || (key.startsWith('on') && key.length > 2)) {
+                let eventName = key.startsWith('@') ? key.slice(1) : key.startsWith('v-on:') ? key.slice(5) : key.slice(2);
+                let bound = processBindings(element.props[key], scriptResult.bindings, localScope);
+                const expr = (bound.includes('(') || bound.includes('=') || bound.includes('++')) ? `($event) => { ${bound.replace(/`/g, '\\`')} }` : bound;
+                domBindings.push({ type: 'event', name: eventName, expr });
+                delete element.props[key];
+            }
+        }
+        element.children.forEach(child => transform(child, scriptResult, scopedId, childScope, filename));
+    }
+    else if (node.type === 'Interpolation') {
+        node.content = processBindings(node.content, scriptResult.bindings, localScope);
+    }
+    else if (node.type === 'Text') {
+        const text = node;
+        if (text.content.includes('${')) {
+            text.content = text.content.replace(/\$\{(.*?)\}/g, (_, expr) => '${_h(' + processBindings(expr, scriptResult.bindings, localScope) + ', false)}');
+        }
+    }
+}

package/dist/core/component.js

@@ -7,9 +7,16 @@ export class MuComponent {
     constructor(container) {
         this._hooks = {};
         this._effects = [];
+        this._domEffects = [];
         this._isDestroyed = false;
         this._propsQueue = [];
         this._eventQueue = [];
+        // --- MulanJS List Reconciliation Engine (No-VDOM) ---
+        // Cache to store generated DOM rows by mu-key
+        this._listCaches = new Map();
+        // --- MulanJS Conditional Engine (No-VDOM) ---
+        // Cache to store conditionally toggled blocks
+        this._ifCaches = new Map();
         this.container = container;
         this.state = {};
         this.$uid = 'mu_' + Math.random().toString(36).substr(2, 9);
@@ -49,6 +56,9 @@ export class MuComponent {
         console.log(`[Mulan Cycle] Stopping ${this._effects.length} effects for ${this.$uid}`);
         this._effects.forEach(stop => stop());
         this._effects = [];
+        console.log(`[Mulan Cycle] Stopping ${this._domEffects.length} DOM effects for ${this.$uid}`);
+        this._domEffects.forEach(stop => stop());
+        this._domEffects = [];
         // Mulan Cycle: Destroy hooks
         (_c = this._hooks.onMuDestroy) === null || _c === void 0 ? void 0 : _c.forEach(fn => fn());
     }
@@ -70,13 +80,20 @@ export class MuComponent {
     }
     mount() {
         console.log(`[Mulan Cycle] Mounting component ${this.$uid}`);
+        // The main render effect (legacy strings fallback / macro structure)
         const stop = effect(() => {
-            console.log(`[Mulan Reactivity] Triggering update for ${this.$uid}`);
+            console.log(`[Mulan Reactivity] Triggering macro-update for ${this.$uid}`);
             this.update();
         });
         this._effects.push(stop);
         this.onMount();
     }
+    // New helper for the compiler to register a fine-grained DOM property effect
+    _bindEffect(fn, targetNode) {
+        const stop = effect(fn, targetNode);
+        this._domEffects.push(stop);
+        return stop;
+    }
     update() {
         if (this._isDestroyed) {
             console.warn(`[Mulan Warning] Update called on destroyed component ${this.$uid}. Blocking render.`);
@@ -113,6 +130,143 @@ export class MuComponent {
         }
         this._eventQueue = [];
     }
+    /**
+     * Reconciles a list of bound data to an existing DOM parent segment.
+     * @param listId Unique ID for this specific mu-for directive Block
+     * @param container The DOM Element or Fragment where children are attached
+     * @param array The current state array
+     * @param keyProp The property to extract from each item to use as a unique key (e.g. 'id')
+     * @param renderRow A function that takes an item and returns a new { fragment, effects }
+     */
+    _reconcileList(listId, anchorToken, array, keyProp, renderRow) {
+        if (!this._listCaches.has(listId)) {
+            this._listCaches.set(listId, new Map());
+        }
+        const cache = this._listCaches.get(listId);
+        const newKeys = new Set();
+        const parent = anchorToken.parentNode;
+        // 1. Array Iteration: Match against cache or Create
+        // Use a DocumentFragment to batch new node insertions natively
+        const collectorFrag = document.createDocumentFragment();
+        const newOrderNodes = [];
+        const newOrderKeys = [];
+        let requiresSwap = false;
+        let lastCachedIndex = -1;
+        for (let i = 0; i < array.length; i++) {
+            const item = array[i];
+            const key = keyProp ? item[keyProp] : i; // fallback to index if no key
+            newKeys.add(key);
+            newOrderKeys.push(key);
+            let cached = cache.get(key);
+            if (!cached) {
+                // Not in cache, Render a brand new row structure
+                const { fragment, effects } = renderRow(item, i);
+                // Track actual DOM nodes
+                const createdNodes = Array.from(fragment.childNodes);
+                cached = { nodes: createdNodes, effects, index: i }; // Store index for fast swap detection
+                cache.set(key, cached);
+                // Batch append to our in-memory fragment!
+                // This eliminates thousands of live DOM reflows on creation.
+                collectorFrag.appendChild(fragment);
+                newOrderNodes.push(...createdNodes);
+            }
+            else {
+                // Exists in cache
+                // Batch append to the in-memory array for index tracking
+                newOrderNodes.push(...cached.nodes);
+                // Fast-Path Swap Detection: If the cached index is physically out of numerical sequence,
+                // we know the array order was unsynchronized and needs reconciliation.
+                if (cached.index < lastCachedIndex) {
+                    requiresSwap = true;
+                }
+                cached.index = i;
+                lastCachedIndex = i;
+            }
+        }
+        // 2. Fragment Batch Insertion (O(1) Live DOM Reflow for Creations)
+        if (collectorFrag.childNodes.length > 0) {
+            parent.insertBefore(collectorFrag, anchorToken.nextSibling);
+        }
+        // 3. Bidirectional Swap Sync (O(K) isolated shifts instead of O(N) cascades)
+        if (requiresSwap) {
+            let currentSibling = anchorToken.nextSibling;
+            // We iterate through our guaranteed physical newOrderNodes list
+            for (let j = 0; j < newOrderNodes.length; j++) {
+                const targetNode = newOrderNodes[j];
+                if (targetNode !== currentSibling) {
+                    // The physical live DOM is out of sync. Move targetNode to where it belongs immediately.
+                    parent.insertBefore(targetNode, currentSibling);
+                }
+                else {
+                    // Node is correctly positioned, simply advance the sliding logical pointer
+                    currentSibling = currentSibling.nextSibling;
+                }
+            }
+        }
+        // 4. Cleanup Phase: Rapidly detach unmounted nodes
+        if (cache.size > newKeys.size) {
+            for (const [key, cached] of cache.entries()) {
+                if (!newKeys.has(key)) {
+                    // Remove from DOM
+                    cached.nodes.forEach((node) => {
+                        if (node.parentNode === parent) {
+                            parent.removeChild(node);
+                        }
+                    });
+                    // Stop any targeted effects tied to these nodes
+                    cached.effects.forEach((stop) => stop());
+                    // Delete from cache tracking
+                    cache.delete(key);
+                }
+            }
+        }
+    }
+    /**
+     * Reconciles a conditional block (mu-if) to an existing DOM parent segment.
+     */
+    _reconcileIf(ifId, anchorToken, condition, renderBlock) {
+        if (!this._ifCaches.has(ifId)) {
+            this._ifCaches.set(ifId, { isMounted: false, nodes: [], effects: [] });
+        }
+        let cached = this._ifCaches.get(ifId);
+        if (condition) {
+            // Should be mounted
+            if (!cached.isMounted) {
+                // We need to render and mount it
+                let nodesToMount;
+                if (cached.nodes.length === 0) {
+                    // First time render
+                    const { fragment, effects } = renderBlock();
+                    nodesToMount = Array.from(fragment.childNodes);
+                    cached.nodes = nodesToMount;
+                    cached.effects = effects;
+                }
+                else {
+                    // Re-mounting previously cached nodes
+                    nodesToMount = cached.nodes;
+                }
+                cached.isMounted = true;
+                const parent = anchorToken.parentNode;
+                const targetSibling = anchorToken.nextSibling;
+                nodesToMount.forEach(node => {
+                    parent.insertBefore(node, targetSibling);
+                });
+            }
+        }
+        else {
+            // Should NOT be mounted
+            if (cached.isMounted) {
+                // Unmount nodes but keep them in cache
+                cached.nodes.forEach(node => {
+                    if (node.parentNode) {
+                        node.parentNode.removeChild(node);
+                    }
+                });
+                cached.isMounted = false;
+                // Note: We deliberately do NOT destroy the effects here, they stay active in memory!
+            }
+        }
+    }
 }
 // Helper to create functional components wrapped in the class system
 // Helper to create functional components wrapped in the class system