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

package/src/compiler/ast-parser.ts

@@ -0,0 +1,258 @@
+
+// --- AST Definitions ---
+
+export type NodeType = 'Element' | 'Text' | 'Interpolation';
+
+export type Node = ElementNode | TextNode | InterpolationNode;
+
+export interface BaseNode {
+    type: NodeType;
+}
+
+export interface ElementNode extends BaseNode {
+    type: 'Element';
+    tag: string;
+    props: Record<string, string>;
+    children: Node[];
+    directives: {
+        vFor?: { item: string; list: string };
+        vIf?: string;
+    };
+}
+
+export interface TextNode extends BaseNode {
+    type: 'Text';
+    content: string;
+}
+
+export interface InterpolationNode extends BaseNode {
+    type: 'Interpolation';
+    content: string; // The expression inside {{ }}
+}
+
+/**
+ * Decodes standard HTML entities.
+ */
+export function decodeEntities(str: string): string {
+    return str
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'")
+        .replace(/&nbsp;/g, '\u00A0');
+}
+
+/**
+ * Unified MulanJS Template Parser
+ * Handles HTML tags, {{ }} interpolation, and is robust against raw < symbols in text.
+ */
+export function parse(template: string, errors: string[]): ElementNode {
+    const root: ElementNode = {
+        type: 'Element',
+        tag: 'fragment',
+        props: {},
+        children: [],
+        directives: {}
+    };
+
+    const stack: ElementNode[] = [root];
+    let cursor = 0;
+
+    while (cursor < template.length) {
+        const char = template[cursor];
+
+        // 1. Comments
+        if (template.startsWith('<!--', cursor)) {
+            const end = template.indexOf('-->', cursor);
+            if (end === -1) {
+                errors.push('Unclosed HTML comment.');
+                break;
+            }
+            cursor = end + 3;
+        }
+        // 2. Tags (with lookahead check for robustness)
+        else if (char === '<' && /[\/a-zA-Z!]/.test(template[cursor + 1])) {
+            if (template[cursor + 1] === '/') {
+                // Closing Tag
+                const end = template.indexOf('>', cursor);
+                if (end === -1) {
+                    errors.push('Unclosed closing tag.');
+                    break;
+                }
+                const tagName = template.slice(cursor + 2, end).trim();
+                // Find matching element in stack to pop
+                if (stack.length > 1 && stack[stack.length - 1].tag === tagName) {
+                    stack.pop();
+                } else {
+                    errors.push(`Mismatched closing tag </${tagName}>.`);
+                }
+                cursor = end + 1;
+            } else {
+                // Opening Tag
+                const end = template.indexOf('>', cursor);
+                if (end === -1) {
+                    errors.push('Unclosed opening tag.');
+                    break;
+                }
+
+                let tagContent = template.slice(cursor + 1, end);
+                const isSelfClosing = tagContent.endsWith('/') || ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(tagContent.split(' ')[0].toLowerCase());
+
+                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;
+            }
+        }
+        // 3. Interpolation {{ }}
+        else if (template.startsWith('{{', cursor)) {
+            const end = template.indexOf('}}', cursor);
+            if (end === -1) {
+                errors.push('Unclosed interpolation {{ }}.');
+                break;
+            }
+
+            const content = template.slice(cursor + 2, end).trim();
+            stack[stack.length - 1].children.push({ type: 'Interpolation', content });
+            cursor = end + 2;
+        }
+        // 4. Native Template Literals ${ } (Protection)
+        else if (template.startsWith('${', cursor)) {
+            // Find end of ${ } while respecting nested braces
+            let innerCursor = cursor + 2;
+            let depth = 1;
+            while (innerCursor < template.length && depth > 0) {
+                if (template[innerCursor] === '{') depth++;
+                if (template[innerCursor] === '}') depth--;
+                innerCursor++;
+            }
+
+            const content = template.slice(cursor, innerCursor);
+            // Treat as text but this block is now "atomic" and won't be split by < checks
+            const lastChild = stack[stack.length - 1].children[stack[stack.length - 1].children.length - 1];
+            if (lastChild && lastChild.type === 'Text') {
+                lastChild.content += content;
+            } else {
+                stack[stack.length - 1].children.push({ type: 'Text', content });
+            }
+            cursor = innerCursor;
+        }
+        // 5. Text Nodes
+        else {
+            let nextTag = template.indexOf('<', cursor);
+            let nextInterp = template.indexOf('{{', cursor);
+            let nextNative = template.indexOf('${', cursor);
+
+            let end = template.length;
+
+            // Heuristic for nextTag: it must look like a tag start
+            while (nextTag !== -1) {
+                if (/[\/a-zA-Z!]/.test(template[nextTag + 1])) {
+                    break;
+                }
+                nextTag = template.indexOf('<', nextTag + 1);
+            }
+
+            if (nextTag !== -1 && nextTag < end) end = nextTag;
+            if (nextInterp !== -1 && nextInterp < end) end = nextInterp;
+            if (nextNative !== -1 && nextNative < end) end = nextNative;
+
+            const rawContent = template.slice(cursor, end);
+            const content = decodeEntities(rawContent);
+
+            if (content) {
+                const lastChild = stack[stack.length - 1].children[stack[stack.length - 1].children.length - 1];
+                if (lastChild && lastChild.type === 'Text') {
+                    lastChild.content += content;
+                } else {
+                    stack[stack.length - 1].children.push({ type: 'Text', content });
+                }
+            }
+            cursor = end;
+        }
+    }
+
+    return root;
+}
+
+export function parseTag(content: string) {
+    const parts = content.split(' ');
+    const tag = parts[0];
+    const props: Record<string, string> = {};
+    const directives: ElementNode['directives'] = {};
+
+    const attrStr = content.slice(tag.length).trim();
+
+    let i = 0;
+    while (i < attrStr.length) {
+        if (/\s/.test(attrStr[i])) {
+            i++;
+            continue;
+        }
+
+        const keyStart = i;
+        while (i < attrStr.length && !/\s|=/.test(attrStr[i])) {
+            i++;
+        }
+        const key = attrStr.slice(keyStart, i);
+
+        let value = 'true';
+
+        let peek = i;
+        while (peek < attrStr.length && /\s/.test(attrStr[peek])) peek++;
+
+        if (peek < attrStr.length && attrStr[peek] === '=') {
+            i = peek + 1;
+            while (i < attrStr.length && /\s/.test(attrStr[i])) i++;
+
+            if (i < attrStr.length && (attrStr[i] === '"' || attrStr[i] === "'")) {
+                const quote = attrStr[i];
+                i++;
+                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++;
+            } else {
+                const valStart = i;
+                while (i < attrStr.length && !/\s/.test(attrStr[i])) {
+                    i++;
+                }
+                value = attrStr.slice(valStart, i);
+            }
+        }
+
+        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) {
+                directives.vFor = { item: '_item', list: '[]' };
+            } else {
+                const item = parts[0];
+                const list = parts.slice(1).join(' in ');
+                directives.vFor = { item: item.trim(), list: list.trim() };
+            }
+        } else if (key) {
+            props[key] = value;
+        }
+    }
+
+    return { tag, props, directives };
+}

