svelte-on-rails 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '04309bc3d95848982b66c90f7395f9d25c67c9adf9a65f4db968d7eb05c54542'
-  data.tar.gz: ac4b7759f6ea6ddc73117ffd1567a7ae504a1d867bbd33561c48607ea8441c16
+  metadata.gz: 020cf12ff6ad0e75c765a711c76d341928df3133427a63f32d1b04dbac433f32
+  data.tar.gz: 70b5116cdb56f355767608016acf1cb8c7b1bdcfa5d95b3b2c2710329fbf26cd
 SHA512:
-  metadata.gz: be481f02888b3fa42e258ae52c7a08c9d7e79236a583dace0dbe1c73acbf4b79db67cf4e9d4c8322f7310792560ff2bef30b12db4667fa2c77d2eedf6f296b5b
-  data.tar.gz: d5f64ab65a7e8417905c30f4657dd941a7d7e174e786fd4ecd8c6bc65596cfc69d9776246b7c17d43dd2082c3044eacd04144329406f7c7b8cc5e5dac61affa9
+  metadata.gz: 36e4621e0b8a5f4e77ead87b3fd1c5083e574be31a2bb286b4b3ad26eb0d4c3be385d6e9fd7b89fd0a0693eba41ec7e808cd33f9618cefb4b0003fdc882bae35
+  data.tar.gz: f534ef99ab6c2f2218c8e4afe1ff93de39609bc0de3954d1614c5115f236004e86e80b84d70084dd0e79668b29ca0b8e1e150ffe116870a3973f3979c1cf8cfe

data/README.md

@@ -1,10 +1,9 @@
-# Mount Svelte
+# Svelte on rails
 
-Render Svelte Components server-side via rollup.
-For performance reasons, compilation only happens when some code has changed.
-Although it should be independent, I developed and tested everything on `vite_rails`.
-
-## Status / Notice
+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.
 
 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.
@@ -16,35 +15,41 @@ 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.
 
