svelte-on-rails 5.0.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 702cfaf256c84b2e8f17356ed333b63e14d4d1252f7e1e2dabd1698d350a4461
-  data.tar.gz: d7b63bfce50f3aba78c2bfd5f646bba5e02e0ae351d6cf4cc6129b8ba4ce26f4
+  metadata.gz: 6f7ba72715095d212a289e5fba57a8ddd78b358474e4219a5b3c47f3b7d66c88
+  data.tar.gz: e690deefa5507a42cf31176efc368c3ff2f304ce1ff057dc79f431e33b5c4232
 SHA512:
-  metadata.gz: f86aafc1b3e91cbe2eff633fc40325dc048f00d5d668d52f7ea03c130f9171ecea1101a63c871883ac8ec173dfbaaa5932cb37e1de83a49fea5e3c09993463ef
-  data.tar.gz: 197a951604f5dcdf6c64bf7ccfcfe0fd65cd91e2ae8cb6d55c53de3bcd0b0821292856ba2cfdffb56f72a3b3d6e93b76a4e63ea08c8eb16548a03b4166cdcf10
+  metadata.gz: c1b2150fa517ce388feaf13c9816b8d71cb339c9ac9670d7552096430a8cddff8688629ca96c58dbcde715e4f9e9b3953e6760ab6e67c37f3a0ad10797b8fcc9
+  data.tar.gz: 275691b15976c8dbcd551b3c07ec7495da686c7fa23192b5aca471527b4fe63c20fa8048851a3d9b0085756de52bc7ae1d1e4e5a663114a9fbed9608873ba68e

data/README.md

@@ -346,92 +346,196 @@ on the svelte-on-rails config file or pass the `expires_in` as argument to the v
 
 Pass `debug: true` to the helper and you will see on the logs how your configuration works.
 
-# Turbo::StreamsChannel.send!
+## ActionCable / TurboStream
 
-There are some methods that making it easier to let the server speak to the Components on the front.
+There are two ways that the server can talk to the client over Websocket:
 
-Theese are independent class methods that can be executed from every place on the app.
+- ActionCable transmits directly to the frontends javascript
+- TurboStreams is a wrapper around ActionCable
+  - You always need a html part for communication
 
-Few setup is needed for that:
+**Configs**
 
-**Setup**
+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 vs TurboStream
 
