svelte-on-rails 0.0.37 → 0.0.38

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 40380d23e1e5115506e76b3a03f7024ffe7817d28ef2ea807c555ef565547cb2
-  data.tar.gz: 8e20a2c5620788b190b43c5f0d072af21c0d96573dce9e5d15217d7027f65598
+  metadata.gz: 3ea01d9d31034ea4eb76064bd7947394193f3dc3c91490b1277ea3a1be19c80d
+  data.tar.gz: 07acb2b48f892a11aadab9f947842eabe7e100ab422a1afb54ace9fa3d1747d3
 SHA512:
-  metadata.gz: a0f10a0d977358a4a709882ae662ea9b53d0892ec89c2068b37aecd5648b534f759f9ea5279103bd736bc297dac8988441eee4739ce81d7386c58db046a73208
-  data.tar.gz: 62c4f47cd06a2d7ce3172b5829468847b328a7381f81db5219ddc24389f17660a49f4b026cdd8fcff46a608e36aa1e74f27ee97be7239476302c5d52da913173
+  metadata.gz: fd78111558fc3bf309395060ebff3cce856ae0e8e60436f923733c7fa818cdd9b5d8171fb8301be72e44c5ad287593e2c8c822a52342f2fd563386b3bc34b181
+  data.tar.gz: 14ba621d1cbf026908d90834f2a99b98953d218f60cd87ed3e14fa40c2bb5c3acc876950a7b7bb35c366cee62f801f281eeef3f9f63daf06b97dbdd722e11da1

data/README.md

@@ -6,12 +6,12 @@ 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.
 
-This way svelte works perfectly together with turbo. You will never notice 
+This way svelte works perfectly together with turbo. You will never notice
 this unpleasant «blink» on the frontend and it is maximum performance
 optimized. SSR compilation is handled by rollup.
 
-Server-side rendering is the bottleneck on such a pipeline. 
-Although rollup is powerful, this gem is in an early state 
+Server-side rendering is the bottleneck on such a pipeline.
+Although rollup is powerful, this gem is in an early state
 and there may be limitations.
 
 Javascript is written in ESM syntax, orientated by the functionality of vite.
@@ -22,7 +22,7 @@ But we have done everything we can to make your setup work smoothly.
 
 This all is developed on Rails-7 together with `vite_rails`.
 
-Thanks to [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.
 
 If you have issues, please open one and contributors are welcome!
@@ -33,7 +33,7 @@ If you have issues, please open one and contributors are welcome!
 - tested on ruby 3.2.2 and rails 7.1
 - 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))
-- if you use special packages (like pug) that requires commonjs, you may need 
+- if you use special packages (like pug) that requires commonjs, you may need
 
 ## Installation from cero
 
@@ -59,17 +59,17 @@ rails g svelte_on_rails:install --full
 
 The `--full` contains:
 
-- `--vite` 
+- `--vite`
   - adds vite_rails gem and running the installer
-- `--haml` 
+- `--haml`
   - adds the gem and converts existing views
-- `svelte_on_rails` 
+- `svelte_on_rails`
   - This is not a option, this is always done: Adds a config file and installs `@csedl/svelte-on-rails` by npm
-- `--turbo` 
+- `--turbo`
   - installs `@hotwired/turbo-rails` and adds import statement to application.js
-- `--svelte` 
+- `--svelte`
   - adds or updates `svelte`
-- `--hello-world` 
+- `--hello-world`
   - adds a hello world component
 
 You can also use the options you want instead of using `--full`.
@@ -123,17 +123,17 @@ On loading you will see
 
 - Rendered HelloWorld.svelte server-side: 0.075ms
 
-On the rails console and you will see «Greetings from svelte» 
+On the rails console and you will see «Greetings from svelte»
 on your view with a styled «Increment» button.
 Styles you find within the svelte component.
 Click this button and see that the component is alive.
 
-On [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) 
+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, 
+Without the npm package installed,
 or by passing `ssr: true` and `hydrate: false` to the view helper,
-you would see the same html, and the styled button, 
+you would see the same html, and the styled button,
 but the increment button would not work.
 
 I inserted very detailed error messages on rails and on the
@@ -142,7 +142,7 @@ So please check the logs on your browser.
 
 ### Import statements
 
