@mulanjs/mulanjs 1.0.1-dev.20260212143840

package/src/compiler/template-compiler.ts

@@ -0,0 +1,519 @@
+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 ---
+
+export interface TemplateCompileResult {
+    code: string;
+    errors: string[];
+}
+
+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'}`);
+    const template = descriptor.template;
+    if (!template) return { code: 'function render() { return ""; }', errors: [] };
+
+    let html = template.content;
+    const errors: string[] = [];
+
+    // 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: 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([
+    '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: 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)
+
+        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 as any)._propertySideEffects = propertyBindings;
+        }
+
+        element.children.forEach(child => {
+            if (isRaw && (child.type === 'Interpolation' || child.type === 'Text')) {
+                (child as any).raw = true;
+            }
+            transform(child, scriptResult, scopedId, childScope, filename);
+        });
+    } else if (node.type === 'Interpolation') {
+        const interpolation = node as InterpolationNode;
+        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 + ')}';
+            });
+        }
+    }
+}
+
+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)
+
+        // 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: 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
+    }
+
+    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
+        }
+
+        // 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})`;
+        }
+
+        return code;
+    }
+
+    return '""';
+}
+
+function genProps(props: Record<string, string>) {
+    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;
+}

package/src/compiler/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es2019",
+        "outDir": "../../dist/compiler",
+        "moduleResolution": "node",
+        "esModuleInterop": true
+    },
+    "include": [
+        "./**/*"
+    ]
+}

package/src/loader/index.js

@@ -0,0 +1,81 @@
+
+const path = require('path');
+const fs = require('fs');
+const { pathToFileURL } = require('url');
+
+module.exports = function (content) {
+    const callback = this.async();
+    const filePath = this.resourcePath;
+    const context = this.context || path.dirname(filePath);
+
+    // --- External File Processor ---
+    // Inlines <script src="..."> and <style src="..."> before compilation
+    const inlineExternalFiles = (source) => {
+        // Regex to match <tag ... src="...">... </tag> or <tag ... src="..." />
+        // Captures: 1=TagName, 2=Attributes before src, 3=Quote, 4=Path, 5=Attributes after src
+        const tagRegex = /<(script|style)([\s\S]*?)src=(["'])(.*?)\3([\s\S]*?)>(?:<\/\1>|\s*\/>)?/gi;
+
+        return source.replace(tagRegex, (match, tagName, attrsBefore, quote, srcPath, attrsAfter) => {
+            try {
+                // Resolve path
+                const absolutePath = path.resolve(context, srcPath);
+
+                // Add as dependency for Webpack HMR/Watch
+                this.addDependency(absolutePath);
+
+                // Read content
+                const externalContent = fs.readFileSync(absolutePath, 'utf-8');
+
+                console.log(`[MulanJS Loader] Inlined external ${tagName}: ${srcPath}`);
+
+                // Auto-detect TypeScript env
+                let finalAttrs = attrsBefore + attrsAfter;
+                if (srcPath.endsWith('.ts') && !finalAttrs.includes('lang=')) {
+                    finalAttrs += ' lang="ts"';
+                }
+
+                // Return new tag with content, removing the src attribute
+                return `<${tagName}${finalAttrs}>\n${externalContent}\n</${tagName}>`;
+            } catch (err) {
+                this.emitError(new Error(`[MulanJS Loader] Failed to load external file: ${srcPath}\n${err.message}`));
+                return match; // Return original on error to likely fail later or show error
+            }
+        });
+    };
+
+    try {
+        content = inlineExternalFiles(content);
+    } catch (e) {
+        callback(e);
+        return;
+    }
+
+    // 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.
+    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(compiler => {
+        try {
+            const result = compiler.compileSFC(content, filePath);
+
+            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;
+            callback(null, result.code, map);
+        } catch (e) {
+            callback(e);
+        }
+    }).catch(err => {
+        // Fallback or helpful error
+        console.error(`[MulanJS Loader] Failed to load compiler from ${compilerUrl}`);
+        console.error(`Make sure to run 'npm run build' to generate the compiler.`);
+        callback(err);
+    });
+};