@csedl/svelte-on-rails 11.0.4 → 12.0.1

package/bin/svelte-ssr-server.js

@@ -0,0 +1,135 @@
+
+import http from 'node:http';
+import fs   from 'node:fs';
+import path from 'node:path';
+import { render } from 'svelte/server';
+import { loadComponentModule } from "../src/ssr/loadComponent.js";
+import { componentRenderError} from "../src/utils.js";
+
+const SOCKET_PATH = process.argv[2];
+const PORT = (/^\d+$/.test(SOCKET_PATH) ? SOCKET_PATH : null);
+const LOGFILE = process.env.SVELTE_SSR_SERVER_LOGFILE;
+
+if (!SOCKET_PATH && (process.argv.length <= 2)) {
+    console.error(`Missing first argument: socket path or port number.\nUsage:\nnode svelte-ssr-server.js /path/to/socket.sock\nnode svelte-ssr-server.js 3001`);
+    process.exit(1);
+}
+
+if (LOGFILE) {
+    console.log(`Logging to ${LOGFILE}`);
+} else {
+    console.log(`No log file specified. Logging to stdout.`);
+}
+
+// Clean up old socket file
+if (SOCKET_PATH.startsWith('/') && fs.existsSync(SOCKET_PATH)) {
+    fs.unlinkSync(SOCKET_PATH);
+    logger(`Cleaned old socket: ${SOCKET_PATH}`);
+}
+
+const server = http.createServer(async (req, res) => {
+
+    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({
+            status: 'alive',
+            uptime: process.uptime(),
+            pid: process.pid,
+            socket: SOCKET_PATH
+        }));
+        return;
+    }
+
+    // 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);
+                basename = path.basename(component);
+                logger(`Rendering component: ${basename} with props: ${JSON.stringify(props)}`);
+
+                // lad component
+
+                const compiledComponent = await loadComponentModule(component);
+                logger(`Component loaded: «${compiledComponent}»`);
+
+                // render
+
+                const { body, head } = render(compiledComponent, { props });
+                logger(`Component rendered, content: «${body}», head: «${head}»`);
+
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({
+                    html: body,
+                    head: head
+                }));
+
+                logger(`Successfully rendered: ${basename}`);
+            } catch (err) {
+                logger(`Render error: ${err}`);
+                logger(`body => «${request_body}»`);
+                res.writeHead(500, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({
+                    html: componentRenderError(basename, err),
+                    head: ''
+                }));
+            }
+        });
+        return;
+    }
+
+    // Fallback 404
+    res.writeHead(404, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({
+        error: 'Not found' }));
+});
+
+// LOGGING
+function logger(msg, error = false) {
+    if (error) {
+        console.error(msg);
+    } else {
+        console.log(msg);
+    };
+    if (LOGFILE) {
+        fs.appendFileSync(LOGFILE, `${new Date().toISOString()} ${msg}\n`);
+    }
+}
+
+
+// Start server
+if (PORT) {
+    // TCP mode (e.g. for debugging or non-Unix environments)
+    server.listen(PORT, '127.0.0.1', () => {
+        logger(`Svelte SSR listening on http://127.0.0.1:${PORT}`);
+    });
+} else {
+    // Preferred: Unix socket
+    server.listen(SOCKET_PATH, () => {
+        fs.chmodSync(SOCKET_PATH, 0o600); // restrict access
+        logger(`Svelte SSR listening on unix socket: ${SOCKET_PATH}`);
+    });
+}
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+    logger('Shutting down SSR server...');
+    server.close(() => {
+        if (SOCKET_PATH.startsWith('/') && fs.existsSync(SOCKET_PATH)) {
+            fs.unlinkSync(SOCKET_PATH);
+        }
+        process.exit(0);
+    });
+});

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "11.0.4",
+  "version": "12.0.1",
   "description": "Client-side runtime for svelte-on-rails: hydration, SSR build support & Turbo Stream actions",
   "main": "index.js",
   "type": "module",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "scripts": {
     "build:package": "vite build"
   },
@@ -28,10 +31,7 @@
     "type": "git",
     "url": "https://gitlab.com/sedl/svelte-on-rails"
   },
-  "keywords": [
-    "svelte",
-    "rails"
-  ],
+  "keywords": [ "svelte", "rails"],
   "author": "Christian Sedlmair",
   "license": "LICENSE.md",
   "bugs": {

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,35 +2,41 @@
 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];
 
 
 (async () => {
+    console.log(`${performance.now()}<time>`);
     console.log(`[svelte-on-rails:debug] awaiting load component => «${compiledComponentPath}»`);
     const compiledComponent = await loadComponentModule(compiledComponentPath);
 
-    console.log(`[svelte-on-rails:debug] component read: «${compiledComponent}»`);
+    console.log(`[svelte-on-rails:debug] Component loaded: «${compiledComponent}»`);
 
     const props = await readPropsFromStdin();
     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),
+            head: '',
+        };
+
+        console.log(`<time>${performance.now()}`);
+        console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
     }
 })();
 

package/src/utils.js

@@ -0,0 +1,22 @@
+export function componentRenderError(component, error) {
+    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;">
+        Check browser console for full details. (Dev mode only?)
+      </small>
+    </div>
+  `)
+}