svelte-on-rails 0.0.37 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 40380d23e1e5115506e76b3a03f7024ffe7817d28ef2ea807c555ef565547cb2
4
- data.tar.gz: 8e20a2c5620788b190b43c5f0d072af21c0d96573dce9e5d15217d7027f65598
3
+ metadata.gz: eb472d80d06965ddd24db87e7cf9599fe336e3a14c78becd7051adb0c96fa0bf
4
+ data.tar.gz: 1a5edd038b6c9b59b851cca3f456c396f8108185cca247da8e337a2e7873e108
5
5
  SHA512:
6
- metadata.gz: a0f10a0d977358a4a709882ae662ea9b53d0892ec89c2068b37aecd5648b534f759f9ea5279103bd736bc297dac8988441eee4739ce81d7386c58db046a73208
7
- data.tar.gz: 62c4f47cd06a2d7ce3172b5829468847b328a7381f81db5219ddc24389f17660a49f4b026cdd8fcff46a608e36aa1e74f27ee97be7239476302c5d52da913173
6
+ metadata.gz: a18f23eacd2aaee32e55214adedfbe7c9a1ab13836bc609883b2c19242a3be9221c904ab6e6f5a615ed41fdf410a3231176e68528477c2af9efbf7ee2a44a6bb
7
+ data.tar.gz: 01d5e459f2e1b73c5a95dd30c7759d9772b2549c08fe2a08c25c37b4cfacf7595d3ffc9ad29f98a4b925147bef8729aaecb092ba402d8bd659df7fba28b75c73
data/README.md CHANGED
@@ -6,12 +6,12 @@ By default, and when installed together with `@hotwired/turbo-rails`, it renders
6
6
  svelte components on first request server side («SSR») and for subsequent
7
7
  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.
8
8
 
9
- This way svelte works perfectly together with turbo. You will never notice
9
+ This way svelte works perfectly together with turbo. You will never notice
10
10
  this unpleasant «blink» on the frontend and it is maximum performance
11
11
  optimized. SSR compilation is handled by rollup.
12
12
 
13
- Server-side rendering is the bottleneck on such a pipeline.
14
- Although rollup is powerful, this gem is in an early state
13
+ Server-side rendering is the bottleneck on such a pipeline.
14
+ Although rollup is powerful, this gem is in an early state
15
15
  and there may be limitations.
16
16
 
17
17
  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.
22
22
 
23
23
  This all is developed on Rails-7 together with `vite_rails`.
24
24
 
