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

package/dist/compiler/template-compiler.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileTemplate = void 0;
-// --- Compile Function ---
+const ast_parser_1 = require("./ast-parser");
 const source_map_1 = require("source-map");
 function compileTemplate(descriptor, scriptResult, scopedId) {
-    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 = [];
-    // 1. Parsing Phase (HTML -> AST)
-    const ast = parse(html, errors);
+    // 1. Parsing Phase (HTML -> AST) - Unified Parser
+    const ast = (0, ast_parser_1.parse)(html, errors);
     // 2. Transform Phase (Scopes, Bindings)
     transform(ast, scriptResult, scopedId, [], descriptor.filename);
     // 3. Codegen Phase (AST -> JS Function)
@@ -30,38 +30,23 @@ function compileTemplate(descriptor, scriptResult, scopedId) {
             return ${code}; 
         }`;
     // 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 source_map_1.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();
     }
@@ -72,174 +57,6 @@ function compileTemplate(descriptor, scriptResult, scopedId) {
     };
 }
 exports.compileTemplate = compileTemplate;
-// --- 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',
@@ -257,25 +74,20 @@ 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)
+        const propertyBindings = [];
         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);
@@ -295,7 +107,6 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
                 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);
@@ -308,39 +119,29 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
                 else if (key.startsWith('v-on:'))
                     eventName = key.slice(5);
                 else
-                    eventName = key.slice(2); // standard 'on' prefix (onclick -> click)
+                    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;
                 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 => {
@@ -356,13 +157,11 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
     }
     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 + ')}';
             });
@@ -370,38 +169,26 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
     }
 }
 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
+            return match;
         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}`;
             }
@@ -413,54 +200,41 @@ function processBindings(exp, bindings, localScope) {
 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
+        return `String(_h(${interp.content}, ${isRaw}))`;
     }
     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
+            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._propertySideEffects) {
             const effects = element._propertySideEffects.join(', ');
             code = `(${effects}, ${code})`;
@@ -474,7 +248,6 @@ function genProps(props) {
     for (const key in props) {
         str += ` ${key}`;
         if (props[key] !== '') {
-            // Escape double quotes in value
             const escaped = props[key].replace(/"/g, '&quot;');
             str += `="${escaped}"`;
         }

package/dist/core/component.js

@@ -145,6 +145,8 @@ export class MuComponent {
         const cache = this._listCaches.get(listId);
         const newKeys = new Set();
         const parent = anchorToken.parentNode;
+        if (!parent)
+            return;
         // 1. Array Iteration: Match against cache or Create
         // Use a DocumentFragment to batch new node insertions natively
         const collectorFrag = document.createDocumentFragment();
@@ -247,6 +249,8 @@ export class MuComponent {
                 }
                 cached.isMounted = true;
                 const parent = anchorToken.parentNode;
+                if (!parent)
+                    return;
                 const targetSibling = anchorToken.nextSibling;
                 nodesToMount.forEach(node => {
                     parent.insertBefore(node, targetSibling);

package/dist/mulan.esm.js

@@ -911,6 +911,8 @@ class MuComponent {
         const cache = this._listCaches.get(listId);
         const newKeys = new Set();
         const parent = anchorToken.parentNode;
+        if (!parent)
+            return;
         // 1. Array Iteration: Match against cache or Create
         // Use a DocumentFragment to batch new node insertions natively
         const collectorFrag = document.createDocumentFragment();
@@ -1013,6 +1015,8 @@ class MuComponent {
                 }
                 cached.isMounted = true;
                 const parent = anchorToken.parentNode;
+                if (!parent)
+                    return;
                 const targetSibling = anchorToken.nextSibling;
                 nodesToMount.forEach(node => {
                     parent.insertBefore(node, targetSibling);