RubyGems - svelte-on-rails - Versions diffs - 8.1.0 → 9.1.0 - Mend

svelte-on-rails 8.1.0 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

data/lib/svelte_on_rails/renderer/render.js CHANGED Viewed

@@ -1,26 +1,74 @@
-import {loadComponentModule, readPropsFromStdin} from './utils.js';
+// render.js (updated for Svelte 5+ SSR rendering with 'svelte/server')
+// this script is, by rails assets:precompile copied to the public assets folder and used from there
+// the reason for doing it this way is that this is the only clean way for using the svelte from frontends package.json
-(async () => {
+import {fileURLToPath} from 'node:url';
+import {dirname, resolve} from 'node:path';
+const compiledComponentPath = process.argv[2];
-    console.log(`[svelte-on-rails:debug] awaiting load component => «${process.argv[2]}»`)
+import { render } from 'svelte/server';
-    const MyComponent = await loadComponentModule(process.argv[2]);
-    console.log(`[svelte-on-rails:debug] component read: «${MyComponent}}»`)
+(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: «${props}»`)
-    const payload = {out: []};
+    console.log(`[svelte-on-rails:debug] props read: «${JSON.stringify(props)}»`);
     try {
-        MyComponent(payload, props); // Writes directly to payload.out
-        console.log(`[svelte-on-rails:debug] written to payload (typeof payload.out => «${typeof payload.out}»)`)
+        // 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);
     }
-    const res = {status: 'SUCCESS', html: payload.out};
-    console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
 })();
+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);
+    }
+}
+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}`)));
+    });
+}

data/lib/svelte_on_rails/renderer/renderer.rb CHANGED Viewed

@@ -26,12 +26,15 @@ module SvelteOnRails
       cmd = [
         cnf.node_bin_path,
-        File.join(utils.gem_app_dir, 'renderer', 'render.js'),
-        @component_files[:compiled_file] + '.js',
-        cnf.rails_root
+        cnf.ssr_dist_folder.join('render.js'),
+        @component_files[:compiled_file] + '.js'
       ].join(' ')
-      stdout, stderr, status = Open3.capture3(cmd, stdin_data: props.to_json, chdir: cnf.rails_root)
+      stdout, stderr, status = Open3.capture3(
+        cmd,
+        stdin_data: props.to_json,
+      chdir: cnf.rails_root,
+      )
       ary = stdout.split('[svelte-on-rails:successful-json-response]')

data/lib/svelte_on_rails/renderer/utils.js CHANGED Viewed

@@ -1,40 +1,40 @@
-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);
-    }
-}
-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}`)));
-    });
-}
+// 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);
+//     }
+// }
+//
+// 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}`)));
+//     });
+// }

data/lib/tasks/svelte_on_rails_tasks.rake CHANGED Viewed

@@ -6,57 +6,19 @@ if defined?(Rails) && Rake::Task.task_defined?("assets:precompile")
   end
 end
 require_relative '../../lib/svelte_on_rails/installer/hello_world'
 require_relative '../../lib/generators/svelte_on_rails/install/install_generator'
-namespace :svelte_on_rails do
-  desc "Removes the Hello World component"
-  task :remove_hello_world do
-    hw_i = SvelteOnRails::Installer::HelloWorld
-    hw_i.remove_hello_world(['all_features_test'])
-  end
-  desc "Add the Hello World component"
-  task :add_hello_world do
-    puts '-' * 80
-    hw_i = SvelteOnRails::Installer::HelloWorld
-    hello_world_path = hw_i.install_hello_world(['all_features_test'])
-    puts "You can now see the Hello World component on: #{hello_world_path}."
-  end
-  desc "For contributors to this gem: writes a config file for developing options."
-  task :create_contributor_configs_file do
-    path = File.expand_path('../../../svelte_on_rails_contributor_configs.yml', __dir__)
-    if File.exist?(path)
-      puts "Config file for Contributors already exists: file://#{path}"
-      puts 'nothing done.'
-      exit
-    end
-    content = <<-END
-#local_npm_package_path: /path/to/my/local/csedl-svelte-on-rails-main
-# optional
-# If you want to develop the @csedl/svelte-on-rails package
-# add full path like /path/to/csedl-svelte-on-rails-main
-# Then, on running the generator, it installs this package from your local root folder
-generated_test_app_folder_path: /destination/folder/for/generated/test/app
-# required!
-# When you run tests, a rails app will be generated into this folder
-    END
-    File.write(path, content)
-    puts "Config file for Contributors created at: #{path}"
-  end
-end
+# namespace :svelte_on_rails do
+#
+#   desc "Add the Hello World component"
+#   task :add_hello_world do
+#
+#     puts '-' * 80
+#     hw_i = SvelteOnRails::Installer::HelloWorld
+#     hello_world_path = hw_i.install_hello_world(['showcase'])
+#     puts "You can now see the Hello World component on: #{hello_world_path}."
+#
+#   end
+#
+# end

