@mulanjs/mulanjs 1.0.1-dev.20260227135307 → 1.0.1-dev.20260227172006

package/dist/router/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,9 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { render } from '../core/renderer';
-import { Security } from '../security/sanitizer';
-export class MuRouter {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRouter = exports.MuRouter = void 0;
+const renderer_1 = require("../core/renderer");
+const sanitizer_1 = require("../security/sanitizer");
+class MuRouter {
     constructor(routes, rootContainer = null) {
         this.currentPath = '';
         this.currentComponent = null;
@@ -71,7 +74,7 @@ export class MuRouter {
                 const params = {};
                 paramNames.forEach((name, i) => {
                     // SECURE: Automatically sanitize all route parameters
-                    params[name] = Security.sanitize(match[i + 1]);
+                    params[name] = sanitizer_1.Security.sanitize(match[i + 1]);
                 });
                 return { route: r, params };
             }
@@ -86,7 +89,7 @@ export class MuRouter {
             const hash = window.location.hash.slice(1) || '/';
             const { route, params } = this.matchRoute(hash);
             // Security Check: Validate URL to prevent malicious hash injection
-            if (hash !== '/' && !Security.validateUrl('http://dummy.com' + hash)) {
+            if (hash !== '/' && !sanitizer_1.Security.validateUrl('http://dummy.com' + hash)) {
                 console.error("Security Alert: Malformed URL detected.");
                 return;
             }
@@ -155,19 +158,19 @@ export class MuRouter {
                     // Object Component (Simple SFC without script or Options API)
                     const html = componentToRender.template();
                     if (this.rootContainer)
-                        render(html, this.rootContainer);
+                        (0, renderer_1.render)(html, this.rootContainer);
                     this.currentComponent = null;
                 }
                 else {
                     // Simple HTML string/template
                     if (this.rootContainer)
-                        render(componentToRender, this.rootContainer);
+                        (0, renderer_1.render)(componentToRender, this.rootContainer);
                     this.currentComponent = null; // String templates don't have lifecycle instances
                 }
             }
             else {
                 if (this.rootContainer)
-                    render('<div style="text-align:center; padding:50px;"><h1>404</h1><p>Page Not Found</p></div>', this.rootContainer);
+                    (0, renderer_1.render)('<div style="text-align:center; padding:50px;"><h1>404</h1><p>Page Not Found</p></div>', this.rootContainer);
             }
         });
     }
@@ -207,8 +210,9 @@ export class MuRouter {
         }
     }
 }
+exports.MuRouter = MuRouter;
 // --- Factory for Easy Usage ---
