@mulanjs/mulanjs 1.0.1-dev.20260212143840

package/src/compiler/script-compiler.ts

@@ -0,0 +1,336 @@
+
+import { SFCDescriptor, SFCBlock } from './sfc-parser';
+import * as ts from 'typescript';
+
+export interface ScriptCompileResult {
+    code: string;
+    bindings?: string[]; // Variables exposed to template
+    errors: string[];
+    map?: string; // Source Map
+}
+
+export function compileScript(descriptor: SFCDescriptor): ScriptCompileResult {
+    const script = descriptor.script;
+    if (!script) return { code: 'export default {}', errors: [] };
+
+    const isSetup = !!script.attrs.setup;
+    const isTs = script.attrs.lang === 'ts' || script.attrs.lang === 'tsx';
+
+    if (isSetup) {
+        return compileSetupScript(script, isTs, descriptor);
+    } else {
+        // Standard Options API - just pass through, assuming it has export default
+        return { code: script.content, errors: [] };
+    }
+}
+
+// Global list of Mulan hooks for auto-imports and reactivity exemption
+const COMMON_HOOKS = ['muState', 'onMuMount', 'onMuInit', 'onMuDestroy', 'muEffect', 'muMemo', 'muQubit', 'muGate', 'muMeasure', 'muRegister', 'muEntangle', 'persistent'];
+
+function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: SFCDescriptor): ScriptCompileResult {
+    // 1. Pre-process: Natural Reactivity Transformation ($ syntax)
+    // We do this BEFORE extraction so that the rest of the compiler sees standard 'muState' code.
+    const transformedContent = transformNaturalReactivity(script.content, isTs);
+
+    // 2. Parse the TRANSFORMED code
+    const sourceFile = ts.createSourceFile(
+        'script.' + (isTs ? 'ts' : 'js'),
+        transformedContent,
+        ts.ScriptTarget.Latest,
+        true
+    );
+
+    const imports: string[] = [];
+    const statements: string[] = [];
+    const bindings: string[] = [];
+
+    sourceFile.statements.forEach(stmt => {
+        if (ts.isImportDeclaration(stmt)) {
+            imports.push(transformedContent.substring(stmt.pos, stmt.end).trim());
+        } else {
+            statements.push(transformedContent.substring(stmt.pos, stmt.end).trim());
+
+            // Extract top-level declarations for template exposure
+            if (ts.isVariableStatement(stmt)) {
+                stmt.declarationList.declarations.forEach(decl => {
+                    if (ts.isIdentifier(decl.name)) {
+                        bindings.push(decl.name.text);
+                    }
+                });
+            } else if (ts.isFunctionDeclaration(stmt) && stmt.name) {
+                bindings.push(stmt.name.text);
+            } else if (ts.isClassDeclaration(stmt) && stmt.name) {
+                bindings.push(stmt.name.text);
+            }
+        }
+    });
+
+    // Reconstruct
+    // We import defineComponent from mulanjs if not present? 
+    // Ideally user imports what they need, but for 'setup' wrapping we need defineComponent.
+    // Let's assume user might not have imported it, so we import it as _defineComponent to avoid collision.
+
+    // Check if defineComponent is imported
+    const hasDefineComponent = imports.some(i => i.includes('defineComponent'));
+    const bootImports = hasDefineComponent ? '' : `import { defineComponent as _defineComponent } from 'mulanjs';`;
+
+    // ADDED: Check if we introduced 'muState' but it wasn't imported (because user used $)
+    const usesMuState = transformedContent.includes('muState');
+    const hasMuStateImport = imports.some(i => i.includes('muState') || i.includes('mulanjs'));
+    let autoImports = (usesMuState && !hasMuStateImport) ? [`muState`] : [];
+
+    // Auto-import common hooks
+    COMMON_HOOKS.forEach(hook => {
+        if (transformedContent.includes(hook) && !imports.some(i => i.includes(hook))) {
+            // Avoid duplicates in autoImports
+            if (!autoImports.includes(hook)) {
+                autoImports.push(hook);
+            }
+        }
+    });
+
+    const autoImportStmt = autoImports.length > 0
+        ? `import { ${autoImports.join(', ')} } from 'mulanjs';`
+        : '';
+
+    const filename = descriptor.filename;
+    const componentName = filename ? filename.split(/[/\\]/).pop()?.split('.')[0].replace(/\W/g, '') || 'App' : 'App';
+
+    const bindingString = bindings.length > 0
+        ? `
+        const exposed = { ${bindings.join(', ')} };
+        if (typeof window !== 'undefined') {
+            window["${componentName}"] = exposed;
+        }
+        return exposed;
+        `
+        : 'return {};';
+
+    const finalCode = `
+${bootImports}
+${autoImportStmt}
+${imports.join('\n')}
+
+export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
+    setup() {
+        ${statements.join('\n')}
+        ${bindingString}
+    }
+});
+    `;
+
+    if (isTs) {
+        // Calculate line offset for Source Maps (Padding Strategy)
+        // Find how many newlines are before the script content in the original source
+        // This is a rough estimation but better than nothing for 1.0 dev
+        const linesBefore = descriptor.source.substring(0, script.start).split('\n').length - 1;
+        const padding = '\n'.repeat(linesBefore);
+
+        // Pad the content so line numbers match original file
+        // Note: This only works perfectly if we are transpiling the RAW content.
+        // Since we are extracting/transforming (Natural Reactivity), line numbers might shift.
+        // For accurate 1-to-1 mapping, we rely on TS source maps of the 'finalCode'.
+        // To make 'finalCode' map back to 'filename', we need to construct it carefully.
+
+        // Transpile extracted TS code to JS
+        const result = ts.transpileModule(finalCode, {
+            compilerOptions: {
+                module: ts.ModuleKind.ESNext,
+                target: ts.ScriptTarget.ES2019,
+                sourceMap: true, // ENABLE SOURCE MAPS
+                inlineSources: true,
+                sourceRoot: '/',
+            },
+            fileName: filename // Important for source map
+        });
+
+        // Fix: Remove the //# sourceMappingURL= comment added by TS
+        const codeWithoutMapComment = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
+
+        // Enhance Source Map to show ORIGINAL .mujs content
+        let finalMap = result.sourceMapText;
+        if (finalMap) {
+            try {
+                const mapObj = JSON.parse(finalMap);
+
+                // Try to get relative path from 'src' to preserve folder structure in DevTools
+                const normalizedPath = filename.replace(/\\/g, '/');
+                const srcIndex = normalizedPath.indexOf('/src/');
+
+                // If inside src, use path starting from src. Else just basename.
+                // Example: c:/.../src/pages/Home.mujs -> src/pages/Home.mujs
+                let relativePath = srcIndex !== -1
+                    ? normalizedPath.substring(srcIndex + 1)
+                    : filename.split(/[/\\]/).pop() || 'unknown.mujs';
+
+                // Use relative path directly. Webpack will handle the namespace.
+                mapObj.sources = [relativePath];
+
+                mapObj.sourcesContent = [descriptor.source];
+                finalMap = JSON.stringify(mapObj);
+            } catch (e) {
+                console.warn('[MulanJS] Failed to patch source map:', e);
+            }
+        }
+
+        return {
+            code: codeWithoutMapComment,
+            bindings,
+            errors: [],
+            map: finalMap // Return the enhanced map
+        }
+    }
+
+    return {
+        code: finalCode,
+        bindings,
+        errors: [],
+        map: undefined
+    };
+}
+
+// --- Natural Reactivity Transformer ---
+
+function transformNaturalReactivity(code: string, isTs: boolean): string {
+    // If no '$(' or '$q(' or '$qr(' usage, return original code for safety/speed
+    if (!code.includes('$(') && !code.includes('$q(') && !code.includes('$qr(')) return code;
+
+    const sourceFile = ts.createSourceFile('temp.ts', code, ts.ScriptTarget.Latest, true);
+    const reactiveVars = new Set<string>();
+    const quantumVars = new Set<string>();
+    const registerVars = new Set<string>();
+
+    // Pass 1: Identification
+    function findReactiveVars(node: ts.Node) {
+        if (ts.isVariableStatement(node)) {
+            node.declarationList.declarations.forEach(decl => {
+                if (decl.initializer && ts.isCallExpression(decl.initializer)) {
+                    const expr = decl.initializer.expression;
+                    if (ts.isIdentifier(expr)) {
+                        if (expr.text === '$') {
+                            if (ts.isIdentifier(decl.name)) reactiveVars.add(decl.name.text);
+                        } else if (expr.text === '$q') {
+                            if (ts.isIdentifier(decl.name)) quantumVars.add(decl.name.text);
+                        } else if (expr.text === '$qr') {
+                            if (ts.isIdentifier(decl.name)) registerVars.add(decl.name.text);
+                        }
+                    }
+                }
+            });
+        }
+        ts.forEachChild(node, findReactiveVars);
+    }
+    findReactiveVars(sourceFile);
+
+    if (reactiveVars.size === 0 && quantumVars.size === 0 && registerVars.size === 0) return code;
+
+    // Pass 2: Transformation
+    const transformerFactory: ts.TransformerFactory<ts.SourceFile> = (context) => {
+        return (rootNode) => {
+            function visit(node: ts.Node): ts.Node {
+                if (ts.isVariableStatement(node)) {
+                    const newDecls: ts.VariableDeclaration[] = [];
+                    let changed = false;
+
+                    node.declarationList.declarations.forEach(decl => {
+                        if (ts.isIdentifier(decl.name)) {
+                            const name = decl.name.text;
+                            if (reactiveVars.has(name) || quantumVars.has(name) || registerVars.has(name)) {
+                                changed = true;
+                                let hookName = 'muState';
+                                if (quantumVars.has(name)) hookName = 'muQubit';
+                                else if (registerVars.has(name)) hookName = 'muRegister';
+
+                                const init = decl.initializer as ts.CallExpression;
+                                newDecls.push(ts.factory.updateVariableDeclaration(
+                                    decl,
+                                    decl.name,
+                                    decl.exclamationToken,
+                                    decl.type,
+                                    ts.factory.createCallExpression(
+                                        ts.factory.createIdentifier(hookName),
+                                        undefined,
+                                        init.arguments
+                                    )
+                                ));
+                            } else {
+                                newDecls.push(decl);
+                            }
+                        } else {
+                            newDecls.push(decl);
+                        }
+                    });
+
+                    if (changed) {
+                        return ts.factory.createVariableStatement(
+                            node.modifiers,
+                            ts.factory.createVariableDeclarationList(newDecls, ts.NodeFlags.Const)
+                        );
+                    }
+                }
+
+                if (ts.isCallExpression(node)) {
+                    const expr = node.expression;
+                    if (ts.isIdentifier(expr)) {
+                        const name = expr.text;
+                        const isMacro = name === '$' || name === '$q' || name === '$qr';
+
+                        if (isMacro) {
+                            // If this call is the initializer of a variable declaration being handled, 
+                            // it will be transformed by the VariableStatement logic above.
+                            // However, we want to transform it here if it's used as a STANDALONE expression (e.g. assignment).
+                            const parent = node.parent;
+                            const isDeclarationInit = ts.isVariableDeclaration(parent) && parent.initializer === node;
+
+                            if (!isDeclarationInit) {
+                                let hookName = 'muState';
+                                if (name === '$q') hookName = 'muQubit';
+                                else if (name === '$qr') hookName = 'muRegister';
+
+                                // Transform $(x) -> muState(x).value
+                                return ts.factory.createPropertyAccessExpression(
+                                    ts.factory.createCallExpression(
+                                        ts.factory.createIdentifier(hookName),
+                                        undefined,
+                                        node.arguments
+                                    ),
+                                    ts.factory.createIdentifier('value')
+                                );
+                            }
+                        }
+                    }
+                }
+
+                if (ts.isIdentifier(node)) {
+                    const name = node.text;
+                    if (reactiveVars.has(name) || quantumVars.has(name) || registerVars.has(name)) {
+                        const parent = node.parent;
+                        if (ts.isVariableDeclaration(parent) && parent.name === node) return node;
+                        if (ts.isPropertyAccessExpression(parent) && parent.name === node) return node;
+                        if (ts.isPropertyAccessExpression(parent) && parent.expression === node && parent.name.text === 'value') return node;
+                        if (ts.isPropertyAssignment(parent) && parent.name === node) return node;
+
+                        // EXEMPTION: Do not add .value if the identifier is a direct argument to a Mulan hook
+                        // These hooks (muGate, muMeasure, etc.) expect the signal wrapper.
+                        if (ts.isCallExpression(parent) && ts.isIdentifier(parent.expression)) {
+                            const hook = parent.expression.text;
+                            if (COMMON_HOOKS.includes(hook)) return node;
+                        }
+
+                        return ts.factory.createPropertyAccessExpression(
+                            ts.factory.createIdentifier(name),
+                            ts.factory.createIdentifier('value')
+                        );
+                    }
+                }
+
+                return ts.visitEachChild(node, visit, context);
+            }
+            return ts.visitNode(rootNode, visit) as ts.SourceFile;
+        };
+    };
+
+    const result = ts.transform(sourceFile, [transformerFactory]);
+    const printer = ts.createPrinter();
+    return printer.printFile(result.transformed[0]);
+}