+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) 
+and [ElMassimo](https://github.com/ElMassimo) because they all helped me with theyr gems.
+
 ## Requirements
 
 - actual node installed on the server
-- I tested it all on Rails-7
 
 ## Installation
 
+add
 ```ruby
-gem "mount-svelte"
+gem "svelte-on-rails"
+```
+to your gemfile
+
+and run
 
-# and execute
-$ rails mount_svelte:install
-#=> writes config/mount_svelte.yaml 
-#=> all configs there
-#=> required configs: frontend_folder and components_folder
+```ruby
+$ rails svelte_on_rails:install
 ```
 
-setup the npm module [@csedl/mount-svelte](https://www.npmjs.com/package/@csedl/mount-svelte) on the client side
+this creates a config file, please check the comments there.
+
+setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side
 
 ## Usage
 
 ```haml
-= svelte_component("myComponent", props = { items: ['item1', 'item2'] })
+= svelte_component("myComponent", items: ['item1', 'item2'])
 ```
 
 ## Option render_server_side: :auto
 
-default: `true`
-
 Works with `hotwired/turbo` only
 
 By passing the `render_server_side: :auto` option to the view helper, 
@@ -54,16 +59,10 @@ then does nothing server-side but add a tag. Assuming the filename is `HelloWorl
 ```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 message='Property from the server' class='box svelte-component'></hello-world>»
+Added Svelte-Tag for custom element: «<hello-world-svelte class='box svelte-component'></hello-world>»
 ```
 
-The functionality of the javascript part to create the custom element is not 
-included in this gem and its dependent node-module.
-
-Svelte can be built as a custom element, but that way svelte would add a `shadow dom`
-so that global styles would not be applied to the components.
-However, with [svelte-tag](https://www.npmjs.com/package/svelte-tag) (i am using this) or its fork `svelte-retag` you can build
-a custom element without shadow dom.
+If configured on the npm module, it instaniates a custom element and adopts it to the element.
 
 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 
@@ -108,6 +107,10 @@ Example from the rails console for a medium complex component
   - => happens on every request
 - Completed 200 OK in 521ms (Views: 520.2ms | ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.3ms)
 
+Best is to work with the `render_server_side: :auto` option, which you can
+set as default on the config file. Then, the server does the SSR only on 
+initial request and the rest happens on the frontend.
+
 ## Testing
 
 Testings are within the gem by `rspec`. And there is a [rails project](https://gitlab.com/users/sedl/projects) with 

data/lib/svelte-on-rails.rb

@@ -0,0 +1,13 @@
+require "svelte_on_rails/configuration"
+require "svelte_on_rails/view_helpers"
+require "svelte_on_rails/render_server_side"
+require "svelte_on_rails/railtie" if defined?(Rails)
+
+module SvelteOnRails
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+  end
+end

data/lib/{mount_svelte → svelte_on_rails}/configuration.rb

@@ -1,6 +1,6 @@
 require "yaml"
 
-module MountSvelte
+module SvelteOnRails
   class Configuration
 
     def self.instance
@@ -56,7 +56,7 @@ module MountSvelte
     private
 
     def load_yaml_config
-      config_path = Rails.root.join("config", "mount_svelte.yml")
+      config_path = Rails.root.join("config", "svelte_on_rails.yml")
       return unless File.exist?(config_path)
 
       config_data = YAML.load_file(config_path)

data/lib/{mount_svelte → svelte_on_rails}/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "mount_svelte",
+  "name": "svelte_on_rails",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

data/lib/svelte_on_rails/railtie.rb

@@ -0,0 +1,21 @@
+
+module SvelteOnRails
+  class Railtie < Rails::Railtie
+
+    initializer "svelte_on_rails.view_helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include SvelteOnRails::ViewHelpers
+      end
+    end
+
+    initializer "svelte-on-rails.initialize_configuration" do
+      # Zugriff auf die Singleton-Instanz, um sie zu initialisieren
+      SvelteOnRails::Configuration.instance
+    end
+
+    rake_tasks do
+      load File.expand_path("../../tasks/svelte_on_rails_tasks.rake", __FILE__)
+    end
+
+  end
+end

data/lib/{mount_svelte → svelte_on_rails}/render_server_side.rb

@@ -1,13 +1,13 @@
-module MountSvelte
+module SvelteOnRails
   class RenderServerSide
 
     require 'open3'
 
     def initialize(filename)
 
-      @svelte_file = MountSvelte::Configuration.instance.components_folder + filename
+      @svelte_file = SvelteOnRails::Configuration.instance.components_folder + filename
       @svelte_filename = filename
-      @compiled_file = "#{MountSvelte::Configuration.instance.dist_folder}/#{(filename.match(/\.svelte$/) ? filename[0..-8] : filename)}"
+      @compiled_file = "#{SvelteOnRails::Configuration.instance.dist_folder}/#{(filename.match(/\.svelte$/) ? filename[0..-8] : filename)}"
 
       raise "File not found: #{@svelte_file}" unless File.exist?(@svelte_file)
 
@@ -17,14 +17,14 @@ module MountSvelte
 
       # letzte Änderung innerhalb des ordners ermitteln
 
-      watch_changes = MountSvelte::Configuration.instance.watch_changes
-      ts_file = MountSvelte::Configuration.instance.dist_folder.join('reset_timestamp')
+      watch_changes = SvelteOnRails::Configuration.instance.watch_changes
+      ts_file = SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
 
       have_changes = if watch_changes && File.exist?(ts_file)
 
                        # compare last modification timestamp
                        last_modification = 100.years.ago.to_time
-                       Dir.glob("#{MountSvelte::Configuration.instance.components_folder}**/*").each do |path|
+                       Dir.glob("#{SvelteOnRails::Configuration.instance.components_folder}**/*").each do |path|
                          if File.file?(path)
                            mtime = File.mtime(path)
                            if mtime > last_modification
@@ -56,10 +56,10 @@ module MountSvelte
       props_enc = Base64.encode64(props.to_json).strip
       cmd = [
         'node',
-        '/Users/christian/projects-gmbh/gems/mount-svelte/mount-svelte-gem/lib/mount_svelte/render.js',
+        '/Users/christian/projects-gmbh/gems/svelte-on-rails/svelte-on-rails-gem/lib/svelte_on_rails/render.js',
         compiled_js_file,
         props_enc,
-        MountSvelte::Configuration.instance.rails_root
+        SvelteOnRails::Configuration.instance.rails_root
       ].join(' ')
 
       stdout, stderr, status = Open3.capture3(cmd, chdir: self.class.gem_app_dir)
@@ -90,7 +90,7 @@ module MountSvelte
 
       start_time = Time.now
 
-      dist = MountSvelte::Configuration.instance.dist_folder
+      dist = SvelteOnRails::Configuration.instance.dist_folder
       subs = @svelte_filename.split('/')[0..-2].join('/')
       cmd = [
         'node',
@@ -100,7 +100,7 @@ module MountSvelte
         self.class.gem_app_dir
       ].join(' ')
 
-      stdout, stderr, status = Open3.capture3(cmd, chdir: MountSvelte::Configuration.instance.rails_root)
+      stdout, stderr, status = Open3.capture3(cmd, chdir: SvelteOnRails::Configuration.instance.rails_root)
 
       unless status.to_s.match(/^pid [0-9]+ exit 0$/)
         raise "Compiling «#{@svelte_filename}» Server-side, script compile.js, executed within Rails.root:\n\n#{cmd}\n\n++++++\n\n#{stderr}\n\n++++++\n\n"
@@ -111,15 +111,15 @@ module MountSvelte
     end
 
     def self.gem_app_dir
-      File.expand_path('../mount_svelte', __dir__) + '/'
+      File.expand_path('../svelte_on_rails', __dir__) + '/'
     end
 
     def self.reset_dist
-      unless Dir.exist?(MountSvelte::Configuration.instance.dist_folder)
-        FileUtils.mkdir_p(MountSvelte::Configuration.instance.dist_folder)
+      unless Dir.exist?(SvelteOnRails::Configuration.instance.dist_folder)
+        FileUtils.mkdir_p(SvelteOnRails::Configuration.instance.dist_folder)
       end
-      FileUtils.rm_rf Dir.glob("#{MountSvelte::Configuration.instance.dist_folder}/*")
-      FileUtils.touch MountSvelte::Configuration.instance.dist_folder.join('reset_timestamp')
+      FileUtils.rm_rf Dir.glob("#{SvelteOnRails::Configuration.instance.dist_folder}/*")
+      FileUtils.touch SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
     end
 
   end

data/lib/{mount_svelte → svelte_on_rails}/view_helpers.rb

@@ -1,4 +1,4 @@
-module MountSvelte
+module SvelteOnRails
   module ViewHelpers
 
     def svelte_component(filename, props = {})
@@ -10,7 +10,7 @@ module MountSvelte
       render_server_side = if props.key?(:render_server_side)
                              props.delete(:render_server_side)
                            else
-                             MountSvelte::Configuration.instance.render_server_side
+                             SvelteOnRails::Configuration.instance.render_server_side
                            end
 
       unless [true, false, :auto].include?(render_server_side)
@@ -37,7 +37,7 @@ module MountSvelte
         # render server side
 
         start_time = Time.now
-        sv = MountSvelte::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

data/lib/tasks/{mount_svelte_tasks.rake → svelte_on_rails_tasks.rake}

@@ -1,14 +1,14 @@
 
 
 Rake::Task["assets:precompile"].enhance do
-  MountSvelte::RenderServerSide.reset_dist
+  SvelteOnRails::RenderServerSide.reset_dist
   puts "Mount Svelte: Reset dist ausgeführt"
 end
 
-namespace :mount_svelte do
-  desc "Installs MountSvelte YAML configuration into your Rails application"
+namespace :svelte_on_rails do
+  desc "Installs SvelteOnRails YAML configuration into your Rails application"
   task :install do
-    config_path = Rails.root.join("config", "mount_svelte.yml")
+    config_path = Rails.root.join("config", "svelte_on_rails.yml")
 
     if File.exist?(config_path)
       puts "Configuration file already exists at #{config_path}"
@@ -26,7 +26,7 @@ namespace :mount_svelte do
         render_server_side: true 
         # options: true, false, :auto
         # :auto: render server side if request is initial request (works only with turbo, because it checks for the X-Turbo-Request-ID header)
-        # when not server-side rendered the components must be built as custom elements, see node-package @csedl/mount-svelte
+        # when not server-side rendered the components must be built as custom elements, see node-package @csedl/svelte-on-rails
         
         development:
           watch_changes: true