@mulanjs/mulanjs 1.0.1-dev.20260227135307 → 1.0.1-dev.20260227172006

package/src/compiler/dom-compiler.ts

@@ -27,21 +27,27 @@ export function compileToDOM(descriptor: SFCDescriptor, scriptResult: ScriptComp
     let uidRef = { current: 0 };
     const getUid = () => `_el${uidRef.current++}`;
 
+    const hoists: string[] = [];
+    const getHoistId = () => `_hoist${hoists.length}`;
+
     // We generate a DocumentFragment at the root
     let codeChunks: string[] = [];
-    codeChunks.push(`const _frag = document.createDocumentFragment();`);
+    codeChunks.push(`const _frag = this._recoveryMode ? null : 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 || [], []);
+        const rootId = generateDOMInstruction(child, codeChunks, getUid, getHoistId, hoists, uidRef, scriptResult.bindings || [], []);
         if (rootId) {
-            codeChunks.push(`_frag.appendChild(${rootId});`);
+            codeChunks.push(`if (_frag) _frag.appendChild(${rootId});`);
         }
     });
 
     const bodyFn = codeChunks.join('\n            ');
+    const hoistsFn = hoists.join('\n            ');
 
-    const renderFn = `function render() { 
+    const renderFn = `
+        ${hoistsFn}
+        function render() { 
             const _s = (v) => (v && typeof v === 'object' && 'value' in v) ? v.value : v;
             const _h = (v, raw) => {
                 const val = _s(v);
@@ -65,18 +71,81 @@ export function compileToDOM(descriptor: SFCDescriptor, scriptResult: ScriptComp
 }
 
 // --- Code Generator (AST -> Instructions) ---
+function renderStaticHTML(node: Node): string {
+    if (node.type === 'Text') {
+        const text = node as TextNode;
+        // Escape HTML for innerHTML injection
+        return htmlEscape(text.content);
+    }
+    if (node.type === 'Element') {
+        const el = node as ElementNode;
+        let html = `<${el.tag}`;
+        for (const key in el.props) {
+            html += ` ${key}="${htmlEscape(el.props[key])}"`;
+        }
+
+        const isSelfClosing = ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(el.tag.toLowerCase());
+        if (isSelfClosing) {
+            html += '/>';
+            return html;
+        }
+
+        html += '>';
+        for (const child of el.children) {
+            html += renderStaticHTML(child);
+        }
+        html += `</${el.tag}>`;
+        return html;
+    }
+    return '';
+}
+
+function htmlEscape(str: string): string {
+    return str.replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+function generateDOMInstruction(node: Node, chunks: string[], getUid: () => string, getHoistId: () => string, hoists: string[], uidRef: { current: number }, bindings: string[], localScope: string[]): string | null {
+
+    // --- STATIC NODE HOISTING (THE COMPILER INTELLIGENCE) ---
+    // If the node and ALL its children contain ZERO reactivity, we hoist it.
+    if (node.type === 'Element' && node.isStatic) {
+        // We only hoist elements that have children or attributes to save bytes, 
+        // a simple empty <div> might be faster to just createElement.
+        const el = node as ElementNode;
+        if (el.tag !== 'fragment' && (el.children.length > 0 || Object.keys(el.props).length > 0)) {
+            const hoistId = getHoistId();
+            const rawHtml = renderStaticHTML(node);
+
+            // Generate the hoisted template ONCE outside the render function
+            hoists.push(`const ${hoistId} = (function() { 
+                const t = document.createElement("template"); 
+                t.innerHTML = \`${rawHtml}\`; 
+                return t.content.firstChild; 
+            })();`);
+
+            // Inside render function, just clone it (O(1) creation cost)
+            const id = getUid();
+            chunks.push(`const ${id} = ${hoistId}.cloneNode(true);`);
+            return id;
+        }
+    }
 
-function generateDOMInstruction(node: Node, chunks: string[], getUid: () => string, uidRef: { current: number }, bindings: string[], localScope: string[]): string | null {
     if (node.type === 'Text') {
         const text = node as TextNode;
         const id = getUid();
+        const numericId = uidRef.current - 1; // Not used for text nodes in SSR but kept for parity if needed
+
         // Native template literal interpolation
         if (text.content.includes('${')) {
-            chunks.push(`const ${id} = document.createTextNode("");`);
+            chunks.push(`const ${id} = this._recoveryMode ? null : document.createTextNode("");`);
             // Wrap in effect for reactivity
-            chunks.push(`this._bindEffect(() => { ${id}.textContent = \`${text.content}\`; }, ${id});`);
+            chunks.push(`this._bindEffect(() => { if (!${id}) return; ${id}.textContent = \`${text.content}\`; }, ${id});`);
         } else {
-            chunks.push(`const ${id} = document.createTextNode(${JSON.stringify(text.content)});`);
+            chunks.push(`const ${id} = this._recoveryMode ? null : document.createTextNode(${JSON.stringify(text.content)});`);
         }
         return id;
     }
@@ -92,10 +161,10 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
 
     if (node.type === 'Element') {
         const element = node as ElementNode;
-        const id = getUid();
 
         // Handle mu-if (Phase 4 - Dynamic Fragments)
         if (element.directives.vIf) {
+            const id = getUid();
             const condition = `_s(${processBindings(element.directives.vIf, bindings, localScope)})`;
 
             // 1. Create the anchor Comment node where the block belongs
@@ -104,7 +173,7 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
             // 2. Generate the inner block rendering function
             const blockId = `_if_${uidRef.current++}`;
             const blockChunks: string[] = [];
-            blockChunks.push(`const ${blockId}_frag = document.createDocumentFragment();`);
+            blockChunks.push(`const ${blockId}_frag = this._recoveryMode ? null : document.createDocumentFragment();`);
             blockChunks.push(`const _block_effects = [];`);
 
             // 2a. Override bindings for inner effects
@@ -113,10 +182,10 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
 
             // 2b. Generate the actual block
             const elementWithoutIf = { ...element, directives: { ...element.directives, vIf: undefined } };
-            const clonedChildId = generateDOMInstruction(elementWithoutIf as ElementNode, blockChunks, getUid, uidRef, bindings, localScope);
+            const clonedChildId = generateDOMInstruction(elementWithoutIf as ElementNode, blockChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope);
 
             if (clonedChildId) {
-                blockChunks.push(`${blockId}_frag.appendChild(${clonedChildId});`);
+                blockChunks.push(`if (${blockId}_frag && ${clonedChildId} && !this._recoveryMode) ${blockId}_frag.appendChild(${clonedChildId});`);
             }
 
             for (let i = originalLength; i < blockChunks.length; i++) {
@@ -140,32 +209,28 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
             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}");`);
+            const id = getUid();
+            chunks.push(`const ${id} = this._recoveryMode ? null : document.createComment("mu-for:${list}");`);
 
             // 2. Generate the inner row rendering function
             const rowChildScope = [...localScope, item];
             const rowId = `_row_${uidRef.current++}`;
             const rowChunks: string[] = [];
-            rowChunks.push(`const ${rowId}_frag = document.createDocumentFragment();`);
+            rowChunks.push(`const ${rowId}_frag = this._recoveryMode ? null : 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 as ElementNode, rowChunks, getUid, uidRef, bindings, rowChildScope);
+            const clonedChildId = generateDOMInstruction(elementWithoutFor as ElementNode, rowChunks, getUid, getHoistId, hoists, uidRef, bindings, rowChildScope);
 
             if (clonedChildId) {
-                rowChunks.push(`${rowId}_frag.appendChild(${clonedChildId});`);
+                rowChunks.push(`if (${rowId}_frag && ${clonedChildId} && !this._recoveryMode) ${rowId}_frag.appendChild(${clonedChildId});`);
             }
 
             // Note: In a robust compiler, we'd pass an `effectRegistry` flag. Here we just regex patch the internal effects.
@@ -178,38 +243,39 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
             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});`);
+            chunks.push(`this._bindEffect(() => { if (${id}) this._reconcileList("${listIdHash}", ${id}, ${boundList}, ${keyProp}, ${renderRowFn}); }, ${id});`);
 
             return id;
         }
 
-        chunks.push(`const ${id} = document.createElement("${element.tag}");`);
+        const numericId = uidRef.current;
+        const id = getUid();
+        chunks.push(`const ${id} = this._recoveryMode ? (this.container.getAttribute('data-mu-node-id') === "${numericId}" ? this.container : this.container.querySelector('[data-mu-node-id="${numericId}"]')) : 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});`);
+                    chunks.push(`this._bindEffect(() => { if (${id}) ${id}.className = \`${value}\`; }, ${id});`);
                 } else {
-                    chunks.push(`${id}.className = ${JSON.stringify(value)};`);
+                    chunks.push(`if (${id}) ${id}.className = ${JSON.stringify(value)};`);
                 }
             } else if (key === 'id') {
-                chunks.push(`${id}.id = ${JSON.stringify(value)};`);
+                chunks.push(`if (${id}) ${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});`);
+                    chunks.push(`this._bindEffect(() => { if (${id}) ${id}.setAttribute("${key}", \`${value}\`); }, ${id});`);
                 } else {
-                    chunks.push(`${id}.setAttribute("${key}", ${JSON.stringify(value)});`);
+                    chunks.push(`if (${id}) ${id}.setAttribute("${key}", ${JSON.stringify(value)});`);
                 }
             }
         }