package/src/compiler/sfc-parser.ts

@@ -0,0 +1,118 @@
+export interface SFCBlock {
+    type: 'script' | 'template' | 'style';
+    content: string;
+    attrs: Record<string, string>;
+    start: number;
+    end: number;
+}
+
+export interface SFCDescriptor {
+    filename: string;
+    source: string;
+    template: SFCBlock | null;
+    script: SFCBlock | null;
+    scripts: SFCBlock[];
+    styles: SFCBlock[];
+    customBlocks: SFCBlock[];
+}
+
+/**
+ * Standardized State-Machine Parser for MulanJS
+ * Parses .mujs files safely, handling attributes, quotes, and nested content.
+ */
+export function parseMUJS(source: string, filename: string): SFCDescriptor {
+    const descriptor: SFCDescriptor = {
+        filename,
+        source,
+        template: null,
+        script: null,
+        scripts: [],
+        styles: [],
+        customBlocks: []
+    };
+
+    let cursor = 0;
+    const length = source.length;
+
+    while (cursor < length) {
+        // Look for start tag '<'
+        const start = source.indexOf('<', cursor);
+        if (start === -1) break; // End of file
+
+        // Must be safe start (not in comment/string - simplified for top-level blocks)
+        // We assume SFC top-level blocks are valid HTML-like tags.
+
+        // Check if closing tag (ignore)
+        if (source[start + 1] === '/') {
+            cursor = start + 1;
+            continue;
+        }
+
+        // Parse Tag Name
+        let nameEnd = start + 1;
+        while (nameEnd < length && !/\s|>/.test(source[nameEnd])) {
+            nameEnd++;
+        }
+        const tagName = source.slice(start + 1, nameEnd);
+
+        // Parse Attributes
+        let attrStart = nameEnd;
+        const attrs: Record<string, string> = {};
+
+        let tagEnd = source.indexOf('>', attrStart);
+        if (tagEnd === -1) break;
+
+        const attrString = source.slice(attrStart, tagEnd);
+        // Simple regex for attrs is safe *inside* the tag definition
+        const attrRegex = /([a-zA-Z0-9:-]+)(?:=["']([^"']*)["'])?/g;
+        let match;
+        while ((match = attrRegex.exec(attrString)) !== null) {
+            attrs[match[1]] = match[2] || 'true';
+        }
+
+        // Find Closing Tag
+        // We need to handle nested content.
+        // For <template>, we just look for </template>.
+        // For <script>, same.
+        // "Naive" approach: indexOf('</' + tagName) is actually standard for SFC parsers 
+        // because top-level blocks shouldn't contain their own closing tag as text 
+        // (except unless escaped, which we can handle if needed, but rarely an issue for top-level).
+
+        const contentStart = tagEnd + 1;
+        const closeTag = `</${tagName}>`;
+        const contentEnd = source.indexOf(closeTag, contentStart);
+
+        if (contentEnd === -1) {
+            // Unclosed block, invalid SFC.
+            console.warn(`[MulanJS Parser] Unclosed block: <${tagName}>`);
+            break;
+        }
+
+        const content = source.slice(contentStart, contentEnd);
+        const block: SFCBlock = {
+            type: tagName as any,
+            content: content.trim(), // Trim content for cleanliness
+            attrs,
+            start: start,
+            end: contentEnd + closeTag.length
+        };
+
+        // Add to descriptor
+        if (tagName === 'template' || tagName === 'mu-template') {
+            descriptor.template = block;
+        } else if (tagName === 'script') {
+            descriptor.scripts.push(block);
+            if (attrs.setup || !descriptor.script) {
+                descriptor.script = block;
+            }
+        } else if (tagName === 'style') {
+            descriptor.styles.push(block);
+        } else {
+            descriptor.customBlocks.push(block);
+        }
+
+        cursor = contentEnd + closeTag.length;
+    }
+
+    return descriptor;
+}

