svelte-on-rails 5.2.0 → 5.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f7ba72715095d212a289e5fba57a8ddd78b358474e4219a5b3c47f3b7d66c88
-  data.tar.gz: e690deefa5507a42cf31176efc368c3ff2f304ce1ff057dc79f431e33b5c4232
+  metadata.gz: 4b172f3a295136f0317cc6fabb713262b1d1ac813894ef7e07f9b48da61f01a0
+  data.tar.gz: 477f5ce8a86e4d0e7bbf508be99486a9763454ee027b43240cb3432cf5250c37
 SHA512:
-  metadata.gz: c1b2150fa517ce388feaf13c9816b8d71cb339c9ac9670d7552096430a8cddff8688629ca96c58dbcde715e4f9e9b3953e6760ab6e67c37f3a0ad10797b8fcc9
-  data.tar.gz: 275691b15976c8dbcd551b3c07ec7495da686c7fa23192b5aca471527b4fe63c20fa8048851a3d9b0085756de52bc7ae1d1e4e5a663114a9fbed9608873ba68e
+  metadata.gz: 2f2595ac48833224788450ce49f31d775ffcd552dd628b630caa450045b02a38c725c81fadeaf4833b6eb8134d32b28c7c1b69fd387b639d0c9c655a22549a08
+  data.tar.gz: fd6aecc7d1923717b5e0119b337d221d6cf0e5c1e4a6b95f5a2a58911787b0e5a4587022850ea546a2c9e385e7d19a8fd96856ecbb07f010830bbe0d5319641b

data/README.md

@@ -5,24 +5,26 @@
 
 ---
 
