@csedl/svelte-on-rails 10.0.4 → 10.1.1

package/README.md

@@ -1,17 +1,5 @@
 # @csedl/svelte-on-rails
 
-Works together with the [svelte-on-rails](https://svelte-on-rails.dev) gem.
-
-Versions here do not have many updates here, and are more dependend on the versions from the gem.
-So, i added no releases here.
-Checkout Release Notes on the gems repository.
-
-## Prerequisites
-
-- Please follow the [gem](https://svelte-on-rails.dev) instructions.
-- Svelte >= 5
-- tested with ruby 3.2.2 and rails 7.1
-
 ## Installation
 
 ```
@@ -24,32 +12,14 @@ Add to your entrypoint file, like `application.js`
 import '@csedl/svelte-on-rails';
 ```
 
-For configs you can do
-
-```javascript
-import { SvelteOnRails } from '@csedl/svelte-on-rails'
-SvelteOnRails.debug = true
-
-// source for svelte components for hydration
-// by default svelte components are mapped by sourceCodeDir from vite.json
-// which usually is app/frontend/**/*.svelte
-SvelteOnRails.includeRailsViews = true
-// when set to true, additionaly, app/views/**/*.svelte is mapped
-// => this is a 2016 new introduced feature, status: experimental
-```
-
-The `SvelteOnRails` Object is accessible by `window.SvelteOnRails`
-
-## What it contains or does
+## What it does
 
 - It includes a stimulus controller that handles the initializing event of the svelte component,
 rendered by the ruby gem. Initializing means that the component is mounted or hydrated, together
 with the properties given by the ruby gem.
-- After disappearing, the component is unmounted by the disconnect event of stimulus.
 
-**Turbo-Streams**
+## Description
 
-- For working with `Turbo Streams` it contains a stimulus controller that dispatches actions
-on Svelte Components.
-- Helper for adding eventListeners on Svelte Components.
+Please follow [svelte-on-rails docs](https://svelte-on-rails.dev) for more information.
 
+The repository is shared with the gem [svelte-on-rails](https://gitlab.com/sedl/svelte-on-rails) (monorepo).

package/index.js

@@ -1,7 +1,10 @@
 import SvelteOnRails from "./src/config.js";
 import {Application} from "@hotwired/stimulus"
 import {dispatchSvelteStreamEvent} from "./src/streams/dispatch-event.js";
-import {actionCableDebugLog} from "./src/logger.js";
+import {streamDebugLog} from "./src/logger.js";
+
+
+//console.error('test-error')
 
 if (!window.Stimulus) {
     window.Stimulus = Application.start()
@@ -19,4 +22,4 @@ import turboStreamController from "./src/streams/turbo-stream-controller.js";
 
 Stimulus.register('svelte-on-rails-turbo-stream', turboStreamController)
 
-export { SvelteOnRails, dispatchSvelteStreamEvent, actionCableDebugLog };
+export { SvelteOnRails, dispatchSvelteStreamEvent, streamDebugLog };

package/package.json

@@ -1,24 +1,23 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "10.0.4",
+  "version": "10.1.1",
   "description": "Hydrates Svelte components from the svelte-on-rails gem and can handle Actions received by Web Socket.",
   "main": "index.js",
   "type": "module",
   "exports": {
     ".": "./index.js",
     "./src/streams/componentStreamListener": "./src/streams/componentStreamListener.js",
-    "./src/dispatch-event": "./src/streams/dispatch-event.js"
+    "./src/streams/dispatch-event.js": "./src/streams/dispatch-event.js",
+    "./src/logger.js": "./src/logger.js",
+    "./src/config.js": "./src/config.js"
   },
   "peerDependencies": {
     "@hotwired/stimulus": "^3.2.2",
     "svelte": "^5.50.0"
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/sedl/csedl-svelte-on-rails.git"
+    "url": "https://gitlab.com/sedl/svelte-on-rails"
   },
   "keywords": [
     "svelte",
@@ -28,7 +27,7 @@
   "author": "Christian Sedlmair",
   "license": "LICENSE.md",
   "bugs": {
-    "url": "https://gitlab.com/sedl/csedl-svelte-on-rails/-/issues"
+    "url": "https://gitlab.com/sedl/svelte-on-rails/-/issues"
   },
   "homepage": "https://svelte-on-rails.dev"
 }

package/src/config.js

@@ -1,11 +1,62 @@
+import {streamDebugLog} from "./logger.js";
 // src/config.js
 let _debug = false;
-let _includeRailsViews = false;
-const _componentModules = import.meta.glob("/**/*.svelte", {eager: false, import: 'default'});
+
+let _lazyComponents = {}
+let _defaultComponents = import.meta.glob("/**/*.svelte", { eager: false, import: "default" });
 
 import {debugLog} from "./logger.js";
 
 const SvelteOnRails = {
+
+    async loadComponent(componentKey) {
+
+        // fetch loader from store
+
+        let components
+        if (Object.keys(_lazyComponents).length === 0) {
+            debugLog("lazyComponents not set: falling back to built-in «import.meta.glob(['/**/*.svelte'], {eager: false, import: 'default'})»");
+            components = _defaultComponents;
+        } else {
+            debugLog(`[svelte-on-rails] using given lazyComponents`);
+            components = _lazyComponents
+        }
+
+
+        const loader = components[componentKey];
+        console.log(`[svelte-on-rails:debug] loader`, loader);
+        if (!loader) {
+            throw new Error(`[svelte-on-rails] Component not found: ${componentKey} (relative to vites sourceCodeDir / frontend-folder)`);
+            //return;
+        } else {
+            console.log(`[svelte-on-rails] Component found: ${componentKey}`);
+        }
+
+        // load and validate component
+
+        let comp;
+        if (loader.prototype) {
+            console.warn(`[svelte-on-rails] Components should be lazy loaded. Did you use vite.meta.glob(..., {eager: true})?`);
+            comp = loader;
+        } else {
+            comp = await loader();
+            if (typeof comp !== 'function') {
+                throw new Error(`[svelte-on-rails] Component is not a function: ${componentKey}\nYou may need to use vite.meta.glob(..., {...import: "default"})`);
+            }
+        }
+
+        // finish
+
+        console.log(`[svelte-on-rails:debug] Component loaded:`, comp);
+        return comp;
+    },
+
+    set lazyComponents(value) {
+        console.log(`[svelte-on-rails:debug] lazyComponents set:`, value);
+        _lazyComponents = value;
+    },
+
+
     get debug() {
         return _debug;
     },
@@ -13,23 +64,6 @@ const SvelteOnRails = {
         _debug = !!value;
         debugLog(`Debug mode: ${_debug ? "enabled" : "disabled"}`);
     },
-
-    // includeRailsViews
-    get includeRailsViews() {               // ← clearer, reads like a question
-        return _includeRailsViews;
-    },
-    set includeRailsViews(value) {
-        _includeRailsViews = !!value;
-        debugLog(`Include components within app/views: ${_includeRailsViews ? "enabled" : "disabled"}`);
-        if (_includeRailsViews) {
-            const _viewComponents = import.meta.glob("/../../app/views/**/*.svelte", {eager: false, import: "default"});
-            Object.assign(_componentModules, _viewComponents);
-            debugLog(`loaded view-components: `);
-        }
-    },
-    get components() {
-        return(_componentModules);
-    }
 };
 
 window.SvelteOnRails = SvelteOnRails;

package/src/hydrate-build/cleanupSvelteComponent.js

@@ -7,19 +7,20 @@ const svelteInstances = new WeakMap();
 /**
  * Cleans up all initialized Svelte component instances.
  */
-export function cleanupSvelteComponent(element, debug = false) {
+export function cleanupSvelteComponent(element) {
     try {
         const instance = svelteInstances.get(element);
         if (instance) {
             unmount(instance); // Destroy the Svelte component instance in Svelte 5
-            debugLog(`Successfully unmounted Svelte component for element:`, element, debug);
+            debugLog(`Successfully unmounted Svelte component for element:`, element);
             element.removeAttribute('data-svelte-initialized'); // Reset initialized state
             svelteInstances.delete(element); // Remove from WeakMap
         } else {
-            debugLog(`No Svelte instance found for element:`, element, debug);
+            let comps = document.getElementsByClassName('svelte-component')
+            debugLog(`Actual ${comps.length} components on the page. No Svelte instance found`, element);
         }
     } catch (e) {
-        console.error(`[cleanupSvelteComponents] Error unmounting Svelte component for element:`, e);
+        console.error(`[svelte-on-rails:stream] Error unmounting Svelte component for element:`, e);
         // Fallback: Clear element content to prevent stale content
         element.innerHTML = '';
     }

package/src/hydrate-build/initializeSvelteComponent.js

@@ -17,20 +17,11 @@ export async function initializeSvelteComponent(element) {
         return;
     }
 
-    debugLog(`start :${action} for ${componentKey}`);
+    debugLog(`start ${action} for ${componentKey}`);
 
     // load the component from lazy import
 
-    const loader = SvelteOnRails.components[componentKey];
-    if (!loader) {
-        console.error(`[svelte-on-rails] Component not found: ${componentKey} (relative to vites sourceCodeDir / frontend-folder)`);
-        return;
-    }
-    debugLog(`found: ${componentKey} from lazy-imported components`);
-
-    const Component = await loader();
-    debugLog(`loaded successfully: ${componentKey}`);
-
+    const Component = await SvelteOnRails.loadComponent(componentKey);
 
     // Parse props (unchanged)
     let props = {};
@@ -39,7 +30,7 @@ export async function initializeSvelteComponent(element) {
         try {
             props = JSON.parse(propsString);
         } catch (e) {
-            console.error(`Error parsing data-props for ${componentKey}:`, e);
+            console.error(`[svelte-on-rails] Error parsing data-props for ${componentKey}:`, e);
         }
     }
 

package/src/hydrate-build/svelte-on-rails-controller.js

@@ -8,7 +8,7 @@ export default class extends Controller {
         const stat = this.element.getAttribute('data-svelte-status');
         if (stat === 'do-not-hydrate-build-me') return;
 
-        initializeSvelteComponent(this.element, false);
+        initializeSvelteComponent(this.element, false).then(r => {});
 
     }
 

package/src/logger.js

@@ -4,16 +4,8 @@ export function debugLog(message, object, object2) {
     log( null, message, object, object2);
 }
 
-export function receiveTurboStreamDebugLog(message, object, object2) {
-        log('receive-turbo-stream', message, object, object2);
-}
-
-export function receiveStreamEventDebugLog(message, object, object2) {
-    log( 'receive-stream-event', message, object, object2);
-}
-
-export function actionCableDebugLog(message, object, object2) {
-    log( 'action-cable', message, object, object2);
+export function streamDebugLog(message, object, object2) {
+    log( 'stream', message, object, object2);
 }
 
 function log(namespace, message, object, object2) {

package/src/streams/componentStreamListener.js

@@ -1,4 +1,3 @@
-///import {receiveStreamEventDebugLog} from "./logger.js";
 
 // componentStreamListener.js (in your npm package)
 export function addComponentStreamListener(node, callback) {
@@ -7,7 +6,7 @@ export function addComponentStreamListener(node, callback) {
     const wrapper = node.closest('.svelte-component');
 
     if (!wrapper) {
-        console.error('[svelte-on-rails:svelte-component] No wrapping element with class .svelte-component found!');
+        console.error('[svelte-on-rails:stream] No wrapping element with class .svelte-component found!');
         return;
     }
 

package/src/streams/dispatch-event.js

@@ -1,4 +1,4 @@
-import {receiveTurboStreamDebugLog} from "../logger.js";
+import {streamDebugLog} from "../logger.js";
 
 export function dispatchSvelteStreamEvent(args) {
 
@@ -9,7 +9,7 @@ export function dispatchSvelteStreamEvent(args) {
         throw new Error(`[svelte-on-rails:dispatch-event] Invalid keys found: ${invalidKeys.join(', ')}. Allowed keys are: ${allowedKeys.join(', ')}.`);
     }
 
-    receiveTurboStreamDebugLog(`parsed arguments:`, args)
+    streamDebugLog(`parsed arguments:`, args)
 
     const eventName = args.event || 'stream-action'
     const customEvent = new CustomEvent(eventName, {detail: args['eventDetail']})
@@ -27,12 +27,12 @@ function dispatchByComponent(args, event) {
     // find components
     let components
     if (args.component) {
-        const componentsSelector = `[data-svelte-component="${args.component}"]`
+        const componentsSelector = `[data-component="${args.component}"]`
         components = document.querySelectorAll(componentsSelector)
-        receiveTurboStreamDebugLog(`found ${components.length} components by selector «${componentsSelector}»`, components)
+            streamDebugLog(`found ${components.length} components by selector «${componentsSelector}»`, components)
     } else {
         components = Array.from(document.getElementsByClassName('svelte-component'))
-        receiveTurboStreamDebugLog(`found ${components.length} components by class-name «svelte-component» (no components selector given)`, components)
+        streamDebugLog(`found ${components.length} components by class-name «svelte-component» (no components selector given)`, components)
     }
 
     // dispatch elements
@@ -42,14 +42,14 @@ function dispatchByComponent(args, event) {
         if (args.selector) {
             const elements = component.querySelectorAll(args.selector)
             if (elements.length === 0) {
-                receiveTurboStreamDebugLog(`no elements found by selector «${args.selector}», within:`, component)
+                streamDebugLog(`no elements found by selector «${args.selector}», within:`, component)
             }
             elements.forEach(element => {
-                receiveTurboStreamDebugLog(`dispatch event «${event.type}» on element:`, element)
+                streamDebugLog(`dispatch event «${event.type}» on element:`, element)
                 element.dispatchEvent(event)
             })
         } else {
-            receiveTurboStreamDebugLog(`dispatch event «${event.type}» on components wrapper:`, component)
+            streamDebugLog(`dispatch event «${event.type}» on components wrapper:`, component)
             component.dispatchEvent(event)
         }
 
@@ -64,12 +64,12 @@ function dispatchBySelector(args, event) {
     const elements = document.querySelectorAll(args.selector)
 
     if (elements.length === 0) {
-        receiveTurboStreamDebugLog(`no elements found by selector «${args.selector}»`)
+        streamDebugLog(`no elements found by selector «${args.selector}»`)
     }
 
     elements.forEach(element => {
 
-        receiveTurboStreamDebugLog(`dispatch event «${event.type}» on element:`, element)
+        streamDebugLog(`dispatch event «${event.type}» on element:`, element)
         element.dispatchEvent(event)
 
 

package/src/streams/turbo-stream-controller.js

@@ -1,5 +1,5 @@
 import {Controller} from "@hotwired/stimulus"
-import {receiveTurboStreamDebugLog} from "../logger.js";
+import {streamDebugLog} from "../logger.js";
 import {dispatchSvelteStreamEvent} from "./dispatch-event.js";
 
 export default class extends Controller {
@@ -7,7 +7,7 @@ export default class extends Controller {
     connect() {
 
         const argsBase64 = this.element.getAttribute('data-args')
-        receiveTurboStreamDebugLog('turbo-stream received with base-64 encoded string:', argsBase64)
+        streamDebugLog('turbo-stream received with base-64 encoded string:', argsBase64)
 
         const decodedString = this.decodeBase64(argsBase64)
 

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/node-module.iml" filepath="$PROJECT_DIR$/.idea/node-module.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/node-module.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>