@csedl/svelte-on-rails 0.0.5 → 0.0.7

package/README.md

@@ -2,17 +2,19 @@
 
 Works together with the [svelte-on-rails](https://gitlab.com/sedl/svelte-on-rails) gem.
 
-## Installation
+## Prerequisites
+
+- Please follow the [gem](https://gitlab.com/sedl/svelte-on-rails) instructions.
+- Svelte >= 5
+- tested with ruby 3.2.2 and rails 7.1
 
-First, you must have svelte and the gem running on your project, please follow the [gem](https://gitlab.com/sedl/svelte-on-rails) instructions.
+## Installation
 
 ```
 npm i @csedl/svelte-on-rails
 ```
 
-## Usage example with Rails/turbo/vite
-
-A file like `initializeSvelte.js` that is imported into your entrypoint file
+Create a file like `initializeSvelte.js` and import it into your entrypoint file, like `application.js`
 
 ```javascript
 import { initializeSvelteComponents, cleanupSvelteComponents } from 'svelte-on-rails';
@@ -34,7 +36,8 @@ document.addEventListener('turbo:before-cache', () => {
 });
 ```
 
-=> the latter boolean is for debugging logs to the console
+- The last boolean argument is for debugging logs to the console 
+- I have inserted very detailed error logs, so please check your browser console for logs.
 
 ## How it works
 
@@ -52,16 +55,8 @@ to the wrapping element. Then, this lib
 - adds the attribute `data-svelte-initialized='true'`
 - removes the class `svelte-on-rails-not-initialized-component`
 
-## Requirements
-
-- Svelte >= 5
-- tested with ruby 3.2.2 and rails 7.1
-
 ## Testing
 
-I developed this all on Rails-7, together with `vite_rails`.
-
-
 There is a [rails project](https://gitlab.com/sedl/svelte-on-rails-tests) with testings (based on playwright) where the gem and this package are tested together.
 
 The gem includes its own tests.

package/index.js

@@ -1,123 +1,4 @@
-import {mount, hydrate, unmount} from 'svelte';
 
-// Store for tracking initialized Svelte component instances
-const svelteInstances = new WeakMap();
+export {initializeSvelteComponents} from "./src/initializeSvelteComponents";
 
-/**
- * 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.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}`);
-            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}, with parsed props:`, props, debug);
-            } else if (action === 'hydrate') {
-                instance = hydrate(component, {
-                    target: element,
-                    hydrate: true,
-                    props: props,
-                });
-                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 instance and set attributes only after successful mount/hydrate
-            svelteInstances.set(element, instance);
-            element.classList.remove(virginClass);
-            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.
- */
-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 {
-            // 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) {
-            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 and clean up attributes
-        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);
-    }
-}
+export {cleanupSvelteComponents} from "./src/cleanupSvelteComponents";

package/package.json

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

package/src/cleanupSvelteComponents.js

@@ -0,0 +1,38 @@
+import { unmount } from 'svelte';
+import { debugLog, debugLog2 } from './debugUtils.js';
+
+// Store for tracking initialized Svelte component instances
+const svelteInstances = new WeakMap();
+
+/**
+ * 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 {
+            // 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) {
+            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 and clean up attributes
+        svelteInstances.delete(element);
+        element.removeAttribute('data-svelte-initialized');
+    }
+}

package/src/debugUtils.js

@@ -0,0 +1,25 @@
+export function debugLog(msg, debug) {
+    if (debug) {
+        console.log(`[initializeSvelteComponents] ${msg}`);
+    }
+}
+
+export function debugLog2(msg, object, debug) {
+    if (debug) {
+        console.log(`[initializeSvelteComponents] ${msg}`, object);
+    }
+}
+
+export function checkComponentsRoot(componentsRoot, firstImport) {
+    const reg = new RegExp(`^${componentsRoot}`);
+
+    if (!reg.test(firstImport)) {
+        console.error(
+            `[initializeSvelteComponents] ERROR\nThe componentsRoot («${componentsRoot}») does not match.\n` +
+            `The first found import is: «${firstImport}».\n` +
+            `components root must equal the beginning of the import path, example:\n` +
+            `componentsRoot: «/javascript», and ` +
+            `import: «/javascript/components/MyComponent.svelte» => would work`
+        );
+    }
+}

package/src/initializeSvelteComponents.js

@@ -0,0 +1,84 @@
+import { mount, hydrate } from 'svelte';
+import { debugLog, debugLog2, checkComponentsRoot } from './debugUtils.js';
+
+// Store for tracking initialized Svelte component instances
+const svelteInstances = new WeakMap();
+
+/**
+ * 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);
+
+    // Check if componentsRoot is setup correctly
+    checkComponentsRoot(componentsRoot, Object.keys(components)[0]);
+
+    // Iterate over the static array
+    for (const element of elementsArray) {
+        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] ERROR\n` +
+                `Component not found for path: «${componentPath}»\n` +
+                `Imported paths are:\n` +
+                `«${Object.keys(components).join('»\n«')}»`
+            );
+            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}, with parsed props:`, props, debug);
+            } else if (action === 'hydrate') {
+                instance = hydrate(component, {
+                    target: element,
+                    hydrate: true,
+                    props: props,
+                });
+                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 instance and set attributes only after successful mount/hydrate
+            svelteInstances.set(element, instance);
+            element.classList.remove(virginClass);
+            element.setAttribute('data-svelte-initialized', 'true');
+        } catch (e) {
+            console.error(`[initializeSvelteComponents] Error ${action} ${componentName}:`, e);
+        }
+    }
+}