@mulanjs/mulanjs 1.0.1-dev.20260212143840

package/dist/compiler/template-compiler.js

@@ -0,0 +1,442 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileTemplate = compileTemplate;
+function compileTemplate(descriptor, scriptResult, scopedId) {
+    console.log(`[MulanJS 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 = [];
+    // 1. Parsing Phase (HTML -> AST)
+    const ast = parse(html, errors);
+    // 2. Transform Phase (Scopes, Bindings)
+    transform(ast, scriptResult, scopedId, [], descriptor.filename);
+    // 3. Codegen Phase (AST -> JS Function)
+    const code = generate(ast, scriptResult.bindings || []);
+    return {
+        code: `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.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            };
+            return ${code}; 
+        }`,
+        errors
+    };
+}
+// --- Parser (Recursive Descent) ---
+function parse(template, errors) {
+    // Root Wrapper
+    const root = {
+        type: 'Element',
+        tag: 'fragment', // Virtual root
+        props: {},
+        children: [],
+        directives: {}
+    };
+    const stack = [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 = { 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) {
+    // console.log('DEBUG: parseTag content:', content);
+    const parts = content.split(' ');
+    const tag = parts[0];
+    const props = {};
+    const 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([
+    'true', 'false', 'null', 'undefined', 'this', 'window',
+    'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'return',
+    'var', 'let', 'const', 'new', 'function', 'class', 'import', 'export',
+    'typeof', 'instanceof', 'void', 'delete', 'in', 'of', 'try', 'catch', 'throw', 'finally',
+    'debugger', 'super', 'extends', 'async', 'await', 'yield'
+]);
+const GLOBALS = new Set([
+    'Math', 'Date', 'String', 'Number', 'Boolean', 'Object', 'Array', 'JSON',
+    'RegExp', 'Map', 'Set', 'WeakMap', 'WeakSet', 'Promise', 'Symbol', 'Error',
+    'console', 'parseInt', 'parseFloat', 'isNaN', 'isFinite', 'encodeURIComponent', 'decodeURIComponent'
+]);
+function transform(node, scriptResult, scopedId, localScope = [], filename) {
+    var _a;
+    if (node.type === 'Element') {
+        const element = node;
+        // 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 = []; // Stores generated side-effect code (props and events)
+        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);
+                    element.props['data-mu-id'] = id;
+                }
+                const id = element.props['data-mu-id'];
+                const propName = key.slice(1);
+                const rawValue = element.props[key];
+                let expr = "''";
+                if (rawValue.startsWith('${') && rawValue.endsWith('}')) {
+                    const inner = rawValue.slice(2, -1);
+                    expr = processBindings(inner, scriptResult.bindings, localScope);
+                }
+                else {
+                    expr = JSON.stringify(rawValue);
+                }
+                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);
+                    element.props['data-mu-id'] = id;
+                }
+                const id = element.props['data-mu-id'];
+                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)
+                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;
+                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._propertySideEffects = propertyBindings;
+        }
+        element.children.forEach(child => {
+            if (isRaw && (child.type === 'Interpolation' || child.type === 'Text')) {
+                child.raw = true;
+            }
+            transform(child, scriptResult, scopedId, childScope, filename);
+        });
+    }
+    else if (node.type === 'Interpolation') {
+        const interpolation = node;
+        interpolation.content = processBindings(interpolation.content, scriptResult.bindings, localScope);
+    }
+    else if (node.type === 'Text') {
+        const text = node;
+        // Support native template literals: ${ expr }
+        if (text.content.includes('${')) {
+            const componentName = filename ? ((_a = filename.split(/[/\\]/).pop()) === null || _a === void 0 ? void 0 : _a.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 + ')}';
+            });
+        }
+    }
+}
+function processBindings(exp, bindings, localScope) {
+    // 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)
+        // 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}`;
+            }
+        }
+        return match;
+    });
+}
+// --- Generator ---
+function generate(node, bindings, localScope = []) {
+    if (node.type === 'Text') {
+        const text = node;
+        // Escape backticks
+        return `\`${text.content.replace(/`/g, '\\`')}\``;
+    }
+    if (node.type === 'Interpolation') {
+        const interp = node;
+        const isRaw = node.raw === true;
+        return `String(_h(${interp.content}, ${isRaw}))`; // Safe cast with Heimdall Shield
+    }
+    if (node.type === 'Element') {
+        const element = node;
+        // 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
+        }
+        // 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._propertySideEffects) {
+            const effects = element._propertySideEffects.join(', ');
+            code = `(${effects}, ${code})`;
+        }
+        return code;
+    }
+    return '""';
+}
+function genProps(props) {
+    let str = '';
+    for (const key in props) {
+        str += ` ${key}`;
+        if (props[key] !== '') {
+            // Escape double quotes in value
+            const escaped = props[key].replace(/"/g, '&quot;');
+            str += `="${escaped}"`;
+        }
+    }
+    return str;
+}