@csedl/svelte-on-rails 10.0.0 → 10.0.2

package/index.js

@@ -1,6 +1,6 @@
 import SvelteOnRails from "./src/config.js";
 import {Application} from "@hotwired/stimulus"
-import {dispatchSvelteStreamEvent} from "./src/dispatch-event.js";
+import {dispatchSvelteStreamEvent} from "./src/streams/dispatch-event.js";
 import {actionCableDebugLog} from "./src/logger.js";
 
 if (!window.Stimulus) {
@@ -9,13 +9,13 @@ if (!window.Stimulus) {
 
 // initialize svelte-on-rails
 
-import controller from "./src/svelte-on-rails-controller.js";
+import controller from "./src/hydrate-build/svelte-on-rails-controller.js";
 
 Stimulus.register('svelte-on-rails', controller)
 
 // initialize stream actions
 
-import turboStreamController from "./src/turbo-stream-controller.js";
+import turboStreamController from "./src/streams/turbo-stream-controller.js";
 
 Stimulus.register('svelte-on-rails-turbo-stream', turboStreamController)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "10.0.0",
+  "version": "10.0.2",
   "description": "Hydrates Svelte components from the svelte-on-rails gem and can handle Actions received by Web Socket.",
   "main": "index.js",
   "type": "module",

package/src/config.js

@@ -1,6 +1,7 @@
 // src/config.js
-let _debug = false; // Internal state to track debug
+let _debug = false;
 let _includeRailsViews = false;
+const _componentModules = import.meta.glob("/**/*.svelte", {eager: false, import: 'default'});
 
 import {debugLog} from "./logger.js";
 
@@ -12,13 +13,23 @@ 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(`Rails views as components: ${_includeRailsViews ? "enabled" : "disabled"}`);
+        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/{cleanupSvelteComponent.js → hydrate-build/cleanupSvelteComponent.js}

@@ -1,5 +1,5 @@
 import { unmount } from 'svelte';
-import { debugLog } from "./logger.js";
+import { debugLog } from "../logger.js";
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();

package/src/hydrate-build/initializeSvelteComponent.js

@@ -0,0 +1,65 @@
+import {mount, hydrate} from "svelte";
+import {debugLog} from "../logger.js";
+import SvelteOnRails from "../config.js";
+
+// Store for tracking initialized Svelte component instances
+const svelteInstances = new WeakMap();
+
+export async function initializeSvelteComponent(element) {
+
+    // Decide mount vs hydrate
+    const action = element.innerHTML.trim() ? "hydrate" : "mount";
+
+    // fetch the component path
+    const componentKey = element.getAttribute("data-component")?.trim();
+    if (!componentKey) {
+        console.warn("[svelte-on-rails] Missing data-component attribute");
+        return;
+    }
+
+    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}`);
+
+
+    // Parse props (unchanged)
+    let props = {};
+    const propsString = element.getAttribute("data-props");
+    if (propsString) {
+        try {
+            props = JSON.parse(propsString);
+        } catch (e) {
+            console.error(`Error parsing data-props for ${componentKey}:`, e);
+        }
+    }
+
+
+    try {
+        let instance;
+        if (action === "mount") {
+            element.innerHTML = ""; // clear any server-rendered placeholder
+            instance = mount(Component, {target: element, props});
+        } else {
+            instance = hydrate(Component, {target: element, props});
+        }
+
+        // Preparing for cleanup
+        svelteInstances.set(element, instance);
+
+        element.setAttribute("data-svelte-status", "initialized");
+        debugLog(`Success: ${action} ${componentKey}`);
+    } catch (e) {
+        console.error(`[svelte-on-rails] Failed to ${action} ${componentKey}:`, e);
+        element.setAttribute("data-svelte-status", "error");
+    }
+}

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

@@ -1,13 +1,12 @@
 import {Controller} from "@hotwired/stimulus"
-import {initializeSvelteComponent} from "./initializeSvelteComponent";
-import {cleanupSvelteComponent} from "./cleanupSvelteComponent";
-import {debugLog} from "./logger.js";
+import {initializeSvelteComponent} from "./initializeSvelteComponent.js";
+import {cleanupSvelteComponent} from "./cleanupSvelteComponent.js";
 
 export default class extends Controller {
 
     connect() {
         const stat = this.element.getAttribute('data-svelte-status');
-        if (stat === 'do-not-hydrate-me') return;
+        if (stat === 'do-not-hydrate-build-me') return;
 
         initializeSvelteComponent(this.element, false);
 

package/src/{dispatch-event.js → streams/dispatch-event.js}

@@ -1,4 +1,4 @@
-import {receiveTurboStreamDebugLog} from "./logger.js";
+import {receiveTurboStreamDebugLog} from "../logger.js";
 
 export function dispatchSvelteStreamEvent(args) {
 

package/src/{turbo-stream-controller.js → streams/turbo-stream-controller.js}

@@ -1,5 +1,5 @@
 import {Controller} from "@hotwired/stimulus"
-import {receiveTurboStreamDebugLog} from "./logger.js";
+import {receiveTurboStreamDebugLog} from "../logger.js";
 import {dispatchSvelteStreamEvent} from "./dispatch-event.js";
 
 export default class extends Controller {

package/src/initializeSvelteComponent.js

@@ -1,78 +0,0 @@
-import {mount, hydrate} from 'svelte';
-import {debugLog} from "./logger.js";
-import SvelteOnRails from "./config.js";
-
-// Store for tracking initialized Svelte component instances
-const svelteInstances = new WeakMap();
-
-
-
-
-export function initializeSvelteComponent(element, debug = false) {
-
-    const incl = SvelteOnRails.includeRailsViews;
-    let allComponents
-    if (SvelteOnRails.includeRailsViews) {
-        allComponents = import.meta.glob(['/**/*.svelte', '/../../app/views/**/*.svelte'], {eager: true});
-        debugLog("Svelte components loaded from vite-source + app/views");
-    } else {
-        allComponents = import.meta.glob(['/**/*.svelte'], {eager: true});
-        debugLog("Svelte components loaded from vite-source");
-    }
-
-    const action = element.innerHTML ? 'hydrate' : 'mount';
-
-
-    // find component
-    const componentName = element.getAttribute('data-component');
-    debugLog(`Start ${action}: ${componentName}`);
-    let foundComponent = allComponents[componentName];
-    if (!foundComponent) {
-        console.error(`[svelte-on-rails:initializeSvelteComponent] component not found: «${componentName}»\navailable components:\n${Object.keys(allComponents).join('\n')}`);
-        return;
-    }
-
-
-    // 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);
-    }
-
-
-    // Mount/hydrate component
-    try {
-        let instance;
-        if (action === 'mount') {
-            debugLog(`Start mounting ${componentName} (${typeof component})`);
-            element.innerHTML = '';
-            instance = mount(foundComponent.default, {
-                target: element,
-                props,
-                hydrate: false,
-            });
-            debugLog(`Mounted successfully ${componentName}, with parsed props:`, props, debug);
-        } else if (action === 'hydrate') {
-            debugLog(`Start hydrating: ${componentName} (${typeof component})`);
-            instance = hydrate(foundComponent.default, {
-                target: element,
-                hydrate: true,
-                props: props,
-            });
-            debugLog(`Hydrated successfully ${componentName}, with parsed props:`, props, debug);
-        } else {
-            console.error(`[initializeSvelteComponents] Unknown action: "${action}" for component ${componentName}`);
-        }
-
-
-        // Store instance and set attributes only after successful mount/hydrate
-        svelteInstances.set(element, instance);
-        element.setAttribute('data-svelte-status', 'initialized');
-    } catch (e) {
-        console.error(`[initializeSvelteComponents] Error ${action} ${componentName}:`, e);
-    }
-}