svelte-on-rails 0.0.18 → 0.0.21

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0bdaed0f08472a9dde76f78c8d69f99b1b9cd1422ed75631620e3e60cff5c8ba
-  data.tar.gz: 6dedb73fdb5b1a85bdd6996c7947e9a66ab5e69663e86a5f868d1dfd20dc8115
+  metadata.gz: 4760a8d0ae7d7de9e8bfb08b82e6cc7ff830979ef1297001606ab9a6eb282bff
+  data.tar.gz: 49ba7cbb917e62092d1997a4d39b1815d43a71546d78c5c5e52845e95a4c2d7e
 SHA512:
-  metadata.gz: 270ba6319f043ac8aa36bf437d338a400aa2b03005d060b93e86c939df638c40688faf57c0758ccc231031ae6da969bc57d9570a04ae649c7f912e3df41a893f
-  data.tar.gz: 272da007dd9136464b1705b47f4d6fc0f1a3ba046ee1299d70442648c3b412b8450cf655d3888b60a4c7a117fa9a4ee63e56b01adc3d0742be7fcd7bcb763432
+  metadata.gz: 4a3774a457cb886ff0854393857aea33b0c067cb814f72a94bad40c7beb4265018544370b1df2e5c6968daf35df9318897dcc666e16e595e8108f1e04c63547a
+  data.tar.gz: b35eabfabd993155ced5ad68f90f9c8795e9520234312f142bd42c25c98b5fe16ebddec50c230879df72a144c13c31e3ace74a9cbaee7681264f4707e658c613

data/README.md

@@ -1,8 +1,8 @@
-# Svelte on rails
+# Svelte. On rails! Awesome.
 
 Seamless and robust Svelte in Rails integration.
 
