@csedl/svelte-on-rails 0.0.1

package/README.md

@@ -0,0 +1,68 @@
+# @csedl/svelte-on-rails
+
+It picks up svelte components rendered by [svelte-on-rails](https://gitlab.com/sedl/svelte-on-rails) rails gem and hydrates them.
+
+## 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
+
+```javascript
+const components = import.meta.glob('/javascript/**/*.svelte', { eager: true })
+const componentsRoot = '/javascript'
+
+// hydrate
+
+import {hydrateComponents} from "@csedl/svelte-on-rails";
+hydrateComponents(componentsRoot, components, false) // debug: true für Logs
+
+// build svelte custom elements
+
+import { startSvelteTags, cleanupCustomElements } from '@csedl/svelte-on-rails';
+startSvelteTags(componentsRoot, components, false); // debug: true für Logs
+
+// Turbo-Event-Listener
+document.addEventListener('turbo:load', () => {
+    startSvelteTags(componentsRoot, components, false);
+});
+document.addEventListener('turbo:before-cache', () => {
+    cleanupCustomElements(false); // debug: true für Logs
+});
+```
+
+## How it works
+
+The helper from the `svelte-on-rails` gem adds the attributes
+
+- `data-not-hydrated-svelte-component=myComponentFileName` if the component is rendered server side («SSR») (usually on initial request)
+- renders a tag like `my-component-file-name-svelte` if the component is rendered for a custom element (on hotwired/turbo request)
+- `data-props={..}`
+
+to the wrapping element. Then, this lib 
+
+- picks up these elements
+- picks the props, parses them by `JSON.parse(..)` and provides them to the element as svelte props
+- hydrates the element or initializes the custom element
+- SSR:
+  - removes the `data-not-hydrated-svelte-component` attribute (in case of SSR)
+  - adds the attribute `data-svelte-hydrated='true'`
+- as custom element:
+  - adds the attribute `data-custom-element-initialized="my-component-file-name-svelte"`
+
+## Requirements
+
+- Svelte >= 5
+
+## 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/hydrateComponents.js

@@ -0,0 +1,49 @@
+import {hydrate} from "svelte";
+
+export function hydrateComponents(components_root, imported_components, debug = false) {
+
+    const selector = '[data-not-hydrated-svelte-component]';
+    const elements = document.querySelectorAll(selector);
+
+    if (elements.length === 0) {
+        debugLog(`found ${elements.length} elements with selector ${selector}, finishing process`, debug)
+        return
+    }
+
+    debugLog(`found ${elements.length} elements with selector ${selector}`, debug)
+
+    for (const path in imported_components) {
+        debugLog(`Having Svelte Path: «${path}»`, debug)
+
+        for (const element of elements) {
+            const filename = element.getAttribute('data-not-hydrated-svelte-component')
+            const check_path = `${components_root}/${filename}.svelte`.replace(/\/+/g, '/');
+
+
+            if (check_path === path) {
+                debugLog(`    ===> Found Svelte Filename: ${filename}`, debug)
+                const props = JSON.parse(element.getAttribute('data-props'));
+
+
+                hydrate(imported_components[path].default, {
+                    target: element,
+                    hydrate: true,
+                    props: props,
+                });
+
+
+                debugLog(`HYDRATED => ${filename}`, debug)
+                element.removeAttribute('data-not-hydrated-svelte-component')
+                element.setAttribute('data-svelte-hydrated', 'true')
+                debugLog(`    ===> «${check_path}» match!`, debug)
+            } else {
+                debugLog(`    ---> «${check_path}» does not match`, debug)
+            }
+        }
+    }
+}
+
+function debugLog(msg, debug) {
+    if (!debug) return;
+    console.log(`[hydrateComponents] ${msg}`)
+}

package/index.js

@@ -0,0 +1,5 @@
+
+export { hydrateComponents } from "./hydrateComponents";
+
+export { cleanupCustomElements, startSvelteTags } from "./mountCustomElements";
+

package/mountCustomElements.js

@@ -0,0 +1,123 @@
+// @/javascript/node-module/mountCustomElements.js
+import { mount, unmount } from 'svelte';
+
+// Map for tracking mounted instances
+const mountedInstances = new WeakMap();
+
+// Function to clean up existing instances
+function cleanupCustomElements(debug = false) {
+    if (debug) {
+        console.log('[mountCustomElements] Cleaning up existing custom elements');
+    }
+
+    document.querySelectorAll('[data-custom-element-initialized]').forEach((element) => {
+        if (mountedInstances.has(element)) {
+            if (debug) {
+                console.log(`[mountCustomElements] Unmounting element: ${element.tagName.toLowerCase()}`);
+            }
+            unmount(mountedInstances.get(element));
+            mountedInstances.delete(element);
+            element.removeAttribute('data-custom-element-initialized');
+        }
+    });
+}
+
+// Function to format the tag name
+function dashString(str) {
+    const a = str.replace(/([a-z])([A-Z])/g, '$1-$2'); // CamelCase to hyphen
+    const b = a.replace(/[\s_]+/g, '-'); // Spaces or underscores to hyphen
+    const d = b.toLowerCase(); // Convert to lowercase
+    const e = d.replace(/^-+|-+$/g, ''); // Remove leading or trailing hyphens
+    const f = e.replaceAll('/', '--'); // Slashes to double hyphens
+    return f + '-svelte';
+}
+
+// Main function to initialize Svelte tags
+function initializeSvelteTags(componentsRoot, components, debug = false) {
+    if (debug) {
+        console.log('[mountCustomElements] Initializing custom elements with root:', componentsRoot);
+    }
+
+    // Clean up old instances
+    cleanupCustomElements(debug);
+
+    // Iterate over all imported components
+    for (const path in components) {
+        const component = components[path].default;
+
+        // Generate tag names from the path
+        const regex = new RegExp(`^${componentsRoot}(/*)`);
+        const tagName = dashString(path.replace(regex, '').replace(/\.svelte$/, ''));
+
+        // Check if tagName is valid (must contain at least one hyphen)
+        if (!tagName || !tagName.includes('-')) {
+            console.error(`[mountCustomElements] Invalid tag name: ${tagName} for path: ${path}`);
+            continue;
+        }
+
+        if (debug) {
+            console.log(`[mountCustomElements] Processing component: ${tagName}`);
+        }
+
+        // Find all elements with the generated tag name
+        const elements = document.querySelectorAll(`${tagName}:not([data-custom-element-initialized])`);
+
+        elements.forEach((element) => {
+            if (debug) {
+                console.log(`[mountCustomElements] Found element: ${tagName}`);
+            }
+
+            // Read data-props attribute
+            const propsString = element.getAttribute('data-props');
+            let props = {};
+
+            try {
+                // Parse JSON from data-props
+                if (propsString) {
+                    props = JSON.parse(propsString);
+                    if (debug) {
+                        console.log(`[mountCustomElements] Parsed props for ${tagName}:`, props);
+                    }
+                }
+            } catch (e) {
+                console.error(`[mountCustomElements] Error parsing data-props for ${tagName}:`, e);
+            }
+
+            // Clear the element to ensure no old content remains
+            element.innerHTML = '';
+
+            // Initialize the Svelte component with mount
+            try {
+                if (debug) {
+                    console.log(`[mountCustomElements] Mounting ${tagName}`);
+                }
+                const instance = mount(component, {
+                    target: element, // Render directly into the element (no Shadow DOM)
+                    props: props || {}, // Pass parsed props or empty object
+                    hydrate: false, // No hydration
+                });
+
+                // Store the instance and mark the element
+                mountedInstances.set(element, instance);
+                element.setAttribute('data-custom-element-initialized', tagName);
+
+                if (debug) {
+                    console.log(`[mountCustomElements] Successfully mounted ${tagName}`);
+                }
+            } catch (e) {
+                console.error(`[mountCustomElements] Error mounting ${tagName}:`, e);
+            }
+        });
+    }
+}
+
+// Exported function to start the initialization
+export function startSvelteTags(componentsRoot, components, debug = false) {
+    if (debug) {
+        console.log('[mountCustomElements] Starting custom elements initialization');
+    }
+    initializeSvelteTags(componentsRoot, components, debug);
+}
+
+// Export cleanupCustomElements for manual cleanup (e.g., for turbo:before-cache)
+export { cleanupCustomElements };

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@csedl/svelte-on-rails",
+  "version": "0.0.1",
+  "description": "Hydrates svelte components and handles svelte custom elements without shadow-dom, that are rendered from ruby-gem svelte-on-rails.",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/sedl/csedl-svelte-on-rails.git"
+  },
+  "keywords": [
+    "svelte",
+    "rails"
+  ],
+  "author": "Christian Sedlmair",
+  "license": "MIT",
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "https://gitlab.com/sedl/csedl-svelte-on-rails"
+}