25
- Thanks to [shakacode](https://github.com/shakacode/react_on_rails)
25
+ Thanks to [shakacode](https://github.com/shakacode/react_on_rails)
26
26
  and [ElMassimo](https://github.com/ElMassimo) because they all helped me with theyr gems.
27
27
 
28
28
  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!
33
33
  - tested on ruby 3.2.2 and rails 7.1
34
34
  - svelte v5 (see: [how to install svelte on rails/vite](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk))
35
35
  - turbo (recommended / [how to install turbo on rails](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#installation))
36
- - if you use special packages (like pug) that requires commonjs, you may need
36
+ - if you use special packages (like pug) that requires commonjs, you may need
37
37
 
38
38
  ## Installation from cero
39
39
 
@@ -59,17 +59,17 @@ rails g svelte_on_rails:install --full
59
59
 
60
60
  The `--full` contains:
61
61
 
62
- - `--vite`
62
+ - `--vite`
63
63
  - adds vite_rails gem and running the installer
64
- - `--haml`
64
+ - `--haml`
65
65
  - adds the gem and converts existing views
66
- - `svelte_on_rails`
66
+ - `svelte_on_rails`
67
67
  - This is not a option, this is always done: Adds a config file and installs `@csedl/svelte-on-rails` by npm
68
- - `--turbo`
68
+ - `--turbo`
69
69
  - installs `@hotwired/turbo-rails` and adds import statement to application.js
70
- - `--svelte`
70
+ - `--svelte`
71
71
  - adds or updates `svelte`
72
- - `--hello-world`
72
+ - `--hello-world`
73
73
  - adds a hello world component
74
74
 
75
75
  You can also use the options you want instead of using `--full`.
@@ -123,17 +123,17 @@ On loading you will see
123
123
 
124
124
  - Rendered HelloWorld.svelte server-side: 0.075ms
125
125
 
126
- On the rails console and you will see «Greetings from svelte»
126
+ On the rails console and you will see «Greetings from svelte»
127
127
  on your view with a styled «Increment» button.
128
128
  Styles you find within the svelte component.
129
129
  Click this button and see that the component is alive.
130
130
 
131
- On [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails)
131
+ On [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails)
132
132
  are details how the frontend part is working.
133
133
 
134
- Without the npm package installed,
134
+ Without the npm package installed,
135
135
  or by passing `ssr: true` and `hydrate: false` to the view helper,
136
- you would see the same html, and the styled button,
136
+ you would see the same html, and the styled button,
137
137
  but the increment button would not work.
138
138
 
139
139
  I inserted very detailed error messages on rails and on the
@@ -142,7 +142,7 @@ So please check the logs on your browser.
142
142
 
143
143
  ### Import statements
144
144
 
145
- For check which statements are working and actively tested, please check the
145
+ For check which statements are working and actively tested, please check the
146
146
  [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.
147
147
 
148
148
  Among others there are
@@ -156,7 +156,7 @@ Among others there are
156
156
 
157
157
  When the rails app runs `assets:precompile` a additional rake task is triggered: `rails svelte_on_rails:reset_and_compile_all`.
158
158
 
159
- This is not absolutely necessary but it reduces the loading time of the very first calling of the first component.
159
+ This is not absolutely necessary but it reduces the loading time of the very first calling of the first component.
160
160
  So, on deploying or doing `rails assets:precompile` you shoud see something like:
161
161
 
162
162
  ```
@@ -176,7 +176,7 @@ on the console.
176
176
 
177
177
  Works with `hotwired/turbo` only
178
178
 
179
- By passing the `ssr: :auto` option to the view helper,
179
+ By passing the `ssr: :auto` option to the view helper,
180
180
  it checks if the request is an initial request (request header `X-Turbo-Request-ID` is present):
181
181
 
182
182
  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
200
200
 
201
201
  A server-side rendered svelte component has 2 states:
202
202
 
203
- #### Before hydration
203
+ #### Before hydration
204
204
 
205
- - The `svelte_component` view helper renders the styles contained within the component
206
- into a style tag within the component's wrapper element. This has to be done this way because of Turbo.
205
+ - The `svelte_component` view helper renders the styles contained within the component
206
+ into a style tag within the component's wrapper element. This has to be done this way because of Turbo.
207
207
  - In very, very rare cases, global styles are not applied in the same way as after hydration.
208
208
 
209
- #### After hydration
209
+ #### After hydration
210
210
 
211
- - Svelte adds a style tag inside the header
211
+ - Svelte adds a style tag inside the header
212
212
  - Svelte renders the component again, which removes the style tag inside the component wrapper.
213
213
 
214
- #### If you notice a "blink"
214
+ #### If you notice a "blink"
215
215
 
216
- For the app to look stable, both states must appear in the same way.
217
- Normally this is the case. But if there are problems,
218
- or you want to see the state before hydration, for development purposes, you can pass
219
- the `hydrate: false` option to the view helper,
216
+ For the app to look stable, both states must appear in the same way.
217
+ Normally this is the case. But if there are problems,
218
+ or you want to see the state before hydration, for development purposes, you can pass
219
+ the `hydrate: false` option to the view helper,
220
220
  and no hydration will happen for this component.
221
221
 
222
222
  ## More rake tasks
@@ -246,7 +246,7 @@ rails svelte_on_rails:reset_and_compile_all
246
246
 
247
247
  This does the same step that ist triggered together with the
248
248
  `rails assets:precompile` step together with the deployment pipeline:
249
- it removes all contents of the svelte-on-rails compiled
249
+ it removes all contents of the svelte-on-rails compiled
250
250
  assets and compiles them all new.
251
251
 
252
252
  ## Performance
@@ -261,7 +261,7 @@ Example from the rails console for a medium complex component
261
261
  - => subsequent calls
262
262
  - Completed 200 OK in 521ms (Views: 520.2ms | ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.3ms)
263
263
 
264
- ## Developers Guide
264
+ ## Contributors Guide
265
265
 
266
266
  Tests are based on the included templates, like the `hello world template` and on the installer.
267
267
 
@@ -271,8 +271,8 @@ folder where the tests generate a test rails app.
271
271
  **Installer tests** starting with completely destroy the rails app within the `generated_test_app_path`,
272
272
  generating a new rails app and running the installer and test by `playwright` if the components are working.
273
273
 
274
- **component tests** only checking if a rails server is alive, and if not, install and run a rails app.
275
- For this is the testing helper `start_rails_server_unless_ping`. This step may only be slow on the
274
+ **component tests** only checking if a rails server is alive, and if not, install and run a rails app.
275
+ For this is the testing helper `start_rails_server_unless_ping`. This step may only be slow on the
276
276
  first run, then it is fast. And on every repeating the test it always overwrites the components
277
277
  with the components from the template by the testing helper `install_hello_world(
278
278
  ['rails_vite_hello_world'],
@@ -281,9 +281,9 @@ with the components from the template by the testing helper `install_hello_world
281
281
  silent: true
282
282
  )`. At the end of the test it leaves the rails server running.
283
283
 
284
- On that way a developer can just edit the templates and run a test and see always the refreshed
284
+ On that way a developer can just edit the templates and run a test and see always the refreshed
285
285
  content on the browser and on the app within the `generated_test_app_path`.
286
-
286
+
287
287
  NOTE: Theese tests are dependend on your environment, including the running ruby version!
288
288
  I am working on rvm. If you work on a different environment, some (not many) changes may be necessary.
289
289
  Thats your part :)
@@ -293,6 +293,13 @@ The current test cases including (among others):
293
293
  create a completely new rails app, running the full installer and check if a hello World component is visible and javascript is working.
294
294
  run assets:precompile within a rails app and check if the gem does its precompiling too.
295
295
 
296
+ For development of the **npm package @csedl/svelte-on-rails** you can add the file
297
+ `local_npm_package_path` and insert the path to the npm package on your local machine.
298
+ This will cause the installer, not to install the npm package from npm, but to use the local one.
299
+
300
+ ‼️ **ATTENTION:** Please do never commit the file `local_npm_package_path` to the repo! This is only for developers!
301
+ Otherwise a user would, on running the installer, get an error, because the npm package is not found.
302
+
296
303
  ## Licence
297
304
 
298
305
  License is MIT
@@ -14,14 +14,27 @@ module SvelteOnRails
14
14
 
15
15
  require 'svelte_on_rails/installer/utils'
16
16
  require 'svelte_on_rails/installer/haml'
17
- require_relative '../../../../spec/test_helpers'
17
+ require 'svelte_on_rails/lib/development_utils'
18
+
19
+ NPM_PACKAGE_NAME = '@csedl/svelte-on-rails'
18
20
 
19
21
  def initialize(*args)
22
+
20
23
  super
24
+
25
+ @local_npm_package_url = SvelteOnRails::DevelopmentUtils.local_npm_package_url
26
+
27
+ puts
21
28
  validate_raw_options!(args)
22
29
  puts '-' * 80
30
+ puts '-' * 80
23
31
  puts 'STARTING SVELTE-ON-RAILS INSTALLATION'
24
- puts "FORCED (option --force was given)" if options[:force]
32
+ puts "FORCED (option --force was given)" if options[:force]
33
+ if @local_npm_package_url
34
+ puts " • Local Npm Package used: #{NPM_PACKAGE_NAME} used: #{@local_npm_package_url}"
35
+ end
36
+ puts '-' * 80
37
+
25
38
  end
26
39
 
27
40
  def vite
@@ -33,15 +46,38 @@ module SvelteOnRails
33
46
  end
34
47
 
35
48
  def svelte_on_rails
49
+
36
50
  puts '-' * 80
37
51
  puts ' ▶︎▶︎▶︎ INSTALLING SVELTE-ON-RAILS GEM'
38
52
 
39
53
  utils = SvelteOnRails::Installer::Utils
40
54
  npm_i = SvelteOnRails::Installer::Npm
41
55
  utils.write_templates(['svelte_on_rails_vite_base'], ask_for_overwrite: !options[:force])
42
- npm_i.install_or_update_package('@csedl/svelte-on-rails')
56
+
57
+ if @local_npm_package_url
58
+ puts '☝️ <<<'
59
+ puts 'LINK LOCAL PACKAGE'
60
+ puts 'BUGFIX: npm does not install peer dependencies of local linked packages!'
61
+ puts ' For packages from the registry, this does since newer versins of npm.'
62
+ puts ' So we need to install the peer dependencies manually.'
63
+ npm_i.install_or_update_package('rollup-plugin-svelte', dev_dependency: true)
64
+ npm_i.install_or_update_package('rollup', dev_dependency: true)
65
+ npm_i.install_or_update_package('@rollup/plugin-node-resolve', dev_dependency: true)
66
+ npm_i.install_or_update_package('@rollup/plugin-commonjs', dev_dependency: true)
67
+ npm_i.install_or_update_package('@rollup/plugin-url', dev_dependency: true)
68
+ npm_i.install_or_update_package('rollup-plugin-css-only', dev_dependency: true)
69
+ npm_i.install_or_update_package('rollup-plugin-string', dev_dependency: true)
70
+ npm_i.install_or_update_package('svelte-preprocess', dev_dependency: true)
71
+ npm_i.install_or_update_package('pug', dev_dependency: true)
72
+ npm_i.install_or_update_package('typescript', dev_dependency: true)
73
+ puts '☝️ >>>'
74
+ npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
75
+ else
76
+ npm_i.install_or_update_package(NPM_PACKAGE_NAME)
77
+ end
78
+
43
79
  # insert_initializer
44
- uts = SvelteOnRails::Installer::Utils
80
+ #uts = SvelteOnRails::Installer::Utils
45
81
  # add import statements
46
82
  js_i = SvelteOnRails::Installer::Javascript
47
83
  init_stat = '../initializers/svelte.js'
@@ -92,7 +128,6 @@ module SvelteOnRails
92
128
 
93
129
  haml_i = SvelteOnRails::Installer::Haml
94
130
  haml_i.install_haml_and_convert(force: options[:force])
95
- #haml_i.empty_test_methode
96
131
  end
97
132
 
98
133
  def finish
@@ -108,19 +143,6 @@ module SvelteOnRails
108
143
  puts "Happy coding!"
109
144
  end
110
145
 
111
- # HELLO_WORLD_FILES = %w[
112
- # app/controllers/svelte_on_rails_hello_world_controller.rb
113
- # app/views/svelte_on_rails_hello_world/index.haml
114
- # app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
115
- # app/frontend/javascript/components/Pug.svelte
116
- # app/frontend/javascript/components/sub/NestedComponent.svelte
117
- # app/frontend/javascript/nestedJavascript.js
118
- # app/frontend/javascript/nestedJavascriptToggled.js
119
- # app/frontend/javascript/components/sub/NestedComponent.svelte
120
- # app/frontend/images/svg.svg
121
- # app/frontend/images/check-circle-green.png
122
- # ]
123
-
124
146
  private
125
147
 
126
148
  def toggle_hello_world_files
@@ -52,18 +52,18 @@ module SvelteOnRails
52
52
  return
53
53
  end
54
54
  end
55
- end
56
55
 
57
- # ask if overwrite
56
+ # ask if overwrite
58
57
 
59
- if overwrite_files.any?
60
- puts '-' * 80
61
- begin
62
- puts "The following files already exist and would be overwritten:"
63
- puts overwrite_files
64
- puts "Would you like to overwrite these .haml files? (y/n)"
65
- should_overwrite = STDIN.gets.chomp.downcase[0]
66
- end until ['y', 'n'].include?(should_overwrite)
58
+ if overwrite_files.any?
59
+ puts '-' * 80
60
+ begin
61
+ puts "The following files already exist and would be overwritten:"
62
+ puts overwrite_files
63
+ puts "Would you like to overwrite these .haml files? (y/n)"
64
+ should_overwrite = STDIN.gets.chomp.downcase[0]
65
+ end until ['y', 'n'].include?(should_overwrite)
66
+ end
67
67
  end
68
68
 
69
69
  puts '-' * 80
@@ -2,13 +2,14 @@ module SvelteOnRails
2
2
  module Installer
3
3
  module Npm
4
4
 
5
- def self.install_or_update_package(package_name, minimal_version: nil, update_to_latest: true)
5
+ def self.install_or_update_package(package_name, minimal_version: nil, update_to_latest: true, dev_dependency: false )
6
6
  pkg = inspect_package(package_name)
7
7
  to_do = !check_version((pkg ? pkg[:version] : nil), minimal_version)
8
+ save_dev = (dev_dependency ? ' --save-dev' : '')
8
9
  if to_do
9
10
 
10
11
  cmd = if update_to_latest
11
- "npm install #{package_name}@latest"
12
+ "npm install #{package_name}@latest#{save_dev}"
12
13
  else
13
14
  raise "ERROR: not implemented"
14
15
  end
@@ -34,6 +35,23 @@ module SvelteOnRails
34
35
  end
35
36
  end
36
37
 
38
+ def self.link_local_package(package_name, local_package_url)
39
+ Dir.chdir(local_package_url) do
40
+ `npm link`
41
+ end
42
+ Dir.chdir(Rails.root) do
43
+ # Instead of just `npm link`, use `npm install` to add the local package to package.json
44
+ `npm install #{local_package_url} --save`
45
+ stdout, stderr, status = Open3.capture3("npm ls #{package_name}")
46
+ if stderr.present?
47
+ raise "ERROR: npm link failed for #{package_name} => #{stderr}"
48
+ end
49
+ puts "Successfully linked #{package_name} to #{local_package_url}"
50
+ puts " • `npm ls #{package_name}` => «#{stdout}»"
51
+ end
52
+ end
53
+
54
+
37
55
  def self.inspect_package(package_name)
38
56
  pkg = nil
39
57
  version = nil
@@ -0,0 +1,25 @@
1
+ module SvelteOnRails
2
+ class DevelopmentUtils
3
+
4
+ def self.local_npm_package_url
5
+ config_file = gem_folder.join('local_npm_package_path')
6
+ if !File.exist?(config_file)
7
+ return nil
8
+ else
9
+ str = File.read(config_file).strip
10
+ if !Dir.exist?(str)
11
+ raise "Invalid path given on local_npm_package_path: «#{str}»"
12
+ elsif !File.exist?(Pathname.new(str).join('package.json'))
13
+ raise "Given local_npm_package_path does not seem to be a valid npm package as it does not contain a package.json"
14
+ else
15
+ return Pathname.new(str)
16
+ end
17
+ end
18
+ end
19
+
20
+ def self.gem_folder
21
+ Pathname.new(File.expand_path('../../..', __dir__))
22
+ end
23
+
24
+ end
25
+ end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: svelte-on-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.37
4
+ version: 0.0.39
5
5
  platform: ruby
6
6
  authors:
7
7
  - Christian Sedlmair
@@ -43,6 +43,7 @@ files:
43
43
  - lib/svelte_on_rails/installer/svelte.rb
44
44
  - lib/svelte_on_rails/installer/utils.rb
45
45
  - lib/svelte_on_rails/installer/vite.rb
46
+ - lib/svelte_on_rails/lib/development_utils.rb
46
47
  - lib/svelte_on_rails/lib/initializable.rb
47
48
  - lib/svelte_on_rails/lib/utils.rb
48
49
  - lib/svelte_on_rails/railtie.rb