@csedl/svelte-on-rails 0.0.3 → 0.0.5

package/README.md

@@ -15,37 +15,42 @@ npm i @csedl/svelte-on-rails
 A file like `initializeSvelte.js` that is imported into your entrypoint file
 
 ```javascript
-const components = import.meta.glob('/javascript/**/*.svelte', { eager: true })
-const componentsRoot = '/javascript'
+import { initializeSvelteComponents, cleanupSvelteComponents } from 'svelte-on-rails';
 
-// hydrate
+const components = import.meta.glob('/javascript/**/*.svelte', { eager: true });
+const componentsRoot = '/javascript';
 
-import {initializeSvelteComponents} from "../javascript/node-module";
-initializeSvelteComponents(componentsRoot, components, true)
+// Initialize Svelte components
+initializeSvelteComponents(componentsRoot, components, true);
 
-// Turbo-Event-Listener
+// Turbo event listener for page load
 document.addEventListener('turbo:load', () => {
-  initializeSvelteComponents(componentsRoot, components, true);
+    initializeSvelteComponents(componentsRoot, components, true);
+});
+
+// Turbo event listener for cleanup before page cache
+document.addEventListener('turbo:before-cache', () => {
+    cleanupSvelteComponents(true);
 });
 ```
 
+=> the latter boolean is for debugging logs to the console
+
 ## How it works
 
 The helper from the `svelte-on-rails` gem adds attributes like
 
 - class `svelte-on-rails-not-initialized-component`
 - attribute `data-svelte-component="HelloWorld"`
-- attribute `data-svelte-on-rails-initialize-action="hydrate"` if the element is SSR, otherwise `mount`
 - attribute `data-props={items:['one','two','three']}`
 
 to the wrapping element. Then, this lib 
 
 - picks up these elements
 - picks the props, parses them by `JSON.parse(..)` and provides them to the element as svelte props
-- hydrates or mounts the element
+- If the element is empty, it mountes, otherwise it hydrates the element
 - adds the attribute `data-svelte-initialized='true'`
 - removes the class `svelte-on-rails-not-initialized-component`
-- removes the attribute `data-svelte-on-rails-initialize-action`
 
 ## Requirements
 

package/index.js

@@ -1,4 +1,4 @@
-import { mount, hydrate, unmount } from 'svelte';
+import {mount, hydrate, unmount} from 'svelte';
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();
@@ -10,24 +10,20 @@ const svelteInstances = new WeakMap();
  * @param {boolean} debug - Enable debug logging
  */
 export function initializeSvelteComponents(componentsRoot, components, debug = false) {
-
     const virginClass = 'svelte-on-rails-not-initialized-component';
     const virginElements = document.getElementsByClassName(virginClass);
-    debugLog(`Found ${virginElements.length} elements with class «${virginClass}»`, debug);
+    debugLog(`Found ${virginElements.length} elements with class "${virginClass}"`, debug);
     if (virginElements.length === 0) return;
 
     // Convert live HTMLCollection to a static array
     const elementsArray = Array.from(virginElements);
 
     // Iterate over the static array
-
     for (const element of elementsArray) {
-
-        const action = element.getAttribute('data-svelte-on-rails-initialize-action');
+        const action = element.innerHTML ? 'hydrate' : 'mount';
         const componentName = element.getAttribute('data-svelte-component');
 
         // Check component
-
         const componentPath = `${componentsRoot}/${componentName}.svelte`.replace(/\/+/g, '/');
         if (!components[componentPath]) {
             console.error(`[initializeSvelteComponents] Component not found for path: ${componentPath}`);
@@ -36,7 +32,6 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
         const component = components[componentPath].default;
 
         // Parse props
-
         let props = {};
         const attrKey = 'data-props';
         const propsString = element.getAttribute(attrKey);
@@ -56,33 +51,32 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
                     props,
                     hydrate: false,
                 });
-                debugLog2(`Mounted successfully ${componentName}, parsed props:`, props, debug);
+                debugLog2(`Mounted successfully ${componentName}, with parsed props:`, props, debug);
             } else if (action === 'hydrate') {
                 instance = hydrate(component, {
                     target: element,
                     hydrate: true,
                     props: props,
                 });
-                debugLog2(`Hydrated successfully ${componentName}, parsed props:`, debug);
+                debugLog2(`Hydrated successfully ${componentName}, with parsed props:`, props, debug);
             } else {
                 console.error(`[initializeSvelteComponents] Unknown action: "${action}" for component ${componentName}`);
                 continue; // Proceed to the next element
             }
 
-            // Store the instance for later cleanup
-
+            // Store instance and set attributes only after successful mount/hydrate
             svelteInstances.set(element, instance);
-
             element.classList.remove(virginClass);
-            element.setAttribute('data-svelte-initialized', true);
-            element.removeAttribute('data-svelte-on-rails-initialize-action');
-
+            element.setAttribute('data-svelte-initialized', 'true');
         } catch (e) {
             console.error(`[initializeSvelteComponents] Error ${action} ${componentName}:`, e);
         }
     }
 }
 
+/**
+ * Cleans up all initialized Svelte component instances.
+ */
 /**
  * Cleans up all initialized Svelte component instances.
  */
@@ -93,16 +87,24 @@ export function cleanupSvelteComponents(debug = false) {
 
     for (const element of initializedElements) {
         try {
-            // In Svelte 5, use unmount to clean up the component
-            unmount(element);
-            debugLog2(`Unmounted Svelte component for element:`, element, debug);
+            // Check if an instance exists for the element
+            const instance = svelteInstances.get(element);
+            if (instance) {
+                // In Svelte 5, use unmount to destroy the instance
+                unmount(instance);
+                debugLog2(`Unmounted Svelte component for element:`, element, debug);
+            } else {
+                debugLog(`No instance found for element, skipping unmount:`, element, debug);
+            }
         } catch (e) {
-            console.error(`[cleanupSvelteComponents] Error unmounting component for element:`, e);
+            if (debug) {
+                console.error(`[cleanupSvelteComponents] Error unmounting component for element:`, e);
+            }
             // Fallback: Clear the element's content to ensure cleanup
             element.innerHTML = '';
         }
 
-        // Remove the instance from storage
+        // Remove the instance from storage and clean up attributes
         svelteInstances.delete(element);
         element.removeAttribute('data-svelte-initialized');
     }
@@ -114,7 +116,6 @@ function debugLog(msg, debug) {
     }
 }
 
-
 function debugLog2(msg, object, debug) {
     if (debug) {
         console.log(`[initializeSvelteComponents] ${msg}`, object);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Hydrates or mounts svelte components that are rendered from ruby-gem svelte-on-rails.",
   "main": "index.js",
   "exports": {