@mulanjs/mulanjs 1.0.1-dev.20260314141520 → 1.0.1-dev.20261016100840

package/README.md

@@ -63,16 +63,40 @@ Adaptive non-blocking loops (`muBurst`) and true multicore parallelism (`muSurge
 
 ### Native SCSS Support 🎨
 Built-in support for `<style lang="scss">`. No config required. Just design.
-## 🚀 Quick Start Example
 
-MulanJS components (`.mujs`) allow you to write powerful, reactive UI with minimal boilerplate.
+---
+
+## ⚡ Mulan Minicode (AI-First, Ultra-Dense Syntax)
+
+MulanJS supports **Minicode** — an ultra-compact single-file component syntax designed for maximum developer ergonomics and AI code-generation efficiency (**~20 tokens** per component, ~40% fewer tokens than Svelte 5):
+
+- **No mandatory imports**: Ambient `$state`, `$derived`, `$effect`, and `$vault` runes.
+- **Implicit Root Template**: Drop `<mu-template>` entirely — top-level markup is automatically compiled.
+- **Single-Brace Interpolation**: `{count}` alongside `${count}` and `{{count}}`.
+- **Terse Directives**: `@click="count++"` or `@click="count--"` or `:disabled="count === 0"`.
+
+```html
+<mu>
+count = $state(0)
+double = $derived(count * 2)
+</mu>
+
+<button class="mu-btn" @click="count++">
+  Count: {count} | Double: {double}
+</button>
+```
+
+---
+
+## 🚀 Quick Start Example (Classic Syntax)
+
+MulanJS components (`.mujs`) also support classic explicit syntax with `<mu-template>`:
 
 ```javascript
 <mu>
-// The <mu> tag is the new, powerful replacement for <script setup lang="ts">
-import { muState } from 'mulanjs';
+// The <mu> tag is the powerful replacement for <script setup lang="ts">
+import { muState } from '@mulanjs/mulanjs';
 
-// Create reactive state natively
 state = muState({ count: 0 });
 
 debugClick() →
@@ -81,7 +105,6 @@ debugClick() →
 </mu>
 ```
 ```html
-
 <mu-template>
   <div class="page">
     <div class="hero">
@@ -90,7 +113,6 @@ debugClick() →
       
       <div class="counter-box">
         <p>Interactive Counter:</p>
-        <!-- Native Mulan Event Binding -->
         <button class="mu-btn" mu-click="debugClick()">
           Count is: ${state.count}
         </button>

package/dist/compiler/ast-parser.js

@@ -152,11 +152,62 @@ function parse(template, errors) {
             }
             cursor = innerCursor;
         }
