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

package/src/compiler/template-compiler.ts

@@ -1,39 +1,7 @@
+
 import { SFCDescriptor } from './sfc-parser';
 import { ScriptCompileResult } from './script-compiler';
-
-// --- AST Definitions ---
-
-type NodeType = 'Element' | 'Text' | 'Interpolation';
-
-type Node = ElementNode | TextNode | InterpolationNode;
-
-interface BaseNode {
-    type: NodeType;
-}
-
-interface ElementNode extends BaseNode {
-    type: 'Element';
-    tag: string;
-    props: Record<string, string>;
-    children: Node[];
-    directives: {
-        vFor?: { item: string; list: string };
-        vIf?: string;
-    };
-}
-
-interface TextNode extends BaseNode {
-    type: 'Text';
-    content: string;
-}
-
-interface InterpolationNode extends BaseNode {
-    type: 'Interpolation';
-    content: string; // The expression inside {{ }}
-}
-
-// --- Compile Function ---
-
+import { parse, Node, ElementNode, TextNode, InterpolationNode } from './ast-parser';
 import { SourceMapGenerator } from 'source-map';
 
 export interface TemplateCompileResult {
@@ -43,14 +11,14 @@ export interface TemplateCompileResult {
 }
 
 export function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): TemplateCompileResult {
-    console.log(`[MulanJS Compiler v1.0.1-dev.2] Compiling template for: ${descriptor.filename || 'anonymous'}`);
+    console.log(`[MulanJS Template Compiler v1.0.1-dev.2] Compiling template for: ${descriptor.filename || 'anonymous'}`);
     const template = descriptor.template;
     if (!template) return { code: 'function render() { return ""; }', errors: [] };
 
     let html = template.content;
     const errors: string[] = [];
 
-    // 1. Parsing Phase (HTML -> AST)
+    // 1. Parsing Phase (HTML -> AST) - Unified Parser
     const ast = parse(html, errors);
 
     // 2. Transform Phase (Scopes, Bindings)
@@ -74,44 +42,28 @@ export function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptC
         }`;
 
     // 4. Source Map Generation
-    // We map the entire render function to the starting line of the template in the source file
     let map = undefined;
     if (descriptor.filename) {
         const generator = new SourceMapGenerator({
-            file: descriptor.filename + '.template.js', // Virtual file name
+            file: descriptor.filename + '.template.js',
         });
 
-        // Find start line of template in original source
-        // descriptor.template.start is the index of content start
         const sourceBefore = descriptor.source.substring(0, template.start);
         const startLine = sourceBefore.split(/\r?\n/).length;
 
-        // Simple mapping: One-to-one mapping isn't easy without AST location tracking
-        // But we can map the 'return' statement to the template start
-        // The render function has about 12 lines of preamble.
-        // Let's just mapping the whole block to the start line for now.
-        // This ensures the file shows up in devtools.
         generator.addMapping({
             generated: { line: 1, column: 0 },
-            source: descriptor.filename, // This should be the .mujs file path
+            source: descriptor.filename,
             original: { line: startLine, column: 0 }
         });
 
-        // Also map the return line (approx line 12)
         generator.addMapping({
             generated: { line: 12, column: 0 },
             source: descriptor.filename,
             original: { line: startLine, column: 0 }
         });
 
-        // We must include the "source content" so DevTools can display it!
-        // IMPORTANT: We want the FULL .mujs content here, so it matches what Webpack sees?
-        // Actually, if we use the same filename as script-compiler, they might conflict or merge.
-        // Script compiler uses 'webpack:///...'
-        // Let's use the same convention.
-        // But we just use the filename here, compiler.ts will handle the final path adjustment if needed.
         generator.setSourceContent(descriptor.filename, descriptor.source);
-
         map = generator.toString();
     }
 
@@ -122,182 +74,6 @@ export function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptC
     };
 }
 
-// --- Parser (Recursive Descent) ---
-
-function parse(template: string, errors: string[]): ElementNode {
-    // Root Wrapper
-    const root: ElementNode = {
-        type: 'Element',
-        tag: 'fragment', // Virtual root
-        props: {},
-        children: [],
-        directives: {}
-    };
-
-    const stack: ElementNode[] = [root];
-    let cursor = 0;
-
-    while (cursor < template.length) {
-        const char = template[cursor];
-
-        if (template.startsWith('<!--', cursor)) {
-            // Comment <!-- ... -->
-            const end = template.indexOf('-->', cursor);
-            if (end === -1) break;
-            // Just skip comments or keep them?
-            // Let's keep them as raw strings to preserve output structure if needed, 
-            // but usually valid HTML comments shouldn't affect structure.
-            // For now, let's just append them to the previous text node or create a text node.
-            // Actually, simply ignoring them is safer for logic, but might remove user comments.
-            // Better: treat as Text so they are emitted as-is.
-            const content = template.slice(cursor, end + 3);
-            stack[stack.length - 1].children.push({ type: 'Text', content });
-            cursor = end + 3;
-        } else if (char === '<') {
-            // Tag
-            if (template[cursor + 1] === '/') {
-                // Closing Tag </tag>
-                const end = template.indexOf('>', cursor);
-                if (end === -1) break;
-                stack.pop();
-                cursor = end + 1;
-            } else {
-                // Opening Tag <tag ...>
-                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: ElementNode = { 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] === '{') {
-            // Interpolation {{ }}
-            const end = template.indexOf('}}', cursor);
-            if (end === -1) break; // formatting error
-
-            const content = template.slice(cursor + 2, end).trim();
-            stack[stack.length - 1].children.push({ type: 'Interpolation', content });
-            cursor = end + 2;
-        } else {
-            // Text
-            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) {
-                stack[stack.length - 1].children.push({ type: 'Text', content });
-            }
-            cursor = end;
-        }
-    }
-
-    return root;
-}
-
-function parseTag(content: string) {
-    // console.log('DEBUG: parseTag content:', content);
-    const parts = content.split(' ');
-    const tag = parts[0];
-    const props: Record<string, string> = {};
-    const directives: ElementNode['directives'] = {};
-
-    // Resume attribute parsing after tag
-    const attrStr = content.slice(tag.length).trim();
-    // console.log('DEBUG: attrStr:', attrStr);
-
-    let i = 0;
-    while (i < attrStr.length) {
-        // Skip spaces
-        if (/\s/.test(attrStr[i])) {
-            i++;
-            continue;
-        }
-
-        // Find key
-        const keyStart = i;
-        while (i < attrStr.length && !/\s|=/.test(attrStr[i])) {
-            i++;
-        }
-        const key = attrStr.slice(keyStart, i);
-
-        // Check for value
-        let value = 'true'; // Default for boolean attributes
-
-        // Skip potential spaces before '=' (e.g. class = "foo")
-        let peek = i;
-        while (peek < attrStr.length && /\s/.test(attrStr[peek])) peek++;
-
-        if (peek < attrStr.length && attrStr[peek] === '=') {
-            i = peek + 1; // Move past '='
-
-            // Skip spaces after '='
-            while (i < attrStr.length && /\s/.test(attrStr[i])) i++;
-
-            if (i < attrStr.length && (attrStr[i] === '"' || attrStr[i] === "'")) {
-                const quote = attrStr[i];
-                i++; // skip quote
-                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++; // skip closing quote
-            } else {
-                // unquoted value
-                const valStart = i;
-                while (i < attrStr.length && !/\s/.test(attrStr[i])) {
-                    i++;
-                }
-                value = attrStr.slice(valStart, i);
-            }
-        } else {
-            // Boolean attribute, no value
-            // i remains at end of key
-        }
-
-        // Store
-        if (key === 'v-if' || key === 'mu-if') {
-            directives.vIf = value;
-        } else if (key === 'v-for' || key === 'mu-for') {
-            const parts = value.split(' in ');
-            if (parts.length < 2) {
-                console.warn(`[MulanJS Compiler] Warning: Invalid loop expression "${value}". Expected "item in list".`);
-                directives.vFor = { item: '_item', list: '[]' }; // Fallback with safe identifier
-            } else {
-                const item = parts[0];
-                const list = parts.slice(1).join(' in '); // Join rest in case list has 'in'
-                directives.vFor = { item: item.trim(), list: list.trim() };
-            }
-        } else if (key) {
-            props[key] = value;
-        }
-    }
-
-    return { tag, props, directives };
-}
-
 // --- Transformer ---
 
 const JS_KEYWORDS = new Set([
@@ -317,29 +93,24 @@ const GLOBALS = new Set([
 function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: string, localScope: string[] = [], filename?: string) {
     if (node.type === 'Element') {
         const element = node as ElementNode;
-        // Scoped ID
         if (scopedId && element.tag !== 'fragment') {
             element.props[scopedId] = '';
         }
 
-        // IRON FORTRESS: Detect mu-raw/v-raw for XSS bypass
         const isRaw = 'mu-raw' in element.props || 'v-raw' in element.props;
         if (isRaw) {
             delete element.props['mu-raw'];
             delete element.props['v-raw'];
         }
 
-        // 0. Update Local Scope for Children (v-for)
         const childScope = [...localScope];
         if (element.directives.vFor) {
             childScope.push(element.directives.vFor.item);
         }
 
-        // Bindings (Attributes)
-        const propertyBindings: string[] = []; // Stores generated side-effect code (props and events)
+        const propertyBindings: string[] = [];
 
         for (const key in element.props) {
-            // 0. Property Binding: .columns="${state.cols}"
             if (key.startsWith('.')) {
                 if (!element.props['data-mu-id']) {
                     const id = 'mu_' + Math.random().toString(36).substr(2, 9);
@@ -359,7 +130,6 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
                 propertyBindings.push(`this._b('${id}', '${propName}', ${expr})`);
                 delete element.props[key];
             }
-            // 1. Event Handlers: @click="count++", v-on:click="toggle", or onclick="increment()"
             else if (key.startsWith('@') || key.startsWith('v-on:') || (key.startsWith('on') && key.length > 2)) {
                 if (!element.props['data-mu-id']) {
                     const id = 'mu_' + Math.random().toString(36).substr(2, 9);
@@ -370,13 +140,11 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
                 let eventName = '';
                 if (key.startsWith('@')) eventName = key.slice(1);
                 else if (key.startsWith('v-on:')) eventName = key.slice(5);
-                else eventName = key.slice(2); // standard 'on' prefix (onclick -> click)
+                else eventName = key.slice(2);
 
                 const rawHandler = element.props[key];
 
                 let bound = processBindings(rawHandler, scriptResult.bindings, localScope);
-                // Wrap in anonymous function if it looks like a statement or expression with side effects
-                // Simple heuristic: if it has parentheses and isn't a simple function reference
                 const finalHandler = (bound.includes('(') || bound.includes('=') || bound.includes('++'))
                     ? `($event) => { ${bound} }`
                     : bound;
@@ -384,30 +152,22 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
                 propertyBindings.push(`this._e('${id}', '${eventName}', ${finalHandler})`);
                 delete element.props[key];
             }
-            // 2. Standard Attributes Interpolation: class="{{ active }}"
             else {
                 let rawValue = element.props[key];
-                // Check for {{ }} -> convert to ${ }
                 if (rawValue.includes('{{')) {
-                    // Capture content and wrap in ${}, trimming whitespace
                     rawValue = rawValue.replace(/\{\{\s*(.*?)\s*\}\}/g, '${$1}');
                 }
 
-                // Check for ${ } -> process internal bindings
                 if (rawValue.includes('${')) {
-                    // It's a template literal now
                     element.props[key] = rawValue.replace(/\$\{(.*?)\}/g, (_, expr) => {
                         const bound = processBindings(expr, scriptResult.bindings, localScope);
                         return '${_h(' + bound + ')}';
                     });
                 }
             }
-            // ... (rest of attributes)
         }
 
-        // Store side-effects on the node for the Generator to use
         if (propertyBindings.length > 0) {
-            // We'll attach it to a temporary property on the AST node
             (element as any)._propertySideEffects = propertyBindings;
         }
 
@@ -422,14 +182,12 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
         interpolation.content = processBindings(interpolation.content, scriptResult.bindings, localScope);
     } else if (node.type === 'Text') {
         const text = node as TextNode;
-        // Support native template literals: ${ expr }
         if (text.content.includes('${')) {
             const componentName = filename ? filename.split(/[/\\]/).pop()?.split('.')[0].replace(/\W/g, '') || 'App' : 'App';
             const bindPrefix = `window['${componentName}'].`;
 
             text.content = text.content.replace(/\$\{(.*?)\}/g, (_, expr) => {
                 let bound = processBindings(expr, scriptResult.bindings, localScope);
-                // If processBindings added 'this.', replace it with global access for maximum safety in string templates
                 bound = bound.replace(/this\./g, bindPrefix);
                 return '${_h(' + bound + ')}';
             });
@@ -438,36 +196,23 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
 }
 
 function processBindings(exp: string, bindings: string[] | undefined, localScope: string[]) {
-    // Strategy:
-    // 1. Identifiers in 'bindings' (Setup API) -> prefix this.
-    // 2. Identifiers in 'localScope' (v-for) -> keep as is.
-    // 3. If 'bindings' is empty (Options API), prefix everything NOT in localScope/Keywords/Globals.
-
     const isOptionsAPI = !bindings || bindings.length === 0;
     const bindingSet = new Set(bindings || []);
 
-    // Regex for identifiers
     return exp.replace(/\b([a-zA-Z_$][\w$]*)\b/g, (match, id, offset, str) => {
-        // 1. Skip if property access (dot before) (e.g. user.name -> user is checked, name is skipped)
         if (offset > 0 && str[offset - 1] === '.') return match;
 
-        // 2. Skip object key (colon after) (e.g. { name: val } -> name skipped)
-        // Simple check: next char is ':'
         let i = offset + match.length;
         while (i < str.length && /\s/.test(str[i])) i++;
-        if (str[i] === ':' && str[i + 1] !== '=') return match; // : but not := (not that valid in JS contexts usually but safe)
+        if (str[i] === ':' && str[i + 1] !== '=') return match;
 
-        // 3. Skip Keywords / Globals / Local Vars
         if (JS_KEYWORDS.has(id)) return match;
         if (GLOBALS.has(id)) return match;
         if (localScope.includes(id)) return match;
 
-        // 4. Decision
         if (isOptionsAPI) {
-            // Options API: Prefix everything unknown
             return `this.${id}`;
         } else {
-            // Setup API: Only prefix explicit bindings
             if (bindingSet.has(id)) {
                 return `this.${id}`;
             }
@@ -482,66 +227,50 @@ function processBindings(exp: string, bindings: string[] | undefined, localScope
 function generate(node: Node, bindings: string[], localScope: string[] = []): string {
     if (node.type === 'Text') {
         const text = node as TextNode;
-        // Escape backticks
         return `\`${text.content.replace(/`/g, '\\`')}\``;
     }
 
     if (node.type === 'Interpolation') {
         const interp = node as InterpolationNode;
         const isRaw = (node as any).raw === true;
-        return `String(_h(${interp.content}, ${isRaw}))`; // Safe cast with Heimdall Shield
+        return `String(_h(${interp.content}, ${isRaw}))`;
     }
 
     if (node.type === 'Element') {
         const element = node as ElementNode;
 
-        // Update Local Scope for Children (v-for)
         const childScope = [...localScope];
         if (element.directives.vFor) {
             childScope.push(element.directives.vFor.item);
         }
 
         if (element.tag === 'fragment') {
-            return element.children.map(c => generate(c, bindings, childScope)).join(' + '); // Root fragment join
+            return element.children.map(c => generate(c, bindings, childScope)).join(' + ');
         }
 
-        // Directives
         if (element.directives.vIf) {
             const condition = element.directives.vIf;
-            // Generate ternary: cond ? render() : ''
             const children = element.children.map(c => generate(c, bindings, childScope)).join(' + ') || '""';
             const open = `<${element.tag}${genProps(element.props)}>`;
             const close = `</${element.tag}>`;
-            // Apply bindings to v-if condition
-            // FIX: Wrap condition in _s() to unwrap signals (handling 'isOpen' vs 'isOpen.value')
             return `(_s(${processBindings(condition, bindings, localScope)}) ? \`${open}\` + (${children}) + \`${close}\` : "")`;
         }
 
         if (element.directives.vFor) {
             const { item, list } = element.directives.vFor;
-            // list.map(item => render).join('')
-
-            // Apply bindings to the list expression
-            // FIX: Wrap list in _s() to ensure we map over the Array, not the Signal Object
             const boundList = `_s(${processBindings(list, bindings, localScope)})`;
-
             const children = element.children.map(c => generate(c, bindings, childScope)).join(' + ') || '""';
             const open = `<${element.tag}${genProps(element.props)}>`;
             const close = `</${element.tag}>`;
-
-            // Add safety check: ensure boundList is an Array before mapping
             return `(Array.isArray(${boundList}) ? ${boundList}.map(${item} => \`${open}\` + (${children}) + \`${close}\`).join('') : "")`;
         }
 
-        // Standard Element
         const children = element.children.map(c => generate(c, bindings, childScope)).join(' + ') || '""';
         const open = `<${element.tag}${genProps(element.props)}>`;
         const close = `</${element.tag}>`;
 
         let code = `\`${open}\` + (${children}) + \`${close}\``;
 
-        // Inject Property Binding Side Effects using Comma Operator
-        // (this._b(..), this._b(..), `html`)
         if ((element as any)._propertySideEffects) {
             const effects = (element as any)._propertySideEffects.join(', ');
             code = `(${effects}, ${code})`;
@@ -558,7 +287,6 @@ function genProps(props: Record<string, string>) {
     for (const key in props) {
         str += ` ${key}`;
         if (props[key] !== '') {
-            // Escape double quotes in value
             const escaped = props[key].replace(/"/g, '&quot;');
             str += `="${escaped}"`;
         }