svelte-on-rails 5.1.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e2782073f696f72736004ae21d57a71e4429fb878f915954e36628e16904de9
-  data.tar.gz: 2d041a60e7908ce20ab64f490ccebe3d3c673882986c83a64981aaf1e9931768
+  metadata.gz: 6f7ba72715095d212a289e5fba57a8ddd78b358474e4219a5b3c47f3b7d66c88
+  data.tar.gz: e690deefa5507a42cf31176efc368c3ff2f304ce1ff057dc79f431e33b5c4232
 SHA512:
-  metadata.gz: 5d1fef990a79dfa782b0101f33ed64f3631d126ea6ef16dfde8d21d240653d8d938a87689955af288b862362216fbb760db61e79d709c512b242d0f86ad823d1
-  data.tar.gz: 430b9cf7ab45fb7e0ab629b4de95bd262e8b02bd68a58793dcd614832dfd2bb04d63f52d20ddc6639dc951d8ae132188dee755dadab1042f98a0268dcf4bab63
+  metadata.gz: c1b2150fa517ce388feaf13c9816b8d71cb339c9ac9670d7552096430a8cddff8688629ca96c58dbcde715e4f9e9b3953e6760ab6e67c37f3a0ad10797b8fcc9
+  data.tar.gz: 275691b15976c8dbcd551b3c07ec7495da686c7fa23192b5aca471527b4fe63c20fa8048851a3d9b0085756de52bc7ae1d1e4e5a663114a9fbed9608873ba68e

data/README.md

@@ -365,7 +365,17 @@ turbo_stream:
   channel: 'public'
 ```
 
-## ActionCable!
+## ActionCable vs TurboStream
+
+- **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)
+
+## SvelteOnRails::ActionCable.send
 
 ActionCable is the more basic library behind `TurboStream` and it is a second Option to call Javascript Actions from the server.
 
@@ -395,7 +405,8 @@ Add to `application.js`
 
 ```javascript
 import { createConsumer } from "@rails/actioncable"
-import {dispatchSvelteStreamEvent, actionCableDebugLog} from '@csedl/svelte-on-rails'
+import { SvelteOnRails, dispatchSvelteStreamEvent, actionCableDebugLog } from '@csedl/svelte-on-rails'
+SvelteOnRails.debug = true
 
 const consumer = createConsumer()
 
@@ -413,9 +424,7 @@ consumer.subscriptions.create("SvelteOnRailsChannel", {
 })
 ```
 
-By setting `debug = true` [node package](https://www.npmjs.com/package/@csedl/svelte-on-rails) you see what it is doing.
-
-**WhatdispatchSvelteStreamEvent does**
+**What dispatchSvelteStreamEvent does**
 
 - Without the attribute `component` given,
   it searches for all elements with the class `svelte-component` and fires the event `channel-action`
@@ -424,18 +433,40 @@ By setting `debug = true` [node package](https://www.npmjs.com/package/@csedl/sv
 
 **Usage**
 
+`app/frontend/javascript/components/folder/MyComponent.svelte`
+
+```sveltehtml
+<script>
+  import {addComponentStreamListener} from '@csedl/svelte-on-rails/src/componentStreamListener'
+
+  function handleCableEvent(event) {
+      console.log('Event received by Turbo Stream', event.detail)
+  }
+</script>
+<!--on ANY element:-->
+<h1 use:addComponentStreamListener={handleCableEvent}>Test TurboStreams Channel</h1>
+```
+
+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
-ActionCable.server.broadcast("svelte_on_rails_channel",
-                           {
-                             eventDetail: { message: "Sent by ActionCable: äöü🤣🌴🌍漢字" },
-                             component: '/javascript/components/ReceiveFromChannel',
-                           }
+SvelteOnRails::ActionCable.send(
+  'folder/MyComponent',
+  { message: "greetings from Server: äöü🤣🌴🌍漢字" }
 )
 ```
 
-# Turbo::StreamsChannel.send!
+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:
 
