@mulanjs/mulanjs 1.0.1-dev.20260305165012 → 1.0.1-dev.20260310065102

package/README.md

@@ -68,17 +68,17 @@ Built-in support for `<style lang="scss">`. No config required. Just design.
 MulanJS components (`.mujs`) allow you to write powerful, reactive UI with minimal boilerplate.
 
 ```html
-<script setup lang="ts">
+<mu>
+// The <mu> tag is the new, powerful replacement for <script setup lang="ts">
 import { muState } from 'mulanjs';
 
-// Create reactive state
-const state = muState({ count: 0 });
+// Create reactive state natively
+state = muState({ count: 0 });
 
-const debugClick = () => {
+debugClick() →
     console.log('Button clicked! Current count:', state.count);
     state.count++;
-}
-</script>
+</mu>
 
 <mu-template>
   <div class="page">
@@ -88,8 +88,8 @@ const debugClick = () => {
       
       <div class="counter-box">
         <p>Interactive Counter:</p>
-        <!-- Native Event Binding -->
-        <button class="mu-btn" @click="debugClick()">
+        <!-- Native Mulan Event Binding -->
+        <button class="mu-btn" mu-click="debugClick()">
           Count is: ${state.count}
         </button>
       </div>
@@ -125,6 +125,7 @@ p { font-size: 1.2rem; color: #888; max-width: 600px; margin: 0 auto 40px; }
 }
 </style>
 ```
+*(Note: MulanJS still retains 100% backward compatibility with standard `<script setup lang="ts">` and `<template>` tags).*
 
 ## Created By
 **Nitin Kumar** (@nitinkumardev09) - *Creator of .mujs & MulanJS Framework* 

package/dist/compiler/ast-parser.js

