@mulanjs/mulanjs 1.0.1-dev.20260212143840

package/src/cli/index.js

@@ -0,0 +1,600 @@
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const fs = require('fs-extra');
+const path = require('path');
+const { execSync } = require('child_process');
+const readline = require('readline');
+
+const program = new Command();
+
+program
+  .name('mulan')
+  .description('MulanJS CLI - The World\'s Most Powerful ASTR-Q Framework CLI')
+  .version('1.0.1-dev.0');
+
+const LOGO_SVG = `<svg width="50" height="50" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="logo">
+  <circle cx="60" cy="60" r="40" fill="#FF4081" opacity="0.1"/>
+  <g transform="rotate(0 60 60)">
+    <ellipse cx="60" cy="30" rx="15" ry="25" fill="#E91E63" opacity="0.8"/>
+    <ellipse cx="60" cy="90" rx="15" ry="25" fill="#E91E63" opacity="0.8"/>
+    <ellipse cx="30" cy="60" rx="25" ry="15" fill="#9C27B0" opacity="0.8"/>
+    <ellipse cx="90" cy="60" rx="25" ry="15" fill="#9C27B0" opacity="0.8"/>
+  </g>
+  <g transform="rotate(45 60 60)">
+    <ellipse cx="60" cy="30" rx="15" ry="25" fill="#2196F3" opacity="0.8"/>
+    <ellipse cx="60" cy="90" rx="15" ry="25" fill="#2196F3" opacity="0.8"/>
+    <ellipse cx="30" cy="60" rx="25" ry="15" fill="#3F51B5" opacity="0.8"/>
+    <ellipse cx="90" cy="60" rx="25" ry="15" fill="#3F51B5" opacity="0.8"/>
+  </g>
+  <circle cx="60" cy="60" r="15" fill="#FFC107"/>
+  <rect x="55" y="55" width="10" height="3" fill="#000"/>
+  <rect x="55" y="60" width="5" height="3" fill="#000"/>
+  <rect x="55" y="65" width="10" height="3" fill="#000"/>
+  <circle cx="45" cy="45" r="2" fill="#FF9800"/>
+  <circle cx="75" cy="45" r="2" fill="#FF9800"/>
+  <circle cx="45" cy="75" r="2" fill="#FF9800"/>
+  <circle cx="75" cy="75" r="2" fill="#FF9800"/>
+</svg>`;
+
+function printBanner() {
+  console.log(`
+\x1b[35m█▀▄▀█ █░█ █░░ ▄▀█ █▄░█   \x1b[36m░░█ █▀\x1b[0m
+\x1b[35m█░▀░█ █▄█ █▄▄ █▀█ █░▀█   \x1b[36m█▄█ ▄█\x1b[0m
+
+\x1b[33m⚡ THE WORLD'S MOST POWERFUL ASTR-Q FRAMEWORK ⚡\x1b[0m
+`);
+}
+
+function askQuestion(query) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise(resolve => rl.question(query, ans => {
+    rl.close();
+    resolve(ans);
+  }));
+}
+
+program
+  .command('init <project-name>')
+  .description('Initialize a new MulanJS project')
+  .option('--ts', 'Initialize as TypeScript project')
+  .option('--js', 'Initialize as JavaScript project')
+  .action(async (projectName, options) => {
+    printBanner();
+    console.log(`\n🚀 Unleashing MulanJS Power: Preparing ${projectName}...\n`);
+
+    const projectPath = path.resolve(process.cwd(), projectName);
+    const publicPath = path.join(projectPath, 'public');
+    const srcPath = path.join(projectPath, 'src');
+    const compPath = path.join(srcPath, 'components');
+    const pagesPath = path.join(srcPath, 'pages');
+
+    if (fs.existsSync(projectPath)) {
+      console.error(`❌ Error: Directory ${projectName} already exists.`);
+      process.exit(1);
+    }
+
+    // Language/Mode Selection
+    let mode = 0;
+
+    if (options.ts) {
+      mode = 1;
+    } else if (options.js) {
+      mode = 2;
+    } else {
+      console.log("Select your Power Level:");
+      console.log("1) MulanJS (.mujs + TypeScript) [Recommended]");
+      console.log("2) TypeScript (Classic)");
+      console.log("3) JavaScript (Legacy)");
+
+      try {
+        const answer = await askQuestion("Enter choice (1/2/3) [1]: ");
+        const choice = answer.trim();
+        if (choice === '2') mode = 1;
+        else if (choice === '3') mode = 2;
+        else mode = 0;
+      } catch (e) {
+        console.warn("Input failed, defaulting to MulanJS.");
+      }
+    }
+
+    const isMuJS = mode === 0;
+    const isTS = mode === 0 || mode === 1;
+    const fileExt = isMuJS ? 'mujs' : (isTS ? 'ts' : 'js');
+    const mainExt = isTS ? 'ts' : 'js';
+
+    console.log(`\n⚡ Setting up Environment: ${isMuJS ? 'MulanJS' : (isTS ? 'TypeScript' : 'JavaScript')}...`);
+
+    try {
+      // 1. Create Directory Structure (Ensure for ALL modes)
+      await fs.ensureDir(publicPath);
+      await fs.ensureDir(srcPath);
+      await fs.ensureDir(compPath);
+      await fs.ensureDir(pagesPath);
+
+      // 2. config files
+      const packageJson = {
+        name: projectName,
+        version: "1.0.0",
+        description: "Powered by MulanJS",
+        dependencies: {},
+        devDependencies: {
+          "webpack": "^5.104.1",
+          "webpack-cli": "^6.0.1",
+          "webpack-dev-server": "^5.2.0",
+          "css-loader": "^6.8.1",
+          "style-loader": "^3.3.3",
+          "sass": "^1.83.0",
+          "sass-loader": "^16.0.0"
+        },
+        scripts: {
+          "start": "mulan dev",
+          "dev": "mulan dev",
+          "build": "mulan build",
+          "generate": "mulan generate"
+        }
+      };
+
+      if (isTS) {
+        packageJson.devDependencies["typescript"] = "^5.0.0";
+        packageJson.devDependencies["ts-loader"] = "^9.5.4";
+      }
+
+      await fs.outputJson(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
+
+      // VS Code Support
+      const vscodePath = path.join(projectPath, '.vscode');
+      await fs.ensureDir(vscodePath);
+      await fs.outputJson(path.join(vscodePath, 'extensions.json'), {
+        "recommendations": [
+          "mulanjs.mulanjs-vscode"
+        ]
+      }, { spaces: 2 });
+
+
+      // tsconfig
+      if (isTS) {
+        const tsConfig = {
+          "compilerOptions": {
+            "target": "es2016",
+            "module": "esnext",
+            "moduleResolution": "node",
+            "strict": true,
+            "esModuleInterop": true,
+            "skipLibCheck": true,
+            "forceConsistentCasingInFileNames": true,
+            "outDir": "./dist"
+          },
+          "include": ["src/**/*"]
+        };
+        await fs.outputJson(path.join(projectPath, 'tsconfig.json'), tsConfig, { spaces: 2 });
+
+        // d.ts for .mujs
+        const dts = `declare module '*.mujs' {
+    import { MuComponent } from '@mulanjs/mulanjs';
+    const component: new (...args: any[]) => MuComponent;
+    export default component;
+}`;
+        await fs.writeFile(path.join(srcPath, 'mulan-env.d.ts'), dts);
+      }
+
+      // mulan.config.js
+      const mulanConfig = `module.exports = {
+    entry: 'src/main.${mainExt}',
+    outputDir: 'dist',
+    port: 1016
+};`;
+      await fs.writeFile(path.join(projectPath, 'mulan.config.js'), mulanConfig);
+
+      // webpack.config.js
+      const ruleTS = isTS ? `{ test: /\\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },` : '';
+      const ruleMuJS = `{ test: /\\.mujs$/, use: '@mulanjs/mulanjs/loader' },`;
+
+      const webpackConfig = `const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: './src/main.${mainExt}',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.mujs']
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+    port: 1016,
+    open: true,
+    hot: true,
+    historyApiFallback: true,
+  },
+  module: {
+    rules: [
+      ${ruleTS}
+      ${ruleMuJS}
+      { test: /\.s[ac]ss$/i, use: ["style-loader", "css-loader", "sass-loader"] },
+      { test: /\\.css$/i, use: ["style-loader", "css-loader"] },
+    ],
+  },
+};`;
+      await fs.writeFile(path.join(projectPath, 'webpack.config.js'), webpackConfig);
+
+      // Index HTML
+      const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${projectName} - MulanJS</title>
+</head>
+<body>
+    <div id="app"></div>
+    <div id="router-outlet"></div>
+    <script src="/bundle.js"></script>
+</body>
+</html>`;
+      await fs.writeFile(path.join(publicPath, 'index.html'), indexHtml);
+
+      // Styles
+      const styleCss = `
+        body { font-family: 'Inter', sans-serif; background: #0a0a0a; color: #fff; margin: 0; }
+        .mu-btn { 
+            background: linear-gradient(45deg, #e94560, #9c27b0); 
+            border: none; color: white; padding: 10px 20px; 
+            border-radius: 6px; cursor: pointer; font-size: 1rem;
+            transition: transform 0.1s;
+        }
+        .mu-btn:active { transform: scale(0.95); }
+      `;
+      await fs.writeFile(path.join(srcPath, 'style.css'), styleCss);
+
+
+      // --- COMPONENT GENERATION (Unified Templates) ---
+
+      const headerTemplate = (isMuJS) ?
+        `<script setup lang="ts">
+</script>
+<mu-template>
+  <header>
+     <div class="logo-container">
+       ${LOGO_SVG}
+       <div class="brand">MulanJS</div>
+     </div>
+     <nav>
+       <mu-link to="/">Home</mu-link>
+       <mu-link to="/about">About</mu-link>
+     </nav>
+  </header>
+</mu-template>
+<style scoped>
+header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 15px 30px; background: rgba(20, 20, 20, 0.95);
+  border-bottom: 1px solid #333; backdrop-filter: blur(10px);
+  position: sticky; top: 0; z-index: 100;
+}
+.logo-container { display: flex; align-items: center; gap: 15px; }
+.brand { font-weight: bold; font-size: 1.5rem; letter-spacing: -0.5px; }
+nav mu-link { color: #aaa; margin-left: 20px; text-decoration: none; font-weight: 500; transition: color 0.2s; display: inline-block; }
+nav mu-link:hover { color: #e94560; }
+.logo { height: 40px; width: 40px; animation: spin 20s linear infinite; }
+@keyframes spin { 100% { transform: rotate(360deg); } }
+</style>` : `import { Component } from '@mulanjs/mulanjs';
+
+export class Header extends Component {
+  template${isTS ? '(): string' : ''} {
+    return \`
+      <header>
+         <div class="logo-container">
+           ${LOGO_SVG}
+           <div class="brand">MulanJS ${isTS ? 'TS' : 'JS'}</div>
+         </div>
+         <nav>
+           <mu-link to="/">Home</mu-link>
+           <mu-link to="/about">About</mu-link>
+         </nav>
+      </header>
+      <style>
+        header { 
+          display: flex; justify-content: space-between; align-items: center;
+          padding: 15px 30px; background: rgba(20, 20, 20, 0.95);
+          border-bottom: 1px solid #333; backdrop-filter: blur(10px);
+          position: sticky; top: 0; z-index: 100;
+        }
+        .logo-container { display: flex; align-items: center; gap: 15px; }
+        .brand { font-weight: bold; font-size: 1.5rem; letter-spacing: -0.5px; }
+        nav mu-link { color: #aaa; margin-left: 20px; text-decoration: none; font-weight: 500; transition: color 0.2s; display: inline-block; }
+        nav mu-link:hover { color: #e94560; }
+        .logo { height: 40px; width: 40px; animation: spin 20s linear infinite; }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+      </style>
+    \`;
+  }
+}`;
+
+      // Home Page with Counter
+      const homeTemplate = (isMuJS) ?
+        `<script setup lang="ts">
+import { muState } from '@mulanjs/mulanjs';
+const state = muState({ count: 0 });
+</script>
+<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>
+            <button class="mu-btn" @click="state.count++">
+                Count is: \${state.count}
+            </button>
+        </div>
+    </div>
+  </div>
+</mu-template>
+<style scoped>
+.page { padding: 60px 20px; text-align: center; }
+h1 { font-size: 4rem; background: linear-gradient(to right, #e94560, #9c27b0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; }
+p { font-size: 1.2rem; color: #888; max-width: 600px; margin: 0 auto 40px; }
+.counter-box { background: #1a1a1a; padding: 30px; border-radius: 12px; display: inline-block; border: 1px solid #333; }
+</style>` : `import { Component, muState } from '@mulanjs/mulanjs';
+
+export class Home extends Component {
+    constructor(container${isTS ? ': HTMLElement' : ''}) {
+        super(container);
+        this.state = muState({ count: 0 });
+    }
+
+    template${isTS ? '(): string' : ''} {
+        return \`
+        <div class="page">
+            <div class="hero">
+                <h1>Powerful. Fast. MulanJS.</h1>
+                <p>Welcome to the Classic ${isTS ? 'TypeScript' : 'JavaScript'} Era.</p>
+                
+                <div class="counter-box">
+                    <p>Interactive Counter:</p>
+                    <button class="mu-btn" onclick="\${this.bind(() => this.state.count++)}">
+                        Count is: \${this.state.count}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <style>
+            .page { padding: 60px 20px; text-align: center; }
+            h1 { font-size: 4rem; background: linear-gradient(to right, #e94560, #9c27b0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; }
+            p { font-size: 1.2rem; color: #888; max-width: 600px; margin: 0 auto 40px; }
+            .counter-box { background: #1a1a1a; padding: 30px; border-radius: 12px; display: inline-block; border: 1px solid #333; }
+        </style>
+        \`;
+    }
+}`;
+
+      // About Page
+      const aboutTemplate = (isMuJS) ?
+        `<mu-template>
+  <div class="page">
+    <h1>About Us</h1>
+    <p>Building the future with MulanJS.</p>
+  </div>
+</mu-template>
+<style scoped src="./About.css"></style>
+` : `import { Component } from '@mulanjs/mulanjs';
+
+export class About extends Component {
+    template${isTS ? '(): string' : ''} {
+        return \`
+        <div class="page">
+            <div style="text-align:center; padding: 40px;">
+                <h1>About Us</h1>
+                <p>Building the future with MulanJS Classic.</p>
+            </div>
+        </div>
+        \`;
+    }
+}`;
+
+      // Write Component Files
+      await fs.writeFile(path.join(compPath, `Header.${fileExt}`), headerTemplate);
+      await fs.writeFile(path.join(pagesPath, `Home.${fileExt}`), homeTemplate);
+      await fs.writeFile(path.join(pagesPath, `About.${fileExt}`), aboutTemplate);
+
+
+      if (isMuJS) {
+        const aboutCss = `.page { padding: 40px; text-align: center; }`;
+        await fs.writeFile(path.join(pagesPath, 'About.css'), aboutCss);
+      }
+
+      // Main Entry Point (Unified)
+      const mainContent = (isMuJS) ?
+        `import { Router } from '@mulanjs/mulanjs';
+import Home from './pages/Home.mujs';
+import About from './pages/About.mujs';
+import Header from './components/Header.mujs';
+import './style.css';
+
+const app = document.getElementById('app');
+if (app) {
+    app.innerHTML = '<div id="header-mount"></div><div id="router-mount"></div>';
+    
+    const headerMount = document.getElementById('header-mount');
+    if (headerMount) new Header(headerMount).mount();
+    
+    const routerMount = document.getElementById('router-mount');
+    if (routerMount) {
+        new Router([
+            { path: '/', component: Home },
+            { path: '/about', component: About }
+        ], routerMount);
+    }
+}` :
+        `import { Router } from '@mulanjs/mulanjs';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+import { Header } from './components/Header';
+import './style.css';
+
+const app = document.getElementById('app');
+if (app) {
+    app.innerHTML = '<div id="header-mount"></div><div id="router-mount"></div>';
+    
+    // Mount Header
+    const headerMount = document.getElementById('header-mount');
+    if (headerMount) new Header(headerMount).mount();
+    
+    const routerMount = document.getElementById('router-mount');
+    if (routerMount) {
+        new Router([
+            { path: '/', component: Home },
+            { path: '/about', component: About }
+        ], routerMount);
+    }
+}`;
+      await fs.writeFile(path.join(srcPath, `main.${mainExt}`), mainContent);
+
+
+      console.log(`\n✅ Project ${projectName} created successfully!`);
+      console.log(`\n👉 Next Steps:`);
+      console.log(`   1. cd ${projectName}`);
+      console.log(`   2. npm install`);
+      console.log(`   3. npm link @mulanjs/mulanjs`);
+      console.log(`   4. npm run dev`);
+
+      // Auto-install VS Code Extension
+      try {
+        const vsixPath = path.join(__dirname, 'extensions', 'mulanjs-vscode-1.0.0.vsix');
+        if (fs.existsSync(vsixPath)) {
+          console.log('\n📦 Installing MulanJS VS Code Extension...');
+          execSync(`code --install-extension "${vsixPath}" --force`, { stdio: 'inherit' });
+          console.log('✅ Extension installed successfully!');
+        }
+      } catch (e) {
+        console.warn('⚠️  Could not install VS Code extension (VS Code CLI not found or failed).');
+      }
+
+
+    } catch (error) {
+      console.error('Failed to create project:', error);
+    }
+  });
+
+const net = require('net');
+
+async function findAvailablePort(startPort) {
+  const isPortAvailable = (port) => {
+    return new Promise((resolve) => {
+      const server = net.createServer();
+      server.once('error', () => resolve(false));
+      server.once('listening', () => {
+        server.close();
+        resolve(true);
+      });
+      server.listen(port);
+    });
+  };
+
+  let port = startPort;
+  while (!(await isPortAvailable(port))) {
+    port++;
+  }
+  return port;
+}
+
+program
+  .command('dev [args...]')
+  .description('Start the Mulan Development Server')
+  .action(async () => {
+    try {
+      const port = await findAvailablePort(1016);
+      console.log(`🚀 Starting Mulan Power Server on port ${port}...`);
+
+      if (!fs.existsSync(path.join(process.cwd(), 'webpack.config.js'))) {
+        console.warn("⚠️  webpack.config.js not found.");
+      }
+
+      // Pass the port to webpack-dev-server via --port flag.
+      // Note: This overrides the port in webpack.config.js if set there.
+      execSync(`npx webpack serve --port ${port}`, { stdio: 'inherit' });
+    } catch (e) {
+      console.error('❌ Failed to start server:', e.message);
+    }
+  });
+
+program
+  .command('build [args...]')
+  .description('Build for production')
+  .action(() => {
+    try {
+      execSync('npx webpack --mode production', { stdio: 'inherit' });
+    } catch (e) {
+      console.error('❌ Build failed:', e.message);
+    }
+  });
+
+program
+  .command('generate <type> <name>')
+  .alias('g')
+  .description('Generate a new MulanJS resource')
+  .action(async (type, name) => {
+    if (type === 'component') {
+      const compName = name.charAt(0).toUpperCase() + name.slice(1);
+      console.log(`⚡ Generating Component: ${compName}...`);
+      const ext = 'mujs';
+      const content = `<script setup lang="ts">
+import { muState } from '@mulanjs/mulanjs';
+const state = muState({ count: 0 });
+</script>
+<mu-template>
+  <div class="mu-comp">
+    <h2>${compName} Component</h2>
+  </div>
+</mu-template>
+<style scoped>
+.mu-comp { padding: 20px; }
+</style>`;
+      const filePath = path.join(process.cwd(), 'src', 'components', `${compName}.${ext}`);
+      try {
+        await fs.ensureDir(path.join(process.cwd(), 'src', 'components'));
+        if (await fs.pathExists(filePath)) return console.error('Exists!');
+        await fs.writeFile(filePath, content);
+        console.log(`✅ Created: ${filePath}`);
+      } catch (e) {
+        console.error('❌ Generation failed:', e);
+      }
+    }
+  });
+
+program
+  .command('install-extension')
+  .description('Install the MulanJS VS Code Extension for icons and syntax highlighting')
+  .action(async () => {
+    console.log('📦 Locating MulanJS VS Code Extension...');
+    try {
+      // Find where mulanjs is installed. If run via npx, __dirname is the cli folder.
+      const vsixPath = path.join(__dirname, 'extensions', 'mulanjs-vscode-1.0.0.vsix');
+
+      if (!fs.existsSync(vsixPath)) {
+        console.error('❌ Error: Extension file not found at:', vsixPath);
+        console.log('Ensure you have a full installation of the mulanjs package.');
+        return;
+      }
+
+      console.log('🚀 Installing extension via VS Code CLI...');
+      execSync(`code --install-extension "${vsixPath}" --force`, { stdio: 'inherit' });
+      console.log('✅ Success! Restart VS Code to see your new .mujs icons.');
+    } catch (e) {
+      console.error('\n❌ Failed to install extension.');
+      console.log('Make sure "code" (VS Code CLI) is in your PATH.');
+      console.log('Manual Install: You can also drag the .vsix file from your node_modules/mulanjs/src/cli/extensions into VS Code.');
+    }
+  });
+
+program.parse(process.argv);

package/src/compiler/compiler.ts

@@ -0,0 +1,102 @@
+
+import { parseMUJS } from './sfc-parser';
+import { compileScript } from './script-compiler';
+import { compileTemplate } from './template-compiler';
+import { compileStyle } from './style-compiler';
+
+export interface CompileResult {
+    code: string;
+    css: string;
+    errors: string[];
+    map?: string; // Source Map
+}
+
+export function compileSFC(source: string, filename: string): CompileResult {
+    // 1. Parse
+    const descriptor = parseMUJS(source, filename);
+
+    // 2. Script
+    const scriptResult = compileScript(descriptor);
+    // Replace export default to capture the component
+    let scriptCode = scriptResult.code.replace('export default', 'const __component__ =');
+    if (!scriptCode.includes('const __component__ =')) {
+        scriptCode = scriptCode.replace(/export\s+default/, 'const __component__ =');
+    }
+
+    // 3. Style
+    const styleResult = compileStyle(descriptor, filename);
+
+    // 4. Template
+    const templateResult = compileTemplate(descriptor, scriptResult, styleResult.scopedId);
+
+    // 5. Assembly
+    const cssInjection = styleResult.css ? `
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = \`${styleResult.css}\`;
+    document.head.appendChild(style);
+}
+` : '';
+
+    const finalCode = `${scriptCode}
+
+${templateResult.code}
+
+// Attach template to component
+if (__component__.prototype) {
+    // Class component
+    __component__.prototype.template = render;
+} else if (typeof __component__ === 'object') {
+    // Options object
+    __component__.template = render;
+}
+
+${cssInjection}
+
+// --- MulanJS HMR Engine ---
+if (typeof module !== 'undefined' && module.hot) {
+    const hmrId = "${filename.replace(/\\/g, '/')}";
+    window.__MULAN_HMR__ = window.__MULAN_HMR__ || {
+        records: new Map(),
+        notify: (id, newComp) => {
+            const oldRecord = window.__MULAN_HMR__.records.get(id);
+            if (oldRecord) {
+                console.log('[MulanJS HMR] Patching:', id);
+                if (oldRecord.prototype && newComp.prototype) {
+                    oldRecord.prototype.template = newComp.prototype.template;
+                    // Also patch setup if available (for Functional components)
+                    if (newComp._setup) oldRecord._setup = newComp._setup;
+                } else {
+                    Object.assign(oldRecord, newComp);
+                }
+                if (window.__MULAN_REFRESH__) {
+                    console.log('[MulanJS HMR] Triggering Deep Refresh');
+                    window.__MULAN_REFRESH__();
+                }
+            }
+        }
+    };
+
+    if (window.__MULAN_HMR__.records.has(hmrId)) {
+        window.__MULAN_HMR__.notify(hmrId, __component__);
+    } else {
+        window.__MULAN_HMR__.records.set(hmrId, __component__);
+    }
+    module.hot.accept();
+}
+
+// console.log('[MulanJS] Component created:', __component__);
+export default __component__;
+
+// Helper to get relative path for sourceURL
+// This ensures the generated file appears in a readable folder structure in DevTools
+// SourceURL removed. Using standard Source Maps only.
+`;
+
+    return {
+        code: finalCode,
+        css: styleResult.css,
+        errors: [...scriptResult.errors, ...templateResult.errors],
+        map: scriptResult.map // Pass the map
+    };
+}