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

package/dist/compiler/ast-parser.d.ts

@@ -0,0 +1,48 @@
+export type NodeType = 'Element' | 'Text' | 'Interpolation';
+export type Node = ElementNode | TextNode | InterpolationNode;
+export interface BaseNode {
+    type: NodeType;
+    isStatic?: boolean;
+}
+export interface ElementNode extends BaseNode {
+    type: 'Element';
+    tag: string;
+    props: Record<string, string>;
+    children: Node[];
+    directives: {
+        vFor?: {
+            item: string;
+            list: string;
+        };
+        vIf?: string;
+    };
+}
+export interface TextNode extends BaseNode {
+    type: 'Text';
+    content: string;
+}
+export interface InterpolationNode extends BaseNode {
+    type: 'Interpolation';
+    content: string;
+}
+/**
+ * Decodes standard HTML entities.
+ */
+export declare function decodeEntities(str: string): string;
+/**
+ * Unified MulanJS Template Parser
+ * Handles HTML tags, {{ }} interpolation, and is robust against raw < symbols in text.
+ */
+export declare function parse(template: string, errors: string[]): ElementNode;
+export declare function markStatic(node: Node): boolean;
+export declare function parseTag(content: string): {
+    tag: string;
+    props: Record<string, string>;
+    directives: {
+        vFor?: {
+            item: string;
+            list: string;
+        };
+        vIf?: string;
+    };
+};

package/dist/compiler/ast-parser.js

@@ -1,7 +1,7 @@
 "use strict";
 // --- AST Definitions ---
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseTag = exports.parse = exports.decodeEntities = void 0;
+exports.parseTag = exports.markStatic = exports.parse = exports.decodeEntities = void 0;
 /**
  * Decodes standard HTML entities.
  */
@@ -66,12 +66,9 @@ function parse(template, errors) {
                     errors.push('Unclosed opening tag.');
                     break;
                 }
-                let tagContent = template.slice(cursor + 1, end);
-                const isSelfClosing = tagContent.endsWith('/') || ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(tagContent.split(' ')[0].toLowerCase());
-                if (tagContent.endsWith('/')) {
-                    tagContent = tagContent.slice(0, -1).trim();
-                }
+                const tagContent = template.slice(cursor + 1, end);
                 const { tag, props, directives } = parseTag(tagContent);
+                const isSelfClosing = tagContent.endsWith('/') || ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(tag.toLowerCase());
                 const element = { type: 'Element', tag, props, children: [], directives };
                 stack[stack.length - 1].children.push(element);
                 if (!isSelfClosing) {
@@ -147,15 +144,63 @@ function parse(template, errors) {
             cursor = end;
         }
     }
+    markStatic(root);
     return root;
 }
 exports.parse = parse;
