@csedl/svelte-on-rails 12.2.0 → 12.3.1

package/bin/svelte-ssr-server.js

@@ -1,10 +1,7 @@
-
 import http from 'node:http';
-import fs   from 'node:fs';
+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 {render} from 'svelte/server';
 
 const SOCKET_PATH = process.argv[2];
 const PORT = (/^\d+$/.test(SOCKET_PATH) ? SOCKET_PATH : null);
@@ -24,7 +21,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 +31,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 +45,50 @@ 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({
-                    html: componentRenderError(basename, err, true),
-                    head: ''
+                    status: 'FAILED',
+                    errorLog: errorLog
                 }));
             }
         });
@@ -91,18 +96,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 +123,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.1",
   "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,43 @@
-
-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";
 
 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 module = await import(`file://${compiledComponentPath}`);
+
+        const compiledComponent = module.default;
+        if (!compiledComponent) {
+            throw new Error(`Module at ${compiledComponentPath} does not export a default component`);
+        }
 
-    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',
-            html: componentRenderError(compiledComponentPath, error, true),
-            head: '',
+            status: 'FAILED',
         };
 
-        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="client-side-svelte-render-error"
     style="
       padding: 1.5rem;
       margin: 1rem 0;

package/src/ssr/loadComponent.js

@@ -1,25 +0,0 @@
-import {fileURLToPath} from 'node:url';
-import {dirname, resolve} from 'node:path';
-
-
-export async function loadComponentModule(compiledFile) {
-    // Get the directory of the current script
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = dirname(__filename);
-
-    try {
-        // Convert relative path to absolute path
-        const absolutePath = resolve(__dirname, compiledFile);
-
-        // Convert absolute path to a file URL
-        const modulePath = `file://${absolutePath}`;
-
-        // Import the module
-        const module = await import(modulePath);
-        return module.default;
-    } catch (error) {
-        console.error(`=> compiledFile: «${compiledFile}»`);
-        console.error(`[loadComponentModule] Error loading component from ${compiledFile}:`, error);
-        process.exit(1);
-    }
-}