svelte-on-rails 0.0.18 → 0.0.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0bdaed0f08472a9dde76f78c8d69f99b1b9cd1422ed75631620e3e60cff5c8ba
-  data.tar.gz: 6dedb73fdb5b1a85bdd6996c7947e9a66ab5e69663e86a5f868d1dfd20dc8115
+  metadata.gz: 06d39c6909bc770f4cef89091d1ac17566715996aa7425afe29e847072691ee0
+  data.tar.gz: ca26182656cd9e27bd3a4f9f6d6e58e5e283b625d06a6133b9fd196c369c4306
 SHA512:
-  metadata.gz: 270ba6319f043ac8aa36bf437d338a400aa2b03005d060b93e86c939df638c40688faf57c0758ccc231031ae6da969bc57d9570a04ae649c7f912e3df41a893f
-  data.tar.gz: 272da007dd9136464b1705b47f4d6fc0f1a3ba046ee1299d70442648c3b412b8450cf655d3888b60a4c7a117fa9a4ee63e56b01adc3d0742be7fcd7bcb763432
+  metadata.gz: 3ac18b72caf1f4b64c960423690d4d62dbb9a456edca7337ceb49044b5efa920d5ea728886721dd10818fc2d0be7019af3bc9005ff8e9609017655f21a9e004c
+  data.tar.gz: 7e355580850438267e99bc8eef9077968860813e55f3de90f2b1d451c59ddb68fd1ca99381dec3e44b84232ac8d488f5628a01ab6248ac158e02a33b3936de1b

data/README.md

@@ -1,4 +1,4 @@
-# Svelte on rails
+# Svelte. On rails! Awesome.
 
 Seamless and robust Svelte in Rails integration.
 
@@ -92,7 +92,7 @@ On [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails
 are details how the frontend part is working.
 
 Without the npm package installed, 
-or by passing `render_server_side: true` and `hydrate: false` to the view helper,
+or by passing `ssr: true` and `hydrate: false` to the view helper,
 you would see the same html, and the styled button, 
 but the increment button would not work.
 
@@ -112,13 +112,13 @@ Among others there are
 - `import { someFunction } from '../customJavascript.js';`
 - `import Child from './Child.svelte';`
 
-## Option `render_server_side: :auto`
+## Option `ssr: :auto`
 
-`render_server_side: :auto` is the default option, as set on config file and can be overridden on the view helper.
+`ssr: :auto` is the default option, as set on config file and can be overridden on the view helper.
 
 Works with `hotwired/turbo` only
 
-By passing the `render_server_side: :auto` option to the view helper, 
+By passing the `ssr: :auto` option to the view helper, 
 it checks if the request is an initial request (request header `X-Turbo-Request-ID` is present):
 
 On Initial-Request, it adds the attribute `data-svelte-on-rails-initialize-action="hydrate"` and

data/lib/svelte-on-rails.rb

@@ -2,6 +2,7 @@ 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)
+require 'svelte_on_rails/installer_utils'
 
 module SvelteOnRails
   class << self

data/lib/svelte_on_rails/configuration.rb

@@ -49,8 +49,8 @@ module SvelteOnRails
       @configs['components_folder']
     end
 
-    def render_server_side
-      rss = @configs['render_server_side']
+    def ssr
+      rss = @configs['ssr']
       if rss == false || rss == :auto
         rss
       else

data/lib/svelte_on_rails/installer_utils.rb

