melina 1.3.0 → 1.3.1

package/package.json

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

package/src/jsx-dom.ts

@@ -25,7 +25,45 @@ export function jsx(
         return tag(finalProps);
     }
 
-    const el = document.createElement(tag);
+    // SVG elements must be created with the SVG namespace
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    const SVG_TAGS = new Set([
+        'svg', 'path', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
+        'rect', 'g', 'defs', 'use', 'text', 'tspan', 'clipPath', 'mask',
+        'image', 'pattern', 'linearGradient', 'radialGradient', 'stop',
+        'filter', 'feGaussianBlur', 'feOffset', 'feMerge', 'feMergeNode',
+        'foreignObject', 'marker', 'symbol', 'animate', 'animateTransform',
+    ]);
+    const isSVG = SVG_TAGS.has(tag);
+    const el = isSVG
+        ? document.createElementNS(SVG_NS, tag)
+        : document.createElement(tag);
+
+    // React camelCase → SVG dash-case attribute mapping
+    const SVG_ATTR_MAP: Record<string, string> = {
+        strokeWidth: 'stroke-width',
+        strokeLinecap: 'stroke-linecap',
+        strokeLinejoin: 'stroke-linejoin',
+        strokeDasharray: 'stroke-dasharray',
+        strokeDashoffset: 'stroke-dashoffset',
+        strokeMiterlimit: 'stroke-miterlimit',
+        strokeOpacity: 'stroke-opacity',
+        fillOpacity: 'fill-opacity',
+        fillRule: 'fill-rule',
+        clipRule: 'clip-rule',
+        clipPath: 'clip-path',
+        fontFamily: 'font-family',
+        fontSize: 'font-size',
+        fontWeight: 'font-weight',
+        textAnchor: 'text-anchor',
+        dominantBaseline: 'dominant-baseline',
+        colorInterpolation: 'color-interpolation',
+        colorInterpolationFilters: 'color-interpolation-filters',
+        floodColor: 'flood-color',
+        floodOpacity: 'flood-opacity',
+        lightingColor: 'lighting-color',
+        baselineShift: 'baseline-shift',
+    };
 
     // Set attributes/properties
     if (props) {
@@ -34,9 +72,13 @@ export function jsx(
             if (value === null || value === undefined || value === false) continue;
 
             if (key === 'style' && typeof value === 'object') {
-                Object.assign(el.style, value);
+                Object.assign((el as HTMLElement).style, value);
             } else if (key === 'className' || key === 'class') {
-                el.className = String(value);
+                if (isSVG) {
+                    el.setAttribute('class', String(value));
+                } else {
+                    (el as HTMLElement).className = String(value);
+                }
             } else if (key === 'htmlFor') {
                 el.setAttribute('for', String(value));
             } else if (key === 'dangerouslySetInnerHTML') {
@@ -50,7 +92,9 @@ export function jsx(
             } else if (value === true) {
                 el.setAttribute(key, '');
             } else {
-                el.setAttribute(key, String(value));
+                // Map React camelCase SVG attributes to dash-case
+                const attr = isSVG ? (SVG_ATTR_MAP[key] || key) : key;
+                el.setAttribute(attr, String(value));
             }
         }
 

package/src/runtime.ts

@@ -149,17 +149,12 @@ async function navigate(href: string) {
             window.scrollTo(0, 0);
         };
 
-        if (document.startViewTransition) {
-            const transition = document.startViewTransition(() => updateDOM());
-            transition.finished.then(() => {
-                mountPage(didPartialSwap);
-                window.dispatchEvent(new CustomEvent('melina:navigated'));
-            });
-        } else {
-            updateDOM();
-            mountPage(didPartialSwap);
-            window.dispatchEvent(new CustomEvent('melina:navigated'));
-        }
+        // Run the DOM update directly — no View Transitions for partial swaps.
+        // View Transitions snapshot the entire viewport, causing untouched
+        // layout elements (like messenger) to visually flicker.
+        updateDOM();
+        mountPage(didPartialSwap);
+        window.dispatchEvent(new CustomEvent('melina:navigated'));
 
     } catch (error) {
         window.location.href = href;
@@ -226,16 +221,9 @@ function initializeLinkInterception() {
                     }
                 };
 
-                if (document.startViewTransition) {
-                    document.startViewTransition(() => updateDOM()).finished.then(() => {
-                        mountPage(didPartialSwap);
-                        window.dispatchEvent(new CustomEvent('melina:navigated'));
-                    });
-                } else {
-                    updateDOM();
-                    mountPage(didPartialSwap);
-                    window.dispatchEvent(new CustomEvent('melina:navigated'));
-                }
+                updateDOM();
+                mountPage(didPartialSwap);
+                window.dispatchEvent(new CustomEvent('melina:navigated'));
             })
             .catch(err => {
                 window.location.reload();

package/src/web.ts

@@ -1268,8 +1268,8 @@ export function createAppRouter(options: AppRouterOptions = {}): Handler {
 
       if (isStringMode) {
         // ─── String mode: components return raw HTML strings ───
-        // Page content is already a string, wrap with layouts
-        let content = pageContent as string;
+        // Page content is already a string, wrap in #melina-page-content then layouts
+        let content = `<div id="melina-page-content" style="display:contents">${pageContent as string}</div>`;
         for (let i = match.route.layouts.length - 1; i >= 0; i--) {
           const layoutPath = match.route.layouts[i];
           const layoutModule = await importSSR(layoutPath);
@@ -1289,7 +1289,8 @@ export function createAppRouter(options: AppRouterOptions = {}): Handler {
         const React = await import('react');
         const ReactDOMServer = await import('react-dom/server');
 
-        let tree: any = pageContent;
+        // Wrap page content in #melina-page-content for partial swap
+        let tree: any = React.createElement('div', { id: 'melina-page-content', style: { display: 'contents' } }, pageContent);
 
         // Wrap with layouts (innermost to outermost)
         for (let i = match.route.layouts.length - 1; i >= 0; i--) {