@@ -226,9 +292,9 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
         if ((element as any)._domBindings) {
             for (const b of (element as any)._domBindings) {
                 if (b.type === 'prop') {
-                    chunks.push(`this._bindEffect(() => { ${id}['${b.name}'] = ${b.expr}; }, ${id});`);
+                    chunks.push(`this._bindEffect(() => { if (${id}) ${id}['${b.name}'] = ${b.expr}; }, ${id});`);
                 } else if (b.type === 'event') {
-                    chunks.push(`${id}.addEventListener('${b.name}', (${b.expr}).bind(this));`);
+                    chunks.push(`if (${id}) ${id}.addEventListener('${b.name}', (${b.expr}).bind(this));`);
                 }
             }
         }
@@ -236,9 +302,9 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
         // Recursively generate children
         const childScope = [...localScope];
         element.children.forEach(child => {
-            const childId = generateDOMInstruction(child, chunks, getUid, uidRef, bindings, childScope);
+            const childId = generateDOMInstruction(child, chunks, getUid, getHoistId, hoists, uidRef, bindings, childScope);
             if (childId) {
-                chunks.push(`${id}.appendChild(${childId});`);
+                chunks.push(`if (${id} && ${childId} && !this._recoveryMode) ${id}.appendChild(${childId});`);
             }
         });
 

