melina 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melina",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A lightweight, islands-architecture web framework for Bun with Next.js-style routing.",
   "module": "./src/web.ts",
   "main": "./src/web.ts",

package/src/client.ts

@@ -918,6 +918,189 @@ function renderChildren(children: Child | Child[] | undefined, parentFiber: Fibe
     }
 }
 
+// =============================================================================
+// SERVER-SIDE RENDERING
+// =============================================================================
+
+// Void elements that don't have closing tags
+const VOID_ELEMENTS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr'
+]);
+
+// Map of React-style prop names to HTML attribute names
+const PROP_TO_ATTR: Record<string, string> = {
+    className: 'class',
+    htmlFor: 'for',
+    tabIndex: 'tabindex',
+    readOnly: 'readonly',
+    maxLength: 'maxlength',
+    cellPadding: 'cellpadding',
+    cellSpacing: 'cellspacing',
+    colSpan: 'colspan',
+    rowSpan: 'rowspan',
+    srcSet: 'srcset',
+    useMap: 'usemap',
+    frameBorder: 'frameborder',
+    contentEditable: 'contenteditable',
+    crossOrigin: 'crossorigin',
+    dateTime: 'datetime',
+    encType: 'enctype',
+    formAction: 'formaction',
+    formEncType: 'formenctype',
+    formMethod: 'formmethod',
+    formNoValidate: 'formnovalidate',
+    formTarget: 'formtarget',
+    hrefLang: 'hreflang',
+    inputMode: 'inputmode',
+    noValidate: 'novalidate',
+    playsInline: 'playsinline',
+    autoComplete: 'autocomplete',
+    autoFocus: 'autofocus',
+    autoPlay: 'autoplay',
+};
+
+/**
+ * Escape HTML special characters
+ */
+function escapeHtml(str: string): string {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+/**
+ * Convert a VNode tree to an HTML string (Server-Side Rendering)
+ * This is melina/client's equivalent to react-dom/server.renderToString()
+ */
+export function renderToString(vnode: VNode | Child): string {
+    // Handle null, undefined, booleans
+    if (vnode === null || vnode === undefined || vnode === true || vnode === false) {
+        return '';
+    }
+
+    // Handle primitives (strings, numbers)
+    if (typeof vnode === 'string') {
+        return escapeHtml(vnode);
+    }
+    if (typeof vnode === 'number') {
+        return String(vnode);
+    }
+
+    // Handle arrays
+    if (Array.isArray(vnode)) {
+        return vnode.map(child => renderToString(child)).join('');
+    }
+
+    const { type, props } = vnode as VNode;
+
+    // Handle Fragment
+    if (type === Fragment) {
+        return renderChildrenToString(props.children);
+    }
+
+    // Handle function components
+    if (typeof type === 'function') {
+        // For SSR, we just call the component function
+        // Hooks will work because we set up currentFiber context
+        const fiber: Fiber = {
+            node: null,
+            vnode: vnode as VNode,
+            hooks: [],
+            hookIndex: 0,
+            parent: null,
+            children: [],
+            cleanup: [],
+        };
+
+        const prevFiber = currentFiber;
+        currentFiber = fiber;
+        fiber.hookIndex = 0;
+
+        try {
+            const result = (type as Component)(props);
+            currentFiber = prevFiber;
+            return renderToString(result);
+        } catch (e) {
+            currentFiber = prevFiber;
+            throw e;
+        }
+    }
+
+    // Handle HTML elements
+    const tagName = type as string;
+    let html = `<${tagName}`;
+
+    // Render attributes
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'children' || key === 'key' || key === 'ref') continue;
+        if (value === undefined || value === null || value === false) continue;
+
+        // Handle dangerouslySetInnerHTML
+        if (key === 'dangerouslySetInnerHTML') continue;
+
+        // Handle style object
+        if (key === 'style' && typeof value === 'object') {
+            const styleStr = Object.entries(value)
+                .map(([k, v]) => {
+                    // Convert camelCase to kebab-case
+                    const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase();
+                    return `${prop}:${v}`;
+                })
+                .join(';');
+            html += ` style="${escapeHtml(styleStr)}"`;
+            continue;
+        }
+
+        // Skip event handlers on server
+        if (key.startsWith('on') && typeof value === 'function') continue;
+
+        // Convert prop name to attribute name
+        const attrName = PROP_TO_ATTR[key] || key.toLowerCase();
+
+        // Boolean attributes
+        if (value === true) {
+            html += ` ${attrName}`;
+        } else {
+            html += ` ${attrName}="${escapeHtml(String(value))}"`;
+        }
+    }
+
+    html += '>';
+
+    // Void elements don't have children or closing tags
+    if (VOID_ELEMENTS.has(tagName)) {
+        return html;
+    }
+
+    // Handle dangerouslySetInnerHTML
+    if (props.dangerouslySetInnerHTML) {
+        html += props.dangerouslySetInnerHTML.__html;
+    } else {
+        // Render children
+        html += renderChildrenToString(props.children);
+    }
+
+    html += `</${tagName}>`;
+    return html;
+}
+
+/**
+ * Render children to string
+ */
+function renderChildrenToString(children: Child | Child[] | undefined): string {
+    if (children === undefined || children === null) return '';
+
+    if (Array.isArray(children)) {
+        return children.map(child => renderToString(child)).join('');
+    }
+
+    return renderToString(children);
+}
+
 // =============================================================================
 // ISLAND SYSTEM (HANGAR ARCHITECTURE)
 // =============================================================================

