svelte-on-rails 4.1.1 → 5.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1113ad80ad88261fdf387b8d033006e10cedcbb0bd4e941a5a6fd8d7c338e2e
-  data.tar.gz: de7a37961949e4ff3f99de2da8818e159b3afc552dd530f1373607101c2a50db
+  metadata.gz: 0e2782073f696f72736004ae21d57a71e4429fb878f915954e36628e16904de9
+  data.tar.gz: 2d041a60e7908ce20ab64f490ccebe3d3c673882986c83a64981aaf1e9931768
 SHA512:
-  metadata.gz: e173b7d27296c0a51f7ea6d35632fab227e34964353087354fcd10634efc004959140da5724094b486dbb0a009e10af7a65e809d152b5621ac82911d5efc5198
-  data.tar.gz: 0d8f6bc08236e2752c81c7f1353f36c41c67ea9e4937410658ead038351b1ff0a323992af634b8b084e36d017facb6775cc41b0efa3cabd2989f5cd47620d81d
+  metadata.gz: 5d1fef990a79dfa782b0101f33ed64f3631d126ea6ef16dfde8d21d240653d8d938a87689955af288b862362216fbb760db61e79d709c512b242d0f86ad823d1
+  data.tar.gz: 430b9cf7ab45fb7e0ab629b4de95bd262e8b02bd68a58793dcd614832dfd2bb04d63f52d20ddc6639dc951d8ae132188dee755dadab1042f98a0268dcf4bab63

data/README.md

@@ -12,34 +12,35 @@ Svelte.
 
 Vite.
 
-Hotwired.
-
-# Why Svelte? 
-
-On every app there are parts where you want it to shine. This is where Svelte comes in.
-
-- Works perfectly with Hotwired/Turbo
-- Perfect addition to Stimulus
-- Easy to learn
-- Powerful
-- Super fast
-- **Compared to Stimulus**
-  - No more writing double logic of the initial HTML state
-  - One Logic in one file!
-    - Render logic and script logic is in one file and, maybe, some css too.
-  - Stimulus is great for rails views with some javascript, but, complex parts: You will love svelte.
-  - Improved Backend Response Time: Certain HTML components can be rendered directly by frontend JavaScript.
+# Why Choose Svelte for Integration?
+
+Svelte delivers the robust frontend experience missing from DHH’s 
+vision while aligning seamlessly with Rails’ full-stack philosophy.
+
+- **Seamless Integration**
+  - Works flawlessly with Hotwired/Turbo
+  - Complements Hotwired perfectly
+- **Developer-Friendly**
+  - Easy to learn
+  - Intuitive and powerful
+  - Lightning-fast performance
+- **Compared to Single Page Apps (SPAs)**
+  - Full-stack development delivers maximum value:
+    - Unified testing from database to frontend
+    - Single-source system delivery
+  - For the most HTML Hotwired is enough
+- **Compared to Hotwired**
+  - Stimulus is not a tool for writing frontend-apps
+  - Svelte eliminates redundant HTML state logic
+  - Consolidates component logic into a single file
+  - Offloads rendering of certain HTML components to frontend JavaScript, reducing server load
 - **Compared to React**
-  - No more shadow dom and all those packages that are supposed to improve performance (e.g. useCallback...)
-  - Slimmer packages
-  - Easier to learn
-  - Faster
+  - Watch Rich Harris’ [Rethinking Reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity) (3:50–6:40) for a compelling comparison
+  - No shadow DOM or performance-heavy packages (e.g., useCallback)
+  - Leaner, slimmer packages
+  - Easier to learn and faster performance
 
-Have a look at this entertaining video [rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)
-by Rich Harris, especially from 3:50 to 6:40 and his comparison to react.
-
-This all fits in perfectly with the Rails way of minimalist javascript,
-but: Where needed, we want full power.
+Svelte empowers Rails’ full-stack vision with modern, streamlined frontend integration.
 
 # Features
 
@@ -314,13 +315,13 @@ When using the `cached_svelte_component` helper you must have the `redis` gem in
 
 This caches on a key like `svelte-on-rails:development:SvelteOnRailsHelloWorld.svelte-1xq5tnu-User1:fscyhz-18bm76a` which includes:
 
-- gem name and environment
+- Namespace, if configured, otherwise the default is gem-name and environment
 - component filename
