@csedl/svelte-on-rails 0.0.4 → 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();
@@ -20,7 +20,7 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
 
     // 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
@@ -58,7 +58,7 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
                     hydrate: true,
                     props: props,
                 });
-                debugLog2(`Hydrated successfully ${componentName}, with 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
@@ -68,7 +68,6 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
             svelteInstances.set(element, instance);
             element.classList.remove(virginClass);
             element.setAttribute('data-svelte-initialized', 'true');
-            element.removeAttribute('data-svelte-on-rails-initialize-action');
         } catch (e) {
             console.error(`[initializeSvelteComponents] Error ${action} ${componentName}:`, e);
         }

package/package.json

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