@@ -214,14 +214,14 @@ function markStatic(node) {
         const element = node;
         let isStatic = true;
         // 1. Directives make it dynamic
-        if (element.directives.vIf || element.directives.vFor) {
+        if (element.directives.vIf || element.directives.vElseIf || element.directives.vElse || element.directives.vFor || element.directives.vShow) {
             isStatic = false;
         }
         // 2. Dynamic properties or event listeners make it dynamic
         if (isStatic) {
             for (const key in element.props) {
                 const val = element.props[key];
-                if (key.startsWith('@') || key.startsWith('v-on:') || key.startsWith('on') || key.startsWith(':') || key.startsWith('.')) {
+                if (key.startsWith('@') || key.startsWith('v-on:') || key.startsWith('on') || key.startsWith(':') || key.startsWith('.') || key.startsWith('mu-') || key === 'v-model') {
                     isStatic = false;
                     break;
                 }
@@ -298,6 +298,15 @@ function parseTag(content) {
         if (key === 'v-if' || key === 'mu-if') {
             directives.vIf = value;
         }
+        else if (key === 'v-else-if' || key === 'mu-else-if') {
+            directives.vElseIf = value;
+        }
+        else if (key === 'v-else' || key === 'mu-else') {
+            directives.vElse = true;
+        }
+        else if (key === 'v-show' || key === 'mu-show') {
+            directives.vShow = value;
+        }
         else if (key === 'v-for' || key === 'mu-for') {
             const parts = value.split(' in ');
             if (parts.length < 2) {

package/dist/compiler/dom-compiler.js

@@ -25,8 +25,13 @@ function compileToDOM(descriptor, scriptResult, scopedId) {
     const generator = descriptor.filename ? new source_map_1.SourceMapGenerator({
         file: descriptor.filename + '.template.js'
     }) : null;
+    // Annotate every node with its parent's children array and its sibling index,
+    // so the mu-if handler can scan forward for mu-else-if / mu-else siblings.
+    annotateChildren(ast);
     // Generate code for all top-level children and append them to the fragment
-    ast.children.forEach(child => {
+    ast.children.forEach((child, _idx) => {
+        if (child.__skip__)
+            return; // consumed by a preceding mu-if chain
         const rootId = generateDOMInstruction(child, codeChunks, getUid, getHoistId, hoists, uidRef, scriptResult.bindings || [], [], generator, descriptor.filename);
         if (rootId) {
             codeChunks.push(`if (_frag) _frag.appendChild(${rootId});`);
@@ -66,6 +71,23 @@ function compileToDOM(descriptor, scriptResult, scopedId) {
     };
 }
 exports.compileToDOM = compileToDOM;
+// --- Sibling Annotation (for mu-else-if / mu-else chaining) ---
+function annotateChildren(node) {
+    let children;
+    if (node.type === 'Root') {
+        children = node.children;
+    }
+    else if (node.type === 'Element') {
+        children = node.children;
+    }
+    if (children) {
+        children.forEach((child, idx) => {
+            child.__parent_children__ = children;
+            child.__sibling_index__ = idx;
+            annotateChildren(child);
+        });
+    }
+}
 // --- Code Generator (AST -> Instructions) ---
 function renderStaticHTML(node) {
     if (node.type === 'Text') {
@@ -171,30 +193,119 @@ function generateDOMInstruction(node, chunks, getUid, getHoistId, hoists, uidRef
             const condition = `_s(${processBindings(element.directives.vIf, bindings, localScope)})`;
             // 1. Create the anchor Comment node where the block belongs
             chunks.push(`const ${id} = document.createComment("mu-if:${element.directives.vIf}");`);
-            // 2. Generate the inner block rendering function
-            const blockId = `_if_${uidRef.current++}`;
-            const blockChunks = [];
-            blockChunks.push(`const ${blockId}_frag = this._recoveryMode ? null : document.createDocumentFragment();`);
-            blockChunks.push(`const _block_effects = [];`);
-            // 2a. Override bindings for inner effects
-            const localBindMacro = `(fn, targetNode) => { const stop = this._bindEffect(fn, targetNode); _block_effects.push(stop); return stop; }`;
-            let originalLength = blockChunks.length;
-            // 2b. Generate the actual block
-            const elementWithoutIf = { ...element, directives: { ...element.directives, vIf: undefined } };
-            const clonedChildId = generateDOMInstruction(elementWithoutIf, blockChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope, generator, filename);
-            if (clonedChildId) {
-                blockChunks.push(`if (${blockId}_frag && ${clonedChildId} && !this._recoveryMode) ${blockId}_frag.appendChild(${clonedChildId});`);
-            }
-            for (let i = originalLength; i < blockChunks.length; i++) {
-                blockChunks[i] = blockChunks[i].replace(/this\._bindEffect/g, `(${localBindMacro})`);
+            // 2. Helper to build a render-block function from any element
+            const buildBlockFn = (el) => {
+                const blockId = `_if_${uidRef.current++}`;
+                const blockChunks = [];
+                blockChunks.push(`const ${blockId}_frag = this._recoveryMode ? null : document.createDocumentFragment();`);
+                blockChunks.push(`const _block_effects = [];`);
+                const localBindMacro = `(fn, targetNode) => { const stop = this._bindEffect(fn, targetNode); _block_effects.push(stop); return stop; }`;
+                const origLen = blockChunks.length;
+                const elNoDirective = { ...el, directives: { ...el.directives, vIf: undefined, vElseIf: undefined, vElse: undefined } };
+                const clonedChildId = generateDOMInstruction(elNoDirective, blockChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope, generator, filename);
+                if (clonedChildId) {
+                    blockChunks.push(`if (${blockId}_frag && ${clonedChildId} && !this._recoveryMode) ${blockId}_frag.appendChild(${clonedChildId});`);
+                }
+                for (let bi = origLen; bi < blockChunks.length; bi++) {
+                    blockChunks[bi] = blockChunks[bi].replace(/this\._bindEffect/g, `(${localBindMacro})`);
+                }
+                blockChunks.push(`return { fragment: ${blockId}_frag, effects: _block_effects };`);
+                return `() => {\n                ${blockChunks.join('\n                ')}\n            }`;
+            };
+            // 3. Collect else-if / else sibling branches from the AST parent's children
+            //    We look at the parent stack's current top children after this node.
+            //    Since we can't access the parent here directly, we use a forward-scan trick:
+            //    Siblings are already on `chunks` as separate calls from the parent forEach.
+            //    Instead we emit a chained condition as a ternary inside the reconciler.
+            // Build the if-condition string for the Mulan reconciler
+            // Format: [ [cond1, renderFn1], [cond2, renderFn2], ..., [null, elseFn] ]
+            // IMPORTANT: we compute the primary block function ONCE and reuse it to
+            // avoid calling buildBlockFn(element) twice (which caused infinite recursion
+            // because element still has vIf set on the second call).
+            const ifBlockFn = buildBlockFn(element);
+            const branches = [
+                `[() => !!(${condition}), ${ifBlockFn}]`
+            ];
+            // Scan forward in the parent's children for else-if / else
+            // We mark them so the parent forEach loop skips them
+            const parentChildren = element.__parent_children__;
+            let sibIdx = element.__sibling_index__;
+            if (parentChildren !== undefined && sibIdx !== undefined) {
+                sibIdx++;
+                while (sibIdx < parentChildren.length) {
+                    const sib = parentChildren[sibIdx];
+                    if (sib.type === 'Text') {
+                        const text = sib;
+                        if (!text.content.trim()) {
+                            // Skip whitespace between tags
+                            sib.__skip__ = true;
+                            sibIdx++;
+                            continue;
+                        }
+                        else {
+                            break; // Real text breaks the chain
+                        }
+                    }
+                    if (sib.type !== 'Element')
+                        break;
+                    const sibEl = sib;
+                    if (sibEl.directives.vElseIf) {
+                        const sibCond = `_s(${processBindings(sibEl.directives.vElseIf, bindings, localScope)})`;
+                        branches.push(`[() => !!(${sibCond}), ${buildBlockFn(sibEl)}]`);
+                        sibEl.__skip__ = true;
+                        sibIdx++;
+                    }
+                    else if (sibEl.directives.vElse) {
+                        branches.push(`[null, ${buildBlockFn(sibEl)}]`);
+                        sibEl.__skip__ = true;
+                        sibIdx++;
+                        break;
+                    }
+                    else {
+                        break;
+                    }
+                }
             }
-            blockChunks.push(`return { fragment: ${blockId}_frag, effects: _block_effects };`);
-            const renderBlockFn = `() => {\n                ${blockChunks.join('\n                ')}\n            }`;
-            // 3. Register the macro-effect that calls the Reconciler
+            // 4. Emit reconciler call — simple if, or chained if / else-if / else
             const ifIdHash = `if_${Math.random().toString(36).substr(2, 6)}`;
-            chunks.push(`this._bindEffect(() => { this._reconcileIf("${ifIdHash}", ${id}, !!(${condition}), ${renderBlockFn}); }, ${id});`);
+            if (branches.length === 1) {
+                // Simple if (no else): reuse ifBlockFn computed above
+                chunks.push(`this._bindEffect(() => { this._reconcileIf("${ifIdHash}", ${id}, !!(${condition}), ${ifBlockFn}); }, ${id});`);
+            }
+            else {
+                // Chain: evaluate each condition in order
+                const branchArray = `[${branches.join(', ')}]`;
+                chunks.push(`this._bindEffect(() => {
+                const _branches = ${branchArray};
+                let _matched = false;
+                for (const [_cond, _renderFn] of _branches) {
+                    if (_cond === null || _cond()) {
+                        this._reconcileIf("${ifIdHash}", ${id}, true, _renderFn);
+                        _matched = true;
+                        break;
+                    }
+                }
+                if (!_matched) { this._reconcileIf("${ifIdHash}", ${id}, false, () => ({ fragment: null, effects: [] })); }
+            }, ${id});`);
+            }
             return id;
         }
+        // --- mu-show: CSS visibility toggle (element stays in DOM) ---
+        if (element.directives.vShow) {
+            const showId = getUid();
+            const showCondition = processBindings(element.directives.vShow, bindings, localScope);
+            // Create the element without the show directive
+            const elNoShow = { ...element, directives: { ...element.directives, vShow: undefined } };
+            // Generate the element normally (it renders into DOM)
+            const innerChunks = [];
+            const innerEl = generateDOMInstruction(elNoShow, innerChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope, generator, filename);
+            chunks.push(...innerChunks);
+            // Bind a reactive effect that toggles display
+            if (innerEl) {
+                chunks.push(`this._bindEffect(() => { if (${innerEl}) ${innerEl}.style.display = _s(${showCondition}) ? '' : 'none'; }, ${innerEl});`);
+            }
+            return innerEl;
+        }
         // Handle mu-for (Phase 3 - The Reconciler)
         if (element.directives.vFor) {
             const { item, list } = element.directives.vFor;
@@ -288,6 +399,8 @@ function generateDOMInstruction(node, chunks, getUid, getHoistId, hoists, uidRef
         // Recursively generate children
         const childScope = [...localScope];
         element.children.forEach(child => {
+            if (child.__skip__)
+                return; // consumed by mu-if else-if/else chain
             const childId = generateDOMInstruction(child, chunks, getUid, getHoistId, hoists, uidRef, bindings, childScope, generator, filename);
             if (childId) {
                 chunks.push(`if (${id} && ${childId} && !this._recoveryMode) ${id}.appendChild(${childId});`);
@@ -346,8 +459,30 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
         const childScope = [...localScope];
         if (element.directives.vFor)
             childScope.push(element.directives.vFor.item);
+        // Also add loop variable when inside mu-for with destructured tuple e.g. (item, i)
+        if (element.directives.vFor) {
+            const itemStr = element.directives.vFor.item;
+            const tupleMatch = itemStr.match(/^\(([^)]+)\)$/);
+            if (tupleMatch) {
+                tupleMatch[1].split(',').forEach(v => {
+                    const trimmed = v.trim();
+                    if (trimmed && !childScope.includes(trimmed))
+                        childScope.push(trimmed);
+                });
+            }
+        }
         for (const key in element.props) {
-            if (key.startsWith('.')) {
+            // --- mu-model: two-way binding ---
+            if (key === 'mu-model' || key === 'v-model') {
+                const stateExpr = element.props[key];
+                const bound = processBindings(stateExpr, scriptResult.bindings, localScope);
+                // Read: bind value property reactively
+                domBindings.push({ type: 'prop', name: 'value', expr: `_s(${bound})` });
+                // Write: listen to 'input' event and update state
+                domBindings.push({ type: 'event', name: 'input', expr: `($event) => { ${bound} = $event.target.value; }` });
+                delete element.props[key];
+            }
+            else if (key.startsWith('.')) {
                 const propName = key.slice(1);
                 const rawValue = element.props[key];
                 let expr = "''";
@@ -360,8 +495,25 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
                 domBindings.push({ type: 'prop', name: propName, expr });
                 delete element.props[key];
             }
-            else if (key.startsWith('@') || key.startsWith('v-on:') || (key.startsWith('on') && key.length > 2)) {
-                let eventName = key.startsWith('@') ? key.slice(1) : key.startsWith('v-on:') ? key.slice(5) : key.slice(2);
+            else if (key.startsWith('@') ||
+                key.startsWith('v-on:') ||
+                // mu-* event aliases
+                key === 'mu-click' || key === 'mu-input' || key === 'mu-change' || key === 'mu-submit' ||
+                (key.startsWith('on') && key.length > 2)) {
+                let eventName;
+                if (key.startsWith('@')) {
+                    eventName = key.slice(1);
+                }
+                else if (key.startsWith('v-on:')) {
+                    eventName = key.slice(5);
+                }
+                else if (key.startsWith('mu-')) {
+                    // mu-click → click, mu-submit → submit, etc.
+                    eventName = key.slice(3);
+                }
+                else {
+                    eventName = key.slice(2);
+                }
                 let bound = processBindings(element.props[key], scriptResult.bindings, localScope);
                 const expr = (bound.includes('(') || bound.includes('=') || bound.includes('++')) ? `($event) => { ${bound.replace(/`/g, '\\`')} }` : bound;
                 domBindings.push({ type: 'event', name: eventName, expr });

package/dist/compiler/script-compiler.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileScript = void 0;
+exports.transformMuSyntax = exports.compileScript = void 0;
 const ts = __importStar(require("typescript"));
 const source_map_1 = require("source-map");
 const path = __importStar(require("path"));
@@ -76,8 +76,13 @@ async function compileScript(descriptor, options) {
         }
     }
     const isSetup = !!script.attrs.setup;
+    const isMu = !!script.attrs.mu;
     const isTs = script.attrs.lang === 'ts' || script.attrs.lang === 'tsx' || externalPath.endsWith('.ts') || externalPath.endsWith('.tsx');
     if (isSetup) {
+        // Transform <mu> natural syntax first if this is a <mu> block
+        if (isMu) {
+            content = transformMuSyntax(content);
+        }
         return await compileSetupScript(script, isTs, descriptor, content, filename, isExternal, externalPath);
     }
     else if (isTs) {
@@ -507,3 +512,88 @@ function transformNaturalReactivity(code, isTs) {
     const printer = ts.createPrinter();
     return printer.printFile(result.transformed[0]);
 }
+// --- Mu Syntax Transformer ---
+// Converts clean <mu> block natural-language syntax into valid TypeScript
+// that the standard setup-script pipeline can consume.
+//
+// Supported transformations:
+//   name = value          → let name = value
+//   fn() →               → function fn() {
+//   fn(a, b) →           → function fn(a, b) {
+//   fn() → expr          → function fn() { return expr }  (single-line)
+//   (indented body after →)  → { body... }
+function transformMuSyntax(code) {
+    var _a, _b, _c, _d;
+    const lines = code.split(/\r?\n/);
+    const out = [];
+    let i = 0;
+    while (i < lines.length) {
+        const raw = lines[i];
+        const trimmed = raw.trim();
+        // Skip blank lines
+        if (!trimmed) {
+            out.push(raw);
+            i++;
+            continue;
+        }
+        // ─── Already valid TS/JS — preserve as-is ──────────────────────────────
+        // Lines that already start with a keyword don't need transformation
+        if (/^(const|let|var|function|class|import|export|return|if|else|for|while|switch|throw|try|catch|finally|\/{2}|\*)/.test(trimmed)) {
+            out.push(raw);
+            i++;
+            continue;
+        }
+        // ─── Arrow-function definition: name(args) → ───────────────────────────
+        //   Two forms:
+        //   (A)  fn() →              — block body follows on next lines
+        //   (B)  fn() → expression   — single-line body
+        const arrowMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)\s*\(([^)]*)\)\s*→\s*(.*)$/);
+        if (arrowMatch) {
+            const [, fnName, params, bodyExpr] = arrowMatch;
+            const indent = (_b = (_a = raw.match(/^(\s*)/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
+            if (bodyExpr.trim()) {
+                // Single-line: fn() → expr  →  function fn(...) { return expr }
+                out.push(`${indent}function ${fnName}(${params.trim()}) { return ${bodyExpr.trim()} }`);
+                i++;
+            }
+            else {
+                // Block form: collect indented body lines
+                out.push(`${indent}function ${fnName}(${params.trim()}) {`);
+                i++;
+                const baseIndent = raw.search(/\S/);
+                while (i < lines.length) {
+                    const bodyRaw = lines[i];
+                    const bodyTrimmed = bodyRaw.trim();
+                    if (!bodyTrimmed) {
+                        out.push('');
+                        i++;
+                        continue;
+                    }
+                    const bodyIndent = bodyRaw.search(/\S/);
+                    // If the next line is at the same or lower indent → end of function body
+                    if (bodyIndent <= baseIndent)
+                        break;
+                    out.push(bodyRaw);
+                    i++;
+                }
+                out.push(`${indent}}`);
+            }
+            continue;
+        }
+        // ─── Bare assignment: name = value ─────────────────────────────────────
+        //   Only matches simple top-level assignments, not ===, !==, +=, etc.
+        const assignMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)\s*=(?!=)\s*(.+)$/);
+        if (assignMatch) {
+            const indent = (_d = (_c = raw.match(/^(\s*)/)) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '';
+            const [, varName, valueExpr] = assignMatch;
+            out.push(`${indent}let ${varName} = ${valueExpr}`);
+            i++;
+            continue;
+        }
+        // Fallback — emit as-is
+        out.push(raw);
+        i++;
+    }
+    return out.join('\n');
+}
+exports.transformMuSyntax = transformMuSyntax;

package/dist/compiler/sfc-parser.js

@@ -75,6 +75,14 @@ function parseMUJS(source, filename) {
         if (tagName === 'template' || tagName === 'mu-template') {
             descriptor.template = block;
         }
+        else if (tagName === 'mu') {
+            // <mu> is the MulanJS branded script block — equivalent to <script setup lang="ts">
+            // Mark attrs so downstream compilers treat it as setup + TypeScript + mu-native syntax
+            block.attrs = { ...block.attrs, setup: 'true', lang: 'ts', mu: 'true' };
+            block.type = 'script';
+            descriptor.scripts.push(block);
+            descriptor.script = block;
+        }
         else if (tagName === 'script') {
             descriptor.scripts.push(block);
             if (attrs.setup || !descriptor.script) {

package/dist/types/ast-parser.d.ts

@@ -19,6 +19,9 @@ export interface ElementNode extends BaseNode {
             list: string;
         };
         vIf?: string;
+        vElseIf?: string;
+        vElse?: boolean;
+        vShow?: string;
     };
 }
 export interface TextNode extends BaseNode {
@@ -48,5 +51,8 @@ export declare function parseTag(content: string): {
             list: string;
         } | undefined;
         vIf?: string | undefined;
+        vElseIf?: string | undefined;
+        vElse?: boolean | undefined;
+        vShow?: string | undefined;
     };
 };

package/dist/types/compiler/ast-parser.d.ts

@@ -19,6 +19,9 @@ export interface ElementNode extends BaseNode {
             list: string;
         };
         vIf?: string;
+        vElseIf?: string;
+        vElse?: boolean;
+        vShow?: string;
     };
 }
 export interface TextNode extends BaseNode {
@@ -48,5 +51,8 @@ export declare function parseTag(content: string): {
             list: string;
         } | undefined;
         vIf?: string | undefined;
+        vElseIf?: string | undefined;
+        vElse?: boolean | undefined;
+        vShow?: string | undefined;
     };
 };

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

@@ -9,3 +9,4 @@ export interface CompilerOptions {
     readFileSync?: (file: string) => string;
 }
 export declare function compileScript(descriptor: SFCDescriptor, options?: CompilerOptions): Promise<ScriptCompileResult>;
+export declare function transformMuSyntax(code: string): string;

package/dist/types/compiler/sfc-parser.d.ts

@@ -1,5 +1,5 @@
 export interface SFCBlock {
-    type: 'script' | 'template' | 'style';
+    type: 'script' | 'template' | 'style' | 'mu';
     content: string;
     attrs: Record<string, string>;
     start: number;

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

@@ -9,3 +9,4 @@ export interface CompilerOptions {
     readFileSync?: (file: string) => string;
 }
 export declare function compileScript(descriptor: SFCDescriptor, options?: CompilerOptions): Promise<ScriptCompileResult>;
+export declare function transformMuSyntax(code: string): string;

package/dist/types/sfc-parser.d.ts

@@ -1,5 +1,5 @@
 export interface SFCBlock {
-    type: 'script' | 'template' | 'style';
+    type: 'script' | 'template' | 'style' | 'mu';
     content: string;
     attrs: Record<string, string>;
     start: number;

package/package.json

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

package/src/cli/index.js

@@ -284,8 +284,8 @@ module.exports = {
       // --- COMPONENT GENERATION (Unified Templates) ---
 
       const headerTemplate = (isMuJS) ?
-        `<script setup lang="ts">
-</script>
+        `<mu>
+</mu>
 <mu-template>
   <header>
      <div class="logo-container">
@@ -346,10 +346,10 @@ export class Header extends Component {
 
       // Home Page with Counter
       const homeTemplate = (isMuJS) ?
-        `<script setup lang="ts">
+        `<mu>
 import { muState } from '@mulanjs/mulanjs';
-const state = muState({ count: 0 });
-</script>
+state = muState({ count: 0 });
+</mu>
 <mu-template>
   <div class="page">
     <div class="hero">
@@ -358,7 +358,7 @@ const state = muState({ count: 0 });
         
         <div class="counter-box">
             <p>Interactive Counter:</p>
-            <button class="mu-btn" @click="state.count++">
+            <button class="mu-btn" mu-click="state.count++">
                 Count is: \${state.count}
             </button>
         </div>
@@ -494,7 +494,7 @@ if (app) {
 
       // Auto-install VS Code Extension
       try {
-        const vsixPath = path.join(__dirname, 'extensions', 'mulanjs-vscode-1.0.0.vsix');
+        const vsixPath = path.join(__dirname, 'extensions', 'mulanjs-vscode-1.0.1.vsix');
         if (fs.existsSync(vsixPath)) {
           console.log('\n📦 Installing MulanJS VS Code Extension...');
           shell(`code --install-extension "${vsixPath}" --force`);
@@ -574,10 +574,10 @@ program
       const compName = name.charAt(0).toUpperCase() + name.slice(1);
       console.log(`⚡ Generating Component: ${compName}...`);
       const ext = 'mujs';
-      const content = `<script setup lang="ts">
+      const content = `<mu>
 import { muState } from '@mulanjs/mulanjs';
-const state = muState({ count: 0 });
-</script>
+state = muState({ count: 0 });
+</mu>
 <mu-template>
   <div class="mu-comp">
     <h2>${compName} Component</h2>
@@ -606,7 +606,7 @@ program
     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');
+      const vsixPath = path.join(__dirname, 'extensions', 'mulanjs-vscode-1.0.1.vsix');
 
       if (!fs.existsSync(vsixPath)) {
         console.error('❌ Error: Extension file not found at:', vsixPath);

package/src/compiler/ast-parser.ts

@@ -22,6 +22,9 @@ export interface ElementNode extends BaseNode {
     directives: {
         vFor?: { item: string; list: string };
         vIf?: string;
+        vElseIf?: string;
+        vElse?: boolean;
+        vShow?: string;
     };
 }
 
@@ -258,7 +261,7 @@ export function markStatic(node: Node): boolean {
         let isStatic = true;
 
         // 1. Directives make it dynamic
-        if (element.directives.vIf || element.directives.vFor) {
+        if (element.directives.vIf || element.directives.vElseIf || element.directives.vElse || element.directives.vFor || element.directives.vShow) {
             isStatic = false;
         }
 
@@ -266,7 +269,7 @@ export function markStatic(node: Node): boolean {
         if (isStatic) {
             for (const key in element.props) {
                 const val = element.props[key];
-                if (key.startsWith('@') || key.startsWith('v-on:') || key.startsWith('on') || key.startsWith(':') || key.startsWith('.')) {
+                if (key.startsWith('@') || key.startsWith('v-on:') || key.startsWith('on') || key.startsWith(':') || key.startsWith('.') || key.startsWith('mu-') || key === 'v-model') {
                     isStatic = false;
                     break;
                 }
@@ -350,6 +353,12 @@ export function parseTag(content: string) {
 
         if (key === 'v-if' || key === 'mu-if') {
             directives.vIf = value;
+        } else if (key === 'v-else-if' || key === 'mu-else-if') {
+            directives.vElseIf = value;
+        } else if (key === 'v-else' || key === 'mu-else') {
+            directives.vElse = true;
+        } else if (key === 'v-show' || key === 'mu-show') {
+            directives.vShow = value;
         } else if (key === 'v-for' || key === 'mu-for') {
             const parts = value.split(' in ');
             if (parts.length < 2) {

package/src/compiler/dom-compiler.ts

@@ -39,8 +39,13 @@ export function compileToDOM(descriptor: SFCDescriptor, scriptResult: ScriptComp
         file: descriptor.filename + '.template.js'
     }) : null;
 
+    // Annotate every node with its parent's children array and its sibling index,
+    // so the mu-if handler can scan forward for mu-else-if / mu-else siblings.
+    annotateChildren(ast);
+
     // Generate code for all top-level children and append them to the fragment
-    ast.children.forEach(child => {
+    ast.children.forEach((child, _idx) => {
+        if ((child as any).__skip__) return; // consumed by a preceding mu-if chain
         const rootId = generateDOMInstruction(child, codeChunks, getUid, getHoistId, hoists, uidRef, scriptResult.bindings || [], [], generator, descriptor.filename);
         if (rootId) {
             codeChunks.push(`if (_frag) _frag.appendChild(${rootId});`);
@@ -83,6 +88,24 @@ export function compileToDOM(descriptor: SFCDescriptor, scriptResult: ScriptComp
     };
 }
 
+// --- Sibling Annotation (for mu-else-if / mu-else chaining) ---
+function annotateChildren(node: Node): void {
+    let children: Node[] | undefined;
+    if ((node as any).type === 'Root') {
+        children = (node as any).children;
+    } else if (node.type === 'Element') {
+        children = (node as any).children;
+    }
+
+    if (children) {
+        children.forEach((child, idx) => {
+            (child as any).__parent_children__ = children;
+            (child as any).__sibling_index__ = idx;
+            annotateChildren(child);
+        });
+    }
+}
+
 // --- Code Generator (AST -> Instructions) ---
 function renderStaticHTML(node: Node): string {
     if (node.type === 'Text') {
@@ -202,37 +225,121 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
             // 1. Create the anchor Comment node where the block belongs
             chunks.push(`const ${id} = document.createComment("mu-if:${element.directives.vIf}");`);
 
-            // 2. Generate the inner block rendering function
-            const blockId = `_if_${uidRef.current++}`;
-            const blockChunks: string[] = [];
-            blockChunks.push(`const ${blockId}_frag = this._recoveryMode ? null : document.createDocumentFragment();`);
-            blockChunks.push(`const _block_effects = [];`);
-
-            // 2a. Override bindings for inner effects
-            const localBindMacro = `(fn, targetNode) => { const stop = this._bindEffect(fn, targetNode); _block_effects.push(stop); return stop; }`;
-            let originalLength = blockChunks.length;
-
-            // 2b. Generate the actual block
-            const elementWithoutIf = { ...element, directives: { ...element.directives, vIf: undefined } };
-            const clonedChildId = generateDOMInstruction(elementWithoutIf as ElementNode, blockChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope, generator, filename);
+            // 2. Helper to build a render-block function from any element
+            const buildBlockFn = (el: ElementNode) => {
+                const blockId = `_if_${uidRef.current++}`;
+                const blockChunks: string[] = [];
+                blockChunks.push(`const ${blockId}_frag = this._recoveryMode ? null : document.createDocumentFragment();`);
+                blockChunks.push(`const _block_effects = [];`);
+                const localBindMacro = `(fn, targetNode) => { const stop = this._bindEffect(fn, targetNode); _block_effects.push(stop); return stop; }`;
+                const origLen = blockChunks.length;
+                const elNoDirective = { ...el, directives: { ...el.directives, vIf: undefined, vElseIf: undefined, vElse: undefined } };
+                const clonedChildId = generateDOMInstruction(elNoDirective as ElementNode, blockChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope, generator, filename);
+                if (clonedChildId) {
+                    blockChunks.push(`if (${blockId}_frag && ${clonedChildId} && !this._recoveryMode) ${blockId}_frag.appendChild(${clonedChildId});`);
+                }
+                for (let bi = origLen; bi < blockChunks.length; bi++) {
+                    blockChunks[bi] = blockChunks[bi].replace(/this\._bindEffect/g, `(${localBindMacro})`);
+                }
+                blockChunks.push(`return { fragment: ${blockId}_frag, effects: _block_effects };`);
+                return `() => {\n                ${blockChunks.join('\n                ')}\n            }`;
+            };
 
-            if (clonedChildId) {
-                blockChunks.push(`if (${blockId}_frag && ${clonedChildId} && !this._recoveryMode) ${blockId}_frag.appendChild(${clonedChildId});`);
+            // 3. Collect else-if / else sibling branches from the AST parent's children
+            //    We look at the parent stack's current top children after this node.
+            //    Since we can't access the parent here directly, we use a forward-scan trick:
+            //    Siblings are already on `chunks` as separate calls from the parent forEach.
+            //    Instead we emit a chained condition as a ternary inside the reconciler.
+
+            // Build the if-condition string for the Mulan reconciler
+            // Format: [ [cond1, renderFn1], [cond2, renderFn2], ..., [null, elseFn] ]
+            // IMPORTANT: we compute the primary block function ONCE and reuse it to
+            // avoid calling buildBlockFn(element) twice (which caused infinite recursion
+            // because element still has vIf set on the second call).
+            const ifBlockFn = buildBlockFn(element);
+            const branches: string[] = [
+                `[() => !!(${condition}), ${ifBlockFn}]`
+            ];
+
+            // Scan forward in the parent's children for else-if / else
+            // We mark them so the parent forEach loop skips them
+            const parentChildren = (element as any).__parent_children__ as Node[] | undefined;
+            let sibIdx = (element as any).__sibling_index__ as number | undefined;
+            if (parentChildren !== undefined && sibIdx !== undefined) {
+                sibIdx++;
+                while (sibIdx < parentChildren.length) {
+                    const sib = parentChildren[sibIdx] as Node;
+                    if (sib.type === 'Text') {
+                        const text = sib as TextNode;
+                        if (!text.content.trim()) {
+                            // Skip whitespace between tags
+                            (sib as any).__skip__ = true;
+                            sibIdx++;
+                            continue;
+                        } else {
+                            break; // Real text breaks the chain
+                        }
+                    }
+                    if (sib.type !== 'Element') break;
+
+                    const sibEl = sib as ElementNode;
+                    if (sibEl.directives.vElseIf) {
+                        const sibCond = `_s(${processBindings(sibEl.directives.vElseIf, bindings, localScope)})`;
+                        branches.push(`[() => !!(${sibCond}), ${buildBlockFn(sibEl)}]`);
+                        (sibEl as any).__skip__ = true;
+                        sibIdx++;
+                    } else if (sibEl.directives.vElse) {
+                        branches.push(`[null, ${buildBlockFn(sibEl)}]`);
+                        (sibEl as any).__skip__ = true;
+                        sibIdx++;
+                        break;
+                    } else {
+                        break;
+                    }
+                }
             }
 
-            for (let i = originalLength; i < blockChunks.length; i++) {
-                blockChunks[i] = blockChunks[i].replace(/this\._bindEffect/g, `(${localBindMacro})`);
+            // 4. Emit reconciler call — simple if, or chained if / else-if / else
+            const ifIdHash = `if_${Math.random().toString(36).substr(2, 6)}`;
+            if (branches.length === 1) {
+                // Simple if (no else): reuse ifBlockFn computed above
+                chunks.push(`this._bindEffect(() => { this._reconcileIf("${ifIdHash}", ${id}, !!(${condition}), ${ifBlockFn}); }, ${id});`);
+            } else {
+                // Chain: evaluate each condition in order
+                const branchArray = `[${branches.join(', ')}]`;
+                chunks.push(`this._bindEffect(() => {
+                const _branches = ${branchArray};
+                let _matched = false;
+                for (const [_cond, _renderFn] of _branches) {
+                    if (_cond === null || _cond()) {
+                        this._reconcileIf("${ifIdHash}", ${id}, true, _renderFn);
+                        _matched = true;
+                        break;
+                    }
+                }
+                if (!_matched) { this._reconcileIf("${ifIdHash}", ${id}, false, () => ({ fragment: null, effects: [] })); }
+            }, ${id});`);
             }
 
-            blockChunks.push(`return { fragment: ${blockId}_frag, effects: _block_effects };`);
-
-            const renderBlockFn = `() => {\n                ${blockChunks.join('\n                ')}\n            }`;
+            return id;
 
-            // 3. Register the macro-effect that calls the Reconciler
-            const ifIdHash = `if_${Math.random().toString(36).substr(2, 6)}`;
-            chunks.push(`this._bindEffect(() => { this._reconcileIf("${ifIdHash}", ${id}, !!(${condition}), ${renderBlockFn}); }, ${id});`);
+        }
 
-            return id;
+        // --- mu-show: CSS visibility toggle (element stays in DOM) ---
+        if (element.directives.vShow) {
+            const showId = getUid();
+            const showCondition = processBindings(element.directives.vShow, bindings, localScope);
+            // Create the element without the show directive
+            const elNoShow = { ...element, directives: { ...element.directives, vShow: undefined } };
+            // Generate the element normally (it renders into DOM)
+            const innerChunks: string[] = [];
+            const innerEl = generateDOMInstruction(elNoShow as ElementNode, innerChunks, getUid, getHoistId, hoists, uidRef, bindings, localScope, generator, filename);
+            chunks.push(...innerChunks);
+            // Bind a reactive effect that toggles display
+            if (innerEl) {
+                chunks.push(`this._bindEffect(() => { if (${innerEl}) ${innerEl}.style.display = _s(${showCondition}) ? '' : 'none'; }, ${innerEl});`);
+            }
+            return innerEl;
         }
 
         // Handle mu-for (Phase 3 - The Reconciler)
@@ -339,6 +446,7 @@ function generateDOMInstruction(node: Node, chunks: string[], getUid: () => stri
         // Recursively generate children
         const childScope = [...localScope];
         element.children.forEach(child => {
+            if ((child as any).__skip__) return; // consumed by mu-if else-if/else chain
             const childId = generateDOMInstruction(child, chunks, getUid, getHoistId, hoists, uidRef, bindings, childScope, generator, filename);
             if (childId) {
                 chunks.push(`if (${id} && ${childId} && !this._recoveryMode) ${id}.appendChild(${childId});`);
@@ -402,9 +510,29 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
 
         const childScope = [...localScope];
         if (element.directives.vFor) childScope.push(element.directives.vFor.item);
+        // Also add loop variable when inside mu-for with destructured tuple e.g. (item, i)
+        if (element.directives.vFor) {
+            const itemStr = element.directives.vFor.item;
+            const tupleMatch = itemStr.match(/^\(([^)]+)\)$/);
+            if (tupleMatch) {
+                tupleMatch[1].split(',').forEach(v => {
+                    const trimmed = v.trim();
+                    if (trimmed && !childScope.includes(trimmed)) childScope.push(trimmed);
+                });
+            }
+        }
 
         for (const key in element.props) {
-            if (key.startsWith('.')) {
+            // --- mu-model: two-way binding ---
+            if (key === 'mu-model' || key === 'v-model') {
+                const stateExpr = element.props[key];
+                const bound = processBindings(stateExpr, scriptResult.bindings, localScope);
+                // Read: bind value property reactively
+                domBindings.push({ type: 'prop', name: 'value', expr: `_s(${bound})` });
+                // Write: listen to 'input' event and update state
+                domBindings.push({ type: 'event', name: 'input', expr: `($event) => { ${bound} = $event.target.value; }` });
+                delete element.props[key];
+            } else if (key.startsWith('.')) {
                 const propName = key.slice(1);
                 const rawValue = element.props[key];
                 let expr = "''";
@@ -415,8 +543,24 @@ function transform(node: Node, scriptResult: ScriptCompileResult, scopedId?: str
                 }
                 domBindings.push({ type: 'prop', name: propName, expr });
                 delete element.props[key];
-            } else if (key.startsWith('@') || key.startsWith('v-on:') || (key.startsWith('on') && key.length > 2)) {
-                let eventName = key.startsWith('@') ? key.slice(1) : key.startsWith('v-on:') ? key.slice(5) : key.slice(2);
+            } else if (
+                key.startsWith('@') ||
+                key.startsWith('v-on:') ||
+                // mu-* event aliases
+                key === 'mu-click' || key === 'mu-input' || key === 'mu-change' || key === 'mu-submit' ||
+                (key.startsWith('on') && key.length > 2)
+            ) {
+                let eventName: string;
+                if (key.startsWith('@')) {
+                    eventName = key.slice(1);
+                } else if (key.startsWith('v-on:')) {
+                    eventName = key.slice(5);
+                } else if (key.startsWith('mu-')) {
+                    // mu-click → click, mu-submit → submit, etc.
+                    eventName = key.slice(3);
+                } else {
+                    eventName = key.slice(2);
+                }
                 let bound = processBindings(element.props[key], scriptResult.bindings, localScope);
                 const expr = (bound.includes('(') || bound.includes('=') || bound.includes('++')) ? `($event) => { ${bound.replace(/`/g, '\\`')} }` : bound;
                 domBindings.push({ type: 'event', name: eventName, expr });

package/src/compiler/script-compiler.ts

@@ -65,9 +65,14 @@ export async function compileScript(descriptor: SFCDescriptor, options?: Compile
     }
 
     const isSetup = !!script.attrs.setup;
+    const isMu = !!script.attrs.mu;
     const isTs = script.attrs.lang === 'ts' || script.attrs.lang === 'tsx' || externalPath.endsWith('.ts') || externalPath.endsWith('.tsx');
 
     if (isSetup) {
+        // Transform <mu> natural syntax first if this is a <mu> block
+        if (isMu) {
+            content = transformMuSyntax(content);
+        }
         return await compileSetupScript(script, isTs, descriptor, content, filename, isExternal, externalPath);
     } else if (isTs) {
         return await compileStandardScript(script, descriptor, content, filename, isExternal, externalPath);
@@ -579,3 +584,95 @@ function transformNaturalReactivity(code: string, isTs: boolean): string {
     const printer = ts.createPrinter();
     return printer.printFile(result.transformed[0]);
 }
+
+// --- Mu Syntax Transformer ---
+// Converts clean <mu> block natural-language syntax into valid TypeScript
+// that the standard setup-script pipeline can consume.
+//
+// Supported transformations:
+//   name = value          → let name = value
+//   fn() →               → function fn() {
+//   fn(a, b) →           → function fn(a, b) {
+//   fn() → expr          → function fn() { return expr }  (single-line)
+//   (indented body after →)  → { body... }
+export function transformMuSyntax(code: string): string {
+    const lines = code.split(/\r?\n/);
+    const out: string[] = [];
+    let i = 0;
+
+    while (i < lines.length) {
+        const raw = lines[i];
+        const trimmed = raw.trim();
+
+        // Skip blank lines
+        if (!trimmed) {
+            out.push(raw);
+            i++;
+            continue;
+        }
+
+        // ─── Already valid TS/JS — preserve as-is ──────────────────────────────
+        // Lines that already start with a keyword don't need transformation
+        if (
+            /^(const|let|var|function|class|import|export|return|if|else|for|while|switch|throw|try|catch|finally|\/{2}|\*)/.test(trimmed)
+        ) {
+            out.push(raw);
+            i++;
+            continue;
+        }
+
+        // ─── Arrow-function definition: name(args) → ───────────────────────────
+        //   Two forms:
+        //   (A)  fn() →              — block body follows on next lines
+        //   (B)  fn() → expression   — single-line body
+        const arrowMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)\s*\(([^)]*)\)\s*→\s*(.*)$/);
+        if (arrowMatch) {
+            const [, fnName, params, bodyExpr] = arrowMatch;
+            const indent = raw.match(/^(\s*)/)?.[1] ?? '';
+
+            if (bodyExpr.trim()) {
+                // Single-line: fn() → expr  →  function fn(...) { return expr }
+                out.push(`${indent}function ${fnName}(${params.trim()}) { return ${bodyExpr.trim()} }`);
+                i++;
+            } else {
+                // Block form: collect indented body lines
+                out.push(`${indent}function ${fnName}(${params.trim()}) {`);
+                i++;
+                const baseIndent = raw.search(/\S/);
+                while (i < lines.length) {
+                    const bodyRaw = lines[i];
+                    const bodyTrimmed = bodyRaw.trim();
+                    if (!bodyTrimmed) {
+                        out.push('');
+                        i++;
+                        continue;
+                    }
+                    const bodyIndent = bodyRaw.search(/\S/);
+                    // If the next line is at the same or lower indent → end of function body
+                    if (bodyIndent <= baseIndent) break;
+                    out.push(bodyRaw);
+                    i++;
+                }
+                out.push(`${indent}}`);
+            }
+            continue;
+        }
+
+        // ─── Bare assignment: name = value ─────────────────────────────────────
+        //   Only matches simple top-level assignments, not ===, !==, +=, etc.
+        const assignMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)\s*=(?!=)\s*(.+)$/);
+        if (assignMatch) {
+            const indent = raw.match(/^(\s*)/)?.[1] ?? '';
+            const [, varName, valueExpr] = assignMatch;
+            out.push(`${indent}let ${varName} = ${valueExpr}`);
+            i++;
+            continue;
+        }
+
+        // Fallback — emit as-is
+        out.push(raw);
+        i++;
+    }
+
+    return out.join('\n');
+}

package/src/compiler/sfc-parser.ts

@@ -1,5 +1,5 @@
 export interface SFCBlock {
-    type: 'script' | 'template' | 'style';
+    type: 'script' | 'template' | 'style' | 'mu';
     content: string;
     attrs: Record<string, string>;
     start: number;
@@ -100,6 +100,13 @@ export function parseMUJS(source: string, filename: string): SFCDescriptor {
         // Add to descriptor
         if (tagName === 'template' || tagName === 'mu-template') {
             descriptor.template = block;
+        } else if (tagName === 'mu') {
+            // <mu> is the MulanJS branded script block — equivalent to <script setup lang="ts">
+            // Mark attrs so downstream compilers treat it as setup + TypeScript + mu-native syntax
+            block.attrs = { ...block.attrs, setup: 'true', lang: 'ts', mu: 'true' };
+            block.type = 'script';
+            descriptor.scripts.push(block);
+            descriptor.script = block;
         } else if (tagName === 'script') {
             descriptor.scripts.push(block);
             if (attrs.setup || !descriptor.script) {