melina 1.1.2 → 1.1.3

package/package.json

@@ -1,76 +1,76 @@
-{
-  "name": "melina",
-  "version": "1.1.2",
-  "description": "A lightweight, islands-architecture web framework for Bun with Next.js-style routing.",
-  "module": "./src/web.ts",
-  "main": "./src/web.ts",
-  "bin": {
-    "melina": "./bin/melina"
-  },
-  "files": [
-    "src",
-    "bin",
-    "docs",
-    "GUIDE.md",
-    "README.md",
-    "CHANGELOG.md",
-    "CONTRIBUTING.md",
-    "ARCHITECTURE.md"
-  ],
-  "exports": {
-    ".": "./src/web.ts",
-    "./web": "./src/web.ts",
-    "./Link": "./src/Link.tsx",
-    "./island": "./src/island.ts",
-    "./client": "./src/client.ts",
-    "./navigation": "./src/runtime/navigation.tsx",
-    "./client/jsx-runtime": "./src/client.ts",
-    "./client/jsx-dev-runtime": "./src/client.ts"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mements/melina.js"
-  },
-  "author": {
-    "name": "Mements Team"
-  },
-  "bugs": "https://github.com/mements/melina.js/issues",
-  "homepage": "https://github.com/mements/melina.js#readme",
-  "license": "MIT",
-  "keywords": [
-    "bun",
-    "server",
-    "framework",
-    "typescript",
-    "web",
-    "ssr",
-    "islands",
-    "islands-architecture",
-    "hydration",
-    "nextjs",
-    "app-router",
-    "react",
-    "partial-hydration"
-  ],
-  "type": "module",
-  "private": false,
-  "sideEffects": false,
-  "devDependencies": {
-    "@types/bun": "latest",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3"
-  },
-  "dependencies": {
-    "@ments/utils": "^1.2.1",
-    "@modelcontextprotocol/sdk": "^1.11.0",
-    "@solana/kit": "^2.1.0",
-    "@tailwindcss/postcss": "^4.1.10",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "ts-dedent": "^2.2.0",
-    "html-react-parser": "^5.2.5",
-    "zod": "^3.24.4"
-  }
+{
+  "name": "melina",
+  "version": "1.1.3",
+  "description": "A lightweight, islands-architecture web framework for Bun with Next.js-style routing.",
+  "module": "./src/web.ts",
+  "main": "./src/web.ts",
+  "bin": {
+    "melina": "./bin/melina"
+  },
+  "files": [
+    "src",
+    "bin",
+    "docs",
+    "GUIDE.md",
+    "README.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "ARCHITECTURE.md"
+  ],
+  "exports": {
+    ".": "./src/web.ts",
+    "./web": "./src/web.ts",
+    "./Link": "./src/Link.tsx",
+    "./island": "./src/island.ts",
+    "./client": "./src/client.ts",
+    "./navigation": "./src/runtime/navigation.tsx",
+    "./client/jsx-runtime": "./src/client.ts",
+    "./client/jsx-dev-runtime": "./src/client.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mements/melina.js"
+  },
+  "author": {
+    "name": "Mements Team"
+  },
+  "bugs": "https://github.com/mements/melina.js/issues",
+  "homepage": "https://github.com/mements/melina.js#readme",
+  "license": "MIT",
+  "keywords": [
+    "bun",
+    "server",
+    "framework",
+    "typescript",
+    "web",
+    "ssr",
+    "islands",
+    "islands-architecture",
+    "hydration",
+    "nextjs",
+    "app-router",
+    "react",
+    "partial-hydration"
+  ],
+  "type": "module",
+  "private": false,
+  "sideEffects": false,
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3"
+  },
+  "dependencies": {
+    "@ments/utils": "^1.2.1",
+    "@modelcontextprotocol/sdk": "^1.11.0",
+    "@solana/kit": "^2.1.0",
+    "@tailwindcss/postcss": "^4.1.10",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "ts-dedent": "^2.2.0",
+    "html-react-parser": "^5.2.5",
+    "zod": "^3.24.4"
+  }
 }

package/src/client.ts

@@ -683,6 +683,115 @@ export function jsxDEV(
     };
 }
 
