@csedl/svelte-on-rails 12.0.1 → 12.1.0

package/bin/svelte-ssr-server.js

@@ -82,7 +82,7 @@ const server = http.createServer(async (req, res) => {
                 logger(`body => «${request_body}»`);
                 res.writeHead(500, { 'Content-Type': 'application/json' });
                 res.end(JSON.stringify({
-                    html: componentRenderError(basename, err),
+                    html: componentRenderError(basename, err, true),
                     head: ''
                 }));
             }

package/package.json

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

package/src/config.js

@@ -17,7 +17,7 @@ export const SvelteOnRails = {
             debugLog("lazyComponents not set: falling back to default «import.meta.glob(['/**/*.svelte'], {eager: false, import: 'default'})»");
             components = _defaultComponents;
         } else {
-            debugLog(`[svelte-on-rails] using given lazyComponents`);
+            debugLog(`using given lazyComponents`);
             components = _lazyComponents
         }
 
@@ -28,7 +28,7 @@ export const SvelteOnRails = {
             throw new Error(`[svelte-on-rails] Component not found: «${componentKey}»\nAvailable imported Components are:\n\n+++\n • ${Object.keys(components).join('\n • ')}\n+++\n`);
             //return;
         } else {
-            debugLog(`[svelte-on-rails] Component found: ${componentKey}`);
+            debugLog(`Component found: ${componentKey}`);
         }
 
         // load and validate component

package/src/hydrate-build/svelte-on-rails-controller.js

@@ -1,15 +1,17 @@
 import {Controller} from "@hotwired/stimulus"
 import {initializeSvelteComponent} from "./initializeSvelteComponent.js";
 import {cleanupSvelteComponent} from "./cleanupSvelteComponent.js";
+import {debugLog} from "../logger.js";
 
 export default class extends Controller {
 
     connect() {
 
-        console.log('SVELTE CONNECT')
-
         const stat = this.element.getAttribute('data-svelte-status');
-        if (stat === 'do-not-hydrate-build-me') return;
+        if (stat === 'do-not-hydrate-me') {
+            debugLog(`Skipping hydration of component ${this.element.getAttribute('data-component')}`);
+            return
+        };
 
         initializeSvelteComponent(this.element, false).then(r => {});
 

package/src/ssr/render.js

@@ -31,7 +31,7 @@ const compiledComponentPath = process.argv[2];
 
         const res = {
             status: 'SUCCESS',
-            html: componentRenderError(compiledComponentPath, error),
+            html: componentRenderError(compiledComponentPath, error, true),
             head: '',
         };
 

package/src/utils.js

@@ -1,6 +1,11 @@
-export function componentRenderError(component, error) {
+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="
+    <div class="svelte-on-rails-component-error${ssr ? '-server-side' : ''}"
+    style="
       padding: 1.5rem;
       margin: 1rem 0;
       border: 2px solid #ef4444;
@@ -9,13 +14,18 @@ export function componentRenderError(component, error) {
       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>
+      <strong style="font-size: 1.2em;">Component failed to render${ssr ? ' server-side' : ''}</strong>
+    
+      <p class="error-message"
+        style="margin: 0.4rem 0 0.4rem;"
+      >
         ${error.message || 'Unknown rendering error'}
       </p>
-      <small style="color: #7f1d1d; opacity: 0.8;">
-        Check browser console for full details. (Dev mode only?)
+       <div style="display: block;">
+        <code style="margin: 0.75rem 0 0;">${component}</code><br>
+      </div>
+      <small style="color: #7f1d1d; opacity: 0.8; margin-top: 1rem; display: block;">
+        ${ssr ? ssrHint : hint}
       </small>
     </div>
   `)