@csedl/svelte-on-rails 12.0.0 → 12.0.2

package/bin/svelte-ssr-server.js

@@ -1,15 +1,11 @@
-// app/javascript/ssr/svelte-ssr-server.js
-// Minimal persistent SSR server for SvelteOnRails
-// Listens on Unix socket (preferred) or TCP port fallback
 
 import http from 'node:http';
 import fs   from 'node:fs';
 import path from 'node:path';
 import { render } from 'svelte/server';
-import { readPropsFromStdin } from "../src/ssr/readStdin.js";
 import { loadComponentModule } from "../src/ssr/loadComponent.js";
+import { componentRenderError} from "../src/utils.js";
 
-// Config from ENV or defaults
 const SOCKET_PATH = process.argv[2];
 const PORT = (/^\d+$/.test(SOCKET_PATH) ? SOCKET_PATH : null);
 const LOGFILE = process.env.SVELTE_SSR_SERVER_LOGFILE;
@@ -32,10 +28,11 @@ if (SOCKET_PATH.startsWith('/') && fs.existsSync(SOCKET_PATH)) {
 }
 
 const server = http.createServer(async (req, res) => {
-    // Simple logging
+
     logger(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
 
     // Health check / ping
+
     if (req.method === 'GET' && (req.url === '/ping' || req.url === '/health')) {
         res.writeHead(200, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({
@@ -47,18 +44,20 @@ const server = http.createServer(async (req, res) => {
         return;
     }
 
-    // SSR render endpoint (stub for now)
+    // Render
+
     if (req.method === 'POST' && req.url === '/render') {
         let request_body = '';
         req.on('data', chunk => { request_body += chunk; });
         req.on('end', async () => {
+            let basename = 'unknown';
             try {
 
                 // parsing request-body
 
                 logger(`Parsing request_body...`);
                 const { component, props = {} } = JSON.parse(request_body);
-                const basename = path.basename(component);
+                basename = path.basename(component);
                 logger(`Rendering component: ${basename} with props: ${JSON.stringify(props)}`);
 
                 // lad component
@@ -71,18 +70,9 @@ const server = http.createServer(async (req, res) => {
                 const { body, head } = render(compiledComponent, { props });
                 logger(`Component rendered, content: «${body}», head: «${head}»`);
 
-
-
-                // TODO: Replace with real Svelte SSR rendering
-                // Example: const { html, css, head } = YourSvelteComponent.render(props);
-                const dummyHtml = `<div data-component="${component}">Hello from SSR! Props: ${JSON.stringify(props)}</div>`;
-                const dummyCss = '';
-                const dummyHead = '<meta name="ssr-stub" content="placeholder">';
-
                 res.writeHead(200, { 'Content-Type': 'application/json' });
                 res.end(JSON.stringify({
                     html: body,
-                    css: dummyCss,
                     head: head
                 }));
 
@@ -91,7 +81,10 @@ const server = http.createServer(async (req, res) => {
                 logger(`Render error: ${err}`);
                 logger(`body => «${request_body}»`);
                 res.writeHead(500, { 'Content-Type': 'application/json' });
-                res.end(JSON.stringify({ error: 'SSR render failed', details: err.message }));
+                res.end(JSON.stringify({
+                    html: componentRenderError(basename, err, true),
+                    head: ''
+                }));
             }
         });
         return;
@@ -99,7 +92,8 @@ const server = http.createServer(async (req, res) => {
 
     // Fallback 404
     res.writeHead(404, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify({ error: 'Not found' }));
+    res.end(JSON.stringify({
+        error: 'Not found' }));
 });
 
 // LOGGING

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "12.0.0",
+  "version": "12.0.2",
   "description": "Client-side runtime for svelte-on-rails: hydration, SSR build support & Turbo Stream actions",
   "main": "index.js",
   "type": "module",

package/src/hydrate-build/initializeSvelteComponent.js

@@ -1,6 +1,7 @@
 import {mount, hydrate} from "svelte";
 import {debugLog} from "../logger.js";
-import { SvelteOnRails } from "../config.js";
+import {SvelteOnRails} from "../config.js";
+import {componentRenderError} from "../utils.js";
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();
@@ -52,5 +53,10 @@ export async function initializeSvelteComponent(element) {
     } catch (e) {
         console.error(`[svelte-on-rails] Failed to ${action} ${componentKey}:`, e);
         element.setAttribute("data-svelte-status", "error");
+
+        element.innerHTML = componentRenderError(componentKey, e);
+
     }
-}
+}
+
+

package/src/ssr/render.js

@@ -2,6 +2,7 @@
 import { render } from 'svelte/server';
 import { readPropsFromStdin } from "./readStdin.js";
 import { loadComponentModule } from "./loadComponent.js";
+import { componentRenderError } from "../utils.js";
 
 const compiledComponentPath = process.argv[2];
 
@@ -17,21 +18,25 @@ const compiledComponentPath = process.argv[2];
     console.log(`[svelte-on-rails:debug] props read: «${JSON.stringify(props)}»`);
 
     try {
-        // Svelte 5+ SSR rendering (runes-compatible; signals omitted on server for perf)
-        // Returns { body: string, head: string } — no 'html' or 'css' props
         const { body, head } = render(compiledComponent, { props });
 
         const res = {
             status: 'SUCCESS',
-            html: body, // Use 'body' as the main HTML content (replaces old 'html')
-            head: head || '', // Optional: Include <head> content (styles, meta, etc.)
-            // Add bodyAttributes or other result props if needed in future
+            html: body,
+            head: head || '',
         };
         console.log(`<time>${performance.now()}`);
         console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
     } catch (error) {
-        console.error('[svelte-on-rails:debug] Error rendering component:', error);
-        process.exit(1);
+
+        const res = {
+            status: 'SUCCESS',
+            html: componentRenderError(compiledComponentPath, error, true),
+            head: '',
+        };
+
+        console.log(`<time>${performance.now()}`);
+        console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
     }
 })();
 

package/src/utils.js

@@ -0,0 +1,26 @@
+export function componentRenderError(component, error, ssr = false) {
+
+    const hint = 'Check browser console for full details.'
+    const ssrHint = 'This is Server Side rendered. When Hydrated, you will see a more detailed error message.'
+
+    return (`
+    <div style="
+      padding: 1.5rem;
+      margin: 1rem 0;
+      border: 2px solid #ef4444;
+      background: #fef2f2;
+      color: #991b1b;
+      border-radius: 0.5rem;
+      font-family: system-ui, sans-serif;
+    ">
+      <strong style="font-size: 1.2em;">Component failed to render</strong>
+      <p style="margin: 0.75rem 0 0;">
+        <code>${component}</code><br>
+        ${error.message || 'Unknown rendering error'}
+      </p>
+      <small style="color: #7f1d1d; opacity: 0.8;">
+        ${ssr ? ssrHint : hint}
+      </small>
+    </div>
+  `)
+}