svelte-on-rails 1.0.2 → 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
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
|
@@ -1,4 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
<div style="text-align: center;">
|
|
2
|
+
<img src="./Svelte_Logo.svg.png" alt="Svelte Logo" height="120">
|
|
3
|
+
</div>
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Svelte is the missing peace for ambitious Rails frontends.
|
|
8
|
+
|
|
9
|
+
# Why Svelte?
|
|
10
|
+
|
|
11
|
+
On every app there are parts where you want it to shine. This is where Svelte comes in.
|
|
12
|
+
|
|
13
|
+
- Works perfectly with Hotwired/Turbo
|
|
14
|
+
- Perfect addition to Stimulus
|
|
15
|
+
- Easy to learn
|
|
16
|
+
- Powerful
|
|
17
|
+
- **Compared to Stimulus**
|
|
18
|
+
- No more writing double logic of the initial HTML state
|
|
19
|
+
- Stimulus is good for parts where you have simple and little javascript and lots of html
|
|
20
|
+
- The more complexity, the more you will love svelte
|
|
21
|
+
- **Compared to React**
|
|
22
|
+
- No Shadow dom
|
|
23
|
+
- Slimmer packages
|
|
24
|
+
- Easier to learn
|
|
25
|
+
- Faster
|
|
26
|
+
|
|
27
|
+
Have a look at this entertaining video [rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)
|
|
28
|
+
by Rich Harris, especially from 3:50 to 6:40 and his comparison to react.
|
|
29
|
+
|
|
30
|
+
This all fits perfectly with the Rails way of minimalist javascript, but: Where we need it, we have it.
|
|
31
|
+
|
|
32
|
+
# Features
|
|
33
|
+
|
|
34
|
+
- 🤝 fully integrated with `assets:precompile`
|
|
35
|
+
- 🚀 cero-config deployment
|
|
36
|
+
|
|
37
|
+
# Svelte on Rails 👍
|
|
2
38
|
|
|
3
39
|
Rock-solid and seamless integration of Svelte Components into Rails views, based on `vite_rails`.
|
|
4
40
|
|
|
@@ -8,8 +44,8 @@ requests it provides a empty tag which is mounted on the frontend
|
|
|
8
44
|
by the associated npm package [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails).
|
|
9
45
|
|
|
10
46
|
This way svelte works perfectly together with turbo. You will never notice
|
|
11
|
-
this unpleasant «blink» on the frontend
|
|
12
|
-
performance
|
|
47
|
+
this unpleasant «blink» on the frontend while the whole process is maximum
|
|
48
|
+
performance optimized.
|
|
13
49
|
|
|
14
50
|
Thanks to [shakacode](https://github.com/shakacode/react_on_rails)
|
|
15
51
|
and [ElMassimo](https://github.com/ElMassimo) for inspiring and helping me with their gems.
|
|
@@ -30,7 +66,7 @@ If you have issues, please open one, and contributors are welcome!
|
|
|
30
66
|
- if you use special packages (like pug) that requires commonjs, you may need
|
|
31
67
|
- npm on latest versions
|
|
32
68
|
|
|
33
|
-
## Installation from cero
|
|
69
|
+
## Installation from cero ⚙️
|
|
34
70
|
|
|
35
71
|
With haml, vite, svelte and turbo:
|
|
36
72
|
|
|
@@ -50,6 +86,12 @@ and run the installer
|
|
|
50
86
|
rails g svelte_on_rails:install --full
|
|
51
87
|
```
|
|
52
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
|
+
|
|
53
95
|
The `--full` contains:
|
|
54
96
|
|
|
55
97
|
- `--vite`
|
|
@@ -91,35 +133,64 @@ rails svelte_on_rails:remove_hello_world
|
|
|
91
133
|
|
|
92
134
|
and start coding.
|
|
93
135
|
|
|
94
|
-
##
|
|
136
|
+
## Installation on a existing app ⚙️
|
|
95
137
|
|
|
96
|
-
|
|
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)
|
|
97
149
|
|
|
98
150
|
```bash
|
|
99
151
|
rails g svelte_on_rails:install
|
|
100
152
|
```
|
|
101
153
|
|
|
102
|
-
|
|
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:
|
|
103
166
|
|
|
104
|
-
-
|
|
105
|
-
-
|
|
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`
|
|
106
176
|
|
|
107
|
-
|
|
108
|
-
for setup the workflow
|
|
177
|
+
**Troubleshooting**
|
|
109
178
|
|
|
110
|
-
|
|
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. 🤓
|
|
111
183
|
|
|
112
|
-
|
|
113
|
-
- `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.
|
|
114
185
|
|
|
115
186
|
## Check if it all works
|
|
116
187
|
|
|
117
188
|
Server Side Rendering (SSR) is a parallel pipeline to client side rendering.
|
|
118
189
|
Both should return the same html. And your global styles should be applied same way
|
|
119
|
-
for both cases. For
|
|
190
|
+
for both cases. For normal use cases this is.
|
|
120
191
|
|
|
121
192
|
For check the **ssr pipeline** you can pass the options `ssr: true` and `hydrate: false`
|
|
122
|
-
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.
|
|
123
194
|
|
|
124
195
|
For check the **client side pipeline** you can pass the option `ssr: false` and
|
|
125
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
|
|
|
@@ -12,7 +12,6 @@ if defined?(Rails) && Rake::Task.task_defined?("assets:precompile")
|
|
|
12
12
|
end
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
require_relative '../../spec/test_helpers'
|
|
16
15
|
require_relative '../../lib/svelte_on_rails/installer/hello_world'
|
|
17
16
|
require_relative '../../lib/generators/svelte_on_rails/install/install_generator'
|
|
18
17
|
|