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

package/src/compiler/ssr-compiler.ts

@@ -0,0 +1,157 @@
+import { SFCDescriptor } from './sfc-parser';
+import { ScriptCompileResult } from './script-compiler';
+import { parse, Node, ElementNode, TextNode, InterpolationNode } from './ast-parser';
+
+export interface SSRCompileResult {
+    code: string;
+    errors: string[];
+}
+
+export function compileToSSR(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): SSRCompileResult {
+    const template = descriptor.template;
+    if (!template) return { code: 'function render() { return ""; }', errors: [] };
+
+    const errors: string[] = [];
+    const ast = parse(template.content, errors);
+
+    // Simplistic Transformer (Options API bindings mapping)
+    const bindings = scriptResult.bindings || [];
+    const localScope: string[] = [];
+
+    let uidRef = { current: 0 };
+    const getUid = () => uidRef.current++;
+
+    let codeChunks: string[] = [];
+    ast.children.forEach(child => {
+        const chunk = generateSSRInstruction(child, bindings, localScope, getUid);
+        if (chunk) codeChunks.push(chunk);
+    });
+
+    // The render function generates a giant template literal
+    const bodyFn = `return \`${codeChunks.join('')}\`;`;
+
+    const renderFn = `function render() { 
+            const _s = (v) => (v && typeof v === 'object' && 'value' in v) ? v.value : (v === null || v === undefined ? '' : v);
+            const _h = (v) => {
+                const val = _s(v);
+                if (val === null || val === undefined) return '';
+                if (typeof val !== 'string') return val;
+                if (typeof Mulan !== 'undefined' && Mulan.Security) {
+                    return Mulan.Security.sanitize(val);
+                }
+                return val.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+            };
+            
+            ${bodyFn}
+        }`;
+
+    return {
+        code: renderFn,
+        errors
+    };
+}
+
+function processBindings(exp: string, bindings: string[], localScope: string[]) {
+    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;
+        // simplistic keyword check
+        if (['true', 'false', 'null', 'undefined', 'this', 'Math'].includes(id) || localScope.includes(id)) return match;
+        if (isOptionsAPI) return `this.${id}`;
+        if (bindingSet.has(id)) return `this.${id}`;
+        return match;
+    });
+}
+
+function generateSSRInstruction(node: Node, bindings: string[], localScope: string[], getUid: () => number): string {
+    if (node.type === 'Text') {
+        const text = node as TextNode;
+        // we can preserve interpolation \${ } because the outer string is also a template literal
+        // but we need to ensure the variables map to 'this'
+        if (text.content.includes('${')) {
+            let processed = text.content.replace(/\$\{(.*?)\}/g, (_: any, expr: string) => {
+                return `\${_h(${processBindings(expr, bindings, localScope)})}`;
+            });
+            return processed;
+        }
+        return text.content;
+    }
+
+    if (node.type === 'Interpolation') {
+        const interp = node as InterpolationNode;
+        return `\${_h(${processBindings(interp.content, bindings, localScope)})}`;
+    }
+
+    if (node.type === 'Element') {
+        const el = node as ElementNode;
+        const uid = getUid();
+        let html = `<${el.tag} data-mu-node-id="${uid}"`;
+
+        let vIfCondition = '';
+        let vForDirective: any = null;
+
+        for (const key in el.props) {
+            if (key === 'v-if' || key === 'mu-if') {
+                vIfCondition = processBindings(el.props[key], bindings, localScope);
+                continue;
+            }
+            if (key === 'v-for' || key === 'mu-for') {
+                const parts = el.props[key].split(' in ');
+                if (parts.length >= 2) {
+                    vForDirective = { item: parts[0].trim(), list: processBindings(parts.slice(1).join(' in ').trim(), bindings, localScope) };
+                }
+                continue;
+            }
+
+            // Client side events are ignored in SSR HTML output
+            if (key.startsWith('@') || key.startsWith('v-on:') || key.startsWith('on')) {
+                // To support Resumability, we'd inject a serialize marker here
+                // html += ` mu-event="${key}"`; 
+                continue;
+            }
+
+            let value = el.props[key];
+            if (key.startsWith(':') || key.startsWith('.')) {
+                let attrName = key.slice(1);
+                let expr = processBindings(value, bindings, localScope);
+                html += ` ${attrName}="\${_h(${expr})}"`;
+            } else {
+                if (value.includes('${')) {
+                    value = value.replace(/\$\{(.*?)\}/g, (_: any, expr: string) => {
+                        return `\${_h(${processBindings(expr, bindings, localScope)})}`;
+                    });
+                    html += ` ${key}="${value}"`;
+                } else {
+                    html += ` ${key}="${value.replace(/"/g, '&quot;')}"`;
+                }
+            }
+        }
+
+        const isSelfClosing = ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(el.tag.toLowerCase());
+        if (isSelfClosing) {
+            html += '/>';
+        } else {
+            html += '>';
+            for (const child of el.children) {
+                html += generateSSRInstruction(child, bindings, localScope, getUid);
+            }
+            html += `</${el.tag}>`;
+        }
+
+        // Apply wrappers for Control Flow (v-if / v-for)
+        if (vIfCondition) {
+            html = `\${(${vIfCondition}) ? \`${html}\` : '<!--mu-if-->'}`;
+        }
+
+        if (vForDirective) {
+            const { item, list } = vForDirective;
+            // The mapping function returns strings which we join
+            html = `\${(${list}).map((${item}, _index) => \`${html}\`).join('')}`;
+        }
+
+        return html;
+    }
+
+    return '';
+}

package/src/loader/index.js

@@ -25,34 +25,27 @@ module.exports = function (content) {
         }
     }
 
-    // Resolve path to the compiled compiler module (ESM)
-    // Assuming structure: dist/loader/index.js and dist/compiler/compiler.js
-    // OR src/loader/index.js and dist/compiler/compiler.js
-    // We'll target the dist folder for the compiler.
+    // Resolve path to the compiled compiler module (CJS)
     const compilerRef = path.resolve(__dirname, '../../dist/compiler/compiler.js');
-    const compilerUrl = pathToFileURL(compilerRef).href;
-
-    // Use dynamic import to load ESM compiler from CommonJS loader
-    import(compilerUrl).then(async compiler => {
-        try {
-            const result = await compiler.compileSFC(content, filePath, {
-                readFileSync: (file) => fs.readFileSync(file, 'utf-8')
-            });
 
+    try {
+        const compiler = require(compilerRef);
+        compiler.compileSFC(content, filePath, {
+            readFileSync: (file) => fs.readFileSync(file, 'utf-8')
+        }).then(result => {
             if (result.errors && result.errors.length > 0) {
                 this.emitError(new Error(result.errors.join('\n')));
             }
 
             // Pass source map to Webpack if available
-            const map = result.map ? JSON.parse(result.map) : null;
+            const map = result.map ? (typeof result.map === 'string' ? JSON.parse(result.map) : result.map) : null;
             callback(null, result.code, map);
-        } catch (e) {
+        }).catch(e => {
             callback(e);
-        }
-    }).catch(err => {
-        // Fallback or helpful error
-        console.error(`[MulanJS Loader] Failed to load compiler from ${compilerUrl}`);
+        });
+    } catch (err) {
+        console.error(`[MulanJS Loader] Failed to load compiler from ${compilerRef}`);
         console.error(`Make sure to run 'npm run build' to generate the compiler.`);
         callback(err);
-    });
+    }
 };