package/src/compiler/compiler.ts

@@ -30,7 +30,7 @@ export async function compileSFC(source: string, filename: string, options?: Com
     // 3. Style
     const styleResult = compileStyle(descriptor, filename, options);
 
-    // 4. Template (Use the new No-VDOM compiler!)
+    // 4. Template (Use the new unified No-VDOM compiler!)
     const templateResult = compileToDOM(descriptor, scriptResult, styleResult.scopedId);
 
     // Calculate offsets for source map merging

package/src/compiler/dom-compiler.ts

@@ -1,36 +1,7 @@
+
 import { SFCDescriptor } from './sfc-parser';
 import { ScriptCompileResult } from './script-compiler';
-
-// --- AST Definitions (Reused from template-compiler) ---
-
-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 {{ }}
-}
+import { parse, Node, ElementNode, TextNode, InterpolationNode } from './ast-parser';
 
 // --- DOM Compiler Result ---
 export interface DOMCompileResult {
@@ -46,7 +17,7 @@ export function compileToDOM(descriptor: SFCDescriptor, scriptResult: ScriptComp
     let html = template.content;
     const errors: string[] = [];
 
-    // 1. Parsing Phase (HTML -> AST) - We can reuse the parser logic, but for now we duplicate it to keep it isolated from the old string compiler
+    // 1. Parsing Phase (HTML -> AST) - Unified Parser
     const ast = parse(html, errors);
 
     // 2. Transform Phase (Scopes, Bindings)
@@ -247,9 +218,7 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
         if ((element as any)._propertySideEffects) {
             const effects: string[] = (element as any)._propertySideEffects;
             for (const effect of effects) {
-                // effect strings look like: `this._b('mu_abc', 'style', ...)` 
-                // We need to translate them to direct assignments, but the original transform already stripped the 'data-mu-id'.
-                // Let's rely on the DOM-specific transform logic we will write below.
+                // ...
             }
         }
 
@@ -279,104 +248,7 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
     return null;
 }
 
-// --- Copied Parser and Transformer ---
-// For this standalone compiler test, we duplicate the parser functions.
-// In the final refactor, these will be extracted to a shared `parse.ts` utility.
-
-function parse(template: string, errors: string[]): ElementNode {
-    const root: ElementNode = {
-        type: 'Element', tag: 'fragment', props: {}, children: [], directives: {}
-    };
-    const stack: ElementNode[] = [root];
-    let cursor = 0;
-
-    while (cursor < template.length) {
-        const char = template[cursor];
-        if (template.startsWith('<!--', cursor)) {
-            const end = template.indexOf('-->', cursor);
-            if (end === -1) break;
-            cursor = end + 3;
-        } else if (char === '<') {
-            if (template[cursor + 1] === '/') {
-                const end = template.indexOf('>', cursor);
-                if (end === -1) break;
-                stack.pop();
-                cursor = end + 1;
-            } else {
-                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] === '{') {
-            const end = template.indexOf('}}', cursor);
-            if (end === -1) break;
-            const content = template.slice(cursor + 2, end).trim();
-            stack[stack.length - 1].children.push({ type: 'Interpolation', content });
-            cursor = end + 2;
-        } else {
-            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.trim() || content === ' ') {
-                stack[stack.length - 1].children.push({ type: 'Text', content });
-            }
-            cursor = end;
-        }
-    }
-    return root;
-}
-
-function parseTag(content: string) {
-    const parts = content.split(' ');
-    const tag = parts[0];
-    const props: Record<string, string> = {};
-    const directives: ElementNode['directives'] = {};
-    const attrStr = content.slice(tag.length).trim();
-    let i = 0;
-    while (i < attrStr.length) {
-        if (/\s/.test(attrStr[i])) { i++; continue; }
-        const keyStart = i;
-        while (i < attrStr.length && !/\s|=/.test(attrStr[i])) i++;
-        const key = attrStr.slice(keyStart, i);
-        let value = 'true';
-        let peek = i;
-        while (peek < attrStr.length && /\s/.test(attrStr[peek])) peek++;
-        if (peek < attrStr.length && attrStr[peek] === '=') {
-            i = peek + 1;
-            while (i < attrStr.length && /\s/.test(attrStr[i])) i++;
-            if (i < attrStr.length && (attrStr[i] === '"' || attrStr[i] === "'")) {
-                const quote = attrStr[i];
-                i++;
-                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++;
-            } else {
-                const valStart = i;
-                while (i < attrStr.length && !/\s/.test(attrStr[i])) i++;
-                value = attrStr.slice(valStart, i);
-            }
-        }
-        if (key === 'v-if' || key === 'mu-if') directives.vIf = value;
-        else if (key === 'v-for' || key === 'mu-for') {
-            const parts = value.split(' in ');
-            directives.vFor = { item: parts[0].trim(), list: parts.slice(1).join(' in ').trim() };
-        } else if (key) props[key] = value;
-    }
-    return { tag, props, directives };
-}
+// --- Transformer Re-implementation ---
 
 const JS_KEYWORDS = new Set(['true', 'false', 'null', 'undefined', 'this', 'window', 'if', 'else', 'for', 'while', 'return', 'let', 'const', 'typeof', 'instanceof', 'Math', 'Object', 'Array', 'JSON', 'console']);