@csedl/svelte-on-rails 0.0.6 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "0.0.6",
+  "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/debugUtils.js

@@ -8,4 +8,18 @@ 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

@@ -1,5 +1,5 @@
 import { mount, hydrate } from 'svelte';
-import { debugLog, debugLog2 } from './debugUtils.js';
+import { debugLog, debugLog2, checkComponentsRoot } from './debugUtils.js';
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();
@@ -19,6 +19,9 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
     // 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';
@@ -27,7 +30,12 @@ export function initializeSvelteComponents(componentsRoot, components, debug = f
         // Check component
         const componentPath = `${componentsRoot}/${componentName}.svelte`.replace(/\/+/g, '/');
         if (!components[componentPath]) {
-            console.error(`[initializeSvelteComponents] Component not found for path: ${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;