-For check which statements are working and actively tested, please check the 
+For check which statements are working and actively tested, please check the
 [components folder](https://gitlab.com/sedl/svelte-on-rails/-/tree/main/spec/rails-vite-test-app/app/frontend/javascript/components?ref_type=heads) within the gem specs.
 
 Among others there are
@@ -156,7 +156,7 @@ Among others there are
 
 When the rails app runs `assets:precompile` a additional rake task is triggered: `rails svelte_on_rails:reset_and_compile_all`.
 
-This is not absolutely necessary but it reduces the loading time of the very first calling of the first component. 
+This is not absolutely necessary but it reduces the loading time of the very first calling of the first component.
 So, on deploying or doing `rails assets:precompile` you shoud see something like:
 
 ```
@@ -176,7 +176,7 @@ on the console.
 
 Works with `hotwired/turbo` only
 
-By passing the `ssr: :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
@@ -200,23 +200,23 @@ You can simply work with global styles as well as styles within the svelte compo
 
 A server-side rendered svelte component has 2 states:
 
-#### Before hydration 
+#### Before hydration
 
-- The `svelte_component` view helper renders the styles contained within the component 
-into a style tag within the component's wrapper element. This has to be done this way because of Turbo.
+- The `svelte_component` view helper renders the styles contained within the component
+  into a style tag within the component's wrapper element. This has to be done this way because of Turbo.
 - In very, very rare cases, global styles are not applied in the same way as after hydration.
 
-#### After hydration 
+#### After hydration
 
-- Svelte adds a style tag inside the header 
+- Svelte adds a style tag inside the header
 - Svelte renders the component again, which removes the style tag inside the component wrapper.
 
-#### If you notice a "blink" 
+#### If you notice a "blink"
 
-For the app to look stable, both states must appear in the same way. 
-Normally this is the case. But if there are problems, 
-or you want to see the state before hydration, for development purposes, you can pass 
-the `hydrate: false` option to the view helper, 
+For the app to look stable, both states must appear in the same way.
+Normally this is the case. But if there are problems,
+or you want to see the state before hydration, for development purposes, you can pass
+the `hydrate: false` option to the view helper,
 and no hydration will happen for this component.
 
 ## More rake tasks
@@ -246,7 +246,7 @@ 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 
+it removes all contents of the svelte-on-rails compiled
 assets and compiles them all new.
 
 ## Performance
@@ -261,7 +261,7 @@ Example from the rails console for a medium complex component
   - => subsequent calls
 - Completed 200 OK in 521ms (Views: 520.2ms | ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.3ms)
 
-## Developers Guide
+## Contributors Guide
 
 Tests are based on the included templates, like the `hello world template` and on the installer.
 
@@ -271,8 +271,8 @@ folder where the tests generate a test rails app.
 **Installer tests** starting with completely destroy the rails app within the `generated_test_app_path`,
 generating a new rails app and running the installer and test by `playwright` if the components are working.
 
-**component tests** only checking if a rails server is alive, and if not, install and run a rails app. 
-For this is the testing helper `start_rails_server_unless_ping`. This step may only be slow on the 
+**component tests** only checking if a rails server is alive, and if not, install and run a rails app.
+For this is the testing helper `start_rails_server_unless_ping`. This step may only be slow on the
 first run, then it is fast. And on every repeating the test it always overwrites the components
 with the components from the template by the testing helper `install_hello_world(
       ['rails_vite_hello_world'],
@@ -281,9 +281,9 @@ with the components from the template by the testing helper `install_hello_world
       silent: true
       )`. At the end of the test it leaves the rails server running.
 
-On that way a developer can just edit the templates and run a test and see always the refreshed 
+On that way a developer can just edit the templates and run a test and see always the refreshed
 content on the browser and on the app within the `generated_test_app_path`.
-  
+
 NOTE: Theese tests are dependend on your environment, including the running ruby version!
 I am working on rvm. If you work on a different environment, some (not many) changes may be necessary.
 Thats your part :)
@@ -293,6 +293,13 @@ The current test cases including (among others):
 create a completely new rails app, running the full installer and check if a hello World component is visible and javascript is working.
 run assets:precompile within a rails app and check if the gem does its precompiling too.
 
+For development of the **npm package @csedl/svelte-on-rails** you can add the file
+`local_npm_package_path` and insert the path to the npm package on your local machine.
+This will cause the installer, not to install the npm package from npm, but to use the local one.
+
+‼️ **ATTENTION:** Please do never commit the file `local_npm_package_path` to the repo! This is only for developers!
+Otherwise a user would, on running the installer, get an error, because the npm package is not found.
+
 ## Licence
 
 License is MIT

data/lib/generators/svelte_on_rails/install/install_generator.rb

@@ -16,12 +16,20 @@ module SvelteOnRails
       require 'svelte_on_rails/installer/haml'
       require_relative '../../../../spec/test_helpers'
 
+      NPM_PACKAGE_NAME = '@csedl/svelte-on-rails'
+
       def initialize(*args)
         super
         validate_raw_options!(args)
         puts '-' * 80
+        puts '-' * 80
         puts 'STARTING SVELTE-ON-RAILS INSTALLATION'
-        puts "FORCED (option --force was given)" if options[:force]
+        puts "  • FORCED (option --force was given)" if options[:force]
+        if TestHelpers.local_npm_package_url
+          puts "  • Local Npm Package used: #{NPM_PACKAGE_NAME} used: #{TestHelpers.local_npm_package_url}"
+        end
+        puts '-' * 80
+
       end
 
       def vite
@@ -33,15 +41,37 @@ module SvelteOnRails
       end
 
       def svelte_on_rails
+
         puts '-' * 80
         puts ' ▶︎▶︎▶︎ INSTALLING SVELTE-ON-RAILS GEM'
 
         utils = SvelteOnRails::Installer::Utils
         npm_i = SvelteOnRails::Installer::Npm
         utils.write_templates(['svelte_on_rails_vite_base'], ask_for_overwrite: !options[:force])
-        npm_i.install_or_update_package('@csedl/svelte-on-rails')
+        if TestHelpers.local_npm_package_url
+          puts '☝️ <<<'
+          puts 'LINK LOCAL PACKAGE'
+          puts 'BUGFIX: npm does not install peer dependencies of local linked packages!'
+          puts '    For packages from the registry, this does since newer versins of npm.'
+          puts '    So we need to install the peer dependencies manually.'
+          npm_i.install_or_update_package('rollup-plugin-svelte', dev_dependency: true)
+          npm_i.install_or_update_package('rollup', dev_dependency: true)
+          npm_i.install_or_update_package('@rollup/plugin-node-resolve', dev_dependency: true)
+          npm_i.install_or_update_package('@rollup/plugin-commonjs', dev_dependency: true)
+          npm_i.install_or_update_package('@rollup/plugin-url', dev_dependency: true)
+          npm_i.install_or_update_package('rollup-plugin-css-only', dev_dependency: true)
+          npm_i.install_or_update_package('rollup-plugin-string', dev_dependency: true)
+          npm_i.install_or_update_package('svelte-preprocess', dev_dependency: true)
+          npm_i.install_or_update_package('pug', dev_dependency: true)
+          npm_i.install_or_update_package('typescript', dev_dependency: true)
+          puts '☝️ >>>'
+          npm_i.link_local_package(NPM_PACKAGE_NAME, TestHelpers.local_npm_package_url)
+        else
+          npm_i.install_or_update_package(NPM_PACKAGE_NAME)
+        end
+
         # insert_initializer
-        uts = SvelteOnRails::Installer::Utils
+        #uts = SvelteOnRails::Installer::Utils
         # add import statements
         js_i = SvelteOnRails::Installer::Javascript
         init_stat = '../initializers/svelte.js'
@@ -92,7 +122,6 @@ module SvelteOnRails
 
         haml_i = SvelteOnRails::Installer::Haml
         haml_i.install_haml_and_convert(force: options[:force])
-        #haml_i.empty_test_methode
       end
 
       def finish
@@ -108,19 +137,6 @@ module SvelteOnRails
         puts "Happy coding!"
       end
 
-      # HELLO_WORLD_FILES = %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
-      #     app/frontend/javascript/components/Pug.svelte
-      #     app/frontend/javascript/components/sub/NestedComponent.svelte
-      #     app/frontend/javascript/nestedJavascript.js
-      #     app/frontend/javascript/nestedJavascriptToggled.js
-      #     app/frontend/javascript/components/sub/NestedComponent.svelte
-      #     app/frontend/images/svg.svg
-      #     app/frontend/images/check-circle-green.png
-      # ]
-
       private
 
       def toggle_hello_world_files

data/lib/svelte_on_rails/installer/haml.rb

@@ -52,18 +52,18 @@ module SvelteOnRails
               return
             end
           end
-        end
 
-        # ask if overwrite
+          # 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)
+          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
         end
 
         puts '-' * 80

data/lib/svelte_on_rails/installer/npm.rb

@@ -2,13 +2,14 @@ module SvelteOnRails
   module Installer
     module Npm
 
-      def self.install_or_update_package(package_name, minimal_version: nil, update_to_latest: true)
+      def self.install_or_update_package(package_name, minimal_version: nil, update_to_latest: true, dev_dependency: false )
         pkg = inspect_package(package_name)
         to_do = !check_version((pkg ? pkg[:version] : nil), minimal_version)
+        save_dev = (dev_dependency ? ' --save-dev' : '')
         if to_do
 
           cmd = if update_to_latest
-                  "npm install #{package_name}@latest"
+                  "npm install #{package_name}@latest#{save_dev}"
                 else
                   raise "ERROR: not implemented"
                 end
@@ -34,6 +35,23 @@ module SvelteOnRails
         end
       end
 
+      def self.link_local_package(package_name, local_package_url)
+        Dir.chdir(local_package_url) do
+          `npm link`
+        end
+        Dir.chdir(Rails.root) do
+          # Instead of just `npm link`, use `npm install` to add the local package to package.json
+          `npm install #{local_package_url} --save`
+          stdout, stderr, status = Open3.capture3("npm ls #{package_name}")
+          if stderr.present?
+            raise "ERROR: npm link failed for #{package_name} => #{stderr}"
+          end
+          puts "Successfully linked #{package_name} to #{local_package_url}"
+          puts "  • `npm ls #{package_name}` => «#{stdout}»"
+        end
+      end
+
+
       def self.inspect_package(package_name)
         pkg = nil
         version = nil

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.37
+  version: 0.0.38
 platform: ruby
 authors:
 - Christian Sedlmair