@mulanjs/mulanjs 1.0.1-dev.20260219164037 → 1.0.1-dev.20260219183205

package/README.md

@@ -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.20260219182444`
 
 Want to try the latest features before they are stable? Use the development build.
 

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>;

package/dist/types/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mulanjs/mulanjs",
-    "version": "1.0.1-dev.20260219164037",
+    "version": "1.0.1-dev.20260219183205",
     "description": "A powerful, secure, and enterprise-grade JavaScript framework.",
     "main": "dist/mulan.js",
     "module": "dist/mulan.esm.js",

package/src/compiler/compiler.ts

@@ -1,6 +1,6 @@
 
 import { parseMUJS } from './sfc-parser';
-import { compileScript } from './script-compiler';
+import { compileScript, CompilerOptions } from './script-compiler';
 import { compileTemplate } from './template-compiler';
 import { compileStyle } from './style-compiler';
 
@@ -11,12 +11,14 @@ export interface CompileResult {
     map?: string; // Source Map
 }
 
-export async function compileSFC(source: string, filename: string): Promise<CompileResult> {
+import { SourceMapGenerator, SourceMapConsumer } from 'source-map';
+
+export async function compileSFC(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult> {
     // 1. Parse
     const descriptor = parseMUJS(source, filename);
 
     // 2. Script
-    const scriptResult = await compileScript(descriptor);
+    const scriptResult = await 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__ =');
@@ -25,11 +27,94 @@ export async function compileSFC(source: string, filename: string): Promise<Comp
     }
 
     // 3. Style
-    const styleResult = compileStyle(descriptor, filename);
+    const styleResult = compileStyle(descriptor, filename, options);
 
     // 4. Template
     const templateResult = 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: string | undefined;
+
+    // Merge Maps
+    if (filename) {
+        const generator = new SourceMapGenerator({
+            file: filename + '.js',
+        });
+
+        // 1. Apply Script Map
+        if (scriptResult.map) {
+            const scriptConsumer = await new 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 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') {
@@ -98,6 +183,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/src/compiler/script-compiler.ts

@@ -2,6 +2,7 @@
 import { SFCDescriptor, SFCBlock } from './sfc-parser';
 import * as ts from 'typescript';
 import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
+import * as path from 'path';
 
 export interface ScriptCompileResult {
     code: string;
@@ -10,28 +11,66 @@ export interface ScriptCompileResult {
     map?: string; // Source Map
 }
 
-export async function compileScript(descriptor: SFCDescriptor): Promise<ScriptCompileResult> {
+export interface CompilerOptions {
+    readFileSync?: (file: string) => string;
+}
+
+export async function compileScript(descriptor: SFCDescriptor, options?: CompilerOptions): Promise<ScriptCompileResult> {
     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: any) {
+                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: SFCBlock, isTs: boolean, descriptor: SFCDescriptor): Promise<ScriptCompileResult> {
+async function compileSetupScript(
+    script: SFCBlock,
+    isTs: boolean,
+    descriptor: SFCDescriptor,
+    content: string,
+    filename: string,
+    isExternal: boolean,
+    externalPath: string
+): 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);
+    const transformedContent = transformNaturalReactivity(content, isTs);
 
     // 2. Parse the TRANSFORMED code
     const sourceFile = ts.createSourceFile(
@@ -119,7 +158,6 @@ async function compileSetupScript(script: SFCBlock, isTs: boolean, descriptor: S
         ? `import { ${autoImports.join(', ')} } from '@mulanjs/mulanjs';`
         : '';
 
-    const filename = descriptor.filename;
     const componentName = filename ? filename.split(/[/\\]/).pop()?.split('.')[0].replace(/\W/g, '') || 'App' : 'App';
 
     const bindingString = bindings.length > 0
@@ -168,7 +206,7 @@ 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 {
@@ -176,9 +214,16 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                 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 SourceMapConsumer(finalMap);
                 const generator = new SourceMapGenerator({
@@ -186,13 +231,32 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                     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 => {
@@ -210,9 +274,10 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
                         // 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({
@@ -221,7 +286,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,
@@ -254,6 +319,109 @@ export default ${hasDefineComponent ? 'defineComponent' : '_defineComponent'}({
     };
 }
 
+async function compileStandardScript(
+    script: SFCBlock,
+    descriptor: SFCDescriptor,
+    content: string,
+    filename: string,
+    isExternal: boolean,
+    externalPath: string
+): Promise<ScriptCompileResult> {
+
+    // 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: string | undefined;
+    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 SourceMapConsumer(finalMap);
+            const generator = new 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: string, isTs: boolean): string {

package/src/compiler/style-compiler.ts

@@ -1,5 +1,7 @@
 
+import * as path from 'path';
 import { SFCDescriptor } from './sfc-parser';
+import { CompilerOptions } from './script-compiler'; // Re-use options interface
 
 export interface StyleCompileResult {
     css: string;
@@ -7,7 +9,7 @@ export interface StyleCompileResult {
     errors: string[];
 }
 
-export function compileStyle(descriptor: SFCDescriptor, filename: string): StyleCompileResult {
+export function compileStyle(descriptor: SFCDescriptor, filename: string, options?: CompilerOptions): StyleCompileResult {
     const styles = descriptor.styles;
     if (!styles || styles.length === 0) return { css: '', errors: [] };
 
@@ -17,17 +19,39 @@ export function compileStyle(descriptor: SFCDescriptor, filename: string): Style
     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: any) {
+                    // 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: any) {
-                    return { css: '', errors: [`SCSS Compilation Error: ${e.message}`] };
+                    // return { css: '', errors: [`SCSS Compilation Error: ${e.message}`] };
+                    content = `/* SCSS Compilation Error: ${e.message} */`;
                 }
             }
 

package/src/compiler/template-compiler.ts

@@ -34,9 +34,12 @@ interface InterpolationNode extends BaseNode {
 
 // --- Compile Function ---
 
+import { SourceMapGenerator } from 'source-map';
+
 export interface TemplateCompileResult {
     code: string;
     errors: string[];
+    map?: string;
 }
 
 export function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): TemplateCompileResult {
@@ -56,8 +59,7 @@ export function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptC
     // 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);
@@ -69,8 +71,54 @@ export function compileTemplate(descriptor: SFCDescriptor, scriptResult: ScriptC
                 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 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
     };
 }
 

package/src/loader/index.js

@@ -9,45 +9,20 @@ module.exports = function (content) {
     const context = this.context || path.dirname(filePath);
 
     // --- External File Processor ---
-    // Inlines <script src="..."> and <style src="..."> before compilation
-    const inlineExternalFiles = (source) => {
-        // Regex to match <tag ... src="...">... </tag> or <tag ... src="..." />
-        // Captures: 1=TagName, 2=Attributes before src, 3=Quote, 4=Path, 5=Attributes after src
-        const tagRegex = /<(script|style)([\s\S]*?)src=(["'])(.*?)\3([\s\S]*?)>(?:<\/\1>|\s*\/>)?/gi;
+    // REMOVED: Inlining is now handled by the compiler to support correct source maps.
+    // We still scan for dependencies.
 
-        return source.replace(tagRegex, (match, tagName, attrsBefore, quote, srcPath, attrsAfter) => {
-            try {
-                // Resolve path
-                const absolutePath = path.resolve(context, srcPath);
-
-                // Add as dependency for Webpack HMR/Watch
-                this.addDependency(absolutePath);
-
-                // Read content
-                const externalContent = fs.readFileSync(absolutePath, 'utf-8');
-
-                console.log(`[MulanJS Loader] Inlined external ${tagName}: ${srcPath}`);
-
-                // Auto-detect TypeScript env
-                let finalAttrs = attrsBefore + attrsAfter;
-                if (srcPath.endsWith('.ts') && !finalAttrs.includes('lang=')) {
-                    finalAttrs += ' lang="ts"';
-                }
-
-                // Return new tag with content, removing the src attribute
-                return `<${tagName}${finalAttrs}>\n${externalContent}\n</${tagName}>`;
-            } catch (err) {
-                this.emitError(new Error(`[MulanJS Loader] Failed to load external file: ${srcPath}\n${err.message}`));
-                return match; // Return original on error to likely fail later or show error
-            }
-        });
-    };
-
-    try {
-        content = inlineExternalFiles(content);
-    } catch (e) {
-        callback(e);
-        return;
+    // Regex to match <tag ... src="...">... </tag> or <tag ... src="..." /> for DEPENDENCY TRACKING ONLY
+    const tagRegex = /<(script|style)([\s\S]*?)src=(["'])(.*?)\3/gi;
+    let match;
+    while ((match = tagRegex.exec(content)) !== null) {
+        try {
+            const srcPath = match[4];
+            const absolutePath = path.resolve(context, srcPath);
+            this.addDependency(absolutePath);
+        } catch (e) {
+            // Ignore resolution errors here, compiler will handle them
+        }
     }
 
     // Resolve path to the compiled compiler module (ESM)
@@ -57,12 +32,12 @@ module.exports = function (content) {
     const compilerRef = path.resolve(__dirname, '../../dist/compiler/compiler.js');
     const compilerUrl = pathToFileURL(compilerRef).href;
 
-    // Use dynamic import to load ESM compiler from CommonJS loader
-
     // Use dynamic import to load ESM compiler from CommonJS loader
     import(compilerUrl).then(async compiler => {
         try {
-            const result = await compiler.compileSFC(content, filePath);
+            const result = await compiler.compileSFC(content, filePath, {
+                readFileSync: (file) => fs.readFileSync(file, 'utf-8')
+            });
 
             if (result.errors && result.errors.length > 0) {
                 this.emitError(new Error(result.errors.join('\n')));