svelte-on-rails 0.0.5 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e44ccc4689a527118303fecadbf493f88f3ac7c697aa11a9d63d7b481df0631c
-  data.tar.gz: e4db1b64136757c45a80a080c43e6624d9ad45a3069398a57056c7826d2ec7e7
+  metadata.gz: 652cbedb8f5796094fde7e81e8e548de0065d33efcc9ccedac89772626b6c937
+  data.tar.gz: 324c08b71751b554662183e190dfe690cbe8fda05146a91c4fe42875956ce367
 SHA512:
-  metadata.gz: a8ee735aff772931a5f7fd44d61ff4bf57b997b3264399ad50a227fccde6bc38d468b5c35691f0ca29a9074faf4b299618d760b7e72b232bba2b795e1ae2e333
-  data.tar.gz: 966685f0dfab7e6ced316b7f2ebfa51a589b0c4881ad23e4364edfad1637e2188a565bf5973a169167c7cd287e82c0c102b4c4edc6cb65cc2ef44bbf35fe86d1
+  metadata.gz: be5231d79d34ed7ce9b5086c653b6f16d85bddffbf0c9ebf4fe7f8a8beb3e2841d26c9f86950aa4b17855b6530c68554eb696fd2e259c818f0505a4f86591eea
+  data.tar.gz: 4c428ca838a17cfe7609a0734b6419a4fb12feda2fed52aadbf72639bfa1f41eb0abf1cc2fa346a2456fc3f9a8af671f1696f5ccde045cab4a2ddbe58ae348b0

data/README.md

@@ -1,8 +1,10 @@
 # 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 on such a pipeline. 
@@ -18,7 +20,7 @@ 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
@@ -51,6 +53,27 @@ Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@cs
 = 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 
@@ -63,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 except 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.5
+  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