@mulanjs/mulanjs 1.0.1-dev.20260219161219 → 1.0.1-dev.20260219182444

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@mulanjs/mulanjs/latest?color=e94560&label=mulanjs)](https://www.npmjs.com/package/@mulanjs/mulanjs)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-> **"Compatible Surface, World-Class Engine"**
+> **"The Framework of Power. Zero Runtime Overhead. Pure ASTR Evolution."**
 
 MulanJS is a high-performance, next-generation web framework designed to bridge the gap between classic web development and the future of quantum-inspired state management. It is powered by a custom-built Signal Reactivity Engine and ASTR-Q+ architecture.
 
@@ -16,6 +16,7 @@ MulanJS is a high-performance, next-generation web framework designed to bridge
 > Coming soon!
 
 ### 🚧 Development Release (Bleeding Edge)
+**Current Version**: `1.0.1-dev.20260219221500`
 
 Want to try the latest features before they are stable? Use the development build.
 
@@ -29,16 +30,35 @@ npx @mulanjs/mulanjs@dev init my-project
 npm install @mulanjs/mulanjs@dev
 ```
 
-*Note: The dev version is updated frequently. You can check the latest version number by running `npm view @mulanjs/mulanjs dist-tags.dev`.*
-
 ## ⚡ Core Features
 
-- **Signal Reactivity Engine**: Fine-grained reactivity that tracks exact dependencies, eliminating the need for a Virtual DOM.
-- **ASTR-Q+ Engine**: Simulated quantum registers for probabilistic state management and complex logic branching.
-- **Iron Fortress Security**: Built-in "Iron Fortress" security module that auto-sanitizes inputs and generates CSP headers.
-- **Mulan Cycle**: A redefined component lifecycle (Init, Mount, Destroy) for predictable state management.
-- **TypeScript First**: Built from the ground up with TypeScript for world-class type safety.
+*   **Signal Reactivity Engine** ⚡: Fine-grained reactivity that tracks exact dependencies, eliminating the need for a Virtual DOM.
+*   **ASTR-Q+ Engine** 🌌: Simulated quantum registers for probabilistic state management and complex logic branching.
+*   **Iron Fortress Security** 🛡️: Built-in "Iron Fortress" security module that auto-sanitizes inputs and generates CSP headers.
+*   **Mulan Cycle** 🔄: A redefined component lifecycle (Init, Mount, Destroy) for predictable state management.
+*   **TypeScript First** 🟦: Built from the ground up with TypeScript for world-class type safety.
+*   **Mulan Power Server** 🚀: Instant, state-preserving Hot Module Replacement (HMR) powered by the Compiler.
+*   **Genesis Directives** ✨: Custom syntax (`mu-for`, `mu-if`) compiled directly to high-performance JavaScript.
+
+## 🌟 Advanced Capabilities
+
+### Mulan Genesis Static (SSG) 🌍
+Pre-render your world with `mulan static`. Perfect for SEO and instant content.
+
+### Mulan Anima (FLIP Physics) 🎬
+Just add `mu-animate` to any list for zero-config, 60fps layout transitions.
+
+### Mulan Infinity (Big Data) 📈
+Built-in virtualization to render 1,000,000+ rows without performance loss.
+
+### Mulan Vault (Persistence) 💾
+State that survives refreshes using `muVault`. Your data, secured in the Iron Fortress.
+
+### Mulan Router (Time Travel) 🧭
+Zero-config hash routing with `<mu-link>` for instant, single-page navigation.
 
+### Native SCSS Support 🎨
+Built-in support for `<style lang="scss">`. No config required. Just design.
 ## 🚀 Quick Start Example
 
 MulanJS components (`.mujs`) allow you to write powerful, reactive UI with minimal boilerplate.
@@ -59,16 +79,16 @@ const debugClick = () => {
 <mu-template>
   <div class="page">
     <div class="hero">
-        <h1>Powerful. Fast. MulanJS.</h1>
-        <p>The next generation framework for modern web applications.</p>
-        
-        <div class="counter-box">
-            <p>Interactive Counter:</p>
-            <!-- Native Event Binding -->
-            <button class="mu-btn" @click="debugClick()">
-                Count is: ${state.count}
-            </button>
-        </div>
+      <h1>Powerful. Fast. MulanJS.</h1>
+      <p>The next generation framework for modern web applications.</p>
+      
+      <div class="counter-box">
+        <p>Interactive Counter:</p>
+        <!-- Native Event Binding -->
+        <button class="mu-btn" @click="debugClick()">
+          Count is: ${state.count}
+        </button>
+      </div>
     </div>
   </div>
 </mu-template>
@@ -103,7 +123,7 @@ p { font-size: 1.2rem; color: #888; max-width: 600px; margin: 0 auto 40px; }
 ```
 
 ## Created By
-**Nitin Kumar** (@nitinkumardev09) - *Creator of .mujs & MulanJS Framework*
+**Nitin Kumar** (@nitinkumardev09) - *Creator of .mujs & MulanJS Framework* 
 
 ## License
 MIT

package/dist/compiler/compiler.js

@@ -5,11 +5,12 @@ 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");
-async function compileSFC(source, filename) {
+const source_map_1 = require("source-map");
+async function compileSFC(source, filename, options) {
     // 1. Parse
     const descriptor = (0, sfc_parser_1.parseMUJS)(source, filename);
     // 2. Script
-    const scriptResult = await (0, script_compiler_1.compileScript)(descriptor);
+    const scriptResult = await (0, script_compiler_1.compileScript)(descriptor, options);
     // 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__ =');
@@ -17,9 +18,85 @@ async function compileSFC(source, filename) {
         scriptCode = scriptCode.replace(/export\s+default/, 'const __component__ =');
     }
     // 3. Style
-    const styleResult = (0, style_compiler_1.compileStyle)(descriptor, filename);
+    const styleResult = (0, style_compiler_1.compileStyle)(descriptor, filename, options);
     // 4. Template
     const templateResult = (0, template_compiler_1.compileTemplate)(descriptor, scriptResult, styleResult.scopedId);
+    // Calculate offsets for source map merging
+    // 1. Script Code
+    // 2. Padding (newlines)
+    // 3. Template Code
+    // We need to count lines in scriptCode to know where template code starts in the final file
+    const scriptLineCount = scriptCode.split(/\r?\n/).length;
+    const paddingLines = 2; // Two newlines between script and template
+    const templateOffset = scriptLineCount + paddingLines;
+    let mergedMap;
+    // Merge Maps
+    if (filename) {
+        const generator = new source_map_1.SourceMapGenerator({
+            file: filename + '.js',
+        });
+        // 1. Apply Script Map
+        if (scriptResult.map) {
+            const scriptConsumer = await new source_map_1.SourceMapConsumer(JSON.parse(scriptResult.map));
+            scriptConsumer.eachMapping(mapping => {
+                if (mapping.source) {
+                    generator.addMapping({
+                        generated: {
+                            line: mapping.generatedLine, // Script is at the top, so no offset needed
+                            column: mapping.generatedColumn
+                        },
+                        original: {
+                            line: mapping.originalLine,
+                            column: mapping.originalColumn
+                        },
+                        source: mapping.source,
+                        name: mapping.name
+                    });
+                }
+            });
+            // Copy source content from script map
+            if (scriptConsumer.sources) {
+                scriptConsumer.sources.forEach(sourceFile => {
+                    const content = scriptConsumer.sourceContentFor(sourceFile);
+                    if (content) {
+                        generator.setSourceContent(sourceFile, content);
+                    }
+                });
+            }
+            scriptConsumer.destroy();
+        }
+        // 2. Apply Template Map
+        if (templateResult.map) {
+            const templateConsumer = await new source_map_1.SourceMapConsumer(JSON.parse(templateResult.map));
+            templateConsumer.eachMapping(mapping => {
+                if (mapping.source) {
+                    generator.addMapping({
+                        generated: {
+                            line: mapping.generatedLine + templateOffset, // Shift by script length
+                            column: mapping.generatedColumn
+                        },
+                        original: {
+                            line: mapping.originalLine, // Original line in .mujs
+                            column: mapping.originalColumn
+                        },
+                        source: mapping.source, // This should be the .mujs file
+                        name: mapping.name
+                    });
+                }
+            });
+            // Copy source content from template map
+            if (templateConsumer.sources) {
+                templateConsumer.sources.forEach(sourceFile => {
+                    const content = templateConsumer.sourceContentFor(sourceFile);
+                    if (content) {
+                        generator.setSourceContent(sourceFile, content);
+                    }
+                });
+            }
+            templateConsumer.destroy();
+        }
+        mergedMap = generator.toString();
+    }
     // 5. Assembly
     const cssInjection = styleResult.css ? `
 if (typeof document !== 'undefined') {
@@ -86,6 +163,6 @@ export default __component__;
         code: finalCode,
         css: styleResult.css,
         errors: [...scriptResult.errors, ...templateResult.errors],
-        map: scriptResult.map // Pass the map
+        map: mergedMap || scriptResult.map // Fallback to script map if merge fails
     };
 }

package/dist/compiler/script-compiler.js

@@ -36,27 +36,55 @@ 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 path = __importStar(require("path"));
+async function compileScript(descriptor, options) {
     const script = descriptor.script;
     if (!script)
         return { code: 'export default {}', errors: [] };
+    let content = script.content;
+    let filename = descriptor.filename;
+    let isExternal = false;
+    let externalPath = '';
+    // Handle External Script
+    if (script.attrs.src) {
+        if (options && options.readFileSync) {
+            try {
+                // Resolve path relative to the SFC file
+                const sfcDir = path.dirname(descriptor.filename);
+                externalPath = path.resolve(sfcDir, script.attrs.src);
+                content = options.readFileSync(externalPath);
+                // Keep filename as .mujs for now, but we will use externalPath for source mapping of the content
+                // Actually, if we want the external file to show up as ITSELF in devtools, we should map to externalPath.
+                isExternal = true;
+            }
+            catch (e) {
+                return { code: 'export default {}', errors: [`Failed to read external script: ${e.message}`] };
+            }
+        }
+        else {
+            return { code: 'export default {}', errors: [`External script found but no readFileSync option provided.`] };
+        }
+    }
     const isSetup = !!script.attrs.setup;
-    const isTs = script.attrs.lang === 'ts' || script.attrs.lang === 'tsx';
+    const isTs = script.attrs.lang === 'ts' || script.attrs.lang === 'tsx' || externalPath.endsWith('.ts') || externalPath.endsWith('.tsx');
     if (isSetup) {
-        return await compileSetupScript(script, isTs, descriptor);
+        return await compileSetupScript(script, isTs, descriptor, content, filename, isExternal, externalPath);
+    }
+    else if (isTs) {
+        return await compileStandardScript(script, descriptor, content, filename, isExternal, externalPath);
     }
     else {
         // Standard Options API - just pass through, assuming it has export default
-        return { code: script.content, errors: [] };
+        return { code: 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) {
+async function compileSetupScript(script, isTs, descriptor, content, filename, isExternal, externalPath) {
     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);
+    const transformedContent = transformNaturalReactivity(content, isTs);
     // 2. Parse the TRANSFORMED code
     const sourceFile = ts.createSourceFile('script.' + (isTs ? 'ts' : 'js'), transformedContent, ts.ScriptTarget.Latest, true);
     const imports = [];
@@ -129,7 +157,6 @@ async function compileSetupScript(script, isTs, descriptor) {
     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
         ? `
@@ -171,27 +198,53 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
         });
         // Fix: Remove the //# sourceMappingURL= comment added by TS
         const codeWithoutMapComment = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
-        // Enhance Source Map to show ORIGINAL .mujs content
+        // Enhance Source Map to show ORIGINAL .mujs content or EXTERNAL 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;
+                // Determine where script starts
+                // If External: Start at 0
+                // If Inline: Start at script.start line
+                let linesBeforeScript = 0;
+                let originalSource = content;
+                if (!isExternal) {
+                    originalSource = descriptor.source;
+                    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';
+                // Determine relative path for source
+                let relativePath = filename.split(/[/\\]/).pop() || 'unknown.mujs'; // Default to basename
+                if (isExternal) {
+                    // For external files, we want Source Map to point to the actual TS file
+                    // externalPath is absolute. Make it relative to project root or something reasonable?
+                    // Webpack often likes 'webpack:///[resource-path]'
+                    // We'll try to map it so it looks like a separate file
+                    const normalized = externalPath.replace(/\\/g, '/');
+                    const srcIdx = normalized.indexOf('/src/');
+                    if (srcIdx !== -1) {
+                        relativePath = 'webpack:///' + normalized.substring(srcIdx + 1); // e.g. webpack:///src/logic.ts
+                    }
+                    else {
+                        relativePath = 'webpack:///' + path.basename(externalPath);
+                    }
+                }
+                else {
+                    // Inline: Point to .mujs file
+                    const normalized = filename.replace(/\\/g, '/');
+                    const srcIdx = normalized.indexOf('/src/');
+                    if (srcIdx !== -1) {
+                        relativePath = 'webpack:///' + normalized.substring(srcIdx + 1); // e.g. webpack:///src/App.mujs
+                    }
+                }
+                // If inline, we set source content of .mujs (the whole file)
+                // If external, we set source content of the .ts file
                 generator.setSourceContent(relativePath, originalSource);
                 consumer.eachMapping(m => {
                     if (m.originalLine === null)
@@ -205,9 +258,10 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                     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;
+                        // Calculate original line
+                        // If External: lineOffsetInBody is the line number
+                        // If Inline: linesBeforeScript + lineOffsetInBody
+                        const originalLine = linesBeforeScript + lineOffsetInBody;
                         // Add mapping
                         generator.addMapping({
                             generated: {
@@ -215,7 +269,7 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                                 column: m.generatedColumn
                             },
                             original: {
-                                line: originalLineInMujs,
+                                line: originalLine,
                                 column: m.originalColumn // Column should be preserved if we didn't change indentation
                             },
                             source: relativePath,
@@ -244,6 +298,89 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
         map: undefined
     };
 }
+async function compileStandardScript(script, descriptor, content, filename, isExternal, externalPath) {
+    // For standard script, we also might need source map if we transpiled it (e.g. from TS)
+    // and/or just to map it back to .mujs
+    let finalMap;
+    let code = content;
+    // Transpile if TS
+    if (externalPath.endsWith('.ts') || script.attrs.lang === 'ts') {
+        const result = ts.transpileModule(content, {
+            compilerOptions: {
+                module: ts.ModuleKind.ESNext,
+                target: ts.ScriptTarget.ES2019,
+                sourceMap: true,
+                inlineSources: true,
+            },
+            fileName: filename
+        });
+        code = result.outputText.replace(/\/\/# sourceMappingURL=.*$/gm, '');
+        finalMap = result.sourceMapText;
+    }
+    // Adjust Source Map
+    if (finalMap) {
+        try {
+            // Standard script content is usually 1:1 with source lines if we ignore transpilation shifts (which TS handles)
+            // But if it's inline, TS thinks it starts at line 0. We need to shift it by `linesBeforeScript`.
+            let linesBeforeScript = 0;
+            let originalSource = content;
+            if (!isExternal) {
+                originalSource = descriptor.source;
+                linesBeforeScript = descriptor.source.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: ''
+            });
+            // Determine relative path for source (same logic as Setup)
+            let relativePath = filename.split(/[/\\]/).pop() || 'unknown.mujs';
+            if (isExternal) {
+                const normalized = externalPath.replace(/\\/g, '/');
+                const srcIdx = normalized.indexOf('/src/');
+                if (srcIdx !== -1) {
+                    relativePath = 'webpack:///' + normalized.substring(srcIdx + 1);
+                }
+                else {
+                    relativePath = 'webpack:///' + path.basename(externalPath);
+                }
+            }
+            else {
+                const normalized = filename.replace(/\\/g, '/');
+                const srcIdx = normalized.indexOf('/src/');
+                if (srcIdx !== -1) {
+                    relativePath = 'webpack:///' + normalized.substring(srcIdx + 1);
+                }
+            }
+            generator.setSourceContent(relativePath, originalSource);
+            consumer.eachMapping(m => {
+                if (m.originalLine === null)
+                    return;
+                const originalLine = m.originalLine + linesBeforeScript;
+                generator.addMapping({
+                    generated: {
+                        line: m.generatedLine,
+                        column: m.generatedColumn
+                    },
+                    original: {
+                        line: originalLine,
+                        column: m.originalColumn
+                    },
+                    source: relativePath,
+                    name: m.name
+                });
+            });
+            finalMap = generator.toString();
+            consumer.destroy();
+        }
+        catch (e) { /* ignore */ }
+    }
+    return {
+        code: code,
+        errors: [],
+        map: finalMap
+    };
+}
 // --- Natural Reactivity Transformer ---
 function transformNaturalReactivity(code, isTs) {
     // If no '$(' or '$q(' or '$qr(' usage, return original code for safety/speed

package/dist/compiler/style-compiler.js

@@ -1,7 +1,41 @@
 "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.compileStyle = compileStyle;
-function compileStyle(descriptor, filename) {
+const path = __importStar(require("path"));
+function compileStyle(descriptor, filename, options) {
     const styles = descriptor.styles;
     if (!styles || styles.length === 0)
         return { css: '', errors: [] };
@@ -9,18 +43,41 @@ function compileStyle(descriptor, filename) {
     const scopedId = 'data-v-' + hash(filename);
     styles.forEach(style => {
         let content = style.content;
+        // Handle External Style
+        if (style.attrs.src) {
+            if (options && options.readFileSync) {
+                try {
+                    const sfcDir = path.dirname(filename);
+                    const externalPath = path.resolve(sfcDir, style.attrs.src);
+                    content = options.readFileSync(externalPath);
+                }
+                catch (e) {
+                    // Start error with "Style Compilation Error" to be consistent? Or just add to errors list.
+                    // But we are inside forEach, so we can't return easily. We'll add a comment in CSS or log.
+                    // Better to collect errors.
+                    // But function signature returns { errors: string[] }.
+                    // We'll just append to errors? But we need to change forEach loop or use functional approach.
+                    // For now, let's just ignore/log in CSS content?
+                    content = `/* Failed to read external style: ${e.message} */`;
+                }
+            }
+            else {
+                content = `/* External style found but no readFileSync option provided */`;
+            }
+        }
         if (style.attrs.scoped) {
             // SCSS Compilation
-            if (style.attrs.lang === 'scss' || style.attrs.lang === 'sass') {
+            if (style.attrs.lang === 'scss' || style.attrs.lang === 'sass' || (style.attrs.src && (style.attrs.src.endsWith('.scss') || style.attrs.src.endsWith('.sass')))) {
                 try {
                     const sass = require('sass');
                     const result = sass.compileString(content, {
-                        syntax: style.attrs.lang === 'sass' ? 'indented' : 'scss'
+                        syntax: (style.attrs.lang === 'sass' || (style.attrs.src && style.attrs.src.endsWith('.sass'))) ? 'indented' : 'scss'
                     });
                     content = result.css;
                 }
                 catch (e) {
-                    return { css: '', errors: [`SCSS Compilation Error: ${e.message}`] };
+                    // return { css: '', errors: [`SCSS Compilation Error: ${e.message}`] };
+                    content = `/* SCSS Compilation Error: ${e.message} */`;
                 }
             }
             // Rewrite selectors

package/dist/compiler/template-compiler.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileTemplate = compileTemplate;
+// --- Compile Function ---
+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'}`);
     const template = descriptor.template;
@@ -14,8 +16,7 @@ function compileTemplate(descriptor, scriptResult, scopedId) {
     transform(ast, scriptResult, scopedId, [], descriptor.filename);
     // 3. Codegen Phase (AST -> JS Function)
     const code = generate(ast, scriptResult.bindings || []);
-    return {
-        code: `function render() { 
+    const renderFn = `function render() { 
             const _s = (v) => (v && typeof v === 'object' && 'value' in v) ? v.value : v;
             const _h = (v, raw) => {
                 const val = _s(v);
@@ -27,8 +28,47 @@ function compileTemplate(descriptor, scriptResult, scopedId) {
                 return val.replace(/</g, '&lt;').replace(/>/g, '&gt;');
             };
             return ${code}; 
-        }`,
-        errors
+        }`;
+    // 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
+        });
+        // 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
+            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();
+    }
+    return {
+        code: renderFn,
+        errors,
+        map
     };
 }
 // --- Parser (Recursive Descent) ---

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

@@ -1,7 +1,8 @@
+import { CompilerOptions } from './script-compiler';
 export interface CompileResult {
     code: string;
     css: string;
     errors: string[];
     map?: string;
 }
-export declare function compileSFC(source: string, filename: string): Promise<CompileResult>;
+export declare function compileSFC(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;

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

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

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

@@ -1,7 +1,8 @@
 import { SFCDescriptor } from './sfc-parser';
+import { CompilerOptions } from './script-compiler';
 export interface StyleCompileResult {
     css: string;
     scopedId?: string;
     errors: string[];
 }
-export declare function compileStyle(descriptor: SFCDescriptor, filename: string): StyleCompileResult;
+export declare function compileStyle(descriptor: SFCDescriptor, filename: string, options?: CompilerOptions): StyleCompileResult;

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

@@ -3,5 +3,6 @@ import { ScriptCompileResult } from './script-compiler';
 export interface TemplateCompileResult {
     code: string;
     errors: string[];
+    map?: string;
 }
 export declare function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): TemplateCompileResult;

package/dist/types/compiler.d.ts

@@ -1,7 +1,8 @@
+import { CompilerOptions } from './script-compiler';
 export interface CompileResult {
     code: string;
     css: string;
     errors: string[];
     map?: string;
 }
-export declare function compileSFC(source: string, filename: string): Promise<CompileResult>;
+export declare function compileSFC(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;