-Combining [DHH's vision](https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision) 
-with modern front-end requirements:
+**Svelte on Rails: Modern Front-End + Rails Simplicity**
 
-Svelte.
+Guided by our Principles:
 
-Vite.
+- **Minimal JavaScript but Reactive Power**
+- **Beautiful Code, More Joy, Better Results**
+- **Convention over Configuration**
 
-# Why Choose Svelte for Integration?
+`svelte-on-rails` completes [DHH's vision](https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision) 
+for modern front-end demands.
 
-Svelte delivers the robust frontend experience missing from DHH’s 
-vision while aligning seamlessly with Rails’ full-stack philosophy.
+# Why Integrate Svelte?
+
+Svelte offers the simplest and most elegant approach to building reactive, high-performance front-end components.
 
 - **Seamless Integration**
   - Works flawlessly with Hotwired/Turbo
-  - Complements Hotwired perfectly
+  - Enhances Hotwire’s capabilities
 - **Developer-Friendly**
-  - Easy to learn
-  - Intuitive and powerful
+  - Simple to learn, intuitive, and powerful
   - Lightning-fast performance
 - **Compared to Single Page Apps (SPAs)**
   - Full-stack development delivers maximum value:
@@ -30,17 +32,17 @@ vision while aligning seamlessly with Rails’ full-stack philosophy.
     - 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
+  - Stimulus is not a tool for frontend-apps
+  - Svelte eliminates redundant HTML initial 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
+  - Offloads rendering to JavaScript by Frontend, Server side Rendering only where necessary, reducing server load
+- **Compared to React/Vue**
+  - No virtual DOM, resulting in leaner packages and faster performance
+    - See Rich Harris’ [Rethinking Reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity) (3:50–6:40) for a compelling comparison
+  - Easier to learn
+  - While React and Vue have larger communities, Svelte’s ecosystem is robust and growing, ideal for Rails integration
 
-Svelte empowers Rails’ full-stack vision with modern, streamlined frontend integration.
+Svelte empowers Rails’ full-stack vision with modern, efficient front-end integration.
 
 # Features
 
@@ -307,6 +309,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`
@@ -375,7 +417,7 @@ turbo_stream:
     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
+## SvelteOnRails::ActionCable
 
 ActionCable is the more basic library behind `TurboStream` and it is a second Option to call Javascript Actions from the server.
 
@@ -453,7 +495,7 @@ The «wrapping Element» is the Element from the view helper `svelte_component`
 Now you can dispatch events on the component by:
 
 ```ruby
-SvelteOnRails::ActionCable.send(
+SvelteOnRails::ActionCable.dispatch(
   'folder/MyComponent',
   { message: "greetings from Server: äöü🤣🌴🌍漢字" }
 )
@@ -461,9 +503,12 @@ SvelteOnRails::ActionCable.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.
+Without any arguments, just by `SvelteOnRails::ActionCable.dispatch` it would fire the `stream-action` event on all components.
 
-# SvelteOnRails::TurboStream.send
+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.
@@ -501,7 +546,7 @@ When this works you are good to go.
 And call this by:
 
 ```ruby
-    SvelteOnRails::TurboStream.send
+    SvelteOnRails::TurboStream.dispatch
 ```
 **What it does**
 
@@ -527,7 +572,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',
@@ -536,6 +581,9 @@ 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
 
 This tasks are more for testing/playground purposes

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

@@ -129,15 +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')
         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)
+        @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,11 +1,16 @@
 module SvelteOnRails
   class ActionCable
-    def self.send(component = nil, event_detail = nil, event: 'stream-action', selector: nil, channel: nil)
+    def self.dispatch(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
+      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"
@@ -13,7 +18,7 @@ module SvelteOnRails
 
       args = {
         eventDetail: event_detail,
-        component: component,
+        component: _comp,
         event: event,
         selector: selector
       }
@@ -23,13 +28,43 @@ module SvelteOnRails
         args
       )
 
+    end
+
+    def self.dispatch_by_selector(selector, event_detail = nil, event: 'stream-action', channel: nil)
+
+      _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 self.configs
-      SvelteOnRails::Configuration.instance.configs[:action_cable]
+    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

data/lib/svelte_on_rails/active_record_extensions.rb

@@ -0,0 +1,36 @@
+# 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
+
+                               # separate offset and limit
+
+                               opts = attributes.grep(Hash).first.symbolize_keys
+                               offset = opts[:offset]
+                               limit = opts[:limit]
+                               attr = if offset || limit
+                                        unless self.respond_to?(:each)
+                                          raise 'offset and limit are only supported for record sets that respond to :each'
+                                        end
+                                        _opts = opts.reject { |key, _| [:offset, :limit].include?(key) }
+                                        attributes.select { |item| !item.is_a?(Hash) }.push(_opts)
+                                      else
+                                        attributes
+                                      end
+
+                               utils = SvelteOnRails::Lib::Utils
+                               utils.svelte_attributes(self, attr, offset: offset, limit: limit)
+
+                             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,158 @@ 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.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 = {}
+
+        elsif 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 = (offset ? record.offset(offset) : record)
+          recs2 = (limit ? recs.limit(limit) : recs)
+
+          values = recs2.map do |rec|
+            svelte_attributes(rec, attributes, labels: labels, call_stack: call_stack + 1)
+          end
+
+        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
+
+                reflect = record.class.reflect_on_association(_key)
+                if reflect
+                  recs = record.send(_key)
+                  content = (recs.present? ? recs : reflect.active_record) # if no record, we extract only the labels
+                  if content.respond_to?(:each)
+                    values[_key] = svelte_attributes(
+                      content,
+                      value,
+                      labels: labels,
+                      call_stack: call_stack + 1,
+                      offset: offs,
+                      limit: lim
+                    )
+                  else
+                    values[_key] = svelte_attributes(
+                      content,
+                      value,
+                      labels: 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 self.send(component = nil, event_detail = nil, event: 'stream-action', selector: 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,6 +32,30 @@ 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 self.configs
@@ -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/{rails_vite_hello_world → all_features_test}/app/controllers/svelte_on_rails_hello_world_controller.rb

@@ -3,43 +3,64 @@ class SvelteOnRailsHelloWorldController < ApplicationController
   def index
   end
 
-  def turbo_stream_action
+  def web_socket_action
 
-    comp = '/javascript/components/ReceiveFromChannel'
+    # 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.send(
+      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.send(
+      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.send(
+      SvelteOnRails::TurboStream.dispatch(
         nil,
         { message: "Sent by TurboStream: äöü🤣🌴🌍漢字", class: 'turbo-stream-to-all-components' },
         )
 
     when 'turbo-stream-to-element'
-      SvelteOnRails::TurboStream.send(
+      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/{rails_vite_hello_world → all_features_test}/app/frontend/javascript/components/ReceiveFromChannel.svelte

@@ -6,7 +6,7 @@
 
     function callChannelAction(action) {
         results = []
-        axios.get(`/svelte_on_rails_hello_world/turbo_stream_action?stream=${action}`)
+        axios.get(`/svelte_on_rails_hello_world/web_socket_action?stream=${action}`)
             .then(function (response) {
                 console.log(`server action called, status: ${response.status}`)
             })
@@ -30,21 +30,38 @@
         )
     };
 
+    function handleStreamSelectorEvent(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>
+<h1 use:addComponentStreamListener={handleCableEvent}>Dispatch Actions from Server</h1>
+
+<p>Actions that are triggered from the server, by TurboStream or ActionCable</p>
 
-<p>Actions that are triggered by SvelteOnRails::TurboStream channel from the server</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>
 
-<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>
+<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">
-    <p>Result:</p>
     <ul class="results">
         {#each results as result}
             <li class="{result.class}">{@html result.text}</li>

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'] %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 5.2.0
+  version: 5.3.1
 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,31 +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/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/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