package/src/compiler/style-compiler.ts

@@ -0,0 +1,66 @@
+
+import { SFCDescriptor } from './sfc-parser';
+
+export interface StyleCompileResult {
+    css: string;
+    scopedId?: string;
+    errors: string[];
+}
+
+export function compileStyle(descriptor: SFCDescriptor, filename: string): StyleCompileResult {
+    const styles = descriptor.styles;
+    if (!styles || styles.length === 0) return { css: '', errors: [] };
+
+    let combinedCss = '';
+    const scopedId = 'data-v-' + hash(filename);
+
+    styles.forEach(style => {
+        let content = style.content;
+
+        if (style.attrs.scoped) {
+            // SCSS Compilation
+            if (style.attrs.lang === 'scss' || style.attrs.lang === 'sass') {
+                try {
+                    const sass = require('sass');
+                    const result = sass.compileString(content, {
+                        syntax: style.attrs.lang === 'sass' ? 'indented' : 'scss'
+                    });
+                    content = result.css;
+                } catch (e: any) {
+                    return { css: '', errors: [`SCSS Compilation Error: ${e.message}`] };
+                }
+            }
+
+            // Rewrite selectors
+            // Very naive regex replacer: "selector {" -> "selector[data-v-id] {"
+            // This is fragile but works for a PoC.
+            content = content.replace(/([^\r\n,{}]+)(?=\{)/g, (match) => {
+                const selectors = match.split(',');
+                return selectors.map(s => {
+                    const selector = s.trim();
+                    if (selector.startsWith('@') || selector === 'from' || selector === 'to') return selector; // Skip keyframes/media
+                    return `${selector}[${scopedId}]`;
+                }).join(', ');
+            });
+        }
+
+        combinedCss += content + '\n';
+    });
+
+    return {
+        css: combinedCss,
+        scopedId,
+        errors: []
+    };
+}
+
+// Simple hash for ID generation
+function hash(str: string): string {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash &= hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash).toString(36);
+}