data/templates/config_base/config/svelte_on_rails.yml CHANGED Viewed

@@ -2,7 +2,7 @@ frontend_folder: "app/frontend"
 # the entrypoint that is your web root, example for vite: where @ points to
 # relative to Rails.root
-components_folder: "javascript/components"
+components_folder: "javascript"
 # relative to frontend_folder
 # where your svelte components are located

data/templates/config_base/vite-ssr.config.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+// vite-ssr.config.ts (updated for Svelte 5+ with runes: true)
 import { defineConfig } from 'vite';
 import RubyPlugin from 'vite-plugin-ruby';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
@@ -62,11 +64,11 @@ function findSvelteFiles(dir: string, baseDir: string = dir): Record<string, str
 const svelteComponents = findSvelteFiles(path.resolve('app/frontend'));
 export default defineConfig(({ mode }) => {
     const isProduction = (process.env.RAILS_ENV === 'development' || process.env.RAILS_ENV === 'test' ? false : true);
     return {
         base: isProduction ? '/vite/' : '/vite-dev/',
+        publicDir: false,
         plugins: [
             rewriteAssetPathsPlugin(),
             {
@@ -85,7 +87,10 @@ export default defineConfig(({ mode }) => {
             svelte({
                 include: ['app/frontend/**/*.svelte'],
                 compilerOptions: {
-                    // hydratable: false,
+                    // Enable runes mode for Svelte 5+ (explicit reactivity, signals)
+                    runes: true,
+                    // generate: 'server' is handled internally by the plugin for SSR builds
+                    // hydratable: false, // Uncomment if you don't need client hydration
                 },
             }),
             {
@@ -102,7 +107,7 @@ export default defineConfig(({ mode }) => {
         build: {
             ssr: true,
             outDir: 'public/vite-ssr',
-            manifest: 'manifest.json',
+            manifest: 'manifest.json', // This will generate the SSR manifest in Svelte 5+/Vite
             rollupOptions: {
                 input: {
                     ...svelteComponents,

data/templates/showcase/app/channels/application_cable/channel.rb ADDED Viewed

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

data/templates/showcase/app/channels/application_cable/connection.rb ADDED Viewed

@@ -0,0 +1,5 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+    # You can add identified_by :current_user etc. later
+  end
+end

data/templates/showcase/app/controllers/svelte_on_rails_showcase_controller.rb ADDED Viewed

@@ -0,0 +1,65 @@
+class SvelteOnRailsShowcaseController < ApplicationController
+  def index
+  end
+  def web_socket_action
+    comp = 'svelte_on_rails_showcase/ReceiveFromChannel'
+    emojis = '🤣🌴🌍漢字😀😎😇🥰😎🥸🧐🤪🥸😤🥳🤢😻🤓👁️🥵🥶🫵🧑‍🎤🤖😹🤡😹🤠👩‍🦰🙇‍♀️'
+    emojis_rand = 5.times.map { emojis[rand(emojis.size)] }.join
+    case params['stream']
+    when 'action-cable-to-component'
+      SvelteOnRails::ActionCable.dispatch(
+        comp,
+        { message: "Sent by <span class='transfer'>ActionCable</span>: #{emojis_rand}", class: 'action-cable-to-component' },
+        event: 'stream-action'
+      )
+    when 'action-cable-to-element'
+      SvelteOnRails::ActionCable.dispatch(
+        comp,
+        { message: "Sent by <span class='transfer'>ActionCable to .my-custom-class / my-custom-event</span>: #{emojis_rand}", class: 'action-cable-to-element' },
+        selector: '.my-custom-class',
+        event: 'my-custom-event'
+      )
+    when 'action-cable-to-selector'
+      SvelteOnRails::ActionCable.dispatch_by_selector(
+        '.receive-by-selector',
+        { message: "Sent by <span class='transfer'>ActionCable/Selector</span>: #{emojis_rand}", class: 'action-cable-to-selector' }
+      )
+    when 'turbo-stream-to-all-components'
+      SvelteOnRails::TurboStream.dispatch(
+        nil,
+        { message: "Sent by <span class='transfer'>TurboStream</span>: #{emojis_rand}", class: 'turbo-stream-to-all-components' },
+        )
+    when 'turbo-stream-to-element'
+      SvelteOnRails::TurboStream.dispatch(
+        nil,
+        { message: "Sent by <span class='transfer'>TurboStream</span>: #{emojis_rand}", class: 'turbo-stream-to-element' },
+        selector: '.my-custom-class',
+        event: 'my-custom-event'
+      )
+    when 'turbo-stream-to-selector'
+      SvelteOnRails::TurboStream.dispatch_by_selector(
+        '.receive-by-selector',
+        { message: "Sent by <span class='transfer'>TurboStream/Selector</span>: #{emojis_rand}", class: 'turbo-stream-to-selector' }
+      )
+    else
+      raise 'Unknown stream'
+    end
+    render plain: "dispatched: #{params['stream']}"
+  end
+end

data/templates/showcase/app/frontend/javascript/svelte_on_rails_showcase/JavascriptImport.svelte ADDED Viewed

@@ -0,0 +1,7 @@
+<script>
+    let {title} = $props();
+    import {nestedJavascriptFunction} from "./nestedJavascript.js";
+</script>
+<p>{title}</p>
+<p>{nestedJavascriptFunction()}</p>

data/templates/showcase/app/frontend/javascript/svelte_on_rails_showcase/JpgImport.svelte ADDED Viewed

@@ -0,0 +1,15 @@
+<script>
+    let {title} = $props();
+    import jpg from './switzerland.jpg'
+</script>
+<p>{title}</p>
+<img alt="Jpg not loaded!" src="{jpg}" />
+<style>
+    p {
+        background-color: blue;
+        color: white;
+        padding: 3px;
+    }
+</style>

data/templates/{all_features_test/app/frontend/javascript/components → showcase/app/frontend/javascript/svelte_on_rails_showcase}/ParentWithChild.svelte RENAMED Viewed

@@ -1,6 +1,6 @@
 <script>
     import Nested from './sub/NestedComponent.svelte'
-    export let title
+    let {title} = $props();
 </script>
 <p>{title}</p>
 <Nested />

data/templates/showcase/app/frontend/javascript/svelte_on_rails_showcase/PngImport.svelte ADDED Viewed

@@ -0,0 +1,16 @@
+<script>
+    let {title} = $props();
+    import png from './england.png'
+</script>
+<p>{title}</p>
+<img alt="Png not loaded!" src="{png}" />
+<style>
+    p {
+        background-color: red;
+        color: white;
+        padding: 3px;
+    }
+</style>

data/templates/{all_features_test/app/frontend/javascript/components → showcase/app/frontend/javascript/svelte_on_rails_showcase}/ReceiveFromChannel.svelte RENAMED Viewed

@@ -6,7 +6,7 @@
     function callChannelAction(action) {
         results = []
-        axios.get(`/svelte_on_rails_hello_world/web_socket_action?stream=${action}`)
+        axios.get(`/svelte_on_rails_showcase/web_socket_action?stream=${action}`)
             .then(function (response) {
                 console.log(`server action called, status: ${response.status}`)
             })
@@ -43,7 +43,9 @@
 <h1 use:addComponentStreamListener={handleCableEvent}>Dispatch Actions from Server</h1>
-<p>Actions that are triggered from the server, by TurboStream or ActionCable</p>
+<p>Please click a button → this triggers server action → server pushes update independently to Svelte (via Turbo/ActionCable).</p>
+<p>You should see the random Emojis.</p>
+<p>This Server-push could also come from timers/other server events, not tied to request-response.</p>
 <h3>ActionCable</h3>
 <p>Easier Technic, more basic</p>
@@ -60,7 +62,7 @@
 <span class="my-custom-class" onmy-custom-event="{handleElementEvent}"></span>
 <span class="receive-by-selector" onstream-action="{handleStreamSelectorEvent}"></span>
-<h3>Results</h3>
+<h3>Results:</h3>
 <div class="results-box">
     <ul class="results">
         {#each results as result}

data/templates/{all_features_test/app/frontend/javascript/components → showcase/app/frontend/javascript/svelte_on_rails_showcase}/SvelteOnRailsHelloWorld.svelte RENAMED Viewed

@@ -1,9 +1,9 @@
 <script>
-    import jpg from '../../images/svelte-on-rails-hello-world-switzerland.jpg'
+    import jpg from './switzerland.jpg'
     import Nested from './sub/NestedComponent.svelte'
-    import {nestedJavascriptFunction} from '../nestedJavascript.js'
-    export let items
-    let count = 0;
+    import {nestedJavascriptFunction} from './nestedJavascript.js'
+    let {items} = $props();
+    let count = $state(0);
     function increment() {
         count += 1;

data/templates/showcase/app/frontend/javascript/svelte_on_rails_showcase/SvgRawImport.svelte ADDED Viewed

@@ -0,0 +1,7 @@
+<script>
+    let {title} = $props();
+    import svgRaw from './face-smile-wink.svg?raw'
+</script>
+<p>{title}</p>
+{@html svgRaw}

data/templates/showcase/app/views/svelte_on_rails_showcase/_nav.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<div class="nav">
+  <%= link_to 'Hello World', '/svelte_on_rails_showcase' %>
+  |
+  <%= link_to 'Backend/Frontend Test', '/svelte_on_rails_showcase/backend_frontend_rendered' %>
+  |
+  <%= link_to 'SSR-Auto rendered (default)', '/svelte_on_rails_showcase/ssr_auto_rendered' %>
+  |
+  <%= link_to 'Turbo Streams', '/svelte_on_rails_showcase/web_socket' %>
+</div>
+<% turbo_id = request.headers['X-Turbo-Request-ID'] %>
+<p class="<%= (turbo_id.present? ? 'turbo-request' : 'initial-request') %>"><%= (turbo_id.blank? ? 'This is a initial request' : "Turbo-Request-ID: #{turbo_id}") %></p>
+<p>Rails.environment: <%= Rails.env %></p>

data/templates/showcase/app/views/svelte_on_rails_showcase/backend_frontend_rendered.html.erb ADDED Viewed

@@ -0,0 +1,37 @@
+<%= render 'styles' %>
+<style>
+    .svelte-component {
+        border: 1px solid lightgray;
+        padding: 10px;
+        margin: 10px;
+        width: 100px;
+        display: inline-block;
+    }
+</style>
+<%= render 'nav' %>
+<h1>Server-Side / Client side rendering test</h1>
+<p>Server side rendered and Client side rendered components must look similar.</p>
+<p>Otherwise SSR or client side rendering would not work as expected.</p>
+<hr>
+<% components = ['SvgRawImport', 'JpgImport', 'PngImport', 'JavascriptImport', 'ParentWithChild'] %>
+<h3>Server side rendered</h3>
+<p>Theese Elements will arrive stable like you know it on a classical backend rendered rails app.</p>
+<div class="ssr-only">
+  <% components.each do |component| %>
+    <%= svelte_component("svelte_on_rails_showcase/#{component}", {title: component}, options: {ssr: true, hydrate: false}) %>
+  <% end %>
+</div>
+<hr>
+<h3>Client side rendered</h3>
+<p>Here you may see a unpleasant «blink» on the initial request or by clicking the reload button on the browser.</p>
+<div class="client-only">
+  <% components.each do |component| %>
+    <%= svelte_component("svelte_on_rails_showcase/#{component}", {title: component}, options: {ssr: false, hydrate: true}) %>
+  <% end %>
+</div>

data/templates/showcase/app/views/svelte_on_rails_showcase/index.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%= render 'styles' %>
+<%= render 'nav' %>
+<h1>Svelte is here</h1>
+<%= svelte_component "svelte_on_rails_showcase/SvelteOnRailsHelloWorld", { items: ['attributes', 'are', 'parsed'] } %>

data/templates/{all_features_test/app/views/svelte_on_rails_hello_world → showcase/app/views/svelte_on_rails_showcase}/ssr_auto_rendered.html.erb RENAMED Viewed

@@ -17,10 +17,10 @@
 <% components = ['SvgRawImport', 'JpgImport', 'PngImport', 'JavascriptImport', 'ParentWithChild'] %>
-<h3>Rendered server side only on initial request</h3>
+<h3>Rendered server side only on initial request, then, on subsequent requests, rendered client side:</h3>
 <div class="ssr-auto">
   <% components.each do |component| %>
-    <%= svelte_component(component, { title: component }) %>
+    <%= svelte_component("svelte_on_rails_showcase/#{component}", { title: component }) %>
   <% end %>
 </div>

data/templates/{all_features_test/app/views/svelte_on_rails_hello_world → showcase/app/views/svelte_on_rails_showcase}/web_socket.html.erb RENAMED Viewed

@@ -6,7 +6,7 @@
 <%= render 'nav' %>
-<%= svelte_component "ReceiveFromChannel" %>
+<%= svelte_component "svelte_on_rails_showcase/ReceiveFromChannel" %>
 <%= content_tag :div, id: 'svelte-on-rails-stream-actions-box' do %>
 <% end %>