svelte-on-rails 0.0.4 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63fd8216a8e992b4357b94950c46cdba9d107b64d1b3d3d6b15a1b7c7f3e92ea
-  data.tar.gz: 034fc6c768eb1645acd934374df229f3eca5c9484fd32af8260be3118214225e
+  metadata.gz: 652cbedb8f5796094fde7e81e8e548de0065d33efcc9ccedac89772626b6c937
+  data.tar.gz: 324c08b71751b554662183e190dfe690cbe8fda05146a91c4fe42875956ce367
 SHA512:
-  metadata.gz: ac2920e177aa42e613519a5a06617c475186a97b838526df66857b7048a365107c8121c6a00d7c52ae6c1d85042b84712ca7add36d0a06d1c0ca19b933d51afc
-  data.tar.gz: a0cec2eda153ab725622906c0242c1563a626dd1b27e36d7cc5d7ee911dd41f14ac84f782c9e004bb6c86ff3b3b27c4aac2c92f64c06ce22bcad1793c8f55355
+  metadata.gz: be5231d79d34ed7ce9b5086c653b6f16d85bddffbf0c9ebf4fe7f8a8beb3e2841d26c9f86950aa4b17855b6530c68554eb696fd2e259c818f0505a4f86591eea
+  data.tar.gz: 4c428ca838a17cfe7609a0734b6419a4fb12feda2fed52aadbf72639bfa1f41eb0abf1cc2fa346a2456fc3f9a8af671f1696f5ccde045cab4a2ddbe58ae348b0

data/README.md

@@ -1,23 +1,26 @@
 # Svelte on rails
 
-Seamless and robust Svelte in Rails integration. 
-Can render server-side, always or only on first request, and 
-handle subsequent turbo requests as custom elements without shadow-dom. 
+Seamless and robust Svelte in Rails integration.
+
+Can render server-side (SSR), always or only on first request, and handle 
+subsequent turbo requests by mounting svelte components 
+on an empty element for server-side performance optimisation.
 Server-side compilation via rollup.
 
-Server-side rendering is the bottleneck in this pipeline. Although rollup is mighty,
-this gem is in a early state and there sure are limitations.
-So, please always test your components early if they pass ssr. 
+Server-side rendering is the bottleneck on such a pipeline. 
+Although rollup is powerful, this gem is in an early state 
+and there are certainly limitations.
+So please always test your components early if they pass ssr.
 
 I have written everything in ESM syntax.
-Although the common-js plugin is installed, I did not test it, 
-so `require` for example may not work in Svelte components. 
-To check which import statements work, please check the components in the 
-`spec/rails-vite-test-app/app/frontend/javascript/components` gem.
+Although the common-js plugin is installed, I have not tested it, 
+so for example `require` may not work in Svelte components.
+To check which import statements work, please check the components 
+in the `spec/rails-vite-test-app/app/frontend/javascript/components` gem.
 
 This all is developed on Rails-7 together with `vite_rails`.
 