-By default, and when installed together with hotwired/turbo, it renders
+By default, and when installed together with `@hotwired/turbo-rails`, it renders
 svelte components on first request server side («SSR») and for subsequent
 requests it provides a empty tag that will be mounted on the frontend by the associated npm package [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the frontend.
 
@@ -34,17 +34,33 @@ If you have issues, please open one and contributors are welcome!
 - svelte v5 (see: [how to install svelte on rails/vite](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk))
 - turbo (recommended / [how to install turbo on rails](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#installation))
 
-## Setup from cero
+## Installation from cero
+
+together with haml, vite, svelte and turbo
 
 If you want to start from a new rails app, follow theese tutorials
 
-- [Create a new rails app with vite_rails](https://dev.to/chmich/setup-vite-on-rails-7-f1i)
-  - create a controller and a view and you should see `Vite ⚡️ Rails` on the browser console.
-  - make sure vite is on its latest version, sometimes you have to `npm i vite@latest`
-- [Setup Svelte](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk)
-  - and restart the app
+```bash
+rails new my-test-app --skip-javascript
+```
+
+within the app path do
+
+```bash
+bundle add svelte-on-rails
+```
+
+and run the fat installer
 
-## Installation
+```bash
+rails svelte_on_rails:install_haml_vite
+```
+
+this installer guides you through and if you answer all with yes, 
+at the end, you just have to (re-) start your server
+and you will see a Svelte component!
+
+## Minimal Installation
 
 within the app folder
 
@@ -52,14 +68,11 @@ within the app folder
 bundle add svelte-on-rails
 ```
 ```bash
-rails svelte_on_rails:install_for_vite_and_turbo
+rails svelte_on_rails:install
 ```
 
-
 This will create a little config file, installs the npm package,
 creates a initializer file and adds the import statement on `appplication.js` entrypoint file
-and it adds a HelloWorld.svelte component.
-If not installed, it installs `@hotwired/turbo-rails` too.
 
 #### Minimal installer
 
@@ -69,7 +82,13 @@ There is also a minimal installer:
 rails svelte_on_rails:install
 ```
 
-that does nothing else than creating a config file.
+that does:
+
+- creating a config file.
+- installs the npm package
+
+please follow the instructions on [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails)
+for setup the workflow
 
 Within the config file, there are mainly two important tags:
 
@@ -92,7 +111,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 +131,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
@@ -161,6 +180,26 @@ or you want to see the state before hydration, for development purposes, you can
 the `hydrate: false` option to the view helper, 
 and no hydration will happen for this component.
 
+## More rake tasks
+
+This tasks are more for testing/playground purposes
+
+```bash
+rails svelte_on_rails:add_hello_world
+```
+
+```bash
+rails svelte_on_rails:remove_hello_world
+```
+
+```bash
+rails svelte_on_rails:reset_and_compile_all
+```
+
+This does the same step that ist triggered together with the
+`rails assets:precompile` step together with the deployment pipeline:
+it removes all contents of the svelte-on-rails compiled 
+assets and compiles them all new.
 
 ## Performance
 

data/lib/svelte-on-rails.rb

@@ -3,6 +3,16 @@ require "svelte_on_rails/view_helpers"
 require "svelte_on_rails/render_server_side"
 require "svelte_on_rails/railtie" if defined?(Rails)
 
+# installer
+require 'svelte_on_rails/installer/utils'
+require 'svelte_on_rails/installer/haml'
+require 'svelte_on_rails/installer/gem_utils'
+require 'svelte_on_rails/installer/vite'
+require 'svelte_on_rails/installer/svelte'
+require 'svelte_on_rails/installer/npm'
+require 'svelte_on_rails/installer/javascript'
+require 'svelte_on_rails/installer/hello_world'
+
 module SvelteOnRails
   class << self
     def configuration

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/gem_utils.rb

@@ -0,0 +1,36 @@
+module SvelteOnRails
+
+  module GemUtils
+
+    def self.check_gem_version(gem_name)
+      gl = File.read(Rails.root.join('Gemfile.lock'))
+      regex = /(?<=#{Regexp.escape(gem_name)})[<>=\(~0-9\. \),]+/
+      match = gl.match(regex)
+
+      if match
+        match.to_s.gsub('(','').gsub(')','').strip
+      end
+
+    end
+
+    def self.install_gem(gem_name, group: nil)
+      v = check_gem_version(gem_name)
+      if v
+        puts "Gem #{gem_name} already installed, version: #{v} "
+      else
+        cmd = [
+          "bundle add #{gem_name}",
+          (group ? "--group=#{group}" : nil)
+        ].compact.join(' ')
+        stdout, stderr, status = Open3.capture3(cmd)
+        if stderr.present?
+          raise stderr
+        else
+          puts "Installed #{gem_name} version #{check_gem_version(gem_name)}"
+        end
+      end
+    end
+
+
+  end
+end

data/lib/svelte_on_rails/installer/haml.rb

@@ -0,0 +1,109 @@
+module SvelteOnRails
+  module Installer
+    module Haml
+      def self.install_haml_and_convert
+
+        # install haml-rails
+
+        puts '-' * 80
+
+        gu = SvelteOnRails::GemUtils
+        gu.install_gem('haml-rails')
+
+        # check existing files
+
+        existing_haml_files = Dir.glob('app/views/**/*.haml').select { |f| File.file? f }
+
+        overwrite_files = []
+        files = Dir.glob('app/views/**/*.html.erb').each_with_object([]) do |f, ary|
+          new_file = f.gsub(/\.erb\z/, '.haml')
+          if File.file? new_file
+            overwrite_files += [new_file]
+            existing_haml_files.delete(new_file)
+          end
+          if File.file? f
+            ary << [
+              f,
+              new_file
+            ]
+          end
+        end
+
+        if files.empty?
+          puts "No .erb files found, no conversion necessary."
+          return
+        end
+
+        # ask if haml already exist
+
+        if existing_haml_files.any?
+          puts '-' * 80
+          begin
+            puts "Theare are already .haml files:"
+            puts existing_haml_files
+            puts "Would you like to continue? (y/n)"
+            continue = STDIN.gets.chomp.downcase[0]
+          end until ['y', 'n'].include?(continue)
+          if continue == 'n'
+            puts 'skipping convert to haml'
+            return
+          end
+        end
+
+        # ask if overwrite
+
+        if overwrite_files.any?
+          puts '-' * 80
+          begin
+            puts "The following files already exist and would be overwritten:"
+            puts overwrite_files
+            puts "Would you like to overwrite these .haml files? (y/n)"
+            should_overwrite = STDIN.gets.chomp.downcase[0]
+          end until ['y', 'n'].include?(should_overwrite)
+        end
+
+        puts '-' * 80
+
+        # check for html2haml
+
+        installed_html2haml = false
+        if gu.check_gem_version('html2haml')
+          puts "html2haml already installed, now converting..."
+        else
+          gu.install_gem('html2haml', group: 'development')
+          installed_html2haml = true
+        end
+
+        # convert
+
+        backup_dir = "svelte_on_rails_backup_views_#{Time.now.strftime('%Y%m%d_%H%M%S')}"
+        FileUtils.mkdir_p(backup_dir)
+
+        Dir.chdir(Rails.root) do
+          files.each do |f|
+            stdout, stderr, status = Open3.capture3("html2haml #{f.join(' ')}")
+            if stderr.present?
+              raise stderr
+            else
+              view_dir = File.dirname(f.first).to_s.match(/(?<=app\/views\/)(.*)/).to_s
+              backup_view_dir = backup_dir + '/' + view_dir
+              FileUtils.mkdir_p(backup_view_dir)
+              FileUtils.mv(f.first, backup_view_dir)
+              puts "Converted #{f.join(' => ')}"
+            end
+          end
+        end
+
+        if installed_html2haml
+          system("bundle remove html2haml")
+          if $?.success?
+            puts "cleanup: removed html2haml from Gemfile"
+          else
+            puts "ERROR: failed to remove html2haml (please remove manually as it was only installed for this task)"
+          end
+        end
+
+      end
+    end
+  end
+end

data/lib/svelte_on_rails/installer/hello_world.rb

@@ -0,0 +1,57 @@
+module SvelteOnRails
+  module Installer
+    module HelloWorld
+
+      def self.install_hello_world
+        utils_i = SvelteOnRails::Installer::Utils
+
+        # write templates
+
+        templates = %w[
+          app/controllers/svelte_on_rails_hello_world_controller.rb
+          app/views/svelte_on_rails_hello_world/index.haml
+          app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
+        ]
+        utils_i.write_templates(templates)
+
+        # route
+
+        route = 'svelte_on_rails_hello_world#index'
+        rr = utils_i.which_root_route
+        root_url = "/"
+        url = root_url + route.sub('#', '/')
+
+        if rr && rr == route
+          puts "Root route «#{route}» already exists, skipping."
+          root_url
+        elsif rr && utils_i.route_exists?(route.sub('#', '/'))
+          puts "route «#{route}» already exists, skipping."
+          url
+        elsif rr
+          utils_i.add_route("  get \"#{route.sub('#', '/')}\"")
+          url
+        else
+          utils_i.add_route('  root "svelte_on_rails_hello_world#index"')
+          root_url
+        end
+
+      end
+
+      def self.remove_hello_world
+
+        utils = SvelteOnRails::Installer::Utils
+        if utils.ask_yn('Remove the Hello World component?')
+          files = %w[
+            app/views/svelte_on_rails_hello_world/index.haml
+            app/views/svelte_on_rails_hello_world
+            app/controllers/svelte_on_rails_hello_world_controller.rb
+            app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
+          ]
+          utils.remove_files(files)
+          utils.remove_line_from_file('config/routes.rb', 'svelte_on_rails_hello_world')
+        end
+      end
+
+    end
+  end
+end

data/lib/svelte_on_rails/installer/javascript.rb

@@ -0,0 +1,55 @@
+module SvelteOnRails
+  module Installer
+    module Javascript
+
+      # check if import statement already exists and, if not, append it after the last import statement of that file
+      #
+
+      def self.append_import_statement(file_path, package_name_for_test_existence, import_statement)
+
+        # Read the file content
+        content = File.read(file_path)
+
+        # Split content into lines
+        lines = content.lines
+
+        already_exist = []
+        lines.each do |line|
+          if line.match(/^\s*import\s+.*['"]#{package_name_for_test_existence}['";].*$/)
+            already_exist.push(line)
+          end
+        end
+
+        if already_exist.present?
+          puts "skipping: #{import_statement} already exists in #{File.basename(file_path)}, found: «#{already_exist.join(' // ').strip}»."
+        else
+
+          # Find the index of the last import statement
+          last_import_index = -1
+          lines.each_with_index do |line, index|
+            if line.match?(/^\s*import\s+.*$/)
+              last_import_index = index
+            end
+          end
+
+          # Insert the import statement after the last import
+          if last_import_index >= 0
+            lines.insert(last_import_index + 1, import_statement)
+          else
+            # If no import statements, add at the beginning
+            lines.unshift(import_statement)
+          end
+
+          # Write the modified content back to the file
+          begin
+            File.write(file_path, lines.map{|l|l.gsub(/\n/, '')}.join("\n"))
+            puts "Successfully inserted «#{import_statement}» into '#{file_path}'"
+          rescue => e
+            raise "Error writing to #{file_path} => «#{e.message}»"
+          end
+        end
+      end
+
+    end
+  end
+end

data/lib/svelte_on_rails/installer/npm.rb

@@ -0,0 +1,90 @@
+module SvelteOnRails
+  module Installer
+    module Npm
+
+      def self.install_or_update_package(package_name, minimal_version: nil, update_to_latest: true)
+        pkg = inspect_package(package_name)
+        to_do = !check_version((pkg ? pkg[:version] : nil), minimal_version)
+        if to_do
+
+          cmd = if update_to_latest
+                  "npm install #{package_name}@latest"
+                else
+                  raise "ERROR: not implemented"
+                end
+
+          stdout, stderr, status = Open3.capture3(cmd)
+          if stderr.present?
+            raise "ERROR #{cmd} => #{stderr}"
+          end
+
+          notice = [
+            (pkg ? "Updated" : "Installed"),
+            package_name,
+            (pkg ? "from version #{pkg[:version].join('.')}" : nil),
+            (pkg ? "to" : nil),
+            "@latest"
+          ].compact.join(' ')
+
+          puts notice
+
+        else
+          min_str = minimal_version.present? ? ", required: >= #{minimal_version.join('.')}" : ''
+          puts "#{package_name} already installed (#{pkg[:version].join('.')}#{min_str}), skipping."
+        end
+      end
+
+      def self.inspect_package(package_name)
+        pkg = nil
+        version = nil
+
+        if File.exist?('package-lock.json')
+          pl = JSON.parse(File.read('package-lock.json'))
+          unless pl['packages']
+            raise "ERROR: package-lock.json found, but no packages found, seems to be corrupted."
+          end
+          pkg = pl['packages'].keys.grep(/\/#{package_name}$/).first
+          version = pl['packages'][pkg]['version'] if pkg
+        end
+
+        if pkg
+          {
+            type: pkg.match(/^.*?(?=\/[^\/]*$)/).to_s,
+            version: version.split('.').map(&:to_i)
+          }
+        end
+
+      end
+
+      def self.check_version(current_version, minimal_version)
+        if !current_version
+          return false
+        elsif !minimal_version.present?
+          return true
+        else
+          compare_version_arrays(current_version, minimal_version)
+        end
+      end
+
+      private
+
+      def self.compare_version_arrays(current_version, minimal_version)
+        raise "ERROR: current_version must be an array" unless current_version.is_a?(Array)
+        raise "ERROR: minimal_version must be an array" unless current_version.is_a?(Array)
+
+        current_version.each_with_index do |v, i|
+          raise "ERROR: current_version entries must be an integer" unless v.is_a?(Integer)
+
+          if minimal_version[i]
+            raise "ERROR: minimal_version entries must be an integer" unless minimal_version[i].is_a?(Integer)
+            if v < minimal_version[i]
+              return false
+            end
+          end
+        end
+        true
+      end
+
+    end
+  end
+end

data/lib/svelte_on_rails/installer/rails_template/app/controllers/svelte_on_rails_hello_world_controller.rb

@@ -0,0 +1,6 @@
+class SvelteOnRailsHelloWorldController < ApplicationController
+
+  def index
+  end
+
+end

data/lib/svelte_on_rails/installer/rails_template/app/frontend/initializers/svelte.js

@@ -0,0 +1,18 @@
+
+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);
+});

data/lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte

@@ -0,0 +1 @@
+<h1>Hello Svelte</h1>

data/lib/svelte_on_rails/installer/rails_template/app/views/svelte_on_rails_hello_world/index.haml

@@ -0,0 +1,3 @@
+%h1 Hello
+
+= svelte_component "SvelteOnRailsHelloWorld"

data/lib/svelte_on_rails/installer/rails_template/config/svelte_on_rails.yml

@@ -0,0 +1,23 @@
+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:

data/lib/svelte_on_rails/installer/svelte.rb

@@ -0,0 +1,22 @@
+module SvelteOnRails
+  module Installer
+    module Svelte
+
+      def self.install_svelte
+        puts '-' * 80
+
+        # check npm package version
+
+        npm_i = SvelteOnRails::Installer::Npm
+        npm_i.install_or_update_package('svelte', minimal_version: [5])
+
+        # configure vite
+
+        vite_i = SvelteOnRails::Installer::Vite
+        vite_i.configure_for_svelte
+
+      end
+
+    end
+  end
+end