@csedl/svelte-on-rails 2.0.2 → 5.0.0

package/README.md

@@ -20,13 +20,27 @@ Add to your entrypoint file, like `application.js`
 import '@csedl/svelte-on-rails';
 ```
 
-## How it works
+For configs you can do
 
-It includes a stimulus controller that handles the initializing event of the svelte component,
+```javascript
+import { SvelteOnRails } from '@csedl/svelte-on-rails'
+SvelteOnRails.debug = true
+```
+
+The `SvelteOnRails` Object is accessible by `window.SvelteOnRails`
+
+## What it contains or 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**
 
-After disappearing, the component is unmounted by the disconnect event of stimulus.
+- For working with `Turbo Streams` it contains a stimulus controller that dispatches actions
+on Svelte Components.
+- Helper for adding eventListeners on Svelte Components.
 
 ## Options
 

package/index.js

@@ -1,9 +1,20 @@
-import { Application } from "@hotwired/stimulus"
+import {Application} from "@hotwired/stimulus"
+import SvelteOnRails from "./src/config.js";
 
-window.Stimulus = Application.start()
+if (!window.Stimulus) {
+    window.Stimulus = Application.start()
+}
 
-import controller from "./src/svelte-on-rails-controller";
+// initialize svelte-on-rails
+
+import controller from "./src/svelte-on-rails-controller.js";
 
 Stimulus.register('svelte-on-rails', controller)
 
+// initialize stream actions
+
+import turboStreamController from "./src/turbo-stream-controller.js";
+
+Stimulus.register('svelte-on-rails-turbo-stream', turboStreamController)
 
+export { SvelteOnRails };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "2.0.2",
-  "description": "Hydrates or mounts Svelte components rendered by the svelte-on-rails Ruby gem.",
+  "version": "5.0.0",
+  "description": "Mounts Svelte components from the svelte-on-rails gem and handles their Turbo Stream Actions.",
   "main": "index.js",
   "type": "module",
   "exports": {
-    ".": "./index.js"
+    ".": "./index.js",
+    "./src/componentStreamListener": "./src/componentStreamListener.js"
   },
   "peerDependencies": {
     "@hotwired/stimulus": "^3.2.2",

package/src/cleanupSvelteComponent.js

@@ -1,4 +1,5 @@
 import { unmount } from 'svelte';
+import { debugLog } from "./logger.js";
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();
@@ -11,11 +12,11 @@ export function cleanupSvelteComponent(element, debug = false) {
         const instance = svelteInstances.get(element);
         if (instance) {
             unmount(instance); // Destroy the Svelte component instance in Svelte 5
-            debugLog2(`Successfully unmounted Svelte component for element:`, element, debug);
+            debugLog(`Successfully unmounted Svelte component for element:`, element, debug);
             element.removeAttribute('data-svelte-initialized'); // Reset initialized state
             svelteInstances.delete(element); // Remove from WeakMap
         } else {
-            debugLog2(`No Svelte instance found for element:`, element, debug);
+            debugLog(`No Svelte instance found for element:`, element, debug);
         }
     } catch (e) {
         console.error(`[cleanupSvelteComponents] Error unmounting Svelte component for element:`, e);
@@ -23,10 +24,3 @@ export function cleanupSvelteComponent(element, debug = false) {
         element.innerHTML = '';
     }
 }
-
-
-export function debugLog2(msg, object) {
-    if (window.debugSvelteOnRailsComponents) {
-        console.log(`[cleanupSvelteComponent] ${msg}`, object);
-    }
-}

package/src/componentStreamListener.js

@@ -0,0 +1,28 @@
+///import {receiveStreamEventDebugLog} from "./logger.js";
+
+// componentStreamListener.js (in your npm package)
+export function addComponentStreamListener(node, callback) {
+
+    // Find the wrapping element
+    const wrapper = node.closest('.svelte-component');
+
+    if (!wrapper) {
+        console.error('[svelte-on-rails:svelte-component] No wrapping element with class .svelte-component found!');
+        return;
+    }
+
+    // Event handler for Turbo::StreamsChannel events
+    const handleAction = (event) => {
+        callback(event); // Call the provided callback with the event
+    };
+
+    // Attach the event listener to the wrapper
+    wrapper.addEventListener('stream-action', handleAction);
+
+    // Cleanup function
+    return {
+        destroy() {
+            wrapper.removeEventListener('stream-action', handleAction);
+        }
+    };
+}

package/src/config.js

@@ -0,0 +1,19 @@
+// src/config.js
+let _debug = false; // Internal state to track debug
+
+import {debugLog} from "./logger.js";
+
+const SvelteOnRails = {
+    get debug() {
+        return _debug;
+    },
+    set debug(value) {
+        _debug = value;
+
+        debugLog('debugging active')
+    },
+};
+
+window.SvelteOnRails = SvelteOnRails;
+
+export default SvelteOnRails;

package/src/initializeSvelteComponent.js

@@ -1,4 +1,5 @@
 import {mount, hydrate} from 'svelte';
+import { debugLog } from "./logger.js";
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();
@@ -21,7 +22,7 @@ export function initializeSvelteComponent(element, debug = false) {
     for (const cmp in allComponents) {
         if (cmp === componentPath) {
             component = allComponents[cmp].default;
-            debugLog2(`found component «${cmp}»`, component)
+            debugLog(`found component «${cmp}»`, component)
         } else {
         }
     }
@@ -48,14 +49,14 @@ export function initializeSvelteComponent(element, debug = false) {
                 props,
                 hydrate: false,
             });
-            debugLog2(`Mounted successfully ${componentName}, with parsed props:`, props, debug);
+            debugLog(`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);
+            debugLog(`Hydrated successfully ${componentName}, with parsed props:`, props, debug);
         } else {
             console.error(`[initializeSvelteComponents] Unknown action: "${action}" for component ${componentName}`);
         }