package/src/compiler/script-compiler.ts

@@ -190,132 +190,125 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
 
     const finalCode = preamble + scriptBody + postamble;
 
-    if (isTs) {
-        // Transpile extracted TS code to JS
-        const result = ts.transpileModule(finalCode, {
-            compilerOptions: {
-                module: ts.ModuleKind.ESNext,
-                target: ts.ScriptTarget.ES2019,
-                sourceMap: true, // ENABLE SOURCE MAPS
-                inlineSources: true,
-                sourceRoot: '/',
-            },
-            fileName: filename // We ask TS to map to filename, but it maps 'finalCode' -> 'filename'
-        });
-
-        // Fix: Remove the //# sourceMappingURL= comment added by TS
-        const codeWithoutMapComment = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
-
-        // Enhance Source Map to show ORIGINAL .mujs content or EXTERNAL content
-        let finalMap = result.sourceMapText;
-        if (finalMap) {
-            try {
-                // Determine offsets
-                const preambleLines = preamble.split('\n').length - 1;
-                // scriptBody starts at line `preambleLines` (0-indexed) in finalCode.
-
-                // Determine where script starts
-                // If External: Start at 0
-                // If Inline: Start at script.start line
-                let linesBeforeScript = 0;
-                let originalSource = content;
-
-                if (!isExternal) {
-                    originalSource = descriptor.source;
-                    linesBeforeScript = originalSource.substring(0, script.start).split('\n').length - 1;
-                }
+    // Standardize to CommonJS for SSR/Node compatibility
+    // Transpile extracted code to JS (handles TS and ESM -> CJS)
+    const result = ts.transpileModule(finalCode, {
+        compilerOptions: {
+            module: ts.ModuleKind.CommonJS,
+            target: ts.ScriptTarget.ES2019,
+            sourceMap: true,
+            inlineSources: true,
+            sourceRoot: '/',
+        },
+        fileName: filename
+    });
 
-                const consumer = new SourceMapConsumer(JSON.parse(finalMap));
-                const generator = new SourceMapGenerator({
-                    file: filename,
-                    sourceRoot: ''
-                });
+    const codeWithoutMapComment = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
+    let finalMap = result.sourceMapText;
 
-                // Determine relative path for source
-                let relativePath = filename.split(/[/\\]/).pop() || 'unknown.mujs'; // Default to basename
-
-                if (isExternal) {
-                    // For external files, we want Source Map to point to the actual TS file
-                    // externalPath is absolute. Make it relative to project root or something reasonable?
-                    // Webpack often likes 'webpack:///[resource-path]'
-                    // We'll try to map it so it looks like a separate file
-                    const normalized = externalPath.replace(/\\/g, '/');
-                    const srcIdx = normalized.indexOf('/src/');
-                    if (srcIdx !== -1) {
-                        relativePath = 'webpack:///' + normalized.substring(srcIdx + 1); // e.g. webpack:///src/logic.ts
-                    } else {
-                        relativePath = 'webpack:///' + path.basename(externalPath);
-                    }
+    if (isTs && finalMap) {
+        // ... (source map logic)
+    }
+    if (finalMap) {
+        try {
+            // Determine offsets
+            const preambleLines = preamble.split('\n').length - 1;
+            // scriptBody starts at line `preambleLines` (0-indexed) in finalCode.
+
+            // Determine where script starts
+            // If External: Start at 0
+            // If Inline: Start at script.start line
+            let linesBeforeScript = 0;
+            let originalSource = content;
+
+            if (!isExternal) {
+                originalSource = descriptor.source;
+                linesBeforeScript = originalSource.substring(0, script.start).split('\n').length - 1;
+            }
+
+            const consumer = new SourceMapConsumer(JSON.parse(finalMap));
+            const generator = new SourceMapGenerator({
+                file: filename,
+                sourceRoot: ''
+            });
+
+            // Determine relative path for source
+            let relativePath = filename.split(/[/\\]/).pop() || 'unknown.mujs'; // Default to basename
+
+            if (isExternal) {
+                // For external files, we want Source Map to point to the actual TS file
+                // externalPath is absolute. Make it relative to project root or something reasonable?
+                // Webpack often likes 'webpack:///[resource-path]'
+                // We'll try to map it so it looks like a separate file
+                const normalized = externalPath.replace(/\\/g, '/');
+                const srcIdx = normalized.indexOf('/src/');
+                if (srcIdx !== -1) {
+                    relativePath = 'webpack:///' + normalized.substring(srcIdx + 1); // e.g. webpack:///src/logic.ts
                 } else {
-                    // Inline: Point to .mujs file
-                    const normalized = filename.replace(/\\/g, '/');
-                    const srcIdx = normalized.indexOf('/src/');
-                    if (srcIdx !== -1) {
-                        relativePath = 'webpack:///' + normalized.substring(srcIdx + 1); // e.g. webpack:///src/App.mujs
-                    }
+                    relativePath = 'webpack:///' + path.basename(externalPath);
+                }
+            } else {
+                // Inline: Point to .mujs file
+                const normalized = filename.replace(/\\/g, '/');
+                const srcIdx = normalized.indexOf('/src/');
+                if (srcIdx !== -1) {
+                    relativePath = 'webpack:///' + normalized.substring(srcIdx + 1); // e.g. webpack:///src/App.mujs
                 }
+            }
 
-                // If inline, we set source content of .mujs (the whole file)
-                // If external, we set source content of the .ts file
-                generator.setSourceContent(relativePath, originalSource);
-
-                (consumer as any).eachMapping((m: any) => {
-                    if (m.originalLine === null) return;
-
-                    // m.originalLine is the line in `finalCode` (1-based because SourceMapConsumer uses 1-based)
-                    // We need to convert it to line in `.mujs`.
-
-                    // Check if this line belongs to scriptBody
-                    // scriptBody spans from (preambleLines + 1) to (preambleLines + scriptBodyLines)
-                    const lineInFinalCode = m.originalLine;
-
-                    // Check if strictly inside body
-                    if (lineInFinalCode > preambleLines) {
-                        // Calculate offset inside scriptBody
-                        const lineOffsetInBody = lineInFinalCode - preambleLines; // 1-based offset (1st line of body is 1)
-
-                        // Calculate original line
-                        // If External: lineOffsetInBody is the line number
-                        // If Inline: linesBeforeScript + lineOffsetInBody
-                        const originalLine = linesBeforeScript + lineOffsetInBody;
-
-                        // Add mapping
-                        generator.addMapping({
-                            generated: {
-                                line: m.generatedLine,
-                                column: m.generatedColumn
-                            },
-                            original: {
-                                line: originalLine,
-                                column: m.originalColumn // Column should be preserved if we didn't change indentation
-                            },
-                            source: relativePath,
-                            name: m.name
-                        });
-                    }
-                });
+            // If inline, we set source content of .mujs (the whole file)
+            // If external, we set source content of the .ts file
+            generator.setSourceContent(relativePath, originalSource);
 
-                finalMap = generator.toString();
-                // consumer.destroy() not needed in 0.6.x
+            (consumer as any).eachMapping((m: any) => {
+                if (m.originalLine === null) return;
 
-            } catch (e) {
-                console.warn('[MulanJS] Failed to patch source map:', e);
-            }
-        }
+                // m.originalLine is the line in `finalCode` (1-based because SourceMapConsumer uses 1-based)
+                // We need to convert it to line in `.mujs`.
+
+                // Check if this line belongs to scriptBody
+                // scriptBody spans from (preambleLines + 1) to (preambleLines + scriptBodyLines)
+                const lineInFinalCode = m.originalLine;
+
+                // Check if strictly inside body
+                if (lineInFinalCode > preambleLines) {
+                    // Calculate offset inside scriptBody
+                    const lineOffsetInBody = lineInFinalCode - preambleLines; // 1-based offset (1st line of body is 1)
+
+                    // Calculate original line
+                    // If External: lineOffsetInBody is the line number
+                    // If Inline: linesBeforeScript + lineOffsetInBody
+                    const originalLine = linesBeforeScript + lineOffsetInBody;
+
+                    // Add mapping
+                    generator.addMapping({
+                        generated: {
+                            line: m.generatedLine,
+                            column: m.generatedColumn
+                        },
+                        original: {
+                            line: originalLine,
+                            column: m.originalColumn // Column should be preserved if we didn't change indentation
+                        },
+                        source: relativePath,
+                        name: m.name
+                    });
+                }
+            });
+
+            finalMap = generator.toString();
+            // consumer.destroy() not needed in 0.6.x
 
-        return {
-            code: codeWithoutMapComment,
-            bindings,
-            errors: [],
-            map: finalMap // Return the enhanced map
+        } catch (e) {
+            console.warn('[MulanJS] Failed to patch source map:', e);
         }
     }
 
     return {
-        code: finalCode,
+        code: codeWithoutMapComment,
         bindings,
         errors: [],
-        map: undefined
+        map: finalMap // Return the enhanced map
     };
 }
 
@@ -334,20 +327,18 @@ async function compileStandardScript(
     let finalMap: string | undefined;
     let code = content;
 
-    // Transpile if TS
-    if (externalPath.endsWith('.ts') || script.attrs.lang === 'ts') {
-        const result = ts.transpileModule(content, {
-            compilerOptions: {
-                module: ts.ModuleKind.ESNext,
-                target: ts.ScriptTarget.ES2019,
-                sourceMap: true,
-                inlineSources: true,
-            },
-            fileName: filename
-        });
-        code = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
-        finalMap = result.sourceMapText;
-    }
+    // Standardize to CommonJS for SSR/Node compatibility
+    const result = ts.transpileModule(content, {
+        compilerOptions: {
+            module: ts.ModuleKind.CommonJS,
+            target: ts.ScriptTarget.ES2019,
+            sourceMap: true,
+            inlineSources: true,
+        },
+        fileName: filename
+    });
+    code = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
+    finalMap = result.sourceMapText;
 
     // Adjust Source Map
     if (finalMap) {