@@ -449,15 +480,15 @@ 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.
+`<%= turbo_stream_from 'authenticated' if current_user %>` 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`),
+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
      Turbo::StreamsChannel.send(
         "broadcast_append_to",
-        'public',
+        'authenticated',
         target: 'svelte-on-rails-stream-actions-box',
         content: "<div>Turbo-Streams are working!</div>"
       )
@@ -467,27 +498,13 @@ 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
+    SvelteOnRails::TurboStream.send
 ```
 **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.
 
@@ -519,8 +536,6 @@ Then, call it by:
       )
 ```
 
-
-
 ## More rake tasks
 
 This tasks are more for testing/playground purposes
@@ -575,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/action_cable.rb

@@ -1,6 +1,11 @@
 module SvelteOnRails
   class ActionCable
-    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, channel: "svelte_on_rails_channel")
+    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"
@@ -13,30 +18,19 @@ module SvelteOnRails
         selector: selector
       }
 
-      #args_enc = Base64.strict_encode64(args.to_json)
+      ::ActionCable.server.broadcast(
+        _channel,
+        args
+      )
 
-      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
+    def self.configs
+      SvelteOnRails::Configuration.instance.configs[:action_cable]
     end
+
   end
 end

data/lib/svelte_on_rails/turbo_stream.rb

@@ -1,6 +1,6 @@
 module SvelteOnRails
   class TurboStream
-    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, channel: 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"
@@ -26,7 +26,7 @@ module SvelteOnRails
 
     private
 
-    def configs
+    def self.configs
       @configs ||= begin
 
                      conf = SvelteOnRails::Configuration.instance

data/templates/config_base/config/svelte_on_rails.yml

@@ -27,6 +27,10 @@ turbo_stream:
   # html-id of any element that must exist for being able to receive actions (turbo streams can only work this way)
   channel: 'public'
 
+action_cable:
+  # if you want to use it
+  channel: "svelte_on_rails_channel"
+
 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/controllers/svelte_on_rails_hello_world_controller.rb

@@ -5,29 +5,39 @@ class SvelteOnRailsHelloWorldController < ApplicationController
 
   def turbo_stream_action
 
-    if params['increase']
-      SvelteOnRails::TurboStream.new.dispatch_event(
-        event: 'click',
-        selector: '.counter-button',
-        component: '/javascript/components/ReceiveFromChannel'
+    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'
-    elsif params['action_cable']
-
-      ActionCable.server.broadcast("svelte_on_rails_channel",
-                                   {
-                                     eventDetail: { message: "Sent by ActionCable: äöü🤣🌴🌍漢字" },
-                                     component: '/javascript/components/ReceiveFromChannel',
-                                   }
+
+    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'
       )
-      #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" }
+    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'
       )
-      render plain: 'component-action streamed'
+
     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

@@ -1,37 +1,31 @@
 <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) {
+    function callChannelAction(action) {
         results = []
-        axios.get(`/svelte_on_rails_hello_world/turbo_stream_action?${params}`)
+        axios.get(`/svelte_on_rails_hello_world/turbo_stream_action?stream=${action}`)
             .then(function (response) {
-                results.push(
-                    {
-                        text: `server action called, status: ${response.status}`,
-                        class: 'called-for-action'
-                    })
+                console.log(`server action called, status: ${response.status}`)
             })
     }
 
-    function increaseCounter() {
-        counter += 1
-    }
-
     const handleCableEvent = (ev) => {
         results.push(
             {
                 text: `Message received from Server: ${JSON.stringify(ev.detail.message)}`,
-                class: 'stream-action-received'
+                class: ev.detail.class
+            }
+        )
+    };
+
+    function handleElementEvent(ev) {
+        results.push(
+            {
+                text: `Element triggered from Server: ${JSON.stringify(ev.detail.message)}`,
+                class: ev.detail.class
             }
         )
     };
@@ -42,16 +36,18 @@
 
 <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>
+<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>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 5.1.0
+  version: 5.2.0
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -59,6 +59,7 @@ files:
 - 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