+        // 5. Single-Brace Interpolation { } (Svelte / Minicode)
+        else if (template.startsWith('{', cursor) && !template.startsWith('{{', cursor) && !template.startsWith('${', cursor)) {
+            let innerCursor = cursor + 1;
+            let depth = 1;
+            while (innerCursor < template.length && depth > 0) {
+                if (template[innerCursor] === '{')
+                    depth++;
+                if (template[innerCursor] === '}')
+                    depth--;
+                innerCursor++;
+            }
+            if (depth === 0) {
+                const content = template.slice(cursor + 1, innerCursor - 1).trim();
+                const startPos = getPos(cursor);
+                const endPos = getPos(innerCursor);
+                stack[stack.length - 1].children.push({
+                    type: 'Interpolation',
+                    content,
+                    ...startPos,
+                    endLine: endPos.startLine,
+                    endColumn: endPos.startColumn
+                });
+                cursor = innerCursor;
+            }
+            else {
+                const startPos = getPos(cursor);
+                const endPos = getPos(cursor + 1);
+                const lastChild = stack[stack.length - 1].children[stack[stack.length - 1].children.length - 1];
+                if (lastChild && lastChild.type === 'Text') {
+                    lastChild.content += '{';
+                }
+                else {
+                    stack[stack.length - 1].children.push({
+                        type: 'Text',
+                        content: '{',
+                        ...startPos,
+                        endLine: endPos.startLine,
+                        endColumn: endPos.startColumn
+                    });
+                }
+                cursor++;
+            }
+        }
         // 5. Text Nodes
         else {
             let nextTag = template.indexOf('<', cursor);
             let nextInterp = template.indexOf('{{', cursor);
             let nextNative = template.indexOf('${', cursor);
+            let nextBrace = template.indexOf('{', cursor);
+            // Skip {{ and ${ for nextBrace
+            while (nextBrace !== -1) {
+                if (template[nextBrace + 1] !== '{' && (nextBrace === 0 || template[nextBrace - 1] !== '$')) {
+                    break;
+                }
+                nextBrace = template.indexOf('{', nextBrace + 1);
+            }
             let end = template.length;
             // Heuristic for nextTag: it must look like a tag start
             while (nextTag !== -1) {
@@ -171,6 +222,8 @@ function parse(template, errors) {
                 end = nextInterp;
             if (nextNative !== -1 && nextNative < end)
                 end = nextNative;
+            if (nextBrace !== -1 && nextBrace < end)
+                end = nextBrace;
             const rawContent = template.slice(cursor, end);
             const content = decodeEntities(rawContent);
             if (content) {
@@ -287,6 +340,19 @@ function parseTag(content) {
                 value = attrStr.slice(valStart, i);
                 i++;
             }
+            else if (i < attrStr.length && attrStr[i] === '{') {
+                const valStart = i + 1;
+                let depth = 1;
+                i++;
+                while (i < attrStr.length && depth > 0) {
+                    if (attrStr[i] === '{')
+                        depth++;
+                    if (attrStr[i] === '}')
+                        depth--;
+                    i++;
+                }
+                value = attrStr.slice(valStart, i - 1).trim();
+            }
             else {
                 const valStart = i;
                 while (i < attrStr.length && !/\s/.test(attrStr[i])) {

package/dist/compiler/compiler.js

@@ -121,12 +121,19 @@ if (typeof document !== 'undefined') {
 ${templateResult.code}
 
 // Attach template to component
-if (__component__.prototype) {
+if (typeof __component__ === 'function' && __component__.prototype) {
     // Class component
     __component__.prototype.template = render;
-} else if (typeof __component__ === 'object') {
-    // Options object
-    __component__.template = render;
+} else if (typeof __component__ === 'object' && __component__ !== null) {
+    // Wrap Options object or plain object in defineComponent so it is constructible
+    try {
+        const _mulanDef = (typeof _defineComponent !== 'undefined' ? _defineComponent : (typeof Mulan !== 'undefined' && Mulan.defineComponent ? Mulan.defineComponent : require('@mulanjs/mulanjs').defineComponent));
+        __component__.template = render;
+        __component__ = _mulanDef(__component__);
+        __component__.prototype.template = render;
+    } catch (e) {
+        __component__.template = render;
+    }
 }
 
 ${cssInjection}
@@ -165,6 +172,9 @@ if (typeof module !== 'undefined' && module.hot) {
 
 // console.log('[MulanJS] Component created:', __component__);
 module.exports = __component__;
+if (__component__) {
+    module.exports.default = __component__;
+}
 
 // Helper to get relative path for sourceURL
 // This ensures the generated file appears in a readable folder structure in DevTools

package/dist/compiler/dom-compiler.js

@@ -389,7 +389,12 @@ function generateDOMInstruction(node, chunks, getUid, getHoistId, hoists, uidRef
         if (element._domBindings) {
             for (const b of element._domBindings) {
                 if (b.type === 'prop') {
-                    chunks.push(`this._bindEffect(() => { if (${id}) ${id}['${b.name}'] = _va('${b.name}', ${b.expr}); }, ${id});`);
+                    if (b.name === 'class' || b.name === 'className') {
+                        chunks.push(`this._bindEffect(() => { if (${id}) ${id}.className = _va("class", ${b.expr}); }, ${id});`);
+                    }
+                    else {
+                        chunks.push(`this._bindEffect(() => { if (${id}) ${id}['${b.name}'] = _va('${b.name}', ${b.expr}); }, ${id});`);
+                    }
                 }
                 else if (b.type === 'event') {
                     chunks.push(`if (${id}) ${id}.addEventListener('${b.name}', (${b.expr}).bind(this));`);
@@ -482,17 +487,20 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
                 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);
+            else if (key.startsWith(':') || key.startsWith('v-bind:') || key.startsWith('.')) {
+                const propName = key.startsWith(':') ? key.slice(1) : (key.startsWith('v-bind:') ? key.slice(7) : key.slice(1));
                 const rawValue = element.props[key];
                 let expr = "''";
                 if (rawValue.startsWith('${') && rawValue.endsWith('}')) {
                     expr = processBindings(rawValue.slice(2, -1), scriptResult.bindings, localScope);
                 }
+                else if (rawValue.startsWith('{') && rawValue.endsWith('}')) {
+                    expr = processBindings(rawValue.slice(1, -1), scriptResult.bindings, localScope);
+                }
                 else {
-                    expr = JSON.stringify(rawValue);
+                    expr = processBindings(rawValue, scriptResult.bindings, localScope);
                 }
-                domBindings.push({ type: 'prop', name: propName, expr });
+                domBindings.push({ type: 'prop', name: propName, expr: `_s(${expr})` });
                 delete element.props[key];
             }
             else if (key.startsWith('@') ||
@@ -515,7 +523,7 @@ function transform(node, scriptResult, scopedId, localScope = [], filename) {
                     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;
+                const expr = (bound.includes('(') || bound.includes('=') || bound.includes('++') || bound.includes('--')) ? `($event) => { ${bound.replace(/`/g, '\\`')} }` : bound;
                 domBindings.push({ type: 'event', name: eventName, expr });
                 delete element.props[key];
             }

package/dist/compiler/script-compiler.js

@@ -49,7 +49,16 @@ async function compileScript(descriptor, options) {
             });
             finalMap = generator.toString();
         }
-        return { code: 'export default {}', errors: [], map: finalMap };
+        const defaultCode = `import { defineComponent as _defineComponent } from '@mulanjs/mulanjs';\nexport default _defineComponent({});`;
+        const result = ts.transpileModule(defaultCode, {
+            compilerOptions: {
+                module: ts.ModuleKind.CommonJS,
+                target: ts.ScriptTarget.ES2019,
+                sourceMap: false
+            },
+            fileName: descriptor.filename || 'component.mujs'
+        });
+        return { code: result.outputText, errors: [], map: finalMap };
     }
     let content = script.content;
     let filename = descriptor.filename;
@@ -95,7 +104,11 @@ async function compileScript(descriptor, options) {
 }
 exports.compileScript = compileScript;
 // 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'];
+const COMMON_HOOKS = [
+    'muState', 'onMuMount', 'onMuInit', 'onMuDestroy', 'muEffect', 'muMemo',
+    'muQubit', 'muGate', 'muMeasure', 'muRegister', 'muEntangle', 'persistent',
+    'muVault', 'muComputed', 'muWatch', 'onMuIdle', 'onMuResume'
+];
 async function compileSetupScript(script, isTs, descriptor, content, filename, isExternal, externalPath) {
     var _a;
     // 1. Pre-process: Natural Reactivity Transformation ($ syntax)
@@ -389,10 +402,32 @@ async function compileStandardScript(script, descriptor, content, filename, isEx
         map: finalMap
     };
 }
-// --- Natural Reactivity Transformer ---
+// --- Natural Reactivity & Runes Transformer ---
+function getRuneKind(expr) {
+    if (ts.isIdentifier(expr)) {
+        const text = expr.text;
+        if (text === '$' || text === '$state')
+            return 'state';
+        if (text === '$derived' || text === '$memo')
+            return 'derived';
+        if (text === '$effect')
+            return 'effect';
+        if (text === '$vault')
+            return 'vault';
+        if (text === '$q')
+            return 'qubit';
+        if (text === '$qr')
+            return 'register';
+    }
+    else if (ts.isPropertyAccessExpression(expr) && ts.isIdentifier(expr.expression) && expr.expression.text === '$state') {
+        return 'state'; // e.g. $state.raw(...)
+    }
+    return null;
+}
 function transformNaturalReactivity(code, isTs) {
-    // If no '$(' or '$q(' or '$qr(' usage, return original code for safety/speed
-    if (!code.includes('$(') && !code.includes('$q(') && !code.includes('$qr('))
+    // If no rune usage, return original code for safety/speed
+    const hasRune = /\$(state|derived|memo|effect|vault|q|qr|\()/.test(code);
+    if (!hasRune)
         return code;
     const sourceFile = ts.createSourceFile('temp.ts', code, ts.ScriptTarget.Latest, true);
     const reactiveVars = new Set();
@@ -403,19 +438,16 @@ function transformNaturalReactivity(code, isTs) {
         if (ts.isVariableStatement(node)) {
             node.declarationList.declarations.forEach(decl => {
                 if (decl.initializer && ts.isCallExpression(decl.initializer)) {
-                    const expr = decl.initializer.expression;
-                    if (ts.isIdentifier(expr)) {
-                        if (expr.text === '$') {
-                            if (ts.isIdentifier(decl.name))
-                                reactiveVars.add(decl.name.text);
+                    const rune = getRuneKind(decl.initializer.expression);
+                    if (ts.isIdentifier(decl.name)) {
+                        if (rune === 'state' || rune === 'derived' || rune === 'vault') {
+                            reactiveVars.add(decl.name.text);
                         }
-                        else if (expr.text === '$q') {
-                            if (ts.isIdentifier(decl.name))
-                                quantumVars.add(decl.name.text);
+                        else if (rune === 'qubit') {
+                            quantumVars.add(decl.name.text);
                         }
-                        else if (expr.text === '$qr') {
-                            if (ts.isIdentifier(decl.name))
-                                registerVars.add(decl.name.text);
+                        else if (rune === 'register') {
+                            registerVars.add(decl.name.text);
                         }
                     }
                 }
@@ -424,8 +456,6 @@ function transformNaturalReactivity(code, isTs) {
         ts.forEachChild(node, findReactiveVars);
     }
     findReactiveVars(sourceFile);
-    if (reactiveVars.size === 0 && quantumVars.size === 0 && registerVars.size === 0)
-        return code;
     // Pass 2: Transformation
     const transformerFactory = (context) => {
         return (rootNode) => {
@@ -436,23 +466,47 @@ function transformNaturalReactivity(code, isTs) {
                     node.declarationList.declarations.forEach(decl => {
                         if (ts.isIdentifier(decl.name)) {
                             const name = decl.name.text;
-                            if (reactiveVars.has(name) || quantumVars.has(name) || registerVars.has(name)) {
-                                changed = true;
-                                let hookName = 'muState';
-                                if (quantumVars.has(name))
-                                    hookName = 'muQubit';
-                                else if (registerVars.has(name))
-                                    hookName = 'muRegister';
-                                const init = decl.initializer;
-                                newDecls.push(ts.factory.updateVariableDeclaration(decl, decl.name, decl.exclamationToken, decl.type, ts.factory.createCallExpression(ts.factory.createIdentifier(hookName), undefined, init.arguments)));
+                            if (decl.initializer && ts.isCallExpression(decl.initializer)) {
+                                const rune = getRuneKind(decl.initializer.expression);
+                                if (rune) {
+                                    changed = true;
+                                    if (rune === 'state') {
+                                        const stateArgs = decl.initializer.arguments.map(a => ts.visitNode(a, visit));
+                                        newDecls.push(ts.factory.updateVariableDeclaration(decl, decl.name, decl.exclamationToken, decl.type, ts.factory.createCallExpression(ts.factory.createIdentifier('muState'), undefined, stateArgs)));
+                                        return;
+                                    }
+                                    else if (rune === 'derived') {
+                                        const rawArg = decl.initializer.arguments[0];
+                                        const arg = rawArg ? ts.visitNode(rawArg, visit) : undefined;
+                                        const computeFn = (arg && (ts.isArrowFunction(arg) || ts.isFunctionExpression(arg)))
+                                            ? arg
+                                            : ts.factory.createArrowFunction(undefined, undefined, [], undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), arg || ts.factory.createIdentifier('undefined'));
+                                        newDecls.push(ts.factory.updateVariableDeclaration(decl, decl.name, decl.exclamationToken, decl.type, ts.factory.createCallExpression(ts.factory.createIdentifier('muMemo'), undefined, [computeFn])));
+                                        return;
+                                    }
+                                    else if (rune === 'vault') {
+                                        let vaultArgs = decl.initializer.arguments.map(a => ts.visitNode(a, visit));
+                                        if (vaultArgs.length === 1) {
+                                            vaultArgs = [
+                                                ts.factory.createStringLiteral(decl.name.text),
+                                                vaultArgs[0]
+                                            ];
+                                        }
+                                        newDecls.push(ts.factory.updateVariableDeclaration(decl, decl.name, decl.exclamationToken, decl.type, ts.factory.createCallExpression(ts.factory.createIdentifier('muVault'), undefined, vaultArgs)));
+                                        return;
+                                    }
+                                    else if (rune === 'qubit') {
+                                        newDecls.push(ts.factory.updateVariableDeclaration(decl, decl.name, decl.exclamationToken, decl.type, ts.factory.createCallExpression(ts.factory.createIdentifier('muQubit'), undefined, decl.initializer.arguments)));
+                                        return;
+                                    }
+                                    else if (rune === 'register') {
+                                        newDecls.push(ts.factory.updateVariableDeclaration(decl, decl.name, decl.exclamationToken, decl.type, ts.factory.createCallExpression(ts.factory.createIdentifier('muRegister'), undefined, decl.initializer.arguments)));
+                                        return;
+                                    }
+                                }
                             }
-                            else {
-                                newDecls.push(decl);
-                            }
-                        }
-                        else {
-                            newDecls.push(decl);
                         }
+                        newDecls.push(decl);
                     });
                     if (changed) {
                         return ts.factory.createVariableStatement(node.modifiers, ts.factory.createVariableDeclarationList(newDecls, ts.NodeFlags.Const));
@@ -460,24 +514,20 @@ function transformNaturalReactivity(code, isTs) {
                 }
                 if (ts.isCallExpression(node)) {
                     const expr = node.expression;
-                    if (ts.isIdentifier(expr)) {
-                        const name = expr.text;
-                        const isMacro = name === '$' || name === '$q' || name === '$qr';
-                        if (isMacro) {
-                            // If this call is the initializer of a variable declaration being handled, 
-                            // it will be transformed by the VariableStatement logic above.
-                            // However, we want to transform it here if it's used as a STANDALONE expression (e.g. assignment).
-                            const parent = node.parent;
-                            const isDeclarationInit = ts.isVariableDeclaration(parent) && parent.initializer === node;
-                            if (!isDeclarationInit) {
-                                let hookName = 'muState';
-                                if (name === '$q')
-                                    hookName = 'muQubit';
-                                else if (name === '$qr')
-                                    hookName = 'muRegister';
-                                // Transform $(x) -> muState(x).value
-                                return ts.factory.createPropertyAccessExpression(ts.factory.createCallExpression(ts.factory.createIdentifier(hookName), undefined, node.arguments), ts.factory.createIdentifier('value'));
-                            }
+                    const rune = getRuneKind(expr);
+                    if (rune === 'effect') {
+                        return ts.factory.createCallExpression(ts.factory.createIdentifier('muEffect'), undefined, node.arguments);
+                    }
+                    if (rune === 'state' || rune === 'qubit' || rune === 'register') {
+                        const parent = node.parent;
+                        const isDeclarationInit = ts.isVariableDeclaration(parent) && parent.initializer === node;
+                        if (!isDeclarationInit) {
+                            let hookName = 'muState';
+                            if (rune === 'qubit')
+                                hookName = 'muQubit';
+                            else if (rune === 'register')
+                                hookName = 'muRegister';
+                            return ts.factory.createPropertyAccessExpression(ts.factory.createCallExpression(ts.factory.createIdentifier(hookName), undefined, node.arguments), ts.factory.createIdentifier('value'));
                         }
                     }
                 }
@@ -494,7 +544,6 @@ function transformNaturalReactivity(code, isTs) {
                         if (ts.isPropertyAssignment(parent) && parent.name === node)
                             return node;
                         // EXEMPTION: Do not add .value if the identifier is a direct argument to a Mulan hook
-                        // These hooks (muGate, muMeasure, etc.) expect the signal wrapper.
                         if (ts.isCallExpression(parent) && ts.isIdentifier(parent.expression)) {
                             const hook = parent.expression.text;
                             if (COMMON_HOOKS.includes(hook))