package/src/createIsland.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement, renderToString, type VNode, type Component, type Child } from './client';
 
 // Check if we're on the server
 const isServer = typeof window === 'undefined';
@@ -19,7 +19,7 @@ declare global {
  * ```tsx
  * // components/Counter.tsx
  * 'use client';
- * import { createIsland } from '@ments/web';
+ * import { createIsland } from 'melina';
  * 
  * function CounterImpl({ initialCount = 0 }) {
  *   const [count, setCount] = useState(initialCount);
@@ -37,21 +37,20 @@ declare global {
  * - Hydrates the component with full interactivity
  */
 export function createIsland<P extends object>(
-    Component: React.ComponentType<P>,
+    ComponentImpl: Component<P>,
     name: string
-): React.FC<P> {
+): Component<P> {
     // Return a wrapper component
-    const IslandWrapper: React.FC<P> = (props) => {
+    const IslandWrapper: Component<P> = (props) => {
         if (isServer) {
             // SERVER: Render the island marker
             // We also try to render the component for SEO/initial content
             let innerHtml = '';
             try {
                 // Attempt to render for progressive enhancement
-                // This might fail if the component uses hooks
-                const ReactDOMServer = require('react-dom/server');
-                innerHtml = ReactDOMServer.renderToString(
-                    React.createElement(Component, props)
+                // Using melina/client's renderToString
+                innerHtml = renderToString(
+                    createElement(ComponentImpl, props)
                 );
             } catch (e) {
                 // Component uses hooks - can't SSR, just show placeholder
@@ -61,18 +60,17 @@ export function createIsland<P extends object>(
             // Return the island marker with serialized props
             const propsJson = JSON.stringify(props).replace(/"/g, '&quot;');
 
-            return React.createElement('div', {
+            return createElement('div', {
                 'data-melina-island': name,
                 'data-props': propsJson,
                 dangerouslySetInnerHTML: { __html: innerHtml }
             });
         } else {
             // CLIENT: Render the actual component
-            return React.createElement(Component, props);
+            return createElement(ComponentImpl, props);
         }
     };
 
-    IslandWrapper.displayName = `Island(${name})`;
     return IslandWrapper;
 }
 
@@ -82,7 +80,7 @@ export function createIsland<P extends object>(
  * Usage:
  * ```tsx
  * // In a Server Component
- * import { Island } from '@ments/web';
+ * import { Island } from 'melina';
  * import { Counter } from './components/Counter';
  * 
  * export default function Page() {
@@ -91,15 +89,15 @@ export function createIsland<P extends object>(
  * ```
  */
 export function Island<P extends object>({
-    component: Component,
+    component: ComponentImpl,
     name,
     ...props
 }: {
-    component: React.ComponentType<P>;
+    component: Component<P>;
     name: string;
-} & P): React.ReactElement {
-    const WrappedComponent = createIsland(Component, name);
-    return React.createElement(WrappedComponent, props as P);
+} & P): VNode {
+    const WrappedComponent = createIsland(ComponentImpl, name);
+    return createElement(WrappedComponent, props as P);
 }
 
 /**
@@ -111,11 +109,11 @@ export function ClientOnly({
     children,
     fallback = null
 }: {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-}): React.ReactElement | null {
+    children: Child;
+    fallback?: Child;
+}): VNode | null {
     if (isServer) {
-        return fallback as React.ReactElement | null;
+        return fallback as VNode | null;
     }
-    return children as React.ReactElement;
+    return children as VNode | null;
 }

package/src/web.ts

@@ -24,7 +24,7 @@ import { discoverRoutes, matchRoute, type Route, type RouteMatch } from "./route
  */
 const ISLAND_HELPER = `
 // [Melina.js] Auto-injected island wrapper
-import * as __React__ from 'react';
+import { createElement as __melina_h__ } from 'melina/client';
 const __MELINA_IS_SERVER__ = typeof window === 'undefined' && typeof Bun !== 'undefined';
 function __melina_wrap__(Component, name) {
     if (__MELINA_IS_SERVER__) {
@@ -34,7 +34,7 @@ function __melina_wrap__(Component, name) {
             // Filter out internal props before serializing
             const { _melinaInstance, ...restProps } = props || {};
             const propsJson = JSON.stringify(restProps || {}).replace(/"/g, '"');
-            return __React__.createElement('div', {
+            return __melina_h__('div', {
                 'data-melina-island': name,
                 'data-instance': instanceId,
                 'data-props': propsJson,
@@ -446,6 +446,9 @@ let cachedRuntimePath: string | null = null;
 /**
  * Build the Melina client runtime from TypeScript source
  * This bundles src/client.ts and serves it from memory
+ * 
+ * The client runtime is React-free - it uses melina/client's lightweight VDOM.
+ * SSR uses React on the server, but the browser only loads melina/client.
  */
 async function buildRuntime(): Promise<string> {
   // Return cached path if available
@@ -1200,12 +1203,11 @@ export async function renderPage(options: RenderPageOptions): Promise<string> {
   //Server-side render the component
   let serverHtml = '';
   try {
-    // Import React for SSR
-    const React = await import('react');
-    const ReactDOMServer = await import('react-dom/server');
+    // Import melina/client for SSR (React-free)
+    const { createElement, renderToString } = await import('./client');
 
-    serverHtml = ReactDOMServer.renderToString(
-      React.createElement(Component, { ...props, params })
+    serverHtml = renderToString(
+      createElement(Component, { ...props, params })
     );
   } catch (error) {
     console.warn('SSR failed, will use client-side rendering only:', error);
@@ -1347,12 +1349,11 @@ export function createAppRouter(options: AppRouterOptions = {}): Handler {
         throw new Error(`No default export found in ${match.route.filePath}`);
       }
 
-      // Import React for SSR
-      const React = await import('react');
-      const ReactDOMServer = await import('react-dom/server');
+      // Import melina/client for SSR (React-free)
+      const { createElement, renderToString } = await import('./client');
 
       // Build the component tree with nested layouts
-      let tree = React.createElement(PageComponent, { params: match.params });
+      let tree = createElement(PageComponent, { params: match.params });
 
       // Wrap with layouts (innermost to outermost)
       for (let i = match.route.layouts.length - 1; i >= 0; i--) {
@@ -1361,12 +1362,12 @@ export function createAppRouter(options: AppRouterOptions = {}): Handler {
         const LayoutComponent = layoutModule.default;
 
         if (LayoutComponent) {
-          tree = React.createElement(LayoutComponent, { children: tree });
+          tree = createElement(LayoutComponent, { children: tree });
         }
       }
 
       // Render to HTML
-      const html = ReactDOMServer.renderToString(tree);
+      const html = renderToString(tree);
 
       // Build CSS
       let stylesVirtualPath = '';