-Thanks to [chrisward](https://www.npmjs.com/~crisward), [shakacode](https://github.com/shakacode/react_on_rails) 
+Thanks to [shakacode](https://github.com/shakacode/react_on_rails) 
 and [ElMassimo](https://github.com/ElMassimo) because they all helped me with theyr gems.
 
 ## Requirements
@@ -40,9 +43,9 @@ and run
 $ rails svelte_on_rails:install
 ```
 
-this creates a config file, please check the comments there.
+This will create a little config file, please read the comments there.
 
-setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side
+Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side.
 
 ## Usage
 
@@ -50,6 +53,27 @@ setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@cse
 = svelte_component("myComponent", items: ['item1', 'item2'])
 ```
 
+would render a component like `myComponent.svelte`
+
+```sveltehtml
+<script>
+  export let items
+</script>
+
+<ul>
+  {#each items as item}
+    <li>{item}</li>
+  {/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+  }
+</style>
+```
+
+
 ### Import statements
 
 For check which statements are working and actively tested, please check the 
@@ -62,26 +86,25 @@ Among others there are
 - `import { someFunction } from '../customJavascript.js';`
 - `import Child from './Child.svelte';`
 
-## Option render_server_side: :auto
+## Option `render_server_side: :auto`
 
 Works with `hotwired/turbo` only
 
 By passing the `render_server_side: :auto` option to the view helper, 
-it checks if the request is an initial request (request header `X-Turbo-Request-ID` is not present), 
-then does nothing server-side but add a tag. Assuming the filename is `HelloWorld.svelte`:
+it checks if the request is an initial request (request header `X-Turbo-Request-ID` is present):
 
-```haml
-= svelte_component("HelloWorld", message: "Property from the server", render_server_side: :auto, class: "box")
-#=> output on the rails-console:
-Added Svelte-Tag for custom element: «<hello-world-svelte class='box svelte-component'></hello-world>»
-```
+On Initial-Request, it adds the attribute `data-svelte-on-rails-initialize-action="hydrate"` and
+returns a server side rendered component that will be hydrated on the frontend by the npm package.
+
+Otherwise it adds `mount` instead of hydrate, and renders a empty element, but provided with the
+necessary attributes for the npm package.
 
-If configured on the npm module, it instaniates a custom element and adopts it to the element.
+More details to this point you can find on the npm package.
 
-This works perfectly with hotwired/turbo because the custom elements are built on the 
-first page load and survive page visits from turbo. If you then visit a page that 
-has the `%hello-world` tag, the component will appear immediately. 
-This is not a default setting, as it requires more configuration.
+This works perfectly with hotwired/turbo because the javascript is only
+loaded on very first load to the frontend, then the most work is done
+in frontend and the server is relieved, except on initial request.
+You will see no unpleasant «blink» on the page.
 
 ## Styles
 

data/lib/svelte_on_rails/view_helpers.rb

@@ -3,80 +3,62 @@ module SvelteOnRails
 
     def svelte_component(filename, props = {})
 
-      unless filename.match(/[a-z|A-Z][a-z|A-Z|0-9]+$/)
-        raise "FileName/TagName must be in camelCase format and without .svelte suffix. It must not start with a number."
-      end
-
-      render_server_side = if props.key?(:render_server_side)
-                             props.delete(:render_server_side)
-                           else
-                             SvelteOnRails::Configuration.instance.render_server_side
-                           end
-
-      unless [true, false, :auto].include?(render_server_side)
+      # check what to do
+
+      rss = if props.key?(:render_server_side)
+              props.delete(:render_server_side)
+            else
+              SvelteOnRails::Configuration.instance.render_server_side
+            end
+      unless [true, false, :auto].include?(rss)
         raise "Only true, false or auto are allowed for the argument #render_server_side"
       end
+      render_server_side = (rss == :auto && request.headers['X-Turbo-Request-ID'].blank? || rss)
 
       hydrate = if props.key?(:hydrate)
                   props[:hydrate]
                 else
                   true
                 end
-      props.delete(:hydrate)
 
-      html_class = props.delete(:class).to_s + " svelte-component"
-
-      is_initial_request = request.headers['X-Turbo-Request-ID'].blank?
+      # separate hashes
 
+      props.delete(:hydrate)
+      props.delete(:render_server_side)
+      options = props.slice(:class, :id, :style)
+      props.delete(:class)
+      props.delete(:id)
+      props.delete(:style)
 
+      # set up html
 
-      # render
+      options[:class] = options[:class].to_s
+      options[:class] += ' svelte-component svelte-on-rails-not-initialized-component'
+      options[:data] ||= {}
+      options[:data][:props] = props.to_json
+      options[:data][:svelte_component] = filename
 
-      if render_server_side == true || (render_server_side == :auto && is_initial_request)
+      if render_server_side
 
         # render server side
 
         start_time = Time.now
-        sv = SvelteOnRails::RenderServerSide.new(filename +  '.svelte')
+        sv = SvelteOnRails::RenderServerSide.new(filename + '.svelte')
         sv.compile_if_changes
         res = sv.render_compiled_file(props)
         time = Time.now - start_time
         Rails.logger.info "  Rendered #{filename}.svelte server-side: #{time.round(3)}ms"
 
-        data = { props: props }
-
-        data[:not_hydrated_svelte_component] = filename if hydrate
-
-        content_tag(:div, class: html_class, data: data) do
+        content_tag(:div, options) do
           r = content_tag(:style, res['css'], type: 'text/css')
           r << res['html'].html_safe
-          #res['html'].html_safe
         end
 
       else
 
-        # render for custom-element
-
-        tag_name = filename.gsub('/','--').underscore.gsub('_', '-') + '-svelte'
-
-        prp = []
-        props.each do |k, v|
-          _v = if v.is_a?(Array) || v.is_a?(Hash)
-                 v.to_json
-               else
-                 v.to_s
-               end
-          prp.push("#{k}='#{_v}'")
-        end
-        if html_class
-          prp.push("class='#{html_class}'")
-        end
-
-        tag = "<#{tag_name} #{prp.join(' ')}></#{tag_name}>"
-
-        Rails.logger.info "  Rendered Tag for Svelte custom element: «#{tag}»"
+        # render empty element
 
-        tag.html_safe
+        content_tag(:div, options) {}
 
       end
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.7
 platform: ruby
 authors:
 - Christian Sedlmair
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-15 00:00:00.000000000 Z
+date: 2025-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -1415,7 +1415,5 @@ requirements: []
 rubygems_version: 3.1.6
 signing_key:
 specification_version: 4
-summary: Seamless and robust Svelte in Rails integration. Can render server-side,
-  always or only on first request, and handle subsequent turbo requests as custom
-  elements without shadow-dom. Server-side compilation via rollup.
+summary: Seamlessly integrate Svelte Components into Rails views.
 test_files: []