@@ -68,9 +69,3 @@ export function initializeSvelteComponent(element, debug = false) {
         console.error(`[initializeSvelteComponents] Error ${action} ${componentName}:`, e);
     }
 }
-
-export function debugLog2(msg, object) {
-    if (window.debugSvelteOnRailsComponents) {
-        console.log(`[initializeSvelteComponents] ${msg}`, object);
-    }
-}

package/src/logger.js

@@ -0,0 +1,28 @@
+import SvelteOnRails from './config.js'
+
+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);
+}
+
+function log(namespace, message, object, object2) {
+    if (window.SvelteOnRails.debug) {
+
+        const nmsp = (namespace ? `:${namespace}` : '');
+
+        if (object2) {
+            console.log(`[svelte-on-rails${nmsp}] ${message}`, object, object2);
+        } else if (object) {
+            console.log(`[svelte-on-rails${nmsp}] ${message}`, object);
+        } else {
+            console.log(`[svelte-on-rails${nmsp}] ${message}`);
+        }
+    }
+}

package/src/turbo-stream-controller.js

@@ -0,0 +1,56 @@
+import {Controller} from "@hotwired/stimulus"
+import {receiveTurboStreamDebugLog} from "./logger.js";
+
+export default class extends Controller {
+
+    connect() {
+
+        const argsBase64 = this.element.getAttribute('data-args')
+        receiveTurboStreamDebugLog('turbo-stream received with base-64 encoded string:', argsBase64)
+
+        const decodedString = this.decodeBase64(argsBase64)
+
+        let args = JSON.parse(decodedString)
+
+        receiveTurboStreamDebugLog(`parsed arguments:`, args)
+        let components
+        if (args.component) {
+            const componentsSelector = `[data-svelte-component="${args.component}"]`
+            components = document.querySelectorAll(componentsSelector)
+            receiveTurboStreamDebugLog(`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)
+        }
+
+        const customEvent = new CustomEvent(args.event, {detail: args['eventDetail']})
+
+        components.forEach(component => {
+
+            if (args.selector) {
+                const elements = component.querySelectorAll(args.selector)
+                if (elements.length === 0) {
+                    receiveTurboStreamDebugLog(`no elements found by selector «${args.selector}», within:`, component)
+                }
+                elements.forEach(element => {
+                    receiveTurboStreamDebugLog(`dispatch event «${args.event}» on element:`, element)
+                    element.dispatchEvent(customEvent)
+                })
+            } else {
+                receiveTurboStreamDebugLog(`dispatch event «${args.event}» on components wrapper:`, component)
+                component.dispatchEvent(customEvent)
+            }
+
+
+        })
+
+        this.element.remove()
+    }
+
+    decodeBase64(base64String) {
+        const binaryString = atob(base64String.trim())
+        const bytes = new Uint8Array([...binaryString].map(char => char.charCodeAt(0)))
+        return new TextDecoder("utf-8").decode(bytes)
+    }
+
+}