@csedl/svelte-on-rails 0.0.1 → 0.0.3

package/README.md

@@ -1,9 +1,11 @@
 # @csedl/svelte-on-rails
 
-It picks up svelte components rendered by [svelte-on-rails](https://gitlab.com/sedl/svelte-on-rails) rails gem and hydrates them.
+Works together with the [svelte-on-rails](https://gitlab.com/sedl/svelte-on-rails) gem.
 
 ## Installation
 
+First, you must have svelte and the gem running on your project, please follow the [gem](https://gitlab.com/sedl/svelte-on-rails) instructions.
+
 ```
 npm i @csedl/svelte-on-rails
 ```
@@ -18,45 +20,37 @@ const componentsRoot = '/javascript'
 
 // hydrate
 
-import {hydrateComponents} from "@csedl/svelte-on-rails";
-hydrateComponents(componentsRoot, components, false) // debug: true für Logs
-
-// build svelte custom elements
-
-import { startSvelteTags, cleanupCustomElements } from '@csedl/svelte-on-rails';
-startSvelteTags(componentsRoot, components, false); // debug: true für Logs
+import {initializeSvelteComponents} from "../javascript/node-module";
+initializeSvelteComponents(componentsRoot, components, true)
 
 // Turbo-Event-Listener
 document.addEventListener('turbo:load', () => {
-    startSvelteTags(componentsRoot, components, false);
-});
-document.addEventListener('turbo:before-cache', () => {
-    cleanupCustomElements(false); // debug: true für Logs
+  initializeSvelteComponents(componentsRoot, components, true);
 });
 ```
 
 ## How it works
 
-The helper from the `svelte-on-rails` gem adds the attributes
+The helper from the `svelte-on-rails` gem adds attributes like
 
-- `data-not-hydrated-svelte-component=myComponentFileName` if the component is rendered server side («SSR») (usually on initial request)
-- renders a tag like `my-component-file-name-svelte` if the component is rendered for a custom element (on hotwired/turbo request)
-- `data-props={..}`
+- 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 the element or initializes the custom element
-- SSR:
-  - removes the `data-not-hydrated-svelte-component` attribute (in case of SSR)
-  - adds the attribute `data-svelte-hydrated='true'`
-- as custom element:
-  - adds the attribute `data-custom-element-initialized="my-component-file-name-svelte"`
+- hydrates or mounts 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
 
 - Svelte >= 5
+- tested with ruby 3.2.2 and rails 7.1
 
 ## Testing
 

package/index.js

@@ -1,5 +1,122 @@
+import { mount, hydrate, unmount } from 'svelte';
 
-export { hydrateComponents } from "./hydrateComponents";
+// Store for tracking initialized Svelte component instances
+const svelteInstances = new WeakMap();
 
-export { cleanupCustomElements, startSvelteTags } from "./mountCustomElements";
+/**
+ * Initializes Svelte components on elements with the specified class.
+ * @param {string} componentsRoot - Root path for component files
+ * @param {Object} components - Object containing imported Svelte components
+ * @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);
+    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 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}`);
+            continue; // Proceed to the next element
+        }
+        const component = components[componentPath].default;
+
+        // Parse props
+
+        let props = {};
+        const attrKey = 'data-props';
+        const propsString = element.getAttribute(attrKey);
+        try {
+            if (propsString) props = JSON.parse(propsString);
+        } catch (e) {
+            console.error(`[initializeSvelteComponents] Error parsing ${attrKey} ("${propsString}") for ${componentName}:`, e);
+            continue; // Proceed to the next element
+        }
+
+        try {
+            let instance;
+            if (action === 'mount') {
+                element.innerHTML = '';
+                instance = mount(component, {
+                    target: element,
+                    props,
+                    hydrate: false,
+                });
+                debugLog2(`Mounted successfully ${componentName}, parsed props:`, props, debug);
+            } else if (action === 'hydrate') {
+                instance = hydrate(component, {
+                    target: element,
+                    hydrate: true,
+                    props: props,
+                });
+                debugLog2(`Hydrated successfully ${componentName}, parsed props:`, debug);
+            } else {
+                console.error(`[initializeSvelteComponents] Unknown action: "${action}" for component ${componentName}`);
+                continue; // Proceed to the next element
+            }
+
+            // Store the instance for later cleanup
+
+            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);
+        }
+    }
+}
+
+/**
+ * Cleans up all initialized Svelte component instances.
+ */
+export function cleanupSvelteComponents(debug = false) {
+    const initializedClass = 'svelte-initialized';
+    const initializedElements = document.querySelectorAll(`[data-${initializedClass}]`);
+    debugLog(`Cleaning up ${initializedElements.length} initialized Svelte components`, debug);
+
+    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);
+        } catch (e) {
+            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
+        svelteInstances.delete(element);
+        element.removeAttribute('data-svelte-initialized');
+    }
+}
+
+function debugLog(msg, debug) {
+    if (debug) {
+        console.log(`[initializeSvelteComponents] ${msg}`);
+    }
+}
+
+
+function debugLog2(msg, object, debug) {
+    if (debug) {
+        console.log(`[initializeSvelteComponents] ${msg}`, object);
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "0.0.1",
-  "description": "Hydrates svelte components and handles svelte custom elements without shadow-dom, that are rendered from ruby-gem svelte-on-rails.",
+  "version": "0.0.3",
+  "description": "Hydrates or mounts svelte components that are rendered from ruby-gem svelte-on-rails.",
   "main": "index.js",
   "exports": {
     ".": "./index.js"

package/hydrateComponents.js

@@ -1,49 +0,0 @@
-import {hydrate} from "svelte";
-
-export function hydrateComponents(components_root, imported_components, debug = false) {
-
-    const selector = '[data-not-hydrated-svelte-component]';
-    const elements = document.querySelectorAll(selector);
-
-    if (elements.length === 0) {
-        debugLog(`found ${elements.length} elements with selector ${selector}, finishing process`, debug)
-        return
-    }
-
-    debugLog(`found ${elements.length} elements with selector ${selector}`, debug)
-
-    for (const path in imported_components) {
-        debugLog(`Having Svelte Path: «${path}»`, debug)
-
-        for (const element of elements) {
-            const filename = element.getAttribute('data-not-hydrated-svelte-component')
-            const check_path = `${components_root}/${filename}.svelte`.replace(/\/+/g, '/');
-
-
-            if (check_path === path) {
-                debugLog(`    ===> Found Svelte Filename: ${filename}`, debug)
-                const props = JSON.parse(element.getAttribute('data-props'));
-
-
-                hydrate(imported_components[path].default, {
-                    target: element,
-                    hydrate: true,
-                    props: props,
-                });
-
-
-                debugLog(`HYDRATED => ${filename}`, debug)
-                element.removeAttribute('data-not-hydrated-svelte-component')
-                element.setAttribute('data-svelte-hydrated', 'true')
-                debugLog(`    ===> «${check_path}» match!`, debug)
-            } else {
-                debugLog(`    ---> «${check_path}» does not match`, debug)
-            }
-        }
-    }
-}
-
-function debugLog(msg, debug) {
-    if (!debug) return;
-    console.log(`[hydrateComponents] ${msg}`)
-}

package/mountCustomElements.js

@@ -1,123 +0,0 @@
-// @/javascript/node-module/mountCustomElements.js
-import { mount, unmount } from 'svelte';
-
-// Map for tracking mounted instances
-const mountedInstances = new WeakMap();
-
-// Function to clean up existing instances
-function cleanupCustomElements(debug = false) {
-    if (debug) {
-        console.log('[mountCustomElements] Cleaning up existing custom elements');
-    }
-
-    document.querySelectorAll('[data-custom-element-initialized]').forEach((element) => {
-        if (mountedInstances.has(element)) {
-            if (debug) {
-                console.log(`[mountCustomElements] Unmounting element: ${element.tagName.toLowerCase()}`);
-            }
-            unmount(mountedInstances.get(element));
-            mountedInstances.delete(element);
-            element.removeAttribute('data-custom-element-initialized');
-        }
-    });
-}
-
-// Function to format the tag name
-function dashString(str) {
-    const a = str.replace(/([a-z])([A-Z])/g, '$1-$2'); // CamelCase to hyphen
-    const b = a.replace(/[\s_]+/g, '-'); // Spaces or underscores to hyphen
-    const d = b.toLowerCase(); // Convert to lowercase
-    const e = d.replace(/^-+|-+$/g, ''); // Remove leading or trailing hyphens
-    const f = e.replaceAll('/', '--'); // Slashes to double hyphens
-    return f + '-svelte';
-}
-
-// Main function to initialize Svelte tags
-function initializeSvelteTags(componentsRoot, components, debug = false) {
-    if (debug) {
-        console.log('[mountCustomElements] Initializing custom elements with root:', componentsRoot);
-    }
-
-    // Clean up old instances
-    cleanupCustomElements(debug);
-
-    // Iterate over all imported components
-    for (const path in components) {
-        const component = components[path].default;
-
-        // Generate tag names from the path
-        const regex = new RegExp(`^${componentsRoot}(/*)`);
-        const tagName = dashString(path.replace(regex, '').replace(/\.svelte$/, ''));
-
-        // Check if tagName is valid (must contain at least one hyphen)
-        if (!tagName || !tagName.includes('-')) {
-            console.error(`[mountCustomElements] Invalid tag name: ${tagName} for path: ${path}`);
-            continue;
-        }
-
-        if (debug) {
-            console.log(`[mountCustomElements] Processing component: ${tagName}`);
-        }
-
-        // Find all elements with the generated tag name
-        const elements = document.querySelectorAll(`${tagName}:not([data-custom-element-initialized])`);
-
-        elements.forEach((element) => {
-            if (debug) {
-                console.log(`[mountCustomElements] Found element: ${tagName}`);
-            }
-
-            // Read data-props attribute
-            const propsString = element.getAttribute('data-props');
-            let props = {};
-
-            try {
-                // Parse JSON from data-props
-                if (propsString) {
-                    props = JSON.parse(propsString);
-                    if (debug) {
-                        console.log(`[mountCustomElements] Parsed props for ${tagName}:`, props);
-                    }
-                }
-            } catch (e) {
-                console.error(`[mountCustomElements] Error parsing data-props for ${tagName}:`, e);
-            }
-
-            // Clear the element to ensure no old content remains
-            element.innerHTML = '';
-
-            // Initialize the Svelte component with mount
-            try {
-                if (debug) {
-                    console.log(`[mountCustomElements] Mounting ${tagName}`);
-                }
-                const instance = mount(component, {
-                    target: element, // Render directly into the element (no Shadow DOM)
-                    props: props || {}, // Pass parsed props or empty object
-                    hydrate: false, // No hydration
-                });
-
-                // Store the instance and mark the element
-                mountedInstances.set(element, instance);
-                element.setAttribute('data-custom-element-initialized', tagName);
-
-                if (debug) {
-                    console.log(`[mountCustomElements] Successfully mounted ${tagName}`);
-                }
-            } catch (e) {
-                console.error(`[mountCustomElements] Error mounting ${tagName}:`, e);
-            }
-        });
-    }
-}
-
-// Exported function to start the initialization
-export function startSvelteTags(componentsRoot, components, debug = false) {
-    if (debug) {
-        console.log('[mountCustomElements] Starting custom elements initialization');
-    }
-    initializeSvelteTags(componentsRoot, components, debug);
-}
-
-// Export cleanupCustomElements for manual cleanup (e.g., for turbo:before-cache)
-export { cleanupCustomElements };