svelte-on-rails 1.0.3 → 1.0.4
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 +4 -4
- data/README.md +57 -17
- data/lib/generators/svelte_on_rails/install/install_generator.rb +1 -19
- data/lib/svelte_on_rails/lib/utils.rb +6 -3
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 17330191e3f353b0cca95eae25a4772df872aa2f0a8a816b263f4c8380cb3c2d
|
|
4
|
+
data.tar.gz: b7355a317adcf9fae73e366ac7d702d4bb33de41dd13a769955d86cdfcc3d7e2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f1fffe20498df636802e1e3c0909528e181aaf5ef218f58d9bcb9b97d575f7f68b5b128a2d4d75c824d75575a90183fa04d268afccb11600297a68eb7e562e42
|
|
7
|
+
data.tar.gz: 0401b3a33effbada6ce27aec384857c7ac8f28c8c0ac46a012f1fc7a61c9a677cab0a6bb59d584e4e4ebfed434ebc353a4b292210846c2ca889730ee06601345
|
data/README.md
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
Svelte is the missing peace for ambitious Rails
|
|
7
|
+
Svelte is the missing peace for ambitious Rails frontends.
|
|
8
8
|
|
|
9
|
-
# Why?
|
|
9
|
+
# Why Svelte?
|
|
10
10
|
|
|
11
11
|
On every app there are parts where you want it to shine. This is where Svelte comes in.
|
|
12
12
|
|
|
@@ -29,6 +29,11 @@ by Rich Harris, especially from 3:50 to 6:40 and his comparison to react.
|
|
|
29
29
|
|
|
30
30
|
This all fits perfectly with the Rails way of minimalist javascript, but: Where we need it, we have it.
|
|
31
31
|
|
|
32
|
+
# Features
|
|
33
|
+
|
|
34
|
+
- 🤝 fully integrated with `assets:precompile`
|
|
35
|
+
- 🚀 cero-config deployment
|
|
36
|
+
|
|
32
37
|
# Svelte on Rails 👍
|
|
33
38
|
|
|
34
39
|
Rock-solid and seamless integration of Svelte Components into Rails views, based on `vite_rails`.
|
|
@@ -39,8 +44,8 @@ requests it provides a empty tag which is mounted on the frontend
|
|
|
39
44
|
by the associated npm package [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails).
|
|
40
45
|
|
|
41
46
|
This way svelte works perfectly together with turbo. You will never notice
|
|
42
|
-
this unpleasant «blink» on the frontend
|
|
43
|
-
performance
|
|
47
|
+
this unpleasant «blink» on the frontend while the whole process is maximum
|
|
48
|
+
performance optimized.
|
|
44
49
|
|
|
45
50
|
Thanks to [shakacode](https://github.com/shakacode/react_on_rails)
|
|
46
51
|
and [ElMassimo](https://github.com/ElMassimo) for inspiring and helping me with their gems.
|
|
@@ -61,7 +66,7 @@ If you have issues, please open one, and contributors are welcome!
|
|
|
61
66
|
- if you use special packages (like pug) that requires commonjs, you may need
|
|
62
67
|
- npm on latest versions
|
|
63
68
|
|
|
64
|
-
## Installation from cero
|
|
69
|
+
## Installation from cero ⚙️
|
|
65
70
|
|
|
66
71
|
With haml, vite, svelte and turbo:
|
|
67
72
|
|
|
@@ -81,6 +86,12 @@ and run the installer
|
|
|
81
86
|
rails g svelte_on_rails:install --full
|
|
82
87
|
```
|
|
83
88
|
|
|
89
|
+
You have done it! 👍
|
|
90
|
+
|
|
91
|
+
Restart the server and you will see a svelte hello world component rendered on the browser.
|
|
92
|
+
|
|
93
|
+
**Explanation:**
|
|
94
|
+
|
|
84
95
|
The `--full` contains:
|
|
85
96
|
|
|
86
97
|
- `--vite`
|
|
@@ -122,35 +133,64 @@ rails svelte_on_rails:remove_hello_world
|
|
|
122
133
|
|
|
123
134
|
and start coding.
|
|
124
135
|
|
|
125
|
-
##
|
|
136
|
+
## Installation on a existing app ⚙️
|
|
126
137
|
|
|
127
|
-
|
|
138
|
+
Required: `vite_rails` must be installed, it wants a `app/frontend` folder.
|
|
139
|
+
|
|
140
|
+
Check Svelte Installation: [install svelte on rails](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk)
|
|
141
|
+
|
|
142
|
+
Within the app, add the gem
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
bundle add svelte-on-rails
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
and run the minimal installer (you are free to add any options from above)
|
|
128
149
|
|
|
129
150
|
```bash
|
|
130
151
|
rails g svelte_on_rails:install
|
|
131
152
|
```
|
|
132
153
|
|
|
133
|
-
|
|
154
|
+
Restart the server, add a example component like `app/frontend/javascript/HelloWorld.svelte`
|
|
155
|
+
and the helper to a view, like
|
|
156
|
+
|
|
157
|
+
```erb
|
|
158
|
+
<%= svelte_component('HelloWorld') %>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
And you should see your component rendered on the browser! 👍 🤗
|
|
162
|
+
|
|
163
|
+
**Explanation**
|
|
164
|
+
|
|
165
|
+
this Minimal installer does:
|
|
134
166
|
|
|
135
|
-
-
|
|
136
|
-
-
|
|
167
|
+
- `app/frontend/initializers/svelte.js`
|
|
168
|
+
- Adds a import statement for that initializer to `application.js`
|
|
169
|
+
- `app/frontend/ssr/ssr.js`
|
|
170
|
+
- `config/svelte_on_rails.yml`
|
|
171
|
+
- `vite-ssr.config.ts`
|
|
172
|
+
- installs or updates npm packages to the latest:
|
|
173
|
+
- `@csedl/svelte-on-rails`
|
|
174
|
+
- `typescript`
|
|
175
|
+
- `@types/node`
|
|
137
176
|
|
|
138
|
-
|
|
139
|
-
for setup the workflow
|
|
177
|
+
**Troubleshooting**
|
|
140
178
|
|
|
141
|
-
|
|
179
|
+
In the first step, the installer runs the backend parts that are unlikely to fail.
|
|
180
|
+
Then it installs the npm packages that are more likely to fail because of dependencies.
|
|
181
|
+
If so, just check that all the
|
|
182
|
+
packages are installed on the latest versions and you should be fine. 🤓
|
|
142
183
|
|
|
143
|
-
|
|
144
|
-
- `components_folder` (relative to frontend_folder)
|
|
184
|
+
The most importand rule is to firstly check all npm packages installed and passing before changing your view logik.
|
|
145
185
|
|
|
146
186
|
## Check if it all works
|
|
147
187
|
|
|
148
188
|
Server Side Rendering (SSR) is a parallel pipeline to client side rendering.
|
|
149
189
|
Both should return the same html. And your global styles should be applied same way
|
|
150
|
-
for both cases. For
|
|
190
|
+
for both cases. For normal use cases this is.
|
|
151
191
|
|
|
152
192
|
For check the **ssr pipeline** you can pass the options `ssr: true` and `hydrate: false`
|
|
153
|
-
to the view helper. This way you will see a «dead»
|
|
193
|
+
to the view helper. This way you will see a «dead» backend rendered HTML with no javascript applied.
|
|
154
194
|
|
|
155
195
|
For check the **client side pipeline** you can pass the option `ssr: false` and
|
|
156
196
|
`hydrate: true` to the view helper.
|
|
@@ -61,21 +61,6 @@ module SvelteOnRails
|
|
|
61
61
|
File.write('package.json', JSON.pretty_generate(pkg_js))
|
|
62
62
|
|
|
63
63
|
if @local_npm_package_url
|
|
64
|
-
# puts '☝️ <<<'
|
|
65
|
-
# puts 'LINK LOCAL PACKAGE'
|
|
66
|
-
# puts 'BUGFIX: npm does not install peer dependencies of local linked packages!'
|
|
67
|
-
# puts ' For packages from the registry, this does since newer versins of npm.'
|
|
68
|
-
# puts ' So we need to install the peer dependencies manually.'
|
|
69
|
-
# npm_i.install_or_update_package('rollup-plugin-svelte', dev_dependency: true)
|
|
70
|
-
# npm_i.install_or_update_package('rollup', dev_dependency: true)
|
|
71
|
-
# npm_i.install_or_update_package('@rollup/plugin-node-resolve', dev_dependency: true)
|
|
72
|
-
# npm_i.install_or_update_package('@rollup/plugin-commonjs', dev_dependency: true)
|
|
73
|
-
# npm_i.install_or_update_package('@rollup/plugin-url', dev_dependency: true)
|
|
74
|
-
# npm_i.install_or_update_package('rollup-plugin-css-only', dev_dependency: true)
|
|
75
|
-
# npm_i.install_or_update_package('rollup-plugin-string', dev_dependency: true)
|
|
76
|
-
# npm_i.install_or_update_package('svelte-preprocess', dev_dependency: true)
|
|
77
|
-
# npm_i.install_or_update_package('pug', dev_dependency: true) # must be there because compile.js on the backend imports is
|
|
78
|
-
# puts '☝️ >>>'
|
|
79
64
|
npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
|
|
80
65
|
else
|
|
81
66
|
npm_i.install_or_update_package(NPM_PACKAGE_NAME)
|
|
@@ -83,9 +68,6 @@ module SvelteOnRails
|
|
|
83
68
|
npm_i.install_or_update_package('typescript')
|
|
84
69
|
npm_i.install_or_update_package('@types/node')
|
|
85
70
|
|
|
86
|
-
# insert_initializer
|
|
87
|
-
#uts = SvelteOnRails::Installer::Utils
|
|
88
|
-
# add import statements
|
|
89
71
|
js_i = SvelteOnRails::Installer::Javascript
|
|
90
72
|
init_stat = '../initializers/svelte.js'
|
|
91
73
|
js_i.append_import_statement(application_js_path, init_stat, "import '#{init_stat}';")
|
|
@@ -139,7 +121,7 @@ module SvelteOnRails
|
|
|
139
121
|
|
|
140
122
|
def finish
|
|
141
123
|
puts '-' * 80
|
|
142
|
-
puts ' 👍
|
|
124
|
+
puts ' 👍 FINISHED SVELTE-ON-RAILS INSTALLATION 👍'
|
|
143
125
|
puts '-' * 80
|
|
144
126
|
|
|
145
127
|
puts "SvelteOnRails installed successfully!"
|
|
@@ -45,10 +45,13 @@ module SvelteOnRails
|
|
|
45
45
|
mtime = Dir[File.join(config.components_folder_full, '**/*.svelte')].map do |file|
|
|
46
46
|
File.mtime(file).to_f
|
|
47
47
|
end.max || 0.0
|
|
48
|
-
mtime_path = config.ssr_dist_folder.join('last_mtime')
|
|
49
|
-
last = (File.exist?(mtime_path) ? File.read(mtime_path).to_f : 0.0)
|
|
50
48
|
|
|
51
|
-
|
|
49
|
+
last = if Dir.exist?(config.ssr_dist_folder)
|
|
50
|
+
mtime_path = config.ssr_dist_folder.join('last_mtime')
|
|
51
|
+
(File.exist?(mtime_path) ? File.read(mtime_path).to_f : 0.0)
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
if !last || mtime > last
|
|
52
55
|
precompile(mtime)
|
|
53
56
|
end
|
|
54
57
|
|