@csedl/svelte-on-rails 12.0.2 → 12.1.1

package/README.md

@@ -22,4 +22,4 @@ with the properties given by the ruby gem.
 
 Please follow [svelte-on-rails docs](https://svelte-on-rails.dev) for more information.
 
-The repository is shared with the gem [svelte-on-rails](https://gitlab.com/sedl/svelte-on-rails) (monorepo).
+The repository is shared with the gem [SOR](https://gitlab.com/sedl/svelte-on-rails) (monorepo).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "12.0.2",
+  "version": "12.1.1",
   "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
         }
 
@@ -25,33 +25,33 @@ export const SvelteOnRails = {
         const loader = components[componentKey];
 
         if (!loader) {
-            throw new Error(`[svelte-on-rails] Component not found: «${componentKey}»\nAvailable imported Components are:\n\n+++\n • ${Object.keys(components).join('\n • ')}\n+++\n`);
+            throw new Error(`[SOR] 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
 
         let comp;
         if (loader.prototype) {
-            console.warn(`[svelte-on-rails] Components should be lazy loaded. Did you use vite.meta.glob(..., {eager: true})?`);
+            console.warn(`[SOR] Components should be lazy loaded. Did you use vite.meta.glob(..., {eager: true})?`);
             comp = loader;
         } else {
             comp = await loader();
             if (typeof comp !== 'function') {
-                throw new Error(`[svelte-on-rails] Component is not a function: ${componentKey}\nYou may need to use vite.meta.glob(..., {...import: "default"})`);
+                throw new Error(`[SOR] Component is not a function: ${componentKey}\nYou may need to use vite.meta.glob(..., {...import: "default"})`);
             }
         }
 
         // finish
 
-        debugLog(`[svelte-on-rails:debug] Component loaded:`, comp);
+        debugLog(`Component loaded:`, comp);
         return comp;
     },
 
     set lazyComponents(value) {
-        debugLog(`[svelte-on-rails:debug] lazyComponents set:`, value);
+        debugLog(`lazyComponents set:`, value);
         _lazyComponents = value;
     },
 

package/src/hydrate-build/initializeSvelteComponent.js

@@ -3,9 +3,6 @@ import {debugLog} from "../logger.js";
 import {SvelteOnRails} from "../config.js";
 import {componentRenderError} from "../utils.js";
 
-// Store for tracking initialized Svelte component instances
-const svelteInstances = new WeakMap();
-
 export async function initializeSvelteComponent(element) {
 
     // Decide mount vs hydrate
@@ -14,7 +11,7 @@ export async function initializeSvelteComponent(element) {
     // fetch the component path
     const componentKey = element.getAttribute("data-component")?.trim();
     if (!componentKey) {
-        console.warn("[svelte-on-rails] Missing data-component attribute");
+        console.warn("[SOR] Missing data-component attribute");
         return;
     }
 
@@ -31,7 +28,7 @@ export async function initializeSvelteComponent(element) {
         try {
             props = JSON.parse(propsString);
         } catch (e) {
-            console.error(`[svelte-on-rails] Error parsing data-props for ${componentKey}:`, e);
+            console.error(`[SOR] Error parsing data-props for ${componentKey}:`, e);
         }
     }
 
@@ -45,13 +42,15 @@ export async function initializeSvelteComponent(element) {
             instance = hydrate(Component, {target: element, props});
         }
 
-        // Preparing for cleanup
-        svelteInstances.set(element, instance);
-
         element.setAttribute("data-svelte-status", "initialized");
-        debugLog(`Success: ${action} ${componentKey}`);
+        debugLog(`Success: ${action} ${componentKey}`, instance);
+        return {
+            instance: instance,
+            status: "SUCCESS",
+            componentName: componentKey,
+        };
     } catch (e) {
-        console.error(`[svelte-on-rails] Failed to ${action} ${componentKey}:`, e);
+        console.error(`[SOR] Failed to ${action} ${componentKey}:`, e);
         element.setAttribute("data-svelte-status", "error");
 
         element.innerHTML = componentRenderError(componentKey, e);

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

@@ -1,23 +1,32 @@
 import {Controller} from "@hotwired/stimulus"
 import {initializeSvelteComponent} from "./initializeSvelteComponent.js";
-import {cleanupSvelteComponent} from "./cleanupSvelteComponent.js";
+import {debugLog} from "../logger.js";
+import {unmount} from "svelte";
 
 export default class extends Controller {
 
-    connect() {
+    svelteInstance = {};
 
-        console.log('SVELTE CONNECT')
+    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 => {});
+        initializeSvelteComponent(this.element, false).then(r => {
+            this.svelteInstance = r
+            debugLog('HYDRATED', r)
+        });
 
     }
 
     disconnect() {
-
-        cleanupSvelteComponent(this.element, false);
+        const name = this.svelteInstance.componentName.split('/').pop();
+        const r = unmount(this.svelteInstance.instance);
+        debugLog(`disconnected ${name} ${typeof this.svelteInstance.instance}`, r)
 
     }
 

package/src/logger.js

@@ -11,14 +11,14 @@ export function streamDebugLog(message, object, object2) {
 function log(namespace, message, object, object2) {
     if (SvelteOnRails.debug) {
 
-        const nmsp = (namespace ? `:${namespace}` : '');
+        const nmsp = (namespace ? ` ${namespace}:` : '');
 
         if (object2) {
-            console.log(`[svelte-on-rails${nmsp}] ${message}`, object, object2);
+            console.log(`[SOR]${nmsp} ${message}`, object, object2);
         } else if (object) {
-            console.log(`[svelte-on-rails${nmsp}] ${message}`, object);
+            console.log(`[SOR]${nmsp} ${message}`, object);
         } else {
-            console.log(`[svelte-on-rails${nmsp}] ${message}`);
+            console.log(`[SOR]${nmsp} ${message}`);
         }
     }
 }

package/src/ssr/render.js

@@ -9,13 +9,13 @@ const compiledComponentPath = process.argv[2];
 
 (async () => {
     console.log(`${performance.now()}<time>`);
-    console.log(`[svelte-on-rails:debug] awaiting load component => «${compiledComponentPath}»`);
+    console.log(`[SOR] awaiting load component => «${compiledComponentPath}»`);
     const compiledComponent = await loadComponentModule(compiledComponentPath);
 
-    console.log(`[svelte-on-rails:debug] Component loaded: «${compiledComponent}»`);
+    console.log(`[SOR] Component loaded: «${compiledComponent}»`);
 
     const props = await readPropsFromStdin();
-    console.log(`[svelte-on-rails:debug] props read: «${JSON.stringify(props)}»`);
+    console.log(`[SOR] props read: «${JSON.stringify(props)}»`);
 
     try {
         const { body, head } = render(compiledComponent, { props });
@@ -26,7 +26,7 @@ const compiledComponentPath = process.argv[2];
             head: head || '',
         };
         console.log(`<time>${performance.now()}`);
-        console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
+        console.log('[SOR] successful json response: ' + JSON.stringify(res));
     } catch (error) {
 
         const res = {
@@ -36,7 +36,7 @@ const compiledComponentPath = process.argv[2];
         };
 
         console.log(`<time>${performance.now()}`);
-        console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
+        console.log('[SOR] successful json response: ' + JSON.stringify(res));
     }
 })();
 

package/src/streams/componentStreamListener.js

@@ -6,7 +6,7 @@ export function addComponentStreamListener(node, callback) {
     const wrapper = node.closest('.svelte-component');
 
     if (!wrapper) {
-        console.error('[svelte-on-rails:stream] No wrapping element with class .svelte-component found!');
+        console.error('[SOR] No wrapping element with class .svelte-component found!');
         return;
     }
 

package/src/streams/dispatch-event.js

@@ -6,7 +6,7 @@ export function dispatchSvelteStreamEvent(args) {
     const argKeys = Object.keys(args);
     const invalidKeys = argKeys.filter(key => !allowedKeys.includes(key));
     if (invalidKeys.length > 0) {
-        throw new Error(`[svelte-on-rails:dispatch-event] Invalid keys found: ${invalidKeys.join(', ')}. Allowed keys are: ${allowedKeys.join(', ')}.`);
+        throw new Error(`[SOR] Invalid keys found: ${invalidKeys.join(', ')}. Allowed keys are: ${allowedKeys.join(', ')}.`);
     }
 
     streamDebugLog(`parsed arguments:`, args)

package/src/utils.js

@@ -4,7 +4,8 @@ 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 style="
+    <div class="svelte-on-rails-component-error${ssr ? '-server-side' : ''}"
+    style="
       padding: 1.5rem;
       margin: 1rem 0;
       border: 2px solid #ef4444;
@@ -13,12 +14,17 @@ 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</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;">
+       <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>

package/src/hydrate-build/cleanupSvelteComponent.js

@@ -1,29 +0,0 @@
-import { unmount } from 'svelte';
-import { debugLog } from "../logger.js";
-
-// Store for tracking initialized Svelte component instances
-const svelteInstances = new WeakMap();
-
-/**
- * Cleans up all initialized Svelte component instances.
- */
-export function cleanupSvelteComponent(element) {
-    try {
-        const instance = svelteInstances.get(element);
-        if (instance) {
-            unmount(instance).then(()=>{
-                debugLog(`Successfully unmounted Svelte component for element:`, element);
-            }); // Destroy the Svelte component instance in Svelte 5
-            debugLog(`Unmounted Svelte component for element:`, element);
-            element.removeAttribute('data-svelte-initialized'); // Reset initialized state
-            svelteInstances.delete(element); // Remove from WeakMap
-        } else {
-            let comps = document.getElementsByClassName('svelte-component')
-            debugLog(`Actual ${comps.length} components on the page. No Svelte instance found`, element);
-        }
-    } catch (e) {
-        console.error(`[svelte-on-rails:stream] Error unmounting Svelte component for element:`, e);
-        // Fallback: Clear element content to prevent stale content
-        element.innerHTML = '';
-    }
-}