-- hash of the file-path
+- checksum of the file-path
 - `cache_key` if given as argument to the view-helper
   - can be a array of active-record objects or strings or a single element instead of a array
-- hash of the last modification timestamp of the component (only when `watch_changes` is set to true)
-- hash of the given attributes
+- checksum of the last modification timestamp of the component (only when `watch_changes` is set to true)
+- checksum of the given attributes
 
 **Configuration**
 
@@ -339,12 +340,187 @@ redis_cache_store:
   expires_in: 2.hours
 ```
 
-on the svelte-on-rails config file.
+on the svelte-on-rails config file or pass the `expires_in` as argument to the view helper.
 
 **Check if it works**
 
 Pass `debug: true` to the helper and you will see on the logs how your configuration works.
 
+## ActionCable / TurboStream
+
+There are two ways that the server can talk to the client over Websocket:
+
+- ActionCable transmits directly to the frontends javascript
+- TurboStreams is a wrapper around ActionCable
+  - You always need a html part for communication
+
+**Configs**
+
+Check the regarding keys and their commends on the [config file](https://gitlab.com/sedl/svelte-on-rails/-/blob/main/templates/config_base/config/svelte_on_rails.yml?ref_type=heads).
+From there, you just need:
+
+```yaml
+turbo_stream:
+  target_html_id: 'svelte-on-rails-stream-actions-box'
+  channel: 'public'
+```
+
+## ActionCable!
+
+ActionCable is the more basic library behind `TurboStream` and it is a second Option to call Javascript Actions from the server.
+
+**Setup**
+
+Add `app/channels/svelte_on_rails_channel.rb`
+
+```ruby
+class SvelteOnRailsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "svelte_on_rails_channel"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end
+```
+
+run
+
+```shell
+npm i @rails/actioncable
+```
+
+Add to `application.js`
+
+```javascript
+import { createConsumer } from "@rails/actioncable"
+import {dispatchSvelteStreamEvent, actionCableDebugLog} from '@csedl/svelte-on-rails'
+
+const consumer = createConsumer()
+
+consumer.subscriptions.create("SvelteOnRailsChannel", {
+    connected() {
+        actionCableDebugLog("Connected to SvelteOnRailsChannel")
+    },
+    disconnected() {
+        actionCableDebugLog("Disconnected from SvelteOnRailsChannel")
+    },
+    received(data) {
+        actionCableDebugLog("Received:", data)
+        dispatchSvelteStreamEvent(data)
+    }
+})
+```
+
+By setting `debug = true` [node package](https://www.npmjs.com/package/@csedl/svelte-on-rails) you see what it is doing.
+
+**WhatdispatchSvelteStreamEvent does**
+
+- Without the attribute `component` given,
+  it searches for all elements with the class `svelte-component` and fires the event `channel-action`
+    - When `selector` is given, it searches for all matching elements within each component.
+    - The event can be overriden by the argument `event`
+
+**Usage**
+
+Now you can dispatch events on the component by:
+
+```ruby
+ActionCable.server.broadcast("svelte_on_rails_channel",
+                           {
+                             eventDetail: { message: "Sent by ActionCable: äöü🤣🌴🌍漢字" },
+                             component: '/javascript/components/ReceiveFromChannel',
+                           }
+)
+```
+
+# Turbo::StreamsChannel.send!
+
+Few setup is needed for that:
+
+**Setup**
+
+Please setup the `turbo-rails` gem and follow the chapter [Come alive with Turbo Streams](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#come-alive-with-turbo-streams), which mainly is:
+
+```shell
+bundle add turbo-rails
+rails turbo:install
+```
+
+make sure that `import "@hotwired/turbo-rails"` is on your application.js and set the view helper
+`<%= turbo_stream_from 'public' %>` to your view.
+
+If a channel (e.g.: `public`) is active and you have an HTML element with a HTML-ID (e.g.: `svelte-on-rails-stream-actions-box`),
+you can test it by:
+
+```ruby
+     Turbo::StreamsChannel.send(
+        "broadcast_append_to",
+        'public',
+        target: 'svelte-on-rails-stream-actions-box',
+        content: "<div>Turbo-Streams are working!</div>"
+      )
+```
+
+When this works you are good to go.
+
+**Minimal Usage Example**
+
+```sveltehtml
+<script>
+  import {addComponentStreamListener} from '@csedl/svelte-on-rails/src/componentStreamListener'
+
+  function handleCableEvent() {
+      console.log('Event received by Turbo Stream')
+  }
+</script>
+<!--on any element:-->
+<h1 use:addComponentStreamListener={handleCableEvent}>Test TurboStreams Channel</h1>
+```
+
+And call this by:
+
+```ruby
+    SvelteOnRails::TurboStream.new.dispatch_event
+```
+**What it does**
+
+- The `addComponentStreamListener` adds the eventListener `stream-action` on the wrapping Element
+    - The «wrapping Element» is the Element from the view helper `svelte_component` with the class `svelte-component`.
+- A Stimulus controller is pushed to all subscribers of the configured channel.
+    - You can override the channel name by passing `channel` to the method.
+
+**Usage Example, more detailed**
+
+If you want to fire a event on a specific element within the component, you do not need `addComponentStreamListener`. 
+Just do something like:
+
+```sveltehtml
+<script>
+    function logStreamMessage(event) {
+        console.log(event.detail.message)
+    }
+</script>
+<button class="counter-button" onclick="{logStreamMessage}">Show Contents</button>
+```
+
+within the svelte component.
+
+Then, call it by:
+
+```ruby
+      SvelteOnRails::TurboStream.new.dispatch_event(
+        channel: 'my-custom-stream',
+        component: '/javascript/components/TurboStreamsChannel',
+        selector: '.counter-button',
+        event: 'click',
+        event_detail: { message: "Greetings from Server: äöü🤣🌴🌍漢字" }
+      )
+```
+
+
+
 ## More rake tasks
 
 This tasks are more for testing/playground purposes
@@ -398,10 +574,14 @@ This will cause the installer, to install the npm package from a local path inst
 
 Then run the tests and start contributing.
 
+**RUN THE FIRST TEST (!)**: Testing is complex here because of the design based on the installer test. 
+On Problems, i always run the `Installer > destroy and create rails app > FIRST TEST > [...] check if javascript works`. When this passes,
+all the others passing mostly.
+
 Tests are based on the included templates, like the `hello world template` and on the installer.
 
 Here I learned how to write tests! Testing installers is heavy, you will read about it in the
-test_helpers. But I have done my best to give all the code a clear structure.
+test_helpers. But I have  done my best to give all the code a clear structure.
 I hope you like it, and improvements are welcome.
 
 **Installer tests** starting with completely destroy the rails app within the `generated_test_app_path`,

data/lib/generators/svelte_on_rails/install/install_generator.rb

@@ -9,6 +9,7 @@ module SvelteOnRails
       class_option :vite, type: :boolean, default: false, desc: "Use Vite"
       class_option :haml, type: :boolean, default: false, desc: "Use Haml"
       class_option :turbo, type: :boolean, default: false, desc: "Use @hotwired/turbo-rails"
+      class_option :turbo_streams, type: :boolean, default: false, desc: "Turbo::StreamsChannel"
       class_option :svelte, type: :boolean, default: false, desc: "Install Svelte"
       class_option :pug, type: :boolean, default: false, desc: "Install Pug"
       class_option :hello_world, type: :boolean, default: false, desc: "Create Hello World component"
@@ -88,6 +89,20 @@ module SvelteOnRails
         js_i = SvelteOnRails::Installer::Javascript
         js_i.append_import_statement(application_js_path, tr_pkg, "import '#{tr_pkg}';")
 
+        return unless options[:turbo_streams] || options[:full]
+
+        puts '-' * 80
+        puts ' ▶︎▶︎▶︎ INSTALLING Turbo::StreamsChannel'
+        puts '-' * 80
+
+        gem_uts = SvelteOnRails::GemUtils
+        puts '• installing turbo-rails ...'
+        gem_uts.install_gem('turbo-rails')
+        puts '• installed turbo-rails!'
+        utils_i = SvelteOnRails::Installer::Utils
+        puts '• running turbo:install ...'
+        utils_i.run_command('bundle exec rails turbo:install', success_message: 'You must import')
+        puts '• turbo:install finished!'
       end
 
       def svelte
@@ -112,6 +127,12 @@ module SvelteOnRails
         puts '-' * 80
 
         hw_i = SvelteOnRails::Installer::HelloWorld
+
+        utils_i = SvelteOnRails::Installer::Utils
+        utils_i.add_route("  get \"svelte_on_rails_hello_world/turbo_streams_channel\"", app_root: Rails.root)
+        utils_i.add_route("  get \"svelte_on_rails_hello_world/turbo_stream_action\"", app_root: Rails.root)
+        npm_i = SvelteOnRails::Installer::Npm
+        npm_i.install_or_update_package('axios')
         @hello_world_path = hw_i.install_hello_world(['rails_vite_hello_world'], app_root: nil, force: true, silent: true)
       end
 
@@ -160,6 +181,10 @@ module SvelteOnRails
           valid_display = valid_options.map { |opt| opt.gsub(/^--/, '') }.join(', ')
           raise Thor::Error, "Unknown options: #{unknown_options.join(', ')}. Valid options are: #{valid_display}\nNothing done."
         end
+
+        if options[:turbo_streams] && !(options[:full] || options[:turbo])
+          raise Thor::Error, "--turbo-streams option cannot be used without --turbo"
+        end
       end
 
       def application_js_path

data/lib/svelte-on-rails.rb

@@ -1,9 +1,13 @@
 require "svelte_on_rails/configuration"
 require "svelte_on_rails/view_helpers"
+require "svelte_on_rails/turbo_stream"
+require "svelte_on_rails/action_cable"
+require "svelte_on_rails/railtie" if defined?(Rails)
+
 require "svelte_on_rails/renderer/renderer"
+
 require "svelte_on_rails/lib/utils"
 require "svelte_on_rails/lib/view_helper_support"
-require "svelte_on_rails/railtie" if defined?(Rails)
 
 # installer
 require 'svelte_on_rails/installer/utils'

data/lib/svelte_on_rails/action_cable.rb

@@ -0,0 +1,42 @@
+module SvelteOnRails
+  class ActionCable
+    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, channel: "svelte_on_rails_channel")
+
+      if event != 'stream-action' && !selector
+        raise "Another event name than the default one is only possible together with a selector"
+      end
+
+      args = {
+        eventDetail: event_detail,
+        component: component,
+        event: event,
+        selector: selector
+      }
+
+      #args_enc = Base64.strict_encode64(args.to_json)
+
+      ActionCable.server.broadcast(channel, args)
+
+    end
+
+    private
+
+    def configs
+      @configs ||= begin
+
+                     conf = SvelteOnRails::Configuration.instance
+                     unless conf.configs[:turbo_stream]
+                       raise '[svelte-on-rails] missing configuration: :turbo_stream'
+                     end
+                     unless conf.configs[:turbo_stream]['target_html_id']
+                       raise '[svelte-on-rails] missing configuration: turbo_stream/target_html_id'
+                     end
+                     unless conf.configs[:turbo_stream]['channel']
+                       raise '[svelte-on-rails] missing configuration: turbo_stream/channel'
+                     end
+
+                     conf.configs[:turbo_stream]
+                   end
+    end
+  end
+end

data/lib/svelte_on_rails/installer/gem_utils.rb

@@ -26,7 +26,7 @@ module SvelteOnRails
         if stderr.present?
           raise stderr
         else
-          puts "Installed #{gem_name} version #{check_gem_version(gem_name)}"
+          puts "Successfully installed #{gem_name} version #{check_gem_version(gem_name)}"
         end
       end
     end

data/lib/svelte_on_rails/installer/hello_world.rb

@@ -37,6 +37,7 @@ module SvelteOnRails
 
       end
 
+
       def self.remove_hello_world(templates = ['rails_vite_hello_world'], app_root: nil, ask: true)
 
         utils = SvelteOnRails::Installer::Utils

data/lib/svelte_on_rails/installer/utils.rb

@@ -133,15 +133,26 @@ module SvelteOnRails
         end
       end
 
-      def self.run_command(command)
+      def self.run_command(command, success_message: false)
 
         Dir.chdir(Rails.root) do
-          stdout, stderr, status = Open3.capture3(command)
-          if stderr.present?
-            puts "Error running command «#{command}»:"
-            raise stderr
-          else
-            puts "#{command} => Success"
+          Bundler.with_unbundled_env do
+            `pwd`
+            stdout, stderr, status = Open3.capture3(command)
+            err_msg = if stderr.present?
+                        stderr.strip
+                      elsif success_message && !stdout.match(/#{success_message}/)
+                        "missing string «#{success_message}» on result:\n\n+++#{stdout}\n+++"
+                      else
+                      end
+
+            if err_msg
+              puts "Error running command «#{command}»:"
+              raise err_msg
+            else
+              puts "#{command} => Success"
+            end
+
           end
         end
 
@@ -179,11 +190,12 @@ module SvelteOnRails
 
         if existing.present? && ask_for_overwrite
           begin
-            puts "#{'File'.pluralize(existing.length)} already exists:\n#{existing.map { |p| p[1] }.join("\n")}.\nOverwrite? (y/n)"
+            puts "#{'File'.pluralize(existing.length)} already exists:\n#{existing.map { |p| p[1] }.join("\n")}.\nOverwrite? (y/n)
+            "
             continue = STDIN.gets.chomp.downcase[0]
           end until ['y', 'n'].include?(continue)
           if continue == 'n'
-            puts "Skipping write #{'template'.pluralize(templates.length)}."
+            puts " Skipping write #{'template'.pluralize(templates.length)}."
             return
           end
         end

data/lib/svelte_on_rails/renderer/render.js

@@ -2,18 +2,25 @@ import {loadComponentModule, readPropsFromStdin} from './utils.js';
 
 (async () => {
 
+    console.log(`[svelte-on-rails:debug] awaiting load component => «${process.argv[2]}»`)
+
     const MyComponent = await loadComponentModule(process.argv[2]);
+    console.log(`[svelte-on-rails:debug] component read: «${MyComponent}}»`)
+
     const props = await readPropsFromStdin();
-    const payload = {out: ''};
+    console.log(`[svelte-on-rails:debug] props read: «${props}»`)
+
+    const payload = {out: []};
 
     try {
         MyComponent(payload, props); // Writes directly to payload.out
+        console.log(`[svelte-on-rails:debug] written to payload`)
     } catch (error) {
-        console.error('Error rendering component:', error);
+        console.error('[svelte-on-rails:debug] Error rendering component:', error);
         process.exit(1);
     }
 
-    const res = {status: 'SUCCESS', html: payload.out};
-    console.log(JSON.stringify(res));
+    const res = {status: 'SUCCESS', html: payload.out.join('')};
+    console.log('[svelte-on-rails:successful-json-response]' + JSON.stringify(res));
 })();
 

data/lib/svelte_on_rails/renderer/renderer.rb

@@ -32,10 +32,19 @@ module SvelteOnRails
       ].join(' ')
 
       Dir.chdir(cnf.rails_root) do
-        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)
+
+        ary = stdout.split('[svelte-on-rails:successful-json-response]')
+
+        unless ary.length == 2
+          raise "[svelte-on-rails] render ERROR for component: #{@component_files[:svelte_filename]}\n\ncommand:\n+++\n#{cmd}\n+++\n\nstdout:\n+++\n#{stdout}+++\n\n\nstderr:\n+++\n#{stderr}+++"
+        end
+
 
         begin
-          res = JSON.parse(stdout)
+
+
+          res = JSON.parse(ary[1])
           css_file = @component_files[:compiled_file] + '.css'
           if File.exist?(css_file)
             res['css'] = File.read(css_file)
@@ -50,7 +59,7 @@ module SvelteOnRails
           return res
         rescue JSON::ParserError => e
 
-          raise "[svelte-on-rails] render ERROR Svelte Server-side: Expected JSON, got: «#{stdout}»\n\ncomponent: #{@component_files[:svelte_filename]}\n\nstdout:\n+++\n#{stderr}+++\n\ncmd: «#{cmd}»"
+          raise "[svelte-on-rails] render ERROR Svelte Server-side for component: #{@component_files[:svelte_filename]}\n\nError message:\n+++\n#{e.message}\n+++\n\nstdout:\n+++\n#{stdout}+++\n\n\nstderr:\n+++\n#{stderr}+++"
         end
       end
     end

data/lib/svelte_on_rails/turbo_stream.rb

@@ -0,0 +1,47 @@
+module SvelteOnRails
+  class TurboStream
+    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, channel: nil)
+
+      if event != 'stream-action' && !selector
+        raise "Another event name than the default one is only possible together with a selector"
+      end
+
+      args = {
+        eventDetail: event_detail,
+        component: component,
+        event: event,
+        selector: selector
+      }
+
+      args_enc = Base64.strict_encode64(args.to_json)
+
+      Turbo::StreamsChannel.send(
+        "broadcast_append_to",
+        channel || configs['channel'],
+        target: configs['target_html_id'],
+        content: "<div style=\"display: none;\" data-controller=\"svelte-on-rails-turbo-stream\" data-args=\"#{args_enc}\"></div>"
+      )
+
+    end
+
+    private
+
+    def configs
+      @configs ||= begin
+
+                     conf = SvelteOnRails::Configuration.instance
+                     unless conf.configs[:turbo_stream]
+                       raise '[svelte-on-rails] missing configuration: :turbo_stream'
+                     end
+                     unless conf.configs[:turbo_stream]['target_html_id']
+                       raise '[svelte-on-rails] missing configuration: turbo_stream/target_html_id'
+                     end
+                     unless conf.configs[:turbo_stream]['channel']
+                       raise '[svelte-on-rails] missing configuration: turbo_stream/channel'
+                     end
+
+                     conf.configs[:turbo_stream]
+                   end
+    end
+  end
+end

data/templates/config_base/config/svelte_on_rails.yml

@@ -21,6 +21,12 @@ non_ssr_request_header: 'X-Turbo-Request-ID'
 #   expires_in: 90.minutes (=> default / fallback: 1 hour)
 #   namespace: 'my-app-svelte-on-rails'
 
+turbo_stream:
+  # this part you need when you want to be able to trigger javascript actions on svelte-components from the backend
+  target_html_id: 'svelte-on-rails-stream-actions-box'
+  # html-id of any element that must exist for being able to receive actions (turbo streams can only work this way)
+  channel: 'public'
+
 development:
   watch_changes: true
   # Check on every request if any file within the svelte components folder have changed, for recompiling

data/templates/rails_vite_hello_world/app/channels/svelte_on_rails_channel.rb

@@ -0,0 +1,9 @@
+class SvelteOnRailsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "svelte_on_rails_channel"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end

data/templates/rails_vite_hello_world/app/controllers/svelte_on_rails_hello_world_controller.rb

@@ -3,4 +3,33 @@ class SvelteOnRailsHelloWorldController < ApplicationController
   def index
   end
 
+  def turbo_stream_action
+
+    if params['increase']
+      SvelteOnRails::TurboStream.new.dispatch_event(
+        event: 'click',
+        selector: '.counter-button',
+        component: '/javascript/components/ReceiveFromChannel'
+      )
+      render plain: 'increase-action streamed'
+    elsif params['action_cable']
+
+      ActionCable.server.broadcast("svelte_on_rails_channel",
+                                   {
+                                     eventDetail: { message: "Sent by ActionCable: äöü🤣🌴🌍漢字" },
+                                     component: '/javascript/components/ReceiveFromChannel',
+                                   }
+      )
+      #SvelteOnRails::ActionCable.new.dispatch_event(channel: "svelte_on_rails_channel", event_detail: { message: "Hello from SvelteChannel!" })
+
+      render plain: 'ActionCable streaming'
+    else
+      SvelteOnRails::TurboStream.new.dispatch_event(
+        event_detail: { message: "Sent by TurboStream: äöü🤣🌴🌍漢字", user: "Müller" }
+      )
+      render plain: 'component-action streamed'
+    end
+
+  end
+
 end

data/templates/rails_vite_hello_world/app/frontend/javascript/components/ReceiveFromChannel.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import axios from "axios";
+    import {addComponentStreamListener} from '@csedl/svelte-on-rails/src/componentStreamListener'
+    import { onMount } from "svelte";
+
+    let counter = $state(0)
+    let results = $state([])
+    let incrBtn
+
+    onMount(() => {
+        incrBtn.addEventListener('click', increaseCounter)
+    });
+
+    function callChannelAction(params) {
+        results = []
+        axios.get(`/svelte_on_rails_hello_world/turbo_stream_action?${params}`)
+            .then(function (response) {
+                results.push(
+                    {
+                        text: `server action called, status: ${response.status}`,
+                        class: 'called-for-action'
+                    })
+            })
+    }
+
+    function increaseCounter() {
+        counter += 1
+    }
+
+    const handleCableEvent = (ev) => {
+        results.push(
+            {
+                text: `Message received from Server: ${JSON.stringify(ev.detail.message)}`,
+                class: 'stream-action-received'
+            }
+        )
+    };
+
+</script>
+
+<h1 use:addComponentStreamListener={handleCableEvent}>Test TurboStreams Channel</h1>
+
+<p>Actions that are triggered by SvelteOnRails::TurboStream channel from the server</p>
+
+<button onstream-action="{() => callChannelAction('increase=true')}">Call increase action over Channel</button>
+
+<button bind:this={incrBtn} class="counter-button" onclick="{increaseCounter}">increase {counter}</button>
+
+<button class="call-channel-action" onclick="{callChannelAction}">Action</button>
+
+<button onclick="{() => callChannelAction('action_cable=true')}">Call ActionCable Action</button>
+
+<ul class="results">
+    {#each results as result}
+        <li class="{result.class}">{result.text}</li>
+    {/each}
+</ul>

data/templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte

@@ -53,7 +53,7 @@
         -webkit-box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
         -moz-box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
     }
-    img, .wrap-svg {
+    img {
         display: inline-block;
         width: 30px;
         height: 30px;

data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_nav.html.erb

@@ -4,6 +4,8 @@
   <%= link_to 'Backend/Frontend Test', '/svelte_on_rails_hello_world/backend_frontend_rendered' %>
   |
   <%= link_to 'SSR-Auto rendered (default)', '/svelte_on_rails_hello_world/ssr_auto_rendered' %>
+  |
+  <%= link_to 'Turbo Streams', '/svelte_on_rails_hello_world/turbo_streams_channel' %>
 </div>
 
 <% turbo_id = request.headers['X-Turbo-Request-ID'] %>

data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_styles.html.erb

@@ -13,4 +13,14 @@
         width: 32px;
         height: 32px;
     }
+    .svelte-component {
+        border: 1px solid lightgray;
+        max-width: 30rem;
+        padding: 2rem;
+        margin: 2rem;
+    }
+
+    button {
+        margin: 4px;
+    }
 </style>

data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/turbo_streams_channel.html.erb

@@ -0,0 +1,12 @@
+<%= turbo_stream_from 'public' %>
+
+<%= render 'styles' %>
+
+
+<%= render 'nav' %>
+
+
+<%= svelte_component "ReceiveFromChannel" %>
+
+<%= content_tag :div, id: 'svelte-on-rails-stream-actions-box' do %>
+<% end %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 4.1.1
+  version: 5.1.0
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -31,6 +31,7 @@ files:
 - README.md
 - lib/generators/svelte_on_rails/install/install_generator.rb
 - lib/svelte-on-rails.rb
+- lib/svelte_on_rails/action_cable.rb
 - lib/svelte_on_rails/configuration.rb
 - lib/svelte_on_rails/installer/gem_utils.rb
 - lib/svelte_on_rails/installer/haml.rb
@@ -47,11 +48,13 @@ files:
 - lib/svelte_on_rails/renderer/render.js
 - lib/svelte_on_rails/renderer/renderer.rb
 - lib/svelte_on_rails/renderer/utils.js
+- lib/svelte_on_rails/turbo_stream.rb
 - lib/svelte_on_rails/view_helpers.rb
 - lib/tasks/svelte_on_rails_tasks.rake
 - templates/config_base/app/frontend/ssr/ssr.js
 - templates/config_base/config/svelte_on_rails.yml
 - templates/config_base/vite-ssr.config.ts
+- templates/rails_vite_hello_world/app/channels/svelte_on_rails_channel.rb
 - templates/rails_vite_hello_world/app/controllers/svelte_on_rails_hello_world_controller.rb
 - templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-england.png
 - templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-face-smile-wink.svg
@@ -60,6 +63,7 @@ files:
 - templates/rails_vite_hello_world/app/frontend/javascript/components/JpgImport.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/ParentWithChild.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/PngImport.svelte
+- templates/rails_vite_hello_world/app/frontend/javascript/components/ReceiveFromChannel.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/SvgRawImport.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/sub/NestedComponent.svelte
@@ -70,6 +74,7 @@ files:
 - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/backend_frontend_rendered.html.erb
 - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/index.html.erb
 - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/ssr_auto_rendered.html.erb
+- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/turbo_streams_channel.html.erb
 homepage: https://gitlab.com/sedl/svelte-on-rails
 licenses:
 - MIT