@csedl/svelte-on-rails 7.1.1 → 10.0.0

package/README.md

@@ -2,6 +2,10 @@
 
 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.
@@ -25,6 +29,13 @@ 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`
@@ -42,12 +53,3 @@ with the properties given by the ruby gem.
 on Svelte Components.
 - Helper for adding eventListeners on Svelte Components.
 
-## Options
-
-by setting 
-
-```javascript
-window.debugSvelteOnRailsComponents = true
-```
-
-you have a console log of the component initialization and disconnection.

package/index.js

@@ -1,5 +1,5 @@
-import {Application} from "@hotwired/stimulus"
 import SvelteOnRails from "./src/config.js";
+import {Application} from "@hotwired/stimulus"
 import {dispatchSvelteStreamEvent} from "./src/dispatch-event.js";
 import {actionCableDebugLog} from "./src/logger.js";
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@csedl/svelte-on-rails",
-  "version": "7.1.1",
-  "description": "Mounts Svelte components from the svelte-on-rails gem and handles Actions received by Web Socket.",
+  "version": "10.0.0",
+  "description": "Hydrates Svelte components from the svelte-on-rails gem and can handle Actions received by Web Socket.",
   "main": "index.js",
   "type": "module",
   "exports": {
@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "@hotwired/stimulus": "^3.2.2",
-    "svelte": "^5.25.12"
+    "svelte": "^5.50.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -26,7 +26,7 @@
     "ssr"
   ],
   "author": "Christian Sedlmair",
-  "license": "Copyright 2028 + MIT, see: LICENSE.md",
+  "license": "LICENSE.md",
   "bugs": {
     "url": "https://gitlab.com/sedl/csedl-svelte-on-rails/-/issues"
   },

package/src/config.js

@@ -1,5 +1,6 @@
 // src/config.js
 let _debug = false; // Internal state to track debug
+let _includeRailsViews = false;
 
 import {debugLog} from "./logger.js";
 
@@ -8,9 +9,15 @@ const SvelteOnRails = {
         return _debug;
     },
     set debug(value) {
-        _debug = value;
-
-        debugLog('debugging active')
+        _debug = !!value;
+        debugLog(`Debug mode: ${_debug ? "enabled" : "disabled"}`);
+    },
+    get includeRailsViews() {               // ← clearer, reads like a question
+        return _includeRailsViews;
+    },
+    set includeRailsViews(value) {
+        _includeRailsViews = !!value;
+        debugLog(`Rails views as components: ${_includeRailsViews ? "enabled" : "disabled"}`);
     },
 };
 

package/src/initializeSvelteComponent.js

@@ -1,30 +1,35 @@
 import {mount, hydrate} from 'svelte';
-import { debugLog } from "./logger.js";
+import {debugLog} from "./logger.js";
+import SvelteOnRails from "./config.js";
 
 // Store for tracking initialized Svelte component instances
 const svelteInstances = new WeakMap();
 
-const allComponents = import.meta.glob('/**/*.svelte', {eager: true});
 
 
-export function initializeSvelteComponent(element, debug = false) {
 
-    const action = element.innerHTML ? 'hydrate' : 'mount';
-    const componentName = element.getAttribute('data-svelte-component');
+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");
+    }
 
-    // Check component
-    const componentPath = `${componentName}.svelte`.replace(/\/+/g, '/');
+    const action = element.innerHTML ? 'hydrate' : 'mount';
 
 
-    //  fetch component
-    let component
-    for (const cmp in allComponents) {
-        if (cmp === componentPath) {
-            component = allComponents[cmp].default;
-            debugLog(`found component «${cmp}»`, component)
-        } else {
-        }
+    // 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;
     }
 
 
@@ -43,15 +48,17 @@ export function initializeSvelteComponent(element, debug = false) {
     try {
         let instance;
         if (action === 'mount') {
+            debugLog(`Start mounting ${componentName} (${typeof component})`);
             element.innerHTML = '';
-            instance = mount(component, {
+            instance = mount(foundComponent.default, {
                 target: element,
                 props,
                 hydrate: false,
             });
             debugLog(`Mounted successfully ${componentName}, with parsed props:`, props, debug);
         } else if (action === 'hydrate') {
-            instance = hydrate(component, {
+            debugLog(`Start hydrating: ${componentName} (${typeof component})`);
+            instance = hydrate(foundComponent.default, {
                 target: element,
                 hydrate: true,
                 props: props,

package/src/ssr/loadComponent.js

@@ -0,0 +1,25 @@
+import {fileURLToPath} from 'node:url';
+import {dirname, resolve} from 'node:path';
+
+
+export async function loadComponentModule(compiledFile) {
+    // Get the directory of the current script
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+
+    try {
+        // Convert relative path to absolute path
+        const absolutePath = resolve(__dirname, compiledFile);
+
+        // Convert absolute path to a file URL
+        const modulePath = `file://${absolutePath}`;
+
+        // Import the module
+        const module = await import(modulePath);
+        return module.default;
+    } catch (error) {
+        console.error(`=> compiledFile: «${compiledFile}»`);
+        console.error(`[loadComponentModule] Error loading component from ${compiledFile}:`, error);
+        process.exit(1);
+    }
+}

package/src/ssr/readStdin.js

@@ -0,0 +1,15 @@
+export function readPropsFromStdin() {
+    return new Promise((resolve, reject) => {
+        let input = '';
+        process.stdin.setEncoding('utf8');
+        process.stdin.on('data', (chunk) => (input += chunk));
+        process.stdin.on('end', () => {
+            try {
+                resolve(JSON.parse(input));
+            } catch (error) {
+                reject(new Error(`Error parsing JSON from STDIN: ${error.message}\nInput: «${input}»`));
+            }
+        });
+        process.stdin.on('error', (error) => reject(new Error(`Error reading STDIN: ${error.message}`)));
+    });
+}

package/src/ssr/render.js

@@ -0,0 +1,38 @@
+
+import { render } from 'svelte/server';
+import { readPropsFromStdin } from "./readStdin.js";
+import { loadComponentModule } from "./loadComponent.js";
+
+const compiledComponentPath = process.argv[2];
+
+
+(async () => {
+    console.log(`[svelte-on-rails:debug] awaiting load component => «${compiledComponentPath}»`);
+    const compiledComponent = await loadComponentModule(compiledComponentPath);
+
+    console.log(`[svelte-on-rails:debug] component read: «${compiledComponent}»`);
+
+    const props = await readPropsFromStdin();
+    console.log(`[svelte-on-rails:debug] props read: «${JSON.stringify(props)}»`);
+
+    try {
+        // Svelte 5+ SSR rendering (runes-compatible; signals omitted on server for perf)
+        // Returns { body: string, head: string } — no 'html' or 'css' props
+        const { body, head } = render(compiledComponent, { props });
+
+        const res = {
+            status: 'SUCCESS',
+            html: body, // Use 'body' as the main HTML content (replaces old 'html')
+            head: head || '', // Optional: Include <head> content (styles, meta, etc.)
+            // Add bodyAttributes or other result props if needed in future
+        };
+
+        console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
+    } catch (error) {
+        console.error('[svelte-on-rails:debug] Error rendering component:', error);
+        process.exit(1);
+    }
+})();
+
+
+

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

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