+// =============================================================================
+// SERVER-SIDE RENDERING
+// =============================================================================
+
+/**
+ * Render a VNode tree to an HTML string (SSR)
+ * This is the React-free equivalent of ReactDOMServer.renderToString()
+ */
+export function renderToString(vnode: VNode | string | number | boolean | null | undefined): string {
+    if (vnode == null || typeof vnode === 'boolean') {
+        return '';
+    }
+
+    if (typeof vnode === 'string') {
+        return escapeHtml(vnode);
+    }
+
+    if (typeof vnode === 'number') {
+        return String(vnode);
+    }
+
+    const { type, props } = vnode;
+
+    // Handle Fragment
+    if (type === Fragment) {
+        return renderChildren(props.children);
+    }
+
+    // Handle function components
+    if (typeof type === 'function') {
+        const result = type(props);
+        return renderToString(result);
+    }
+
+    // Handle HTML elements
+    const tagName = type as string;
+    const attrs = renderAttributes(props);
+    const children = renderChildren(props.children);
+
+    // Void elements (self-closing)
+    const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+    if (voidElements.includes(tagName)) {
+        return `<${tagName}${attrs}>`;
+    }
+
+    return `<${tagName}${attrs}>${children}</${tagName}>`;
+}
+
+function escapeHtml(str: string): string {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function renderAttributes(props: Props): string {
+    const attrs: string[] = [];
+
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'children' || key === 'key' || key === 'ref') continue;
+        if (value == null || value === false) continue;
+
+        // Handle className -> class
+        const attrName = key === 'className' ? 'class' : key;
+
+        // Handle style object
+        if (key === 'style' && typeof value === 'object') {
+            const styleStr = Object.entries(value)
+                .map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}:${v}`)
+                .join(';');
+            attrs.push(`style="${escapeHtml(styleStr)}"`);
+            continue;
+        }
+
+        // Handle event handlers (skip on server)
+        if (key.startsWith('on') && typeof value === 'function') continue;
+
+        // Handle dangerouslySetInnerHTML (handled in children)
+        if (key === 'dangerouslySetInnerHTML') continue;
+
+        // Boolean attributes
+        if (value === true) {
+            attrs.push(attrName);
+            continue;
+        }
+
+        attrs.push(`${attrName}="${escapeHtml(String(value))}"`);
+    }
+
+    return attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+}
+
+function renderChildren(children: Child | Child[] | undefined): string {
+    if (children == null) return '';
+
+    // Handle dangerouslySetInnerHTML
+    if (typeof children === 'object' && '__html' in (children as any)) {
+        return (children as any).__html;
+    }
+
+    if (Array.isArray(children)) {
+        return children.map(child => renderToString(child as VNode)).join('');
+    }
+
+    return renderToString(children as VNode);
+}
+
 // =============================================================================
 // HOOKS
 // =============================================================================
@@ -706,12 +815,15 @@ function getHook<T extends HookState>(initializer: () => T): T {
  * useState - Reactive state
  */
 export function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void] {
+    // Capture the fiber at hook creation time (during render)
+    const fiber = currentFiber!;
+
     const hook = getHook(() => {
         const value = typeof initial === 'function' ? (initial as () => T)() : initial;
         return { type: 'state' as const, value, setter: null as any };
     });
 
-    // Create setter that triggers re-render
+    // Create setter that triggers re-render using captured fiber
     if (!hook.setter) {
         hook.setter = (newValue: T | ((prev: T) => T)) => {
             const next = typeof newValue === 'function'
@@ -720,7 +832,8 @@ export function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T
 
             if (next !== hook.value) {
                 hook.value = next;
-                scheduleUpdate(currentFiber!);
+                // Use captured fiber, not currentFiber (which is null outside render)
+                scheduleUpdate(fiber);
             }
         };
     }
@@ -780,14 +893,41 @@ export function useCallback<T extends Function>(fn: T, deps: any[]): T {
 // =============================================================================
 
 function scheduleUpdate(fiber: Fiber) {
-    // Find root fiber
-    let root = fiber;
-    while (root.parent) root = root.parent;
-
     // Schedule microtask re-render
     queueMicrotask(() => {
-        if (fiber.vnode) {
-            reconcile(fiber, fiber.vnode);
+        if (fiber.vnode && typeof fiber.vnode.type === 'function') {
+            // This is a component fiber - re-render it properly
+            const prevFiber = currentFiber;
+            currentFiber = fiber;
+            fiber.hookIndex = 0;  // Reset hook index for re-render
+
+            // Re-run the component function (hooks will reuse stored state)
+            const result = (fiber.vnode.type as any)(fiber.vnode.props);
+
+            currentFiber = prevFiber;
+
+            // Update the DOM with new result
+            if (fiber.node && fiber.node.parentNode) {
+                const container = fiber.node.parentNode as HTMLElement;
+
+                // Create new DOM from result
+                const newFiber: Fiber = {
+                    node: null,
+                    vnode: result,
+                    hooks: [],
+                    hookIndex: 0,
+                    parent: fiber.parent,
+                    children: [],
+                    cleanup: [],
+                };
+
+                const newNode = createNode(result, newFiber);
+                if (newNode) {
+                    container.replaceChild(newNode, fiber.node);
+                    fiber.node = newNode as HTMLElement;
+                }
+            }
+
             runEffects();
         }
     });
@@ -1204,15 +1344,11 @@ async function loadComponent(name: string): Promise<Component<any> | null> {
 
 /**
  * Hydrate all islands in the current DOM
- * Uses ReactDOM.createRoot for React-based components
+ * Uses melina/client's render function (React-free!)
  */
 export async function hydrateIslands(): Promise<void> {
     initHangar();
 
-    // Dynamic import of React and ReactDOM for island hydration
-    const React = await import('react');
-    const ReactDOM = await import('react-dom/client');
-
     const placeholders = document.querySelectorAll('[data-melina-island]');
     const seenIds = new Set<string>();
 
@@ -1244,22 +1380,19 @@ export async function hydrateIslands(): Promise<void> {
                 storageNode.setAttribute('data-storage', instanceId);
                 el.appendChild(storageNode);
 
-                // Render component using ReactDOM.createRoot for proper React hydration
-                const root = ReactDOM.createRoot(storageNode);
-                root.render(React.createElement(Component as any, props));
-
-                // Store root for cleanup and re-rendering
-                (storageNode as any).__reactRoot = root;
+                // Render component using melina's render function (React-free!)
+                const vnode = createElement(Component as any, props);
+                render(vnode, storageNode);
 
                 islandRegistry.set(instanceId, {
                     name,
                     Component,
                     props,
-                    fiber: null as any, // Not using fiber for React components
+                    fiber: null as any,
                     storageNode,
                 });
 
-                console.log('[Melina Client] Created React island:', instanceId);
+                console.log('[Melina Client] Hydrated island:', instanceId);
             }
         }
     }

package/src/jsx-dom.ts

@@ -0,0 +1,96 @@
+/**
+ * Melina.js JSX-to-DOM Runtime
+ * 
+ * JSX in client.tsx files creates REAL DOM elements, not virtual DOM.
+ * 
+ * Usage:
+ *   const el = <div class="toast"><span>Hello</span></div>;
+ *   document.body.appendChild(el); // Works directly!
+ */
+
+type Child = Node | string | number | boolean | null | undefined | Child[];
+
+export function jsx(
+    tag: string | ((props: any) => Node),
+    props: Record<string, any> | null,
+    ...children: Child[]
+): Node {
+    // Function component
+    if (typeof tag === 'function') {
+        const finalProps = { ...props };
+        // Use varargs children only if props.children is missing (Classic Runtime fallback)
+        if ((!props || props.children === undefined) && children.length > 0) {
+            finalProps.children = children.length === 1 ? children[0] : children;
+        }
+        return tag(finalProps);
+    }
+
+    const el = document.createElement(tag);
+
+    // Set attributes/properties
+    if (props) {
+        for (const [key, value] of Object.entries(props)) {
+            if (key === 'children') continue;
+            if (value === null || value === undefined || value === false) continue;
+
+            if (key === 'style' && typeof value === 'object') {
+                Object.assign(el.style, value);
+            } else if (key === 'className' || key === 'class') {
+                el.className = String(value);
+            } else if (key === 'htmlFor') {
+                el.setAttribute('for', String(value));
+            } else if (key === 'dangerouslySetInnerHTML') {
+                el.innerHTML = value.__html || '';
+            } else if (key.startsWith('on') && typeof value === 'function') {
+                // Event handlers: onClick -> click
+                const event = key.slice(2).toLowerCase();
+                el.addEventListener(event, value);
+            } else if (key === 'ref' && typeof value === 'function') {
+                value(el);
+            } else if (value === true) {
+                el.setAttribute(key, '');
+            } else {
+                el.setAttribute(key, String(value));
+            }
+        }
+
+        // Handle children passed as prop
+        // Handle children passed as prop (Automatic Runtime)
+        if (props.children !== undefined) {
+            appendChildren(el, Array.isArray(props.children) ? props.children : [props.children]);
+        }
+    }
+
+    // Append direct children (Classic Runtime fallback)
+    if ((!props || props.children === undefined) && children.length > 0) {
+        appendChildren(el, children);
+    }
+
+    return el;
+}
+
+function appendChildren(parent: Element, children: Child[]) {
+    for (const child of children) {
+        if (child === null || child === undefined || child === false || child === true) continue;
+        if (Array.isArray(child)) {
+            appendChildren(parent, child);
+        } else if (child instanceof Node) {
+            parent.appendChild(child);
+        } else {
+            parent.appendChild(document.createTextNode(String(child)));
+        }
+    }
+}
+
+// JSX runtime entry points (used by Bun/esbuild JSX transform)
+export const jsxs = jsx;
+export const jsxDEV = jsx;
+export const Fragment = ({ children }: { children: Child | Child[] }) => {
+    const frag = document.createDocumentFragment();
+    if (children !== undefined) {
+        appendChildren(frag as any, Array.isArray(children) ? children : [children]);
+    }
+    return frag;
+};
+
+export default { jsx, jsxs, jsxDEV, Fragment };