@mulanjs/mulanjs 1.0.1-dev.20260218170441 → 1.0.1-dev.20260219055338

package/dist/compiler/compiler.js

@@ -5,12 +5,13 @@ const sfc_parser_1 = require("./sfc-parser");
 const script_compiler_1 = require("./script-compiler");
 const template_compiler_1 = require("./template-compiler");
 const style_compiler_1 = require("./style-compiler");
-function compileSFC(source, filename) {
+async function compileSFC(source, filename) {
     // 1. Parse
     const descriptor = (0, sfc_parser_1.parseMUJS)(source, filename);
     // 2. Script
-    const scriptResult = (0, script_compiler_1.compileScript)(descriptor);
+    const scriptResult = await (0, script_compiler_1.compileScript)(descriptor);
     // Replace export default to capture the component
+    // If the script already has 'export default', we intercept it.
     let scriptCode = scriptResult.code.replace('export default', 'const __component__ =');
     if (!scriptCode.includes('const __component__ =')) {
         scriptCode = scriptCode.replace(/export\s+default/, 'const __component__ =');

package/dist/compiler/script-compiler.js

@@ -35,14 +35,15 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileScript = compileScript;
 const ts = __importStar(require("typescript"));
-function compileScript(descriptor) {
+const source_map_1 = require("source-map");
+async function compileScript(descriptor) {
     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);
+        return await compileSetupScript(script, isTs, descriptor);
     }
     else {
         // Standard Options API - just pass through, assuming it has export default
@@ -51,7 +52,7 @@ function compileScript(descriptor) {
 }
 // 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, isTs, descriptor) {
+async function compileSetupScript(script, isTs, descriptor) {
     var _a;
     // 1. Pre-process: Natural Reactivity Transformation ($ syntax)
     // We do this BEFORE extraction so that the rest of the compiler sees standard 'muState' code.
@@ -59,14 +60,31 @@ function compileSetupScript(script, isTs, descriptor) {
     // 2. Parse the TRANSFORMED code
     const sourceFile = ts.createSourceFile('script.' + (isTs ? 'ts' : 'js'), transformedContent, ts.ScriptTarget.Latest, true);
     const imports = [];
-    const statements = [];
+    // We will build the body by replacing imports with newlines in the original content
+    // This preserves line numbers for the user's code relative to the script block start.
+    let scriptBody = transformedContent;
+    // Collect imports and bindings
     const bindings = [];
+    // We need to remove imports from scriptBody but keep newlines.
+    // We'll use a replacement list and apply it end-to-start to avoid index shifting
+    const replacements = [];
     sourceFile.statements.forEach(stmt => {
         if (ts.isImportDeclaration(stmt)) {
-            imports.push(transformedContent.substring(stmt.pos, stmt.end).trim());
+            const importText = transformedContent.substring(stmt.pos, stmt.end);
+            // Add to imports list (trimmed for cleanliness in preamble)
+            imports.push(importText.trim());
+            // Calculate number of newlines in this import statement to preserve layout
+            const numNewlines = (importText.match(/\n/g) || []).length;
+            const replacement = '\n'.repeat(numNewlines) + ' '.repeat(importText.length - numNewlines); // Keep length/lines roughly same? actually just newlines is enough for line mapping
+            // Better: we just want to preserve LINE COUNT. 
+            // If we replace the whole range with newlines, we keep the vertical layout.
+            replacements.push({
+                start: stmt.pos,
+                end: stmt.end,
+                text: '\n'.repeat(numNewlines) || ' ' // at least a space if no newlines, to avoid merging lines?
+            });
         }
         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 => {
@@ -83,16 +101,21 @@ function compileSetupScript(script, isTs, descriptor) {
             }
         }
     });
+    // Apply replacements (reverse order)
+    replacements.sort((a, b) => b.start - a.start);
+    replacements.forEach(r => {
+        scriptBody = scriptBody.substring(0, r.start) + r.text + scriptBody.substring(r.end);
+    });
     // Reconstruct
-    // We import defineComponent from mulanjs if not present? 
+    // We import defineComponent from @mulanjs/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';`;
+    const bootImports = hasDefineComponent ? '' : `import { defineComponent as _defineComponent } from '@mulanjs/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'));
+    const hasMuStateImport = imports.some(i => i.includes('muState') || i.includes('@mulanjs/mulanjs'));
     let autoImports = (usesMuState && !hasMuStateImport) ? [`muState`] : [];
     // Auto-import common hooks
     COMMON_HOOKS.forEach(hook => {
@@ -104,7 +127,7 @@ function compileSetupScript(script, isTs, descriptor) {
         }
     });
     const autoImportStmt = autoImports.length > 0
-        ? `import { ${autoImports.join(', ')} } from 'mulanjs';`
+        ? `import { ${autoImports.join(', ')} } from '@mulanjs/mulanjs';`
         : '';
     const filename = descriptor.filename;
     const componentName = filename ? ((_a = filename.split(/[/\\]/).pop()) === null || _a === void 0 ? void 0 : _a.split('.')[0].replace(/\W/g, '')) || 'App' : 'App';
@@ -117,29 +140,24 @@ function compileSetupScript(script, isTs, descriptor) {
         return exposed;
         `
         : 'return {};';
-    const finalCode = `
+    // Construct final code with preserved body layout
+    const preamble = `
 ${bootImports}
 ${autoImportStmt}
 ${imports.join('\n')}
 
 export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
     setup() {
-        ${statements.join('\n')}
+`;
+    // We intentionally put scriptBody on a new line.
+    // Note: scriptBody has imports replaced by whitespace/newlines, so its internal line numbers relative to its start are preserved.
+    const postamble = `
         ${bindingString}
     }
 });
     `;
+    const finalCode = preamble + scriptBody + postamble;
     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: {
@@ -149,7 +167,7 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                 inlineSources: true,
                 sourceRoot: '/',
             },
-            fileName: filename // Important for source map
+            fileName: filename // We ask TS to map to filename, but it maps 'finalCode' -> 'filename'
         });
         // Fix: Remove the //# sourceMappingURL= comment added by TS
         const codeWithoutMapComment = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
@@ -157,19 +175,56 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
         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
+                // Determine offsets
+                const preambleLines = preamble.split('\n').length - 1;
+                // scriptBody starts at line `preambleLines` (0-indexed) in finalCode.
+                // Determine where script starts in original .mujs file
+                const originalSource = descriptor.source;
+                const linesBeforeScript = originalSource.substring(0, script.start).split('\n').length - 1;
+                const consumer = await new source_map_1.SourceMapConsumer(finalMap);
+                const generator = new source_map_1.SourceMapGenerator({
+                    file: filename,
+                    sourceRoot: ''
+                });
+                // If inside src, use path starting from src. Else just basename.
                 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);
+                generator.setSourceContent(relativePath, originalSource);
+                consumer.eachMapping(m => {
+                    if (m.originalLine === null)
+                        return;
+                    // m.originalLine is the line in `finalCode` (1-based because SourceMapConsumer uses 1-based)
+                    // We need to convert it to line in `.mujs`.
+                    // Check if this line belongs to scriptBody
+                    // scriptBody spans from (preambleLines + 1) to (preambleLines + scriptBodyLines)
+                    const lineInFinalCode = m.originalLine;
+                    // Check if strictly inside body
+                    if (lineInFinalCode > preambleLines) {
+                        // Calculate offset inside scriptBody
+                        const lineOffsetInBody = lineInFinalCode - preambleLines; // 1-based offset (1st line of body is 1)
+                        // Calculate original line in .mujs
+                        // If lineOffsetInBody is 1 (first line of body), it corresponds to (linesBeforeScript + 1)
+                        const originalLineInMujs = linesBeforeScript + lineOffsetInBody;
+                        // Add mapping
+                        generator.addMapping({
+                            generated: {
+                                line: m.generatedLine,
+                                column: m.generatedColumn
+                            },
+                            original: {
+                                line: originalLineInMujs,
+                                column: m.originalColumn // Column should be preserved if we didn't change indentation
+                            },
+                            source: relativePath,
+                            name: m.name
+                        });
+                    }
+                });
+                finalMap = generator.toString();
+                consumer.destroy();
             }
             catch (e) {
                 console.warn('[MulanJS] Failed to patch source map:', e);

package/dist/types/compiler/compiler.d.ts

@@ -4,4 +4,4 @@ export interface CompileResult {
     errors: string[];
     map?: string;
 }
-export declare function compileSFC(source: string, filename: string): CompileResult;
+export declare function compileSFC(source: string, filename: string): Promise<CompileResult>;

package/dist/types/compiler/script-compiler.d.ts

@@ -5,4 +5,4 @@ export interface ScriptCompileResult {
     errors: string[];
     map?: string;
 }
-export declare function compileScript(descriptor: SFCDescriptor): ScriptCompileResult;
+export declare function compileScript(descriptor: SFCDescriptor): Promise<ScriptCompileResult>;

package/dist/types/compiler.d.ts

@@ -4,4 +4,4 @@ export interface CompileResult {
     errors: string[];
     map?: string;
 }
-export declare function compileSFC(source: string, filename: string): CompileResult;
+export declare function compileSFC(source: string, filename: string): Promise<CompileResult>;

package/dist/types/script-compiler.d.ts

@@ -5,4 +5,4 @@ export interface ScriptCompileResult {
     errors: string[];
     map?: string;
 }
-export declare function compileScript(descriptor: SFCDescriptor): ScriptCompileResult;
+export declare function compileScript(descriptor: SFCDescriptor): Promise<ScriptCompileResult>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mulanjs/mulanjs",
-    "version": "1.0.1-dev.20260218170441",
+    "version": "1.0.1-dev.20260219055338",
     "description": "A powerful, secure, and enterprise-grade JavaScript framework.",
     "main": "dist/mulan.js",
     "module": "dist/mulan.esm.js",
@@ -52,7 +52,8 @@
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.0",
         "ts-loader": "^9.5.4",
-        "typescript": "^5.0.0"
+        "typescript": "^5.0.0",
+        "source-map": "^0.7.4"
     },
     "devDependencies": {
         "@types/fs-extra": "^11.0.4",

package/src/cli/index.js

@@ -207,6 +207,7 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
+  devtool: 'source-map',
   resolve: {
     extensions: ['.ts', '.js', '.mujs']
   },

package/src/compiler/compiler.ts

@@ -11,13 +11,14 @@ export interface CompileResult {
     map?: string; // Source Map
 }
 
-export function compileSFC(source: string, filename: string): CompileResult {
+export async function compileSFC(source: string, filename: string): Promise<CompileResult> {
     // 1. Parse
     const descriptor = parseMUJS(source, filename);
 
     // 2. Script
-    const scriptResult = compileScript(descriptor);
+    const scriptResult = await compileScript(descriptor);
     // Replace export default to capture the component
+    // If the script already has 'export default', we intercept it.
     let scriptCode = scriptResult.code.replace('export default', 'const __component__ =');
     if (!scriptCode.includes('const __component__ =')) {
         scriptCode = scriptCode.replace(/export\s+default/, 'const __component__ =');

package/src/compiler/script-compiler.js

@@ -0,0 +1,369 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileScript = compileScript;
+const ts = __importStar(require("typescript"));
+const source_map_1 = require("source-map");
+async function compileScript(descriptor) {
+    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 await 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'];
+async function compileSetupScript(script, isTs, descriptor) {
+    var _a;
+    // 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 = [];
+    // We will build the body by replacing imports with newlines in the original content
+    // This preserves line numbers for the user's code relative to the script block start.
+    let scriptBody = transformedContent;
+    // Collect imports and bindings
+    const bindings = [];
+    // We need to remove imports from scriptBody but keep newlines.
+    // We'll use a replacement list and apply it end-to-start to avoid index shifting
+    const replacements = [];
+    sourceFile.statements.forEach(stmt => {
+        if (ts.isImportDeclaration(stmt)) {
+            const importText = transformedContent.substring(stmt.pos, stmt.end);
+            // Add to imports list (trimmed for cleanliness in preamble)
+            imports.push(importText.trim());
+            // Calculate number of newlines in this import statement to preserve layout
+            const numNewlines = (importText.match(/\n/g) || []).length;
+            const replacement = '\n'.repeat(numNewlines) + ' '.repeat(importText.length - numNewlines); // Keep length/lines roughly same? actually just newlines is enough for line mapping
+            // Better: we just want to preserve LINE COUNT. 
+            // If we replace the whole range with newlines, we keep the vertical layout.
+            replacements.push({
+                start: stmt.pos,
+                end: stmt.end,
+                text: '\n'.repeat(numNewlines) || ' ' // at least a space if no newlines, to avoid merging lines?
+            });
+        }
+        else {
+            // 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);
+            }
+        }
+    });
+    // Apply replacements (reverse order)
+    replacements.sort((a, b) => b.start - a.start);
+    replacements.forEach(r => {
+        scriptBody = scriptBody.substring(0, r.start) + r.text + scriptBody.substring(r.end);
+    });
+    // Reconstruct
+    // We import defineComponent from @mulanjs/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/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/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/mulanjs';`
+        : '';
+    const filename = descriptor.filename;
+    const componentName = filename ? ((_a = filename.split(/[/\\]/).pop()) === null || _a === void 0 ? void 0 : _a.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 {};';
+    // Construct final code with preserved body layout
+    const preamble = `
+${bootImports}
+${autoImportStmt}
+${imports.join('\n')}
+
+export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
+    setup() {
+`;
+    // We intentionally put scriptBody on a new line.
+    // Note: scriptBody has imports replaced by whitespace/newlines, so its internal line numbers relative to its start are preserved.
+    const postamble = `
+        ${bindingString}
+    }
+});
+    `;
+    const finalCode = preamble + scriptBody + postamble;
+    if (isTs) {
+        // 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 // We ask TS to map to filename, but it maps 'finalCode' -> 'filename'
+        });
+        // 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 {
+                // Determine offsets
+                const preambleLines = preamble.split('\n').length - 1;
+                // scriptBody starts at line `preambleLines` (0-indexed) in finalCode.
+                // Determine where script starts in original .mujs file
+                const originalSource = descriptor.source;
+                const linesBeforeScript = originalSource.substring(0, script.start).split('\n').length - 1;
+                const consumer = await new source_map_1.SourceMapConsumer(finalMap);
+                const generator = new source_map_1.SourceMapGenerator({
+                    file: filename,
+                    sourceRoot: ''
+                });
+                // If inside src, use path starting from src. Else just basename.
+                const normalizedPath = filename.replace(/\\/g, '/');
+                const srcIndex = normalizedPath.indexOf('/src/');
+                let relativePath = srcIndex !== -1
+                    ? normalizedPath.substring(srcIndex + 1)
+                    : filename.split(/[/\\]/).pop() || 'unknown.mujs';
+                generator.setSourceContent(relativePath, originalSource);
+                consumer.eachMapping(m => {
+                    if (m.originalLine === null)
+                        return;
+                    // m.originalLine is the line in `finalCode` (1-based because SourceMapConsumer uses 1-based)
+                    // We need to convert it to line in `.mujs`.
+                    // Check if this line belongs to scriptBody
+                    // scriptBody spans from (preambleLines + 1) to (preambleLines + scriptBodyLines)
+                    const lineInFinalCode = m.originalLine;
+                    // Check if strictly inside body
+                    if (lineInFinalCode > preambleLines) {
+                        // Calculate offset inside scriptBody
+                        const lineOffsetInBody = lineInFinalCode - preambleLines; // 1-based offset (1st line of body is 1)
+                        // Calculate original line in .mujs
+                        // If lineOffsetInBody is 1 (first line of body), it corresponds to (linesBeforeScript + 1)
+                        const originalLineInMujs = linesBeforeScript + lineOffsetInBody;
+                        // Add mapping
+                        generator.addMapping({
+                            generated: {
+                                line: m.generatedLine,
+                                column: m.generatedColumn
+                            },
+                            original: {
+                                line: originalLineInMujs,
+                                column: m.originalColumn // Column should be preserved if we didn't change indentation
+                            },
+                            source: relativePath,
+                            name: m.name
+                        });
+                    }
+                });
+                finalMap = generator.toString();
+                consumer.destroy();
+            }
+            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, isTs) {
+    // 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();
+    const quantumVars = new Set();
+    const registerVars = new Set();
+    // Pass 1: Identification
+    function findReactiveVars(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 = (context) => {
+        return (rootNode) => {
+            function visit(node) {
+                if (ts.isVariableStatement(node)) {
+                    const newDecls = [];
+                    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;
+                                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);
+        };
+    };
+    const result = ts.transform(sourceFile, [transformerFactory]);
+    const printer = ts.createPrinter();
+    return printer.printFile(result.transformed[0]);
+}

package/src/compiler/script-compiler.ts

@@ -1,6 +1,7 @@
 
 import { SFCDescriptor, SFCBlock } from './sfc-parser';
 import * as ts from 'typescript';
+import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
 
 export interface ScriptCompileResult {
     code: string;
@@ -9,7 +10,7 @@ export interface ScriptCompileResult {
     map?: string; // Source Map
 }
 
-export function compileScript(descriptor: SFCDescriptor): ScriptCompileResult {
+export async function compileScript(descriptor: SFCDescriptor): Promise<ScriptCompileResult> {
     const script = descriptor.script;
     if (!script) return { code: 'export default {}', errors: [] };
 
@@ -17,7 +18,7 @@ export function compileScript(descriptor: SFCDescriptor): ScriptCompileResult {
     const isTs = script.attrs.lang === 'ts' || script.attrs.lang === 'tsx';
 
     if (isSetup) {
-        return compileSetupScript(script, isTs, descriptor);
+        return await compileSetupScript(script, isTs, descriptor);
     } else {
         // Standard Options API - just pass through, assuming it has export default
         return { code: script.content, errors: [] };
@@ -27,7 +28,7 @@ export function compileScript(descriptor: SFCDescriptor): ScriptCompileResult {
 // 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 {
+async function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: SFCDescriptor): Promise<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);
@@ -41,15 +42,34 @@ function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: SFCDesc
     );
 
     const imports: string[] = [];
-    const statements: string[] = [];
+    // We will build the body by replacing imports with newlines in the original content
+    // This preserves line numbers for the user's code relative to the script block start.
+    let scriptBody = transformedContent;
+
+    // Collect imports and bindings
     const bindings: string[] = [];
 
+    // We need to remove imports from scriptBody but keep newlines.
+    // We'll use a replacement list and apply it end-to-start to avoid index shifting
+    const replacements: { start: number, end: number, text: string }[] = [];
+
     sourceFile.statements.forEach(stmt => {
         if (ts.isImportDeclaration(stmt)) {
-            imports.push(transformedContent.substring(stmt.pos, stmt.end).trim());
+            const importText = transformedContent.substring(stmt.pos, stmt.end);
+            // Add to imports list (trimmed for cleanliness in preamble)
+            imports.push(importText.trim());
+
+            // Calculate number of newlines in this import statement to preserve layout
+            const numNewlines = (importText.match(/\n/g) || []).length;
+            const replacement = '\n'.repeat(numNewlines) + ' '.repeat(importText.length - numNewlines); // Keep length/lines roughly same? actually just newlines is enough for line mapping
+            // Better: we just want to preserve LINE COUNT. 
+            // If we replace the whole range with newlines, we keep the vertical layout.
+            replacements.push({
+                start: stmt.pos,
+                end: stmt.end,
+                text: '\n'.repeat(numNewlines) || ' ' // at least a space if no newlines, to avoid merging lines?
+            });
         } 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 => {
@@ -65,18 +85,24 @@ function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: SFCDesc
         }
     });
 
+    // Apply replacements (reverse order)
+    replacements.sort((a, b) => b.start - a.start);
+    replacements.forEach(r => {
+        scriptBody = scriptBody.substring(0, r.start) + r.text + scriptBody.substring(r.end);
+    });
+
     // Reconstruct
-    // We import defineComponent from mulanjs if not present? 
+    // We import defineComponent from @mulanjs/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';`;
+    const bootImports = hasDefineComponent ? '' : `import { defineComponent as _defineComponent } from '@mulanjs/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'));
+    const hasMuStateImport = imports.some(i => i.includes('muState') || i.includes('@mulanjs/mulanjs'));
     let autoImports = (usesMuState && !hasMuStateImport) ? [`muState`] : [];
 
     // Auto-import common hooks
@@ -90,7 +116,7 @@ function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: SFCDesc
     });
 
     const autoImportStmt = autoImports.length > 0
-        ? `import { ${autoImports.join(', ')} } from 'mulanjs';`
+        ? `import { ${autoImports.join(', ')} } from '@mulanjs/mulanjs';`
         : '';
 
     const filename = descriptor.filename;
@@ -106,32 +132,27 @@ function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: SFCDesc
         `
         : 'return {};';
 
-    const finalCode = `
+    // Construct final code with preserved body layout
+    const preamble = `
 ${bootImports}
 ${autoImportStmt}
 ${imports.join('\n')}
 
 export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
     setup() {
-        ${statements.join('\n')}
+`;
+    // We intentionally put scriptBody on a new line.
+    // Note: scriptBody has imports replaced by whitespace/newlines, so its internal line numbers relative to its start are preserved.
+
+    const postamble = `
         ${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.
+    const finalCode = preamble + scriptBody + postamble;
 
+    if (isTs) {
         // Transpile extracted TS code to JS
         const result = ts.transpileModule(finalCode, {
             compilerOptions: {
@@ -141,7 +162,7 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                 inlineSources: true,
                 sourceRoot: '/',
             },
-            fileName: filename // Important for source map
+            fileName: filename // We ask TS to map to filename, but it maps 'finalCode' -> 'filename'
         });
 
         // Fix: Remove the //# sourceMappingURL= comment added by TS
@@ -151,23 +172,67 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
         let finalMap = result.sourceMapText;
         if (finalMap) {
             try {
-                const mapObj = JSON.parse(finalMap);
+                // Determine offsets
+                const preambleLines = preamble.split('\n').length - 1;
+                // scriptBody starts at line `preambleLines` (0-indexed) in finalCode.
+
+                // Determine where script starts in original .mujs file
+                const originalSource = descriptor.source;
+                const linesBeforeScript = originalSource.substring(0, script.start).split('\n').length - 1;
+
+                const consumer = await new SourceMapConsumer(finalMap);
+                const generator = new SourceMapGenerator({
+                    file: filename,
+                    sourceRoot: ''
+                });
 
-                // Try to get relative path from 'src' to preserve folder structure in DevTools
+                // If inside src, use path starting from src. Else just basename.
                 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];
+                generator.setSourceContent(relativePath, originalSource);
+
+                consumer.eachMapping(m => {
+                    if (m.originalLine === null) return;
+
+                    // m.originalLine is the line in `finalCode` (1-based because SourceMapConsumer uses 1-based)
+                    // We need to convert it to line in `.mujs`.
+
+                    // Check if this line belongs to scriptBody
+                    // scriptBody spans from (preambleLines + 1) to (preambleLines + scriptBodyLines)
+                    const lineInFinalCode = m.originalLine;
+
+                    // Check if strictly inside body
+                    if (lineInFinalCode > preambleLines) {
+                        // Calculate offset inside scriptBody
+                        const lineOffsetInBody = lineInFinalCode - preambleLines; // 1-based offset (1st line of body is 1)
+
+                        // Calculate original line in .mujs
+                        // If lineOffsetInBody is 1 (first line of body), it corresponds to (linesBeforeScript + 1)
+                        const originalLineInMujs = linesBeforeScript + lineOffsetInBody;
+
+                        // Add mapping
+                        generator.addMapping({
+                            generated: {
+                                line: m.generatedLine,
+                                column: m.generatedColumn
+                            },
+                            original: {
+                                line: originalLineInMujs,
+                                column: m.originalColumn // Column should be preserved if we didn't change indentation
+                            },
+                            source: relativePath,
+                            name: m.name
+                        });
+                    }
+                });
+
+                finalMap = generator.toString();
+                consumer.destroy();
 
-                mapObj.sourcesContent = [descriptor.source];
-                finalMap = JSON.stringify(mapObj);
             } catch (e) {
                 console.warn('[MulanJS] Failed to patch source map:', e);
             }

package/src/compiler/sfc-parser.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseMUJS = parseMUJS;
+/**
+ * Standardized State-Machine Parser for MulanJS
+ * Parses .mujs files safely, handling attributes, quotes, and nested content.
+ */
+function parseMUJS(source, filename) {
+    const descriptor = {
+        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 = {};
+        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 = {
+            type: tagName,
+            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/loader/index.js

@@ -58,9 +58,11 @@ module.exports = function (content) {
     const compilerUrl = pathToFileURL(compilerRef).href;
 
     // Use dynamic import to load ESM compiler from CommonJS loader
-    import(compilerUrl).then(compiler => {
+
+    // Use dynamic import to load ESM compiler from CommonJS loader
+    import(compilerUrl).then(async compiler => {
         try {
-            const result = compiler.compileSFC(content, filePath);
+            const result = await compiler.compileSFC(content, filePath);
 
             if (result.errors && result.errors.length > 0) {
                 this.emitError(new Error(result.errors.join('\n')));