@csedl/svelte-on-rails 12.2.0 → 12.3.0

package/bin/svelte-ssr-server.js

@@ -1,10 +1,10 @@
-
 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";
+import fs from 'node:fs';
+import path, {dirname, resolve} from 'node:path';
+import {render} from 'svelte/server';
+import {loadComponentModule} from "../src/ssr/loadComponent.js";
+import {componentRenderError} from "../src/utils.js";
+import {fileURLToPath} from "node:url";
 
 const SOCKET_PATH = process.argv[2];
 const PORT = (/^\d+$/.test(SOCKET_PATH) ? SOCKET_PATH : null);
@@ -24,7 +24,7 @@ if (LOGFILE) {
 // Clean up old socket file
 if (SOCKET_PATH.startsWith('/') && fs.existsSync(SOCKET_PATH)) {
     fs.unlinkSync(SOCKET_PATH);
-    logger(`Cleaned old socket: ${SOCKET_PATH}`);
+    logger(`Cleaned old socket: ${SOCKET_PATH}`, false);
 }
 
 const server = http.createServer(async (req, res) => {
@@ -34,7 +34,7 @@ const server = http.createServer(async (req, res) => {
     // Health check / ping
 
     if (req.method === 'GET' && (req.url === '/ping' || req.url === '/health')) {
-        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.writeHead(200, {'Content-Type': 'application/json'});
         res.end(JSON.stringify({
             status: 'alive',
             uptime: process.uptime(),
@@ -48,42 +48,52 @@ const server = http.createServer(async (req, res) => {
 
     if (req.method === 'POST' && req.url === '/render') {
         let request_body = '';
-        req.on('data', chunk => { request_body += chunk; });
+        let errorLog = []
+        req.on('data', chunk => {
+            request_body += chunk;
+        });
         req.on('end', async () => {
             let basename = 'unknown';
             try {
 
-                // parsing request-body
+                logger(`Parsing request_body...`, false, errorLog);
+                const {component, props = {}} = JSON.parse(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)}`);
+                logger(`Rendering component: ${basename}...`, false, errorLog);
 
-                // lad component
+                // Import the module
+                logger(`Start import module: ${component}`, false, errorLog);
+                const module = await import(`file://${component}`);
+                logger(`Imported module typeof: ${typeof module}`, false, errorLog);
 
-                const compiledComponent = await loadComponentModule(component);
-                logger(`Component loaded: «${compiledComponent}»`);
+                const compiledComponent = module.default;
+                if (!compiledComponent) {
+                    throw new Error(`Module at ${component} does not export a default component`);
+                }
 
-                // render
+                logger(`rendering...`, false, errorLog);
+                const {body, head} = render(compiledComponent, {props});
+                logger(`Component rendered, content: «${body}», head: «${head}»`, false, errorLog);
 
-                const { body, head } = render(compiledComponent, { props });
-                logger(`Component rendered, content: «${body}», head: «${head}»`);
-
-                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.writeHead(200, {'Content-Type': 'application/json'});
                 res.end(JSON.stringify({
+                    status: 'SUCCESS',
                     html: body,
                     head: head
                 }));
 
-                logger(`Successfully rendered: ${basename}`);
+                logger(`Successfully rendered: ${basename}`, false, errorLog);
+
             } catch (err) {
-                logger(`Render error: ${err}`);
-                logger(`body => «${request_body}»`);
-                res.writeHead(500, { 'Content-Type': 'application/json' });
+
+                logger(`Render error: ${err}`, true, errorLog);
+                res.writeHead(500, {'Content-Type': 'application/json'});
                 res.end(JSON.stringify({
+                    status: 'FAILED',
                     html: componentRenderError(basename, err, true),
-                    head: ''
+                    head: '',
+                    errorLog: errorLog
                 }));
             }
         });
@@ -91,18 +101,23 @@ const server = http.createServer(async (req, res) => {
     }
 
     // Fallback 404
-    res.writeHead(404, { 'Content-Type': 'application/json' });
+    res.writeHead(404, {'Content-Type': 'application/json'});
     res.end(JSON.stringify({
-        error: 'Not found' }));
+        status: 'FAILED'
+    }));
 });
 
 // LOGGING
-function logger(msg, error = false) {
-    if (error) {
+function logger(msg, isError = false, errorLog = []) {
+
+    if (isError) {
+        errorLog.push(`ERROR => ${msg}`);
         console.error(msg);
     } else {
+        errorLog.push(msg);
         console.log(msg);
-    };
+    }
+
     if (LOGFILE) {
         fs.appendFileSync(LOGFILE, `${new Date().toISOString()} ${msg}\n`);
     }
@@ -113,19 +128,19 @@ function logger(msg, error = false) {
 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}`);
+        logger(`Svelte SSR listening on http://127.0.0.1:${PORT}`, false);
     });
 } else {
     // Preferred: Unix socket
     server.listen(SOCKET_PATH, () => {
         fs.chmodSync(SOCKET_PATH, 0o600); // restrict access
-        logger(`Svelte SSR listening on unix socket: ${SOCKET_PATH}`);
+        logger(`Svelte SSR listening on unix socket: ${SOCKET_PATH}`, false);
     });
 }
 
 // Graceful shutdown
 process.on('SIGINT', () => {
-    logger('Shutting down SSR server...');
+    logger('Shutting down SSR server...', false);
     server.close(() => {
         if (SOCKET_PATH.startsWith('/') && fs.existsSync(SOCKET_PATH)) {
             fs.unlinkSync(SOCKET_PATH);

package/package.json

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

package/src/ssr/render.js

@@ -1,43 +1,44 @@
-
-import { render } from 'svelte/server';
-import { readPropsFromStdin } from "./readStdin.js";
-import { loadComponentModule } from "./loadComponent.js";
-import { componentRenderError } from "../utils.js";
+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(`[SOR] awaiting load component => «${compiledComponentPath}»`);
-    const compiledComponent = await loadComponentModule(compiledComponentPath);
 
-    console.log(`[SOR] Component loaded: «${compiledComponent}»`);
+    try {
+        console.log(`Awaiting load component: «${compiledComponentPath}»`);
+        const compiledComponent = await import(`file://${compiledComponentPath}`);
+
+        console.log(`Component loaded: «${compiledComponent}»`);
 
-    const props = await readPropsFromStdin();
-    console.log(`[SOR] props read: «${JSON.stringify(props)}»`);
+        const props = await readPropsFromStdin();
+        console.log(`Props read: «${JSON.stringify(props)}»`);
 
-    try {
-        const { body, head } = render(compiledComponent, { props });
+
+        const {body, head} = render(compiledComponent, {props});
 
         const res = {
             status: 'SUCCESS',
             html: body,
             head: head || '',
         };
-        console.log(`<time>${performance.now()}`);
+
         console.log('$$ResponseSeparator$$' + JSON.stringify(res));
     } catch (error) {
+        console.error(`ERROR: ${error.message}`)
 
         const res = {
-            status: 'SUCCESS',
+            status: 'FAILED',
             html: componentRenderError(compiledComponentPath, error, true),
             head: '',
         };
 
-        console.log(`<time>${performance.now()}`);
         console.log('$$ResponseSeparator$$' + JSON.stringify(res));
     }
+
 })();
 
 

package/src/utils.js

@@ -4,7 +4,7 @@ export function componentRenderError(component, error, ssr = false) {
     const ssrHint = 'This is Server Side rendered. When Hydrated, you will see a more detailed error message.'
 
     return (`
-    <div class="svelte-on-rails-component-error${ssr ? '-server-side' : ''}"
+    <div class="svelte-on-rails-render-error ${ssr ? 'server-side-error' : 'client-side-error'}"
     style="
       padding: 1.5rem;
       margin: 1rem 0;
@@ -14,7 +14,7 @@ export function componentRenderError(component, error, ssr = false) {
       border-radius: 0.5rem;
       font-family: system-ui, sans-serif;
     ">
-      <strong style="font-size: 1.2em;">Component failed to render${ssr ? ' server-side' : ''}</strong>
+      <strong style="font-size: 1.2em;">Component failed to render${ssr ? ' server-side' : ' client-side'}</strong>
     
       <p class="error-message"
         style="margin: 0.4rem 0 0.4rem;"