@@ -0,0 +1,170 @@
+module SvelteOnRails
+
+  module InstallerUtils
+    def self.install_npm_package
+      package_name = "@csedl/svelte-on-rails@latest"
+      puts "Installing #{package_name} via npm..."
+
+      if system("npm install #{package_name}")
+        puts "#{package_name} successfully installed."
+      else
+        abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
+      end
+    end
+
+    def self.install_turbo
+
+      pkg_js = Rails.root.join("package.json")
+      package_name = "@hotwired/turbo-rails"
+      file_content = File.exist?(pkg_js) ? File.read(pkg_js) : ""
+
+      if file_content.match?(/#{package_name}/)
+        puts "#{package_name} is already present in package.json, assuming that it is set up well and working."
+      else
+        puts "Installing #{package_name} via npm..."
+        if system("npm install #{package_name}")
+          puts "#{package_name} successfully installed."
+          add_line_to_file(Rails.root.join("app", "frontend", "entrypoints", "application.js"), "import '#{package_name}';")
+        else
+          abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
+        end
+      end
+
+    end
+
+    def self.create_folder(folder)
+      if Dir.exist?(folder)
+        puts "Folder already exists: #{folder}"
+      else
+        FileUtils.mkdir_p(folder)
+        puts "Created folder: #{folder}"
+      end
+    end
+
+    def self.create_configuration_file
+      config_path = Rails.root.join("config", "svelte_on_rails.yml")
+      if File.exist?(config_path)
+        puts "Configuration file already exists at file://#{config_path}"
+      else
+        File.write(config_path, <<~YAML)
+        
+        frontend_folder: "app/frontend" 
+        # the entrypoint that is your web root, example for vite: where @ points to
+        # relative to Rails.root
+        
+        components_folder: "javascript/components" 
+        # relative to frontend_folder
+        # where your svelte components are located
+        
+        ssr: :auto 
+        # 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/svelte-on-rails
+        
+        development:
+          watch_changes: true
+          # Check on every request if any file within the svelte components folder have changed, for recompiling
+          # Case sensitive path checking, even the file system is case insensitive
+          # Make sure this ist set to tue for development and test, but not for production
+          
+        test:
+          watch_changes: true
+          
+        production:
+      YAML
+        puts "Created configuration file at file://#{config_path}"
+      end
+    end
+
+    def self.add_line_to_file(file_path, line)
+      file_content = File.exist?(file_path) ? File.read(file_path) : ""
+
+      if file_content.match?(/#{line}/)
+        puts "#{line} already present in #{file_path}, nothing changed here."
+        return
+      end
+
+      File.open(file_path, 'a') do |file|
+        file.puts(line)
+      end
+      puts "added #{line} to #{file_path}."
+    rescue StandardError => e
+      puts "Error: #{e.message}"
+    end
+
+    def self.create_file(file_path)
+
+      unless File.exist?(file_path)
+        FileUtils.touch(file_path)
+        puts "Created empty file at file://#{file_path}"
+      end
+    end
+
+
+    def self.create_javascript_initializer
+      config_path = Rails.root.join("app", "frontend", "initializers", "svelte.js")
+      if File.exist?(config_path)
+        puts "Initializer already exists: file://#{config_path}"
+      else
+        File.write(config_path, <<~JAVASCRIPT)
+
+        import { initializeSvelteComponents, cleanupSvelteComponents } from '@csedl/svelte-on-rails';
+
+        const components = import.meta.glob('/javascript/components/**/*.svelte', { eager: true });
+        const componentsRoot = '/javascript/components';
+
+        // Initialize Svelte components
+        initializeSvelteComponents(componentsRoot, components, true);
+
+        // Turbo event listener for page load
+        document.addEventListener('turbo:load', () => {
+            initializeSvelteComponents(componentsRoot, components, true);
+        });
+
+        // Turbo event listener for cleanup before page cache
+        document.addEventListener('turbo:before-cache', () => {
+            cleanupSvelteComponents(false);
+        });
+      JAVASCRIPT
+        puts "Created initializer file at file://#{config_path}"
+      end
+    end
+
+    def self.create_svelte_hello_world
+      file_path = Rails.root.join("app", "frontend", "javascript", "components", "HelloWorld.svelte")
+      if File.exist?(file_path)
+        puts "Hello World file already exists: file://#{file_path}"
+      else
+        File.write(file_path, <<~HTML)
+        <script>
+            export let items
+            let count = 0;
+        
+            function increment() {
+                count += 1;
+            }
+        </script>
+        
+        <h1>Greetings from svelte</h1>
+        
+        <button on:click={increment}>Increment: {count}</button>
+        <ul>
+            {#each items as item}
+                <li>{item}</li>
+            {/each}
+        </ul>
+        
+        <style>
+            button {
+                background-color: darkred;
+                color: white;
+                padding: 10px;
+                border: none;
+            }
+        </style>
+      HTML
+        puts "Hello World file at file://#{file_path}"
+      end
+    end
+  end
+end

data/lib/svelte_on_rails/render_server_side.rb

@@ -3,11 +3,14 @@ module SvelteOnRails
 
     require 'open3'
 
-    def initialize(filename)
+    def initialize(filename, base_path: SvelteOnRails::Configuration.instance.components_folder_full)
 
-      @svelte_file = SvelteOnRails::Configuration.instance.components_folder_full + filename
+      fn = (filename.match(/\.svelte$/) ? filename[0..-8] : filename)
+      @svelte_file = base_path + filename
       @svelte_filename = filename
-      @compiled_file = "#{SvelteOnRails::Configuration.instance.dist_folder}/#{(filename.match(/\.svelte$/) ? filename[0..-8] : filename)}"
+      cnf = SvelteOnRails::Configuration.instance
+      cf = cnf.dist_folder + cnf.components_folder + fn
+      @compiled_file = cf.to_s
 
     end
 
@@ -62,7 +65,7 @@ module SvelteOnRails
 
       stdout, stderr, status = Open3.capture3(cmd, chdir: self.class.gem_app_dir)
       unless status.to_s.match(/^pid [0-9]+ exit 0$/)
-        raise "Render Svelte Server-side:\n" + stderr
+        raise "Render Svelte Server-side:\nrender.js => #{compiled_js_file}\n" + stderr
       end
 
       begin
@@ -88,13 +91,15 @@ module SvelteOnRails
 
       start_time = Time.now
 
-      dist = SvelteOnRails::Configuration.instance.dist_folder
+      cnf = SvelteOnRails::Configuration.instance
       subs = @svelte_filename.split('/')[0..-2].join('/')
+      dist = cnf.dist_folder + cnf.components_folder + subs
+
       cmd = [
         'node',
         self.class.gem_app_dir + 'compile.js',
         @svelte_file,
-        dist.join(subs),
+        dist,
         self.class.gem_app_dir
       ].join(' ')
 
@@ -112,6 +117,17 @@ module SvelteOnRails
       File.expand_path('../svelte_on_rails', __dir__) + '/'
     end
 
+    def self.file_exist_case_sensitive?(containing_dir, filename)
+      # Combine the directory path and filename
+      full_path = File.join(containing_dir, filename)
+
+      # Check if the file exists and the path matches case-sensitively
+      File.exist?(full_path) && Dir[File.join(containing_dir, "**/*")].any? do |f|
+        f == full_path
+      end
+    end
+
+    # assets:precompile
     def self.reset_dist
       unless Dir.exist?(SvelteOnRails::Configuration.instance.dist_folder)
         FileUtils.mkdir_p(SvelteOnRails::Configuration.instance.dist_folder)
@@ -120,16 +136,21 @@ module SvelteOnRails
       FileUtils.touch SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
     end
 
-    def self.file_exist_case_sensitive?(containing_dir, filename)
-      # Combine the directory path and filename
-      full_path = File.join(containing_dir, filename)
+    def self.reset_and_compile_all
+      SvelteOnRails::RenderServerSide.reset_dist
+      cnf = SvelteOnRails::Configuration.instance
+      frontend_folder = cnf.frontend_folder_full
+      sveltes = Dir.glob(cnf.frontend_folder_full.join('**/*.svelte'))
+      sveltes.each_with_index do |file, ind|
+        comp_name = file.to_s[(cnf.frontend_folder_full.to_s.length + 1)..-1]
+
+        n = SvelteOnRails::RenderServerSide.new(comp_name, base_path: frontend_folder)
+        n.compile
+
+        puts "compiled #{ind + 1}/#{sveltes.length}: #{comp_name}"
 
-      # Check if the file exists and the path matches case-sensitively
-      File.exist?(full_path) && Dir[File.join(containing_dir, "**/*")].any? do |f|
-        f == full_path
       end
     end
 
-
   end
 end

data/lib/svelte_on_rails/view_helpers.rb

@@ -18,15 +18,15 @@ module SvelteOnRails
 
       # check what to do
 
-      rss = if props.key?(:render_server_side)
-              props.delete(:render_server_side)
+      rss = if props.key?(:ssr)
+              props.delete(:ssr)
             else
-              conf.render_server_side
+              conf.ssr
             end
       unless [true, false, :auto].include?(rss)
-        raise "Only true, false or auto are allowed for the argument #render_server_side"
+        raise "Only true, false or auto are allowed for the argument #ssr"
       end
-      render_server_side = (rss == :auto && request.headers['X-Turbo-Request-ID'].blank? || rss)
+      ssr = (rss == :auto && request.headers['X-Turbo-Request-ID'].blank? || rss)
 
       hydrate = if props.key?(:hydrate)
                   props[:hydrate]
@@ -37,7 +37,7 @@ module SvelteOnRails
       # separate hashes
 
       props.delete(:hydrate)
-      props.delete(:render_server_side)
+      props.delete(:ssr)
       options = props.slice(:class, :id, :style)
       props.delete(:class)
       props.delete(:id)
@@ -45,13 +45,13 @@ module SvelteOnRails
 
       # set up html
 
-      options[:class] = options[:class].to_s
-      options[:class] += ' svelte-component svelte-on-rails-not-initialized-component'
+      options[:class] = options[:class].to_s + ' svelte-component'
+      options[:class] += ' please-hydrate-me-svelte-on-rails' if hydrate
       options[:data] ||= {}
       options[:data][:props] = props.to_json
       options[:data][:svelte_component] = filename
 
-      if render_server_side
+      if ssr
 
         # render server side
 

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -1,8 +1,10 @@
 Rake::Task["assets:precompile"].enhance do
-  SvelteOnRails::RenderServerSide.reset_dist
-  puts "Mount Svelte: Reset dist ausgeführt"
+  SvelteOnRails::RenderServerSide.reset_and_compile_all
+  puts "Mount Svelte: Reset dist and compile-all executed"
 end
 
+require 'svelte_on_rails/installer_utils'
+
 namespace :svelte_on_rails do
   desc "Installs SvelteOnRails YAML configuration into your Rails application"
   task :install do
@@ -14,17 +16,20 @@ namespace :svelte_on_rails do
   desc "Installs SvelteOnRails for usage together with vite_rails and @hotwired/turbo-rails"
   task :install_for_vite_and_turbo do
 
-    create_configuration_file
+    iu = SvelteOnRails::InstallerUtils
+
+    iu.create_configuration_file
+
 
-    install_npm_package
-    install_turbo
+    iu.install_npm_package
+    iu.install_turbo
 
-    create_folder(Rails.root.join("app", "frontend", "initializers"))
-    create_folder(Rails.root.join("app", "frontend", "javascript", "components"))
-    add_line_to_file(Rails.root.join("app", "frontend", "entrypoints", "application.js"), "import '../initializers/svelte.js';")
+    iu.create_folder(Rails.root.join("app", "frontend", "initializers"))
+    iu.create_folder(Rails.root.join("app", "frontend", "javascript", "components"))
+    iu.add_line_to_file(Rails.root.join("app", "frontend", "entrypoints", "application.js"), "import '../initializers/svelte.js';")
 
-    create_javascript_initializer
-    create_svelte_hello_world
+    iu.create_javascript_initializer
+    iu.create_svelte_hello_world
 
     puts ''
     puts 'SvelteOnRails installed successfully for using together with vite_rails and @hotwired/turbo-rails.'
@@ -33,168 +38,9 @@ namespace :svelte_on_rails do
 
   end
 
-  def install_npm_package
-    package_name = "@csedl/svelte-on-rails@latest"
-    puts "Installing #{package_name} via npm..."
-
-    if system("npm install #{package_name}")
-      puts "#{package_name} successfully installed."
-    else
-      abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
-    end
+  desc "Compile all Svelte components"
+  task :reset_and_compile_all do
+    SvelteOnRails::RenderServerSide.reset_and_compile_all
   end
 
-  def install_turbo
-
-    pkg_js = Rails.root.join("package.json")
-    package_name = "@hotwired/turbo-rails"
-    file_content = File.exist?(pkg_js) ? File.read(pkg_js) : ""
-
-    if file_content.match?(/#{package_name}/)
-      puts "#{package_name} is already present in package.json, assuming that it is set up well and working."
-    else
-      puts "Installing #{package_name} via npm..."
-      if system("npm install #{package_name}")
-        puts "#{package_name} successfully installed."
-        add_line_to_file(Rails.root.join("app", "frontend", "entrypoints", "application.js"), "import '#{package_name}';")
-      else
-        abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
-      end
-    end
-
-  end
-
-  def create_javascript_initializer
-    config_path = Rails.root.join("app", "frontend", "initializers", "svelte.js")
-    if File.exist?(config_path)
-      puts "Initializer already exists: file://#{config_path}"
-    else
-      File.write(config_path, <<~JAVASCRIPT)
-
-        import { initializeSvelteComponents, cleanupSvelteComponents } from '@csedl/svelte-on-rails';
-
-        const components = import.meta.glob('/javascript/components/**/*.svelte', { eager: true });
-        const componentsRoot = '/javascript/components';
-
-        // Initialize Svelte components
-        initializeSvelteComponents(componentsRoot, components, true);
-
-        // Turbo event listener for page load
-        document.addEventListener('turbo:load', () => {
-            initializeSvelteComponents(componentsRoot, components, true);
-        });
-
-        // Turbo event listener for cleanup before page cache
-        document.addEventListener('turbo:before-cache', () => {
-            cleanupSvelteComponents(false);
-        });
-      JAVASCRIPT
-      puts "Created initializer file at file://#{config_path}"
-    end
-  end
-
-  def create_svelte_hello_world
-    file_path = Rails.root.join("app", "frontend", "javascript", "components", "HelloWorld.svelte")
-    if File.exist?(file_path)
-      puts "Hello World file already exists: file://#{file_path}"
-    else
-      File.write(file_path, <<~HTML)
-        <script>
-            export let items
-            let count = 0;
-        
-            function increment() {
-                count += 1;
-            }
-        </script>
-        
-        <h1>Greetings from svelte</h1>
-        
-        <button on:click={increment}>Increment: {count}</button>
-        <ul>
-            {#each items as item}
-                <li>{item}</li>
-            {/each}
-        </ul>
-        
-        <style>
-            button {
-                background-color: darkred;
-                color: white;
-                padding: 10px;
-                border: none;
-            }
-        </style>
-      HTML
-      puts "Hello World file at file://#{file_path}"
-    end
-  end
-
-  def create_file(file_path)
-
-    unless File.exist?(file_path)
-      FileUtils.touch(file_path)
-      puts "Created empty file at file://#{file_path}"
-    end
-  end
-
-  def add_line_to_file(file_path, line)
-    file_content = File.exist?(file_path) ? File.read(file_path) : ""
-
-    if file_content.match?(/#{line}/)
-      puts "#{line} already present in #{file_path}, nothing changed here."
-      return
-    end
-
-    File.open(file_path, 'a') do |file|
-      file.puts(line)
-    end
-    puts "added #{line} to #{file_path}."
-  rescue StandardError => e
-    puts "Error: #{e.message}"
-  end
-
-  def create_folder(folder)
-    if Dir.exist?(folder)
-      puts "Folder already exists: #{folder}"
-    else
-      FileUtils.mkdir_p(folder)
-      puts "Created folder: #{folder}"
-    end
-  end
-
-  def create_configuration_file
-    config_path = Rails.root.join("config", "svelte_on_rails.yml")
-    if File.exist?(config_path)
-      puts "Configuration file already exists at file://#{config_path}"
-    else
-      File.write(config_path, <<~YAML)
-        
-        frontend_folder: "app/frontend" 
-        # the entrypoint that is your web root, example for vite: where @ points to
-        # relative to Rails.root
-        
-        components_folder: "javascript/components" 
-        # relative to frontend_folder
-        # where your svelte components are located
-        
-        render_server_side: :auto 
-        # 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/svelte-on-rails
-        
-        development:
-          watch_changes: true
-          # Check on every request if any file within the svelte components folder have changed, for recompiling
-          # Case sensitive path checking, even the file system is case insensitive
-          # Make sure this ist set to tue for development and test, but not for production
-          
-        test:
-          watch_changes: true
-          
-        production:
-      YAML
-      puts "Created configuration file at file://#{config_path}"
-    end
-  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.18
+  version: 0.0.20
 platform: ruby
 authors:
 - Christian Sedlmair
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-17 00:00:00.000000000 Z
+date: 2025-04-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -34,6 +34,7 @@ files:
 - lib/svelte-on-rails.rb
 - lib/svelte_on_rails/compile.js
 - lib/svelte_on_rails/configuration.rb
+- lib/svelte_on_rails/installer_utils.rb
 - lib/svelte_on_rails/node_modules/@ampproject/remapping/LICENSE
 - lib/svelte_on_rails/node_modules/@ampproject/remapping/README.md
 - lib/svelte_on_rails/node_modules/@ampproject/remapping/dist/remapping.mjs