-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)
+- **ActionCable**
+  - Cleaner setup no html needed
+  - Seams to initialize securer, especially for testings (not: production)
+- **TurboStream**
+  - Secured Streams by html-tag `signed-stream-name` if you want to send confidential data 
+    over streams or have different channels for each user privileges
+  - Has [Compatibility issue with UJS](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#compatibility-with-rails-ujs)
 
-If a channel - let's call us it `public` is working and you have a html-tag on the front
-with a ID - let's call us it `svelte-on-rails-stream-actions-box` (This can be any element,
-you could just give the body-tag a ID // it is just the way hotwired works)
-and a code Block like
+## SvelteOnRails::ActionCable.send
+
+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
-     Turbo::StreamsChannel.send(
-        "broadcast_append_to",
-        'public',
-        target: 'svelte-on-rails-stream-actions-box',
-        content: "<div>Hello World</div>"
-      )
+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 { SvelteOnRails, dispatchSvelteStreamEvent, actionCableDebugLog } from '@csedl/svelte-on-rails'
+SvelteOnRails.debug = true
+
+const consumer = createConsumer()
+
+consumer.subscriptions.create("SvelteOnRailsChannel", {
+    connected() {
+        actionCableDebugLog("Connected to SvelteOnRailsChannel")
+    },
+    disconnected() {
+        actionCableDebugLog("Disconnected from SvelteOnRailsChannel")
+    },
+    received(data) {
+        actionCableDebugLog("Received:", data)
+        dispatchSvelteStreamEvent(data)
+    }
+})
 ```
 
-is exposing a «Hello World» on the front then you are good to go. 
-Please check the regarding keys and theyr 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).
+**What dispatchSvelteStreamEvent 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 Example: Component Event**
+**Usage**
 
-The easiest way on the svelte component is: 
+`app/frontend/javascript/components/folder/MyComponent.svelte`
 
 ```sveltehtml
 <script>
   import {addComponentStreamListener} from '@csedl/svelte-on-rails/src/componentStreamListener'
 
   function handleCableEvent(event) {
-      console.log(event.detail.message)
+      console.log('Event received by Turbo Stream', event.detail)
   }
 </script>
-<!--on any element:-->
+<!--on ANY element:-->
 <h1 use:addComponentStreamListener={handleCableEvent}>Test TurboStreams Channel</h1>
 ```
 
-And call this by:
+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`.
+
+Now you can dispatch events on the component by:
+
+```ruby
+SvelteOnRails::ActionCable.send(
+  'folder/MyComponent',
+  { message: "greetings from Server: äöü🤣🌴🌍漢字" }
+)
+```
+
+And you will find the object, with the message key on the browser logs.
+
+Without any arguments, just by `SvelteOnRails::ActionCable.send` it would fire the `stream-action` event on all components.
+
+# SvelteOnRails::TurboStream.send
+
+Turbo Stream makes more sense when you think of sending confidential data to the components
+or you want to separate to channels based on user groups, for example.
+
+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 'authenticated' if current_user %>` to your view.
+
+If a channel (e.g.: `authenticated`) 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
-    SvelteOnRails::TurboStream.new.dispatch_event(
-        event_detail: { message: "Special Chars from the server: äöü🤣🌴🌍漢字" }
+     Turbo::StreamsChannel.send(
+        "broadcast_append_to",
+        'authenticated',
+        target: 'svelte-on-rails-stream-actions-box',
+        content: "<div>Turbo-Streams are working!</div>"
       )
 ```
 
-**What is this doing?**
+When this works you are good to go.
 
-- The `addComponentStreamListener` adds a `eventListener` on the Element, that wraps each
-component that is rendered by the view helper `svelte_component`, found by `currentElement.closest('.svelte-component')`
-- A Stimulus controller is pushed to all subscribers of the configured channel. 
-  - You can override this by passing `stream_name` to the method.
-- 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`
+**Minimal Usage Example**
 
-By setting `debug = true` [node package](https://www.npmjs.com/package/@csedl/svelte-on-rails) you see what it is doing.
+And call this by:
 
-**Usage Example: Event on components element**
+```ruby
+    SvelteOnRails::TurboStream.send
+```
+**What it does**
+
+- 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
+Just do something like:
 
 ```sveltehtml
-<button class="counter-button" onclick="{increaseCounter}">increase {counter}</button>
+<script>
+    function logStreamMessage(event) {
+        console.log(event.detail.message)
+    }
+</script>
+<button class="counter-button" onclick="{logStreamMessage}">Show Contents</button>
 ```
 
-within the svelte component and call it by
+within the svelte component.
+
+Then, call it by:
 
 ```ruby
       SvelteOnRails::TurboStream.new.dispatch_event(
-        event: 'click',
+        channel: 'my-custom-stream',
+        component: '/javascript/components/TurboStreamsChannel',
         selector: '.counter-button',
-        component: '/javascript/components/TurboStreamsChannel'
+        event: 'click',
+        event_detail: { message: "Greetings from Server: äöü🤣🌴🌍漢字" }
       )
 ```
 
-
 ## More rake tasks
 
 This tasks are more for testing/playground purposes
@@ -486,30 +590,12 @@ 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.
-I hope you like it, and improvements are welcome.
-
-**Installer tests** starting with completely destroy the rails app within the `generated_test_app_path`,
-generating a new rails app and running the installer and test by `playwright` if the components are working.
-
-**component tests** only checking if a rails server is alive, and if not, install and run a rails app.
-For this is the testing helper `start_rails_server_unless_ping`. This step may only be slow on the
-first run, then it is fast. And on every repeating the test it always overwrites the components
-with the components from the template by the testing helper `install_hello_world(
-      ['rails_vite_hello_world'],
-      app_root: generated_rails_app_root,
-      force: true,
-      silent: true
-      )`. At the end of the test it leaves the rails server running.
-
-On that way a developer can just edit the templates and run a test and see always the refreshed
-content on the browser and on the app within the `generated_test_app_path`.
+On Problems, i always run the `Installer > destroy and create rails app > FIRST TEST > [...] check if javascript works`.
+If there are problems, open the generated app on a IDE and check errors there.
+
+When this passes, all the others passing mostly. 
+
+At the end of the most tests it leaves the rails server running, so that you can see the result on `localhost:3000`.
 
 NOTE: Theese tests are dependend on your environment, including the running ruby version!
 I am working on rvm. If you work on a different environment, some (not many) changes may be necessary.

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

@@ -133,6 +133,10 @@ module SvelteOnRails
         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')
+        npm_i.install_or_update_package('@rails/actioncable')
+        js_i = SvelteOnRails::Installer::Javascript
+        init_stat = '../initializers/actionCable.js'
+        js_i.append_import_statement(application_js_path, init_stat, "import '#{init_stat}';")
         @hello_world_path = hw_i.install_hello_world(['rails_vite_hello_world'], app_root: nil, force: true, silent: true)
       end
 

data/lib/svelte-on-rails.rb

@@ -1,6 +1,7 @@
 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"

data/lib/svelte_on_rails/action_cable.rb

@@ -0,0 +1,36 @@
+module SvelteOnRails
+  class ActionCable
+    def self.send(component = nil, event_detail = nil, event: 'stream-action', selector: nil, channel: nil)
+
+      _channel = configs['channel'] || channel
+      unless _channel.present?
+        raise 'Missing attribute or configuration: action_cable/channel'
+      end
+
+      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
+      }
+
+      ::ActionCable.server.broadcast(
+        _channel,
+        args
+      )
+
+
+    end
+
+    private
+
+    def self.configs
+      SvelteOnRails::Configuration.instance.configs[:action_cable]
+    end
+
+  end
+end

data/lib/svelte_on_rails/turbo_stream.rb

@@ -1,6 +1,10 @@
 module SvelteOnRails
   class TurboStream
-    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, stream_name: nil)
+    def self.send(component = nil, event_detail = nil, event: 'stream-action', selector: 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,
@@ -13,7 +17,7 @@ module SvelteOnRails
 
       Turbo::StreamsChannel.send(
         "broadcast_append_to",
-        stream_name || configs['stream_name'],
+        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>"
       )
@@ -22,7 +26,7 @@ module SvelteOnRails
 
     private
 
-    def configs
+    def self.configs
       @configs ||= begin
 
                      conf = SvelteOnRails::Configuration.instance
@@ -32,8 +36,8 @@ module SvelteOnRails
                      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]['stream_name']
-                       raise '[svelte-on-rails] missing configuration: turbo_stream/stream_name'
+                     unless conf.configs[:turbo_stream]['channel']
+                       raise '[svelte-on-rails] missing configuration: turbo_stream/channel'
                      end
 
                      conf.configs[:turbo_stream]

data/templates/config_base/config/svelte_on_rails.yml

@@ -25,7 +25,11 @@ 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)
-  stream_name: 'public'
+  channel: 'public'
+
+action_cable:
+  # if you want to use it
+  channel: "svelte_on_rails_channel"
 
 development:
   watch_changes: true

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

@@ -5,21 +5,41 @@ class SvelteOnRailsHelloWorldController < ApplicationController
 
   def turbo_stream_action
 
-    if params['increase']
-      SvelteOnRails::TurboStream.new.dispatch_event(
-        event: 'click',
-        selector: '.counter-button',
-        component: '/javascript/components/TurboStreamsChannel'
+    comp = '/javascript/components/ReceiveFromChannel'
+
+    case params['stream']
+
+    when 'action-cable-to-component'
+      SvelteOnRails::ActionCable.send(
+        comp,
+        { message: "#{SecureRandom.hex(2)} Sent by <span class='transfer'>ActionCable</span>: äöü🤣🌴🌍漢字", class: 'action-cable-to-component' },
+        event: 'stream-action'
       )
-      render plain: 'increase-action streamed'
-    else
-      SvelteOnRails::TurboStream.new.dispatch_event(
-        event_detail: { message: "Special Chars from the server: äöü🤣🌴🌍漢字", user: "Müller" }
+
+    when 'action-cable-to-element'
+      SvelteOnRails::ActionCable.send(
+        comp,
+        { message: "#{SecureRandom.hex(2)} <span class='transfer'>ActionCable to .my-custom-class / my-custom-event</span>", class: 'action-cable-to-element' },
+        selector: '.my-custom-class',
+        event: 'my-custom-event'
       )
-      render plain: 'component-action streamed'
+
+    when 'turbo-stream-to-all-components'
+      SvelteOnRails::TurboStream.send(
+        nil,
+        { message: "Sent by TurboStream: äöü🤣🌴🌍漢字", class: 'turbo-stream-to-all-components' },
+        )
+
+    when 'turbo-stream-to-element'
+      SvelteOnRails::TurboStream.send(
+        nil,
+        { message: "Sent by TurboStream: äöü🤣🌴🌍漢字", class: 'turbo-stream-to-element' },
+        selector: '.my-custom-class',
+        event: 'my-custom-event'
+      )
+
     end
 
-    head :ok
   end
 
 end

data/templates/rails_vite_hello_world/app/frontend/initializers/actionCable.js

@@ -0,0 +1,17 @@
+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)
+    }
+})

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import axios from "axios";
+    import {addComponentStreamListener} from '@csedl/svelte-on-rails/src/componentStreamListener'
+
+    let results = $state([])
+
+    function callChannelAction(action) {
+        results = []
+        axios.get(`/svelte_on_rails_hello_world/turbo_stream_action?stream=${action}`)
+            .then(function (response) {
+                console.log(`server action called, status: ${response.status}`)
+            })
+    }
+
+    const handleCableEvent = (ev) => {
+        results.push(
+            {
+                text: `Message received from Server: ${JSON.stringify(ev.detail.message)}`,
+                class: ev.detail.class
+            }
+        )
+    };
+
+    function handleElementEvent(ev) {
+        results.push(
+            {
+                text: `Element triggered from Server: ${JSON.stringify(ev.detail.message)}`,
+                class: ev.detail.class
+            }
+        )
+    };
+
+</script>
+
+<h1 use:addComponentStreamListener={handleCableEvent}>Test TurboStreams Channel</h1>
+
+<p>Actions that are triggered by SvelteOnRails::TurboStream channel from the server</p>
+
+<button class="action-cable-to-component" onclick="{() => callChannelAction('action-cable-to-component')}">ActionCable to component</button>
+<button class="action-cable-to-element" onclick="{() => callChannelAction('action-cable-to-element')}">ActionCable to element</button>
+<button class="turbo-stream-to-all-components" onclick="{() => callChannelAction('turbo-stream-to-all-components')}">TurboStream to all components</button>
+<button class="turbo-stream-to-element" onclick="{() => callChannelAction('turbo-stream-to-element')}">TurboStream to element</button>
+
+<span class="my-custom-class" onmy-custom-event="{handleElementEvent}"></span>
+
+<div class="results-box">
+    <p>Result:</p>
+    <ul class="results">
+        {#each results as result}
+            <li class="{result.class}">{@html result.text}</li>
+        {/each}
+    </ul>
+</div>

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

@@ -6,7 +6,7 @@
 <%= render 'nav' %>
 
 
-<%= svelte_component "TurboStreamsChannel" %>
+<%= 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: 5.0.0
+  version: 5.2.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
@@ -53,17 +54,19 @@ files:
 - 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
 - templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-switzerland.jpg
+- templates/rails_vite_hello_world/app/frontend/initializers/actionCable.js
 - templates/rails_vite_hello_world/app/frontend/javascript/components/JavascriptImport.svelte
 - 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/TurboStreamsChannel.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/sub/NestedComponent.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascript.js
 - templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascriptToggled.js

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

@@ -1,56 +0,0 @@
-<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 TurboStream: ${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>
-
-<ul class="results">
-    {#each results as result}
-        <li class="{result.class}">{result.text}</li>
-    {/each}
-</ul>