+function markStatic(node) {
+    if (node.type === 'Interpolation') {
+        node.isStatic = false;
+        return false;
+    }
+    if (node.type === 'Text') {
+        const text = node;
+        node.isStatic = !text.content.includes('${');
+        return node.isStatic;
+    }
+    if (node.type === 'Element') {
+        const element = node;
+        let isStatic = true;
+        // 1. Directives make it dynamic
+        if (element.directives.vIf || element.directives.vFor) {
+            isStatic = false;
+        }
+        // 2. Dynamic properties or event listeners make it dynamic
+        if (isStatic) {
+            for (const key in element.props) {
+                const val = element.props[key];
+                if (key.startsWith('@') || key.startsWith('v-on:') || key.startsWith('on') || key.startsWith(':') || key.startsWith('.')) {
+                    isStatic = false;
+                    break;
+                }
+                if (val.includes('${')) {
+                    isStatic = false;
+                    break;
+                }
+            }
+        }
+        // 3. Check all children. Every child must be static for the parent to be static.
+        // We still need to call markStatic on ALL children, so don't short-circuit the loop early.
+        for (const child of element.children) {
+            const childStatic = markStatic(child);
+            if (!childStatic) {
+                isStatic = false;
+            }
+        }
+        element.isStatic = isStatic;
+        return isStatic;
+    }
+    return false;
+}
+exports.markStatic = markStatic;
 function parseTag(content) {
-    const parts = content.split(' ');
-    const tag = parts[0];
+    // 1. Extract tag name (first word, ignoring leading whitespace)
+    const tagMatch = content.trim().match(/^([a-zA-Z0-9:-]+)/);
+    const tag = tagMatch ? tagMatch[1] : '';
     const props = {};
     const directives = {};
-    const attrStr = content.slice(tag.length).trim();
+    // 2. Remove tag name from content to parse attributes
+    const attrStr = content.trim().slice(tag.length).trim();
     let i = 0;
     while (i < attrStr.length) {
         if (/\s/.test(attrStr[i])) {

package/dist/compiler/compiler.d.ts

@@ -0,0 +1,9 @@
+import { CompilerOptions } from './script-compiler';
+export interface CompileResult {
+    code: string;
+    css: string;
+    errors: string[];
+    map?: string;
+}
+export declare function compileSFC(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;
+export declare function compileSFCForSSR(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;

package/dist/compiler/compiler.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileSFC = void 0;
+exports.compileSFCForSSR = exports.compileSFC = void 0;
 const sfc_parser_1 = require("./sfc-parser");
 const script_compiler_1 = require("./script-compiler");
 const dom_compiler_1 = require("./dom-compiler");
 const style_compiler_1 = require("./style-compiler");
+const ssr_compiler_1 = require("./ssr-compiler");
 const source_map_1 = require("source-map");
 async function compileSFC(source, filename, options) {
     // 1. Parse
@@ -17,6 +18,9 @@ async function compileSFC(source, filename, options) {
     if (!scriptCode.includes('const __component__ =')) {
         scriptCode = scriptCode.replace(/export\s+default/, 'const __component__ =');
     }
+    if (!scriptCode.includes('const __component__ =')) {
+        scriptCode = scriptCode.replace('exports.default =', 'const __component__ =');
+    }
     // 3. Style
     const styleResult = (0, style_compiler_1.compileStyle)(descriptor, filename, options);
     // 4. Template (Use the new unified No-VDOM compiler!)
@@ -153,7 +157,7 @@ if (typeof module !== 'undefined' && module.hot) {
 }
 
 // console.log('[MulanJS] Component created:', __component__);
-export default __component__;
+module.exports = __component__;
 
 // Helper to get relative path for sourceURL
 // This ensures the generated file appears in a readable folder structure in DevTools
@@ -167,3 +171,42 @@ export default __component__;
     };
 }
 exports.compileSFC = compileSFC;
+// --- Mulan Server Components (MSC) ---
+async function compileSFCForSSR(source, filename, options) {
+    const descriptor = (0, sfc_parser_1.parseMUJS)(source, filename);
+    const scriptResult = await (0, script_compiler_1.compileScript)(descriptor, options);
+    let scriptCode = scriptResult.code;
+    // Robust replacement for various export styles
+    if (scriptCode.includes('export default')) {
+        scriptCode = scriptCode.replace('export default', 'const __component__ =');
+    }
+    else if (scriptCode.includes('exports.default =')) {
+        scriptCode = scriptCode.replace('exports.default =', 'const __component__ =');
+    }
+    else if (scriptCode.includes('module.exports =')) {
+        scriptCode = scriptCode.replace('module.exports =', 'const __component__ =');
+    }
+    else {
+        // Fallback: search for defineComponent if it's there
+        scriptCode += `\nconst __component__ = typeof exports !== 'undefined' ? (exports.default || module.exports) : {};`;
+    }
+    const templateResult = (0, ssr_compiler_1.compileToSSR)(descriptor, scriptResult, undefined);
+    const finalCode = `${scriptCode}
+
+${templateResult.code}
+
+if (__component__.prototype) {
+    __component__.prototype.renderToString = render;
+} else if (typeof __component__ === 'object') {
+    __component__.renderToString = render;
+}
+
+module.exports = __component__;
+`;
+    return {
+        code: finalCode,
+        css: '', // CSS handling for SSR can be extracted separately
+        errors: [...scriptResult.errors, ...templateResult.errors],
+    };
+}
+exports.compileSFCForSSR = compileSFCForSSR;

package/dist/compiler/dom-compiler.d.ts

@@ -0,0 +1,7 @@
+import { SFCDescriptor } from './sfc-parser';
+import { ScriptCompileResult } from './script-compiler';
+export interface DOMCompileResult {
+    code: string;
+    errors: string[];
+}
+export declare function compileToDOM(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): DOMCompileResult;

package/dist/compiler/dom-compiler.js

@@ -16,18 +16,23 @@ function compileToDOM(descriptor, scriptResult, scopedId) {
     // 3. Codegen Phase (AST -> JS DOM Instructions)
     let uidRef = { current: 0 };
     const getUid = () => `_el${uidRef.current++}`;
+    const hoists = [];
+    const getHoistId = () => `_hoist${hoists.length}`;
     // We generate a DocumentFragment at the root
     let codeChunks = [];
-    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 renderFn = `function render() { 
+    const hoistsFn = hoists.join('\n            ');
+    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);
@@ -50,18 +55,73 @@ function compileToDOM(descriptor, scriptResult, scopedId) {
 }
 exports.compileToDOM = compileToDOM;
 // --- Code Generator (AST -> Instructions) ---
-function generateDOMInstruction(node, chunks, getUid, uidRef, bindings, localScope) {
+function renderStaticHTML(node) {
+    if (node.type === 'Text') {
+        const text = node;
+        // Escape HTML for innerHTML injection
+        return htmlEscape(text.content);
+    }
+    if (node.type === 'Element') {
+        const el = node;
+        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) {
+    return str.replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+function generateDOMInstruction(node, chunks, getUid, getHoistId, hoists, uidRef, bindings, localScope) {
+    // --- 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;
+        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;
+        }
+    }
     if (node.type === 'Text') {
         const text = node;
         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;
     }
@@ -75,25 +135,25 @@ function generateDOMInstruction(node, chunks, getUid, uidRef, bindings, localSco
     }
     if (node.type === 'Element') {
         const element = node;
-        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
             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 ${blockId}_frag = this._recoveryMode ? null : 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);
+            const clonedChildId = generateDOMInstruction(elementWithoutIf, 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++) {
                 blockChunks[i] = blockChunks[i].replace(/this\._bindEffect/g, `(${localBindMacro})`);
@@ -110,26 +170,23 @@ function generateDOMInstruction(node, chunks, getUid, uidRef, bindings, localSco
             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}");`);
+            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 = [];
-            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, rowChunks, getUid, uidRef, bindings, rowChildScope);
+            const clonedChildId = generateDOMInstruction(elementWithoutFor, 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.
             for (let i = originalLength; i < rowChunks.length; i++) {
@@ -138,39 +195,39 @@ function generateDOMInstruction(node, chunks, getUid, uidRef, bindings, localSco
             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});`);
+            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)});`);
                 }
             }
         }
@@ -185,19 +242,19 @@ function generateDOMInstruction(node, chunks, getUid, uidRef, bindings, localSco
         if (element._domBindings) {
             for (const b of element._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));`);
                 }
             }
         }
         // 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});`);
             }
         });
         return id;

package/dist/compiler/script-compiler.d.ts

@@ -0,0 +1,11 @@
+import { SFCDescriptor } from './sfc-parser';
+export interface ScriptCompileResult {
+    code: string;
+    bindings?: string[];
+    errors: string[];
+    map?: string;
+}
+export interface CompilerOptions {
+    readFileSync?: (file: string) => string;
+}
+export declare function compileScript(descriptor: SFCDescriptor, options?: CompilerOptions): Promise<ScriptCompileResult>;