-export const createRouter = (options) => {
+const createRouter = (options) => {
     // Expose the router instance globally for <mu-link> to access
     const router = new MuRouter(options.routes, options.rootContainer);
     if (typeof window !== 'undefined') {
@@ -216,10 +220,13 @@ export const createRouter = (options) => {
     }
     return router;
 };
+exports.createRouter = createRouter;
 // --- Web Component: <mu-link> ---
 // Usage: <mu-link to="/about">About Us</mu-link>
+const MuLinkBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {
+};
 if (typeof window !== 'undefined' && !customElements.get('mu-link')) {
-    class MuLink extends HTMLElement {
+    class MuLink extends MuLinkBase {
         constructor() {
             super();
             this.addEventListener('click', (e) => {

package/dist/security/sanitizer.js

@@ -1,4 +1,7 @@
-export class Security {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Security = void 0;
+class Security {
     /**
      * IRON FORTRESS PROTOCOL
      * Strictly escapes all HTML entities to prevent XSS.
@@ -50,3 +53,4 @@ export class Security {
         });
     }
 }
+exports.Security = Security;

package/dist/store/index.js

@@ -1,5 +1,8 @@
-import { reactive, effect } from '../core/reactive';
-export class MuStore {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuStore = void 0;
+const reactive_1 = require("../core/reactive");
+class MuStore {
     constructor(initialState, options) {
         this.subscribers = [];
         // Load from local storage if persist is true
@@ -16,16 +19,16 @@ export class MuStore {
                 console.error("Failed to load state", e);
             }
             // Auto-save effect
-            effect(() => {
+            (0, reactive_1.effect)(() => {
                 localStorage.setItem(key, JSON.stringify(this.state));
             });
         }
-        this.state = reactive(loadedState);
+        this.state = (0, reactive_1.reactive)(loadedState);
     }
     // Subscribe to changes
     subscribe(fn) {
         this.subscribers.push(fn);
-        effect(() => {
+        (0, reactive_1.effect)(() => {
             fn(this.state);
         });
     }
@@ -40,3 +43,4 @@ export class MuStore {
         }
     }
 }
+exports.MuStore = MuStore;

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

@@ -2,6 +2,7 @@ export type NodeType = 'Element' | 'Text' | 'Interpolation';
 export type Node = ElementNode | TextNode | InterpolationNode;
 export interface BaseNode {
     type: NodeType;
+    isStatic?: boolean;
 }
 export interface ElementNode extends BaseNode {
     type: 'Element';
@@ -33,6 +34,7 @@ export declare function decodeEntities(str: string): string;
  * Handles HTML tags, {{ }} interpolation, and is robust against raw < symbols in text.
  */
 export declare function parse(template: string, errors: string[]): ElementNode;
+export declare function markStatic(node: Node): boolean;
 export declare function parseTag(content: string): {
     tag: string;
     props: Record<string, string>;

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

@@ -2,6 +2,7 @@ export type NodeType = 'Element' | 'Text' | 'Interpolation';
 export type Node = ElementNode | TextNode | InterpolationNode;
 export interface BaseNode {
     type: NodeType;
+    isStatic?: boolean;
 }
 export interface ElementNode extends BaseNode {
     type: 'Element';
@@ -33,6 +34,7 @@ export declare function decodeEntities(str: string): string;
  * Handles HTML tags, {{ }} interpolation, and is robust against raw < symbols in text.
  */
 export declare function parse(template: string, errors: string[]): ElementNode;
+export declare function markStatic(node: Node): boolean;
 export declare function parseTag(content: string): {
     tag: string;
     props: Record<string, string>;

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

@@ -6,3 +6,4 @@ export interface CompileResult {
     map?: string;
 }
 export declare function compileSFC(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;
+export declare function compileSFCForSSR(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;

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

@@ -0,0 +1,7 @@
+import { SFCDescriptor } from './sfc-parser';
+import { ScriptCompileResult } from './script-compiler';
+export interface SSRCompileResult {
+    code: string;
+    errors: string[];
+}
+export declare function compileToSSR(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): SSRCompileResult;

package/dist/types/compiler.d.ts

@@ -6,3 +6,4 @@ export interface CompileResult {
     map?: string;
 }
 export declare function compileSFC(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;
+export declare function compileSFCForSSR(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult>;

package/dist/types/components/bloch-sphere.d.ts

@@ -1,4 +1,5 @@
-export declare class MuBlochSphereElement extends HTMLElement {
+declare const MuBlochBase: any;
+export declare class MuBlochSphereElement extends MuBlochBase {
     private _qubit;
     private _arrow;
     private _container;
@@ -14,3 +15,4 @@ export declare class MuBlochSphereElement extends HTMLElement {
     updateArrow(theta: number, phi: number): void;
     render(): void;
 }
+export {};

package/dist/types/components/infinity-list.d.ts

@@ -1,4 +1,5 @@
-export declare class MuInfinity extends HTMLElement {
+declare const MuInfinityBase: any;
+export declare class MuInfinity extends MuInfinityBase {
     private _items;
     private _itemHeight;
     private _template;
@@ -15,3 +16,4 @@ export declare class MuInfinity extends HTMLElement {
     private onScroll;
     private renderVisible;
 }
+export {};

package/dist/types/core/component.d.ts

@@ -11,6 +11,8 @@ export declare abstract class MuComponent {
     _effects: Array<() => void>;
     _domEffects: Array<() => void>;
     _isDestroyed: boolean;
+    _isResuming: boolean;
+    _resumeRoot: HTMLElement | null;
     constructor(container: HTMLElement);
     setup(): void;
     abstract template(): string | HTMLElement | DocumentFragment;
@@ -23,6 +25,11 @@ export declare abstract class MuComponent {
     _e(id: string, type: string, handler: Function): string;
     bind(handler: Function, type?: string): string;
     mount(): void;
+    /**
+     * Internal method to execute the resumability pass.
+     * Overridden by compiler-generated code.
+     */
+    _resume(): void;
     _bindEffect(fn: () => void, targetNode?: Node): () => void;
     update(): void;
     flushProps(): void;
@@ -72,6 +79,8 @@ export declare function defineComponent(optionsOrSetup: any): {
         _effects: (() => void)[];
         _domEffects: (() => void)[];
         _isDestroyed: boolean;
+        _isResuming: boolean;
+        _resumeRoot: HTMLElement | null;
         onMount(): void;
         onUpdate(): void;
         onDestroy(): void;
@@ -81,6 +90,11 @@ export declare function defineComponent(optionsOrSetup: any): {
         _e(id: string, type: string, handler: Function): string;
         bind(handler: Function, type?: string): string;
         mount(): void;
+        /**
+         * Internal method to execute the resumability pass.
+         * Overridden by compiler-generated code.
+         */
+        _resume(): void;
         _bindEffect(fn: () => void, targetNode?: Node | undefined): () => void;
         update(): void;
         flushProps(): void;

package/dist/types/core/reactive.d.ts

@@ -1,4 +1,6 @@
 type Effect = () => void;
+export declare function queueEffect(fn: Effect): void;
+export declare function nextTick(): Promise<void>;
 export declare class Signal<T> {
     private _value;
     private _subscribers;
@@ -7,7 +9,9 @@ export declare class Signal<T> {
     set value(newValue: T);
     notify(): void;
 }
-export declare function effect(fn: Effect, targetNode?: Node): () => void;
+export declare function effect(fn: Effect, targetNode?: Node, options?: {
+    sync?: boolean;
+}): () => void;
 /**
  * Creates a reactive proxy object (Vue-compatible).
  * Now optimized to respect Mulan Cycle.

package/dist/types/core/renderer.d.ts

@@ -1,4 +1,3 @@
 export declare function render(template: string | HTMLElement | DocumentFragment, container: HTMLElement): void;
 export declare function hydrate(template: string | HTMLElement | DocumentFragment, container: HTMLElement): void;
-export declare function renderToString(template: string): string;
 export declare function sanitize(str: string): string;

package/dist/types/core/ssr.d.ts

@@ -0,0 +1,9 @@
+export interface SSRResult {
+    html: string;
+    state: any;
+    envelope: string;
+}
+/**
+ * Renders a Mulan component to a static HTML string with a resumability envelope.
+ */
+export declare function renderToString(ComponentClass: any, props?: any): SSRResult;

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ export * from './core/quantum';
 export * from './core/surge';
 export * from './components/bloch-sphere';
 export * from './components/infinity-list';
+export * from './core/ssr';
 import { reactive, effect } from './core/reactive';
 import { MuComponent, defineComponent } from './core/component';
 import { MuRouter } from './router/index';

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

@@ -0,0 +1,7 @@
+import { SFCDescriptor } from './sfc-parser';
+import { ScriptCompileResult } from './script-compiler';
+export interface SSRCompileResult {
+    code: string;
+    errors: string[];
+}
+export declare function compileToSSR(descriptor: SFCDescriptor, scriptResult: ScriptCompileResult, scopedId?: string): SSRCompileResult;

package/package.json

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

package/src/compiler/ast-parser.ts

@@ -7,6 +7,7 @@ export type Node = ElementNode | TextNode | InterpolationNode;
 
 export interface BaseNode {
     type: NodeType;
+    isStatic?: boolean;
 }
 
 export interface ElementNode extends BaseNode {
@@ -96,14 +97,9 @@ export function parse(template: string, errors: string[]): ElementNode {
                     break;
                 }
 
-                let tagContent = template.slice(cursor + 1, end);
-                const isSelfClosing = tagContent.endsWith('/') || ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(tagContent.split(' ')[0].toLowerCase());
-
-                if (tagContent.endsWith('/')) {
-                    tagContent = tagContent.slice(0, -1).trim();
-                }
-
+                const tagContent = template.slice(cursor + 1, end);
                 const { tag, props, directives } = parseTag(tagContent);
+                const isSelfClosing = tagContent.endsWith('/') || ['img', 'br', 'input', 'hr', 'link', 'meta'].includes(tag.toLowerCase());
 
                 const element: ElementNode = { type: 'Element', tag, props, children: [], directives };
                 stack[stack.length - 1].children.push(element);
@@ -183,16 +179,72 @@ export function parse(template: string, errors: string[]): ElementNode {
         }
     }
 
+    markStatic(root);
     return root;
 }
 
+export function markStatic(node: Node): boolean {
+    if (node.type === 'Interpolation') {
+        node.isStatic = false;
+        return false;
+    }
+
+    if (node.type === 'Text') {
+        const text = node as TextNode;
+        node.isStatic = !text.content.includes('${');
+        return node.isStatic;
+    }
+
+    if (node.type === 'Element') {
+        const element = node as ElementNode;
+        let isStatic = true;
+
+        // 1. Directives make it dynamic
+        if (element.directives.vIf || element.directives.vFor) {
+            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('.')) {
+                    isStatic = false;
+                    break;
+                }
+                if (val.includes('${')) {
+                    isStatic = false;
+                    break;
+                }
+            }
+        }
+
+        // 3. Check all children. Every child must be static for the parent to be static.
+        // We still need to call markStatic on ALL children, so don't short-circuit the loop early.
+        for (const child of element.children) {
+            const childStatic = markStatic(child);
+            if (!childStatic) {
+                isStatic = false;
+            }
+        }
+
+        element.isStatic = isStatic;
+        return isStatic;
+    }
+
+    return false;
+}
+
 export function parseTag(content: string) {
-    const parts = content.split(' ');
-    const tag = parts[0];
+    // 1. Extract tag name (first word, ignoring leading whitespace)
+    const tagMatch = content.trim().match(/^([a-zA-Z0-9:-]+)/);
+    const tag = tagMatch ? tagMatch[1] : '';
+
     const props: Record<string, string> = {};
     const directives: ElementNode['directives'] = {};
 
-    const attrStr = content.slice(tag.length).trim();
+    // 2. Remove tag name from content to parse attributes
+    const attrStr = content.trim().slice(tag.length).trim();
 
     let i = 0;
     while (i < attrStr.length) {

package/src/compiler/compiler.ts

@@ -4,6 +4,7 @@ import { compileScript, CompilerOptions } from './script-compiler';
 import { compileTemplate } from './template-compiler';
 import { compileToDOM } from './dom-compiler';
 import { compileStyle } from './style-compiler';
+import { compileToSSR } from './ssr-compiler';
 
 export interface CompileResult {
     code: string;
@@ -26,6 +27,9 @@ export async function compileSFC(source: string, filename: string, options?: Com
     if (!scriptCode.includes('const __component__ =')) {
         scriptCode = scriptCode.replace(/export\s+default/, 'const __component__ =');
     }
+    if (!scriptCode.includes('const __component__ =')) {
+        scriptCode = scriptCode.replace('exports.default =', 'const __component__ =');
+    }
 
     // 3. Style
     const styleResult = compileStyle(descriptor, filename, options);
@@ -173,7 +177,7 @@ if (typeof module !== 'undefined' && module.hot) {
 }
 
 // console.log('[MulanJS] Component created:', __component__);
-export default __component__;
+module.exports = __component__;
 
 // Helper to get relative path for sourceURL
 // This ensures the generated file appears in a readable folder structure in DevTools
@@ -187,3 +191,44 @@ export default __component__;
         map: mergedMap || scriptResult.map // Fallback to script map if merge fails
     };
 }
+
+// --- Mulan Server Components (MSC) ---
+export async function compileSFCForSSR(source: string, filename: string, options?: CompilerOptions): Promise<CompileResult> {
+    const descriptor = parseMUJS(source, filename);
+    const scriptResult = await compileScript(descriptor, options);
+
+    let scriptCode = scriptResult.code;
+
+    // Robust replacement for various export styles
+    if (scriptCode.includes('export default')) {
+        scriptCode = scriptCode.replace('export default', 'const __component__ =');
+    } else if (scriptCode.includes('exports.default =')) {
+        scriptCode = scriptCode.replace('exports.default =', 'const __component__ =');
+    } else if (scriptCode.includes('module.exports =')) {
+        scriptCode = scriptCode.replace('module.exports =', 'const __component__ =');
+    } else {
+        // Fallback: search for defineComponent if it's there
+        scriptCode += `\nconst __component__ = typeof exports !== 'undefined' ? (exports.default || module.exports) : {};`;
+    }
+
+    const templateResult = compileToSSR(descriptor, scriptResult, undefined);
+
+    const finalCode = `${scriptCode}
+
+${templateResult.code}
+
+if (__component__.prototype) {
+    __component__.prototype.renderToString = render;
+} else if (typeof __component__ === 'object') {
+    __component__.renderToString = render;
+}
+
+module.exports = __component__;
+`;
+
+    return {
+        code: finalCode,
+        css: '', // CSS handling for SSR can be extracted separately
+        errors: [...scriptResult.errors, ...templateResult.errors],
+    };
+}