svelte-on-rails 0.0.8 → 0.0.9
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 +24 -16
- data/lib/svelte_on_rails/render_server_side.rb +0 -2
- data/lib/svelte_on_rails/view_helpers.rb +4 -0
- 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: 21cc2327494c663a2040c3775ec40e5fd4e3612a28e51eba172c13da07440ad0
|
|
4
|
+
data.tar.gz: 9773b7346d542202ae0670e2c79d03faca86164b513e398df0c0bf6c265efd87
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8d252352dcadea7d3fe44d937cff9b2e5a9376a7d6bdb8087cb19b9c15ad0084fe0d93c323ddad9cbc0ab5b82443cc3b023e61beb1b724405d0b9c8c6748dc55
|
|
7
|
+
data.tar.gz: 7b8be4d43e13f0bafe356a6dbc3b3052b44627b30fdb56509313993e14fb6bed039f411f4d9b0b045d53cb697f2b101b73488e4e136de4c433ad83621bccc92a
|
data/README.md
CHANGED
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
Seamless and robust Svelte in Rails integration.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
By default an when installed together with hotwired/turbo, it renders
|
|
6
|
+
svelte components on first request server side («SSR») and for subsequent
|
|
7
|
+
requests it provides a empty tag that is filled up on the frontend by svelte.
|
|
8
|
+
|
|
9
|
+
This way works perfectly together with turbo, you will never notice
|
|
10
|
+
this unpleasant «blink» on the frontend and it is maximum performance
|
|
11
|
+
optimized. SSR compilation is handled by rollup.
|
|
9
12
|
|
|
10
13
|
Server-side rendering is the bottleneck on such a pipeline.
|
|
11
14
|
Although rollup is powerful, this gem is in an early state
|
|
12
|
-
and there
|
|
13
|
-
So please always test your components early if they pass ssr.
|
|
15
|
+
and there may be limitations.
|
|
14
16
|
|
|
15
|
-
I have written everything in ESM syntax.
|
|
17
|
+
I have written everything in ESM syntax, orientated by the functionality of vite.
|
|
16
18
|
Although the common-js plugin is installed, I have not tested it,
|
|
17
19
|
so for example `require` may not work in Svelte components.
|
|
18
|
-
To check which import statements work, please check the components
|
|
19
|
-
in the `spec/rails-vite-test-app/app/frontend/javascript/components` gem.
|
|
20
20
|
|
|
21
21
|
This all is developed on Rails-7 together with `vite_rails`.
|
|
22
22
|
|
|
@@ -27,7 +27,8 @@ and [ElMassimo](https://github.com/ElMassimo) because they all helped me with th
|
|
|
27
27
|
|
|
28
28
|
- actual node installed on the server
|
|
29
29
|
- tested on ruby 3.2.2 and rails 7.1
|
|
30
|
-
- svelte (see: [install svelte on vite
|
|
30
|
+
- svelte v5 (see: [how to install svelte on rails/vite](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk))
|
|
31
|
+
- turbo (recommended / [how to install turbo on rails](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#installation))
|
|
31
32
|
|
|
32
33
|
## Installation
|
|
33
34
|
|
|
@@ -35,31 +36,37 @@ add
|
|
|
35
36
|
```ruby
|
|
36
37
|
gem "svelte-on-rails"
|
|
37
38
|
```
|
|
38
|
-
to your gemfile
|
|
39
|
-
|
|
40
|
-
and run
|
|
39
|
+
to your gemfile and run
|
|
41
40
|
|
|
42
41
|
```ruby
|
|
42
|
+
$ bundle
|
|
43
43
|
$ rails svelte_on_rails:install
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
This will create a little config file, please read the comments there
|
|
46
|
+
This will create a little config file, please read the comments there and set the tags:
|
|
47
|
+
|
|
48
|
+
- `frontend_folder` (relative to Rails.root)
|
|
49
|
+
- `components_folder` (relative to frontend_folder)
|
|
47
50
|
|
|
48
51
|
Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side.
|
|
49
52
|
|
|
50
53
|
## Usage
|
|
51
54
|
|
|
55
|
+
On the view
|
|
56
|
+
|
|
52
57
|
```haml
|
|
53
58
|
= svelte_component("myComponent", items: ['item1', 'item2'])
|
|
54
59
|
```
|
|
55
60
|
|
|
56
|
-
|
|
61
|
+
Within the `components_folder` (configs above) a component like `myComponent.svelte`
|
|
57
62
|
|
|
58
63
|
```sveltehtml
|
|
59
64
|
<script>
|
|
60
65
|
export let items
|
|
61
66
|
</script>
|
|
62
67
|
|
|
68
|
+
<h1>Greetings from svelte</h1>
|
|
69
|
+
|
|
63
70
|
<ul>
|
|
64
71
|
{#each items as item}
|
|
65
72
|
<li>{item}</li>
|
|
@@ -73,6 +80,7 @@ would render a component like `myComponent.svelte`
|
|
|
73
80
|
</style>
|
|
74
81
|
```
|
|
75
82
|
|
|
83
|
+
And you should see «Greetings from svelte» on the browser.
|
|
76
84
|
|
|
77
85
|
### Import statements
|
|
78
86
|
|
|
@@ -153,4 +161,4 @@ initial request and the rest happens on the frontend.
|
|
|
153
161
|
## Testing
|
|
154
162
|
|
|
155
163
|
Testings are within the gem by `rspec`. And there is a [rails project](https://gitlab.com/users/sedl/projects) with
|
|
156
|
-
testings (based on playwright) where
|
|
164
|
+
testings (based on playwright) where the npm package and this gem is tested together.
|
|
@@ -9,8 +9,6 @@ module SvelteOnRails
|
|
|
9
9
|
@svelte_filename = filename
|
|
10
10
|
@compiled_file = "#{SvelteOnRails::Configuration.instance.dist_folder}/#{(filename.match(/\.svelte$/) ? filename[0..-8] : filename)}"
|
|
11
11
|
|
|
12
|
-
raise "File not found: #{@svelte_file}" unless File.exist?(@svelte_file)
|
|
13
|
-
|
|
14
12
|
end
|
|
15
13
|
|
|
16
14
|
def compile_if_changes
|
|
@@ -3,6 +3,10 @@ module SvelteOnRails
|
|
|
3
3
|
|
|
4
4
|
def svelte_component(filename, props = {})
|
|
5
5
|
|
|
6
|
+
# check filename
|
|
7
|
+
file_path = SvelteOnRails::Configuration.instance.components_folder + "#{filename}.svelte"
|
|
8
|
+
raise "File not found: #{file_path}" unless File.exist?(file_path)
|
|
9
|
+
|
|
6
10
|
# check what to do
|
|
7
11
|
|
|
8
12
|
rss = if props.key?(:render_server_side)
|