svelte-on-rails 5.1.0 → 5.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e2782073f696f72736004ae21d57a71e4429fb878f915954e36628e16904de9
-  data.tar.gz: 2d041a60e7908ce20ab64f490ccebe3d3c673882986c83a64981aaf1e9931768
+  metadata.gz: 8f91cbdd2375be3978749859e8bb36b16fbba13fa1e9ac494b9b5e731bc06f91
+  data.tar.gz: f0164b5a93bfb62b2abeedbaebc85064253ad6e4500d9d94a0cfda570416e794
 SHA512:
-  metadata.gz: 5d1fef990a79dfa782b0101f33ed64f3631d126ea6ef16dfde8d21d240653d8d938a87689955af288b862362216fbb760db61e79d709c512b242d0f86ad823d1
-  data.tar.gz: 430b9cf7ab45fb7e0ab629b4de95bd262e8b02bd68a58793dcd614832dfd2bb04d63f52d20ddc6639dc951d8ae132188dee755dadab1042f98a0268dcf4bab63
+  metadata.gz: f490b501d07cfe64636b73e45ba2b42d30cfc2fc33168488635565fee4a1d3def9e31b5097cbba82aa7ebfad92e08b6a6be30afa53385dbb206e616d6a72352e
+  data.tar.gz: 94e88d6876d9d434e504899f47f5d71ba2d3129a3a55a94992ce6a573d9e78ab305e306f7c3c2576c0135b3aeb03c5578fec74175eb2fc18d89151bac059d664

data/README.md

@@ -34,11 +34,14 @@ vision while aligning seamlessly with Rails’ full-stack philosophy.
   - 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**
-  - 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
+- **Compared to React/Vue**
+  - Svelte eliminates the virtual DOM, resulting in leaner, more compact packages and faster performance
+    - Watch Rich Harris’ [Rethinking Reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity) (3:50–6:40) for a compelling comparison with react
+  - Easier to learn
+  - React and Vue having a vaster Community, bigger Ecosystem
+    - But, for integration, like here, this is not importand
+    - Svelte is sufficiently established
+    - Svelte is younger and growing
 
 Svelte empowers Rails’ full-stack vision with modern, streamlined frontend integration.
 
@@ -307,6 +310,46 @@ Consider setting `ssr: false` for testing only for performance reasons.
 Yo can override this on a attribute on the view-helper for specific components.
 But, in normal cases it should not be neccessary testing ssr explicitly.
 
+## ActiveRecord helpers
+
+Adds the `#svelte_attributes` helper to your models, example: 
+
+```ruby
+@book.svelte_attributes(
+  :name,
+  :calculation_method,
+  author: [:name]
+)
+```
+
+would result in something like this: 
+
+```ruby
+{
+  "values" => {
+    "name" => "Learning Ruby",
+    "calculation_method": "any-result",
+    "author" => {
+      "name" => "Michael Hartl"
+    },
+  },
+  "book_labels" => {
+    "name" => "Name", # translated by human_attribute_name..
+    "calculation_method" => "Calculation method",
+    "author" => "Author"
+  },
+  "author_labels": {
+    "name" => "Name" 
+  }
+}
+```
+
+This should ease transferring data you need within the component mostly.
+
+If an optional `belongs_to` association is empty, the labels are still calculated.
+
+**Caching:** The component's attributes are used to generate a checksum, which serves as the cache key for efficient storage and retrieval.
+
 ## Caching
 
 Caching only is relevant for `ssr`
@@ -365,7 +408,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
 
 ActionCable is the more basic library behind `TurboStream` and it is a second Option to call Javascript Actions from the server.
 
@@ -395,7 +448,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 +467,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 +476,43 @@ 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.dispatch(
+  '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.dispatch` it would fire the `stream-action` event on all components.
+
+The **#dispatch_by_selector** does not go over the component, it searches for any matching selector just
+on the whole `document` and fires the given event there.
+
+# SvelteOnRails::TurboStream
+
+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 +526,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 +544,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.dispatch
 ```
 **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.
 
@@ -510,7 +573,7 @@ within the svelte component.
 Then, call it by:
 
 ```ruby
-      SvelteOnRails::TurboStream.new.dispatch_event(
+      SvelteOnRails::TurboStream.dispatch(
         channel: 'my-custom-stream',
         component: '/javascript/components/TurboStreamsChannel',
         selector: '.counter-button',
@@ -519,7 +582,8 @@ Then, call it by:
       )
 ```
 
-
+The **#dispatch_by_selector** does not go over the component, it searches for any matching selector just
+on the whole `document` and fires the given event there.
 
 ## More rake tasks
 
@@ -575,30 +639,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

@@ -129,11 +129,15 @@ module SvelteOnRails
         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)
+        utils_i.add_route("  get \"svelte_on_rails_hello_world/web_socket\"", app_root: Rails.root)
+        utils_i.add_route("  get \"svelte_on_rails_hello_world/web_socket_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)
+        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(['all_features_test'], app_root: nil, force: true, silent: true)
       end
 
       def haml_and_convert

data/lib/svelte-on-rails.rb

@@ -2,6 +2,8 @@ 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/active_record_extensions"
+
 require "svelte_on_rails/railtie" if defined?(Rails)
 
 require "svelte_on_rails/renderer/renderer"

data/lib/svelte_on_rails/action_cable.rb

@@ -1,6 +1,16 @@
 module SvelteOnRails
   class ActionCable
-    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, channel: "svelte_on_rails_channel")
+    def self.dispatch(component = nil, event_detail = nil, event: 'stream-action', selector: nil, channel: nil)
+
+      utils = SvelteOnRails::Lib::Utils
+      conf = SvelteOnRails::Configuration.instance
+
+      _comp = if component
+                utils.validate_filename(component)
+                "/#{conf.components_folder + component}"
+              end
+
+      _channel = require_channel(svelte_on_rails_configs['channel'] || channel)
 
       if event != 'stream-action' && !selector
         raise "Another event name than the default one is only possible together with a selector"
@@ -8,35 +18,54 @@ module SvelteOnRails
 
       args = {
         eventDetail: event_detail,
-        component: component,
+        component: _comp,
         event: event,
         selector: selector
       }
 
-      #args_enc = Base64.strict_encode64(args.to_json)
+      ::ActionCable.server.broadcast(
+        _channel,
+        args
+      )
+
+    end
+
+    def self.dispatch_by_selector(selector, event_detail = nil, event: 'stream-action', channel: nil)
 
-      ActionCable.server.broadcast(channel, args)
+      _channel = require_channel(svelte_on_rails_configs['channel'] || 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: '/false/',
+        event: event,
+        selector: selector
+      }
+
+      ::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.svelte_on_rails_configs
+      cnf = SvelteOnRails::Configuration.instance.configs[:action_cable]
+      raise 'ActionCable not configured for SvelteOnRails' if cnf.nil?
+      cnf
     end
+
+    def self.require_channel(channel)
+      unless channel.present?
+        raise 'Missing attribute or configuration: action_cable/channel'
+      end
+      channel
+    end
+
   end
 end

data/lib/svelte_on_rails/active_record_extensions.rb

@@ -0,0 +1,19 @@
+# lib/svelte_on_rails/active_record_extensions.rb
+module SvelteOnRails
+  module ActiveRecordExtensions
+    def self.included(base)
+      unless defined?(ActiveRecord::Base) && base.ancestors.include?(ActiveRecord::Base)
+        raise 'SvelteOnRails::ActiveRecordExtensions can only be included in ActiveRecord models'
+      end
+    end
+
+    # Returns a hash of attributes, methods, and associations formatted for Svelte components
+    def svelte_attributes(*attributes)
+      @svelte_attributes ||= begin
+                               utils = SvelteOnRails::Lib::Utils
+                               utils.svelte_attributes(self, attributes)
+                             end
+    end
+
+  end
+end

data/lib/svelte_on_rails/installer/hello_world.rb

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

data/lib/svelte_on_rails/lib/utils.rb

@@ -137,6 +137,153 @@ module SvelteOnRails
           Rails.logger.warn("  => #{line}")
         end
       end
+
+      def self.validate_filename(filename)
+
+        conf = SvelteOnRails::Configuration.instance
+
+        file_path = conf.components_folder_full + "#{filename}.svelte"
+
+        unless File.exist?(file_path)
+
+          raise "svelte-on-rails gem, view helper #svelte_component\n\nFile not found:\n" +
+                "#{conf.components_folder_full + "#{filename}.svelte"}\n\n" +
+                "Your configurations are:\n\nfrontend_folder: «#{conf.frontend_folder}»\ncomponents_folder: «#{conf.components_folder}»\n.. and the filename attribute for the view helper: «#{filename}»\n"
+
+        end
+
+        if conf.watch_changes? && !file_exist_case_sensitive?(conf.components_folder_full, "#{filename}.svelte")
+
+          raise "svelte-on-rails gem, view helper #svelte_component\n\n" +
+                "File found but Upper and lower case letters are incorrect:\n" +
+                "(This check is only on development environments when watch_changes is true)\n\n" +
+                "#{conf.components_folder_full + "#{filename}.svelte"}\n\n" +
+                "Your configurations are:\nfrontend_folder: «#{conf.frontend_folder}»\ncomponents_folder: «#{conf.components_folder}»\n.. and the filename attribute for the view helper: «#{filename}»\n"
+
+        end
+      end
+
+      def self.svelte_attributes(record, attributes, labels = {}, call_stack: 0, offset: nil, limit: nil)
+
+        if record.respond_to?(:each)
+          unless record.is_a?(ActiveRecord::Relation) || record.is_a?(ActiveRecord::Associations::CollectionProxy)
+            raise 'record set must be a Article::ActiveRecord_Associations_CollectionProxy'
+          end
+
+          recs = (limit ? record.limit(limit) : record)
+          recs2 = (offset ? recs.offset(limit) : recs)
+
+          values = recs2.map do |rec|
+            svelte_attributes(rec, attributes, labels, call_stack: call_stack + 1)
+          end
+
+        elsif record.is_a?(Class)
+
+          # this is the case if a belongs_to association is empty; In that case we pass the class itself and extract only the labels
+          raise 'limit and offset are supported only for iterable objects' if limit || offset
+          attributes.each do |attr|
+            unless attr.respond_to?(:each)
+              labels["#{record.to_s.underscore}_labels"] ||= {}
+              labels["#{record.to_s.underscore}_labels"][attr.to_s] ||= record.human_attribute_name(attr)
+            end
+          end
+          values = {}
+
+        else
+
+          # we have a single record
+
+          raise 'limit and offset are supported only for iterable objects' if limit || offset
+          values = {}
+
+          table_name = record.class.to_s.underscore
+
+          attributes.each do |attr|
+
+            if attr.is_a? Hash
+
+              # we have associations
+              attr.each do |key, value|
+                _key = key.to_s
+
+                # skip and fetch offset and limit
+                if key.to_s.match(/_limit$/) && !record.respond_to?(key)
+                  raise 'Invalid attribute' unless record.respond_to?(key.to_s[0..-7])
+                  next
+                end
+                if key.to_s.match(/_offset$/) && !record.respond_to?(key)
+                  raise 'Invalid attribute' unless record.respond_to?(key.to_s[0..-8])
+                  next
+                end
+                offs, lim = svelte_attribute_extract_limit(record, attributes, _key)
+
+                labels["#{table_name}_labels"] ||= {}
+                labels["#{table_name}_labels"][_key] ||= record.class.human_attribute_name(_key)
+
+                # values
+
+                content = record.send(_key)
+                reflect = record.class.reflect_on_association(_key)
+                if reflect
+                  if content.respond_to?(:each)
+                    values[_key] = svelte_attributes(
+                      content, value, labels,
+                      call_stack: call_stack + 1,
+                      offset: offs,
+                      limit: lim
+                    )
+                  else
+                    values[_key] = svelte_attributes(
+                      content || reflect.active_record, # if no record, we extract only the labels
+                      value, labels,
+                      call_stack: call_stack + 1,
+                      offset: offs,
+                      limit: lim
+                    )
+                  end
+                else
+                  raise "invalid association: #{_key}"
+                end
+              end
+
+            else
+              # we have attributes
+              raise 'Invalid attribute' unless [Symbol, String].include?(attr.class)
+              _key = attr.to_s
+
+              labels["#{table_name}_labels"] ||= {}
+              labels["#{table_name}_labels"][_key] ||= record.class.human_attribute_name(_key)
+
+              values[_key] = record.send(_key)
+            end
+
+          end
+        end
+
+        if call_stack >= 1
+          values
+        else
+          { 'values' => values }.merge(labels)
+        end
+
+      end
+
+      private
+
+      def self.svelte_attribute_extract_limit(record, attributes, key)
+
+        hash_args = attributes.grep(Hash).first.with_indifferent_access # multiple arrays is not possible
+
+        offset = if hash_args["#{key}_offset"] && !record.respond_to?("#{key}_offset")
+                 hash_args["#{key}_offset"]
+               end
+
+        limit = if hash_args["#{key}_limit"] && !record.respond_to?("#{key}_limit")
+                hash_args["#{key}_limit"]
+              end
+
+        [offset, limit]
+      end
     end
   end
 end

data/lib/svelte_on_rails/lib/view_helper_support.rb

@@ -8,9 +8,11 @@ module SvelteOnRails
       def initialize(file, args, request, caching = false)
 
         @start_time = Time.now
+        @conf = SvelteOnRails::Configuration.instance
+        utils = SvelteOnRails::Lib::Utils
+        utils.validate_filename(file) if @conf.watch_changes?
         @filename = (file.match(/\.svelte$/) ? file[0..-8] : file)
         @args_checksum = Zlib.crc32(args.to_json).to_s(36)
-        @conf = SvelteOnRails::Configuration.instance
         @helper_options, @html_options, @svelte_props = split_props(
           args,
           %i[class id style],
@@ -18,7 +20,6 @@ module SvelteOnRails
         )
         @request = request
         @ssr = determine_ssr
-        validate_file if @conf.watch_changes?
 
         # precompile
 
@@ -64,24 +65,6 @@ module SvelteOnRails
         @ssr
       end
 
-      def file_not_found_message
-        ff = conf.frontend_folder
-        cf = conf.components_folder
-        "svelte-on-rails gem, view helper #svelte_component\n\nFile not found:\n" +
-          "#{conf.components_folder_full + "#{filename}.svelte"}\n\n" +
-          "Your configurations are:\n\nfrontend_folder: «#{ff}»\ncomponents_folder: «#{cf}»\n.. and the filename attribute for the view helper: «#{filename}»\n"
-      end
-
-      def file_case_sensitive_message
-        ff = conf.frontend_folder
-        cf = conf.components_folder
-        "svelte-on-rails gem, view helper #svelte_component\n\n" +
-          "File found but Upper and lower case letters are incorrect:\n" +
-          "(This check is only on development environments when watch_changes is true)\n\n" +
-          "#{conf.components_folder_full + "#{filename}.svelte"}\n\n" +
-          "Your configurations are:\nfrontend_folder: «#{ff}»\ncomponents_folder: «#{cf}»\n.. and the filename attribute for the view helper: «#{filename}»\n"
-      end
-
       def log_rendering(message)
 
         Rails.logger.info "  #{message} (#{elapsed_milliseconds}ms)"
@@ -119,16 +102,6 @@ module SvelteOnRails
 
       private
 
-      def validate_file
-        file_path = conf.components_folder_full + "#{filename}.svelte"
-        unless File.exist?(file_path)
-          raise file_not_found_message
-        end
-        if conf.watch_changes? && !SvelteOnRails::Lib::Utils.file_exist_case_sensitive?(conf.components_folder_full, "#{filename}.svelte")
-          raise file_case_sensitive_message
-        end
-      end
-
       def determine_ssr
         _ssr = if @helper_options.key?(:ssr)
                  if @conf.watch_changes?

data/lib/svelte_on_rails/railtie.rb

@@ -13,6 +13,12 @@ module SvelteOnRails
       SvelteOnRails::Configuration.instance
     end
 
+    initializer 'svelte_on_rails.active_record_extensions' do
+      ActiveSupport.on_load(:active_record) do
+        include SvelteOnRails::ActiveRecordExtensions
+      end
+    end
+
     rake_tasks do
       load File.expand_path("../../tasks/svelte_on_rails_tasks.rake", __FILE__)
     end

data/lib/svelte_on_rails/turbo_stream.rb

@@ -1,6 +1,14 @@
 module SvelteOnRails
   class TurboStream
-    def dispatch_event(event: 'stream-action', event_detail: nil, selector: nil, component: nil, channel: nil)
+    def self.dispatch(component = nil, event_detail = nil, event: 'stream-action', selector: nil, channel: nil)
+
+      utils = SvelteOnRails::Lib::Utils
+      conf = SvelteOnRails::Configuration.instance
+
+      _comp = if component
+                utils.validate_filename(component)
+                "/#{conf.components_folder + component}"
+              end
 
       if event != 'stream-action' && !selector
         raise "Another event name than the default one is only possible together with a selector"
@@ -8,7 +16,7 @@ module SvelteOnRails
 
       args = {
         eventDetail: event_detail,
-        component: component,
+        component: _comp,
         event: event,
         selector: selector
       }
@@ -24,9 +32,33 @@ module SvelteOnRails
 
     end
 
+    def self.dispatch_by_selector(selector, event_detail = nil, event: 'stream-action', 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: '/false/',
+        event: event,
+        selector: selector
+      }
+
+      args_enc = Base64.strict_encode64(args.to_json)
+
+      Turbo::StreamsChannel.send(
+        "broadcast_append_to",
+        require_channel(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
+    def self.configs
       @configs ||= begin
 
                      conf = SvelteOnRails::Configuration.instance
@@ -43,5 +75,13 @@ module SvelteOnRails
                      conf.configs[:turbo_stream]
                    end
     end
+
+    def self.require_channel(channel)
+      unless channel.present?
+        raise 'Missing attribute or configuration: turbo_stream/channel'
+      end
+      channel
+    end
+
   end
 end

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -18,7 +18,7 @@ namespace :svelte_on_rails do
   task :remove_hello_world do
 
     hw_i = SvelteOnRails::Installer::HelloWorld
-    hw_i.remove_hello_world(['rails_vite_hello_world'])
+    hw_i.remove_hello_world(['all_features_test'])
 
   end
 
@@ -27,7 +27,7 @@ namespace :svelte_on_rails do
 
     puts '-' * 80
     hw_i = SvelteOnRails::Installer::HelloWorld
-    hello_world_path = hw_i.install_hello_world(['rails_vite_hello_world'])
+    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

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

@@ -0,0 +1,66 @@
+class SvelteOnRailsHelloWorldController < ApplicationController
+
+  def index
+  end
+
+  def web_socket_action
+
+    # render plain: Article.first.svelte_attributes(:name) #(:name, :calc_method, children: [:name], children_limit: 2, parent: [:name]).to_json
+    #
+    # return
+
+    comp = 'ReceiveFromChannel'
+
+    case params['stream']
+
+    when 'action-cable-to-component'
+      SvelteOnRails::ActionCable.dispatch(
+        comp,
+        { message: "#{SecureRandom.hex(2)} Sent by <span class='transfer'>ActionCable</span>: äöü🤣🌴🌍漢字", class: 'action-cable-to-component' },
+        event: 'stream-action'
+      )
+
+    when 'action-cable-to-element'
+      SvelteOnRails::ActionCable.dispatch(
+        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'
+      )
+
+    when 'action-cable-to-selector'
+      SvelteOnRails::ActionCable.dispatch_by_selector(
+        '.receive-by-selector',
+        { message: "Sent by ActionCable/Selector: äöü🤣🌴🌍漢字", class: 'action-cable-to-selector' }
+      )
+
+    when 'turbo-stream-to-all-components'
+      SvelteOnRails::TurboStream.dispatch(
+        nil,
+        { message: "Sent by TurboStream: äöü🤣🌴🌍漢字", class: 'turbo-stream-to-all-components' },
+        )
+
+    when 'turbo-stream-to-element'
+      SvelteOnRails::TurboStream.dispatch(
+        nil,
+        { message: "Sent by TurboStream: äöü🤣🌴🌍漢字", 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 TurboStream/Selector: äöü🤣🌴🌍漢字", class: 'turbo-stream-to-selector' }
+      )
+
+    else
+      raise 'Unknown stream'
+
+    end
+
+    render plain: "dispatched: #{params['stream']}"
+
+  end
+
+end

data/templates/all_features_test/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/all_features_test/app/frontend/javascript/components/ReceiveFromChannel.svelte

@@ -0,0 +1,70 @@
+<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/web_socket_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
+            }
+        )
+    };
+
+    function handleStreamSelectorEvent(ev) {
+        results.push(
+            {
+                text: `Element triggered from Server: ${JSON.stringify(ev.detail.message)}`,
+                class: ev.detail.class
+            }
+        )
+    }
+
+</script>
+
+<h1 use:addComponentStreamListener={handleCableEvent}>Dispatch Actions from Server</h1>
+
+<p>Actions that are triggered from the server, by TurboStream or ActionCable</p>
+
+<h3>ActionCable</h3>
+<p>Easier Technic, more basic</p>
+<button class="action-cable-to-component" onclick="{() => callChannelAction('action-cable-to-component')}">to component</button>
+<button class="action-cable-to-element" onclick="{() => callChannelAction('action-cable-to-element')}">to element</button>
+<button class="action-cable-to-element" onclick="{() => callChannelAction('action-cable-to-selector')}">to selector</button>
+
+<h3>TurboStream</h3>
+<p>Securer Channels, for example if sending confidential data from the server to privileged user groups</p>
+<button class="turbo-stream-to-all-components" onclick="{() => callChannelAction('turbo-stream-to-all-components')}">to all components</button>
+<button class="turbo-stream-to-element" onclick="{() => callChannelAction('turbo-stream-to-element')}">to element</button>
+<button class="turbo-stream-to-element" onclick="{() => callChannelAction('turbo-stream-to-selector')}">to selector</button>
+
+<span class="my-custom-class" onmy-custom-event="{handleElementEvent}"></span>
+<span class="receive-by-selector" onstream-action="{handleStreamSelectorEvent}"></span>
+
+<h3>Results</h3>
+<div class="results-box">
+    <ul class="results">
+        {#each results as result}
+            <li class="{result.class}">{@html result.text}</li>
+        {/each}
+    </ul>
+</div>

data/templates/{rails_vite_hello_world → all_features_test}/app/views/svelte_on_rails_hello_world/_nav.html.erb

@@ -5,7 +5,7 @@
   |
   <%= 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' %>
+  <%= link_to 'Turbo Streams', '/svelte_on_rails_hello_world/web_socket' %>
 </div>
 
 <% turbo_id = request.headers['X-Turbo-Request-ID'] %>

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 5.1.0
+  version: 5.3.0
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -32,6 +32,7 @@ files:
 - 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/active_record_extensions.rb
 - lib/svelte_on_rails/configuration.rb
 - lib/svelte_on_rails/installer/gem_utils.rb
 - lib/svelte_on_rails/installer/haml.rb
@@ -51,30 +52,31 @@ files:
 - lib/svelte_on_rails/turbo_stream.rb
 - lib/svelte_on_rails/view_helpers.rb
 - lib/tasks/svelte_on_rails_tasks.rake
+- templates/all_features_test/app/channels/svelte_on_rails_channel.rb
+- templates/all_features_test/app/controllers/svelte_on_rails_hello_world_controller.rb
+- templates/all_features_test/app/frontend/images/svelte-on-rails-hello-world-england.png
+- templates/all_features_test/app/frontend/images/svelte-on-rails-hello-world-face-smile-wink.svg
+- templates/all_features_test/app/frontend/images/svelte-on-rails-hello-world-switzerland.jpg
+- templates/all_features_test/app/frontend/initializers/actionCable.js
+- templates/all_features_test/app/frontend/javascript/components/JavascriptImport.svelte
+- templates/all_features_test/app/frontend/javascript/components/JpgImport.svelte
+- templates/all_features_test/app/frontend/javascript/components/ParentWithChild.svelte
+- templates/all_features_test/app/frontend/javascript/components/PngImport.svelte
+- templates/all_features_test/app/frontend/javascript/components/ReceiveFromChannel.svelte
+- templates/all_features_test/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
+- templates/all_features_test/app/frontend/javascript/components/SvgRawImport.svelte
+- templates/all_features_test/app/frontend/javascript/components/sub/NestedComponent.svelte
+- templates/all_features_test/app/frontend/javascript/nestedJavascript.js
+- templates/all_features_test/app/frontend/javascript/nestedJavascriptToggled.js
+- templates/all_features_test/app/views/svelte_on_rails_hello_world/_nav.html.erb
+- templates/all_features_test/app/views/svelte_on_rails_hello_world/_styles.html.erb
+- templates/all_features_test/app/views/svelte_on_rails_hello_world/backend_frontend_rendered.html.erb
+- templates/all_features_test/app/views/svelte_on_rails_hello_world/index.html.erb
+- templates/all_features_test/app/views/svelte_on_rails_hello_world/ssr_auto_rendered.html.erb
+- templates/all_features_test/app/views/svelte_on_rails_hello_world/web_socket.html.erb
 - 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/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/sub/NestedComponent.svelte
-- templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascript.js
-- templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascriptToggled.js
-- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_nav.html.erb
-- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_styles.html.erb
-- 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

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

@@ -1,35 +0,0 @@
-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

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