svelte-on-rails 0.0.15 → 0.0.17
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 +20 -48
- data/lib/svelte_on_rails/view_helpers.rb +14 -5
- data/lib/tasks/svelte_on_rails_tasks.rake +5 -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: 193590578f918035e5afd3c9fbe2feb498bd3749fe6250eec32b477d3c5c9fd2
|
|
4
|
+
data.tar.gz: 8a06c417a6f086be0ebe21e3abcc06b89910be18611a63db1a60eb4f7d723e6d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 92a3c8ef7991f7e13c9293d27f6cd5c2e8bd4c6f73a6034c5ef8834f053cf43770eaa85715a55f0edb4549b2b277ee44ac1f9968b837efdef3c4809ce6b77125
|
|
7
|
+
data.tar.gz: b6bae2ed7f07ff00a398f27241f2bcc8d692e6aae98ad86ff4da19e723c44c06d7294f93dc48fbf6bc963aa0bcbab8e37677465c86de6ba88b3687bfd1ddd103
|
data/README.md
CHANGED
|
@@ -39,85 +39,57 @@ If you have issues, please open one and contributors are welcome!
|
|
|
39
39
|
If you want to start from a new rails app, follow theese tutorials
|
|
40
40
|
|
|
41
41
|
- [Create a new rails app with vite_rails](https://dev.to/chmich/setup-vite-on-rails-7-f1i)
|
|
42
|
+
- create a controller and a view and you should see `Vite ⚡️ Rails` on the browser console.
|
|
43
|
+
- make sure vite is on its latest version, sometimes you have to `npm i vite@latest`
|
|
42
44
|
- [Setup Svelte](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk)
|
|
45
|
+
- and restart the app
|
|
43
46
|
|
|
44
47
|
## Installation
|
|
45
48
|
|
|
46
49
|
within the app folder
|
|
47
50
|
|
|
48
51
|
```bash
|
|
49
|
-
|
|
52
|
+
bundle add svelte-on-rails
|
|
50
53
|
```
|
|
51
54
|
```bash
|
|
52
|
-
|
|
55
|
+
rails svelte_on_rails:install_for_vite_and_turbo
|
|
53
56
|
```
|
|
54
57
|
|
|
55
58
|
|
|
56
|
-
This will create a little config file,
|
|
59
|
+
This will create a little config file, installs the npm package,
|
|
57
60
|
creates a initializer file and adds the import statement on `appplication.js` entrypoint file
|
|
58
61
|
and it adds a HelloWorld.svelte component.
|
|
59
62
|
If not installed, it installs `@hotwired/turbo-rails` too.
|
|
60
63
|
|
|
61
|
-
|
|
64
|
+
#### Minimal installer
|
|
62
65
|
|
|
63
|
-
There is also a
|
|
66
|
+
There is also a minimal installer:
|
|
64
67
|
|
|
65
68
|
```bash
|
|
66
|
-
|
|
69
|
+
rails svelte_on_rails:install
|
|
67
70
|
```
|
|
68
71
|
|
|
69
72
|
that does nothing else than creating a config file.
|
|
70
73
|
|
|
71
|
-
Within the config file, there are two tags:
|
|
74
|
+
Within the config file, there are mainly two important tags:
|
|
72
75
|
|
|
73
76
|
- `frontend_folder` (relative to Rails.root)
|
|
74
77
|
- `components_folder` (relative to frontend_folder)
|
|
75
78
|
|
|
76
|
-
|
|
77
|
-
on the client side.
|
|
79
|
+
## Check if it all works
|
|
78
80
|
|
|
79
|
-
|
|
81
|
+
Add a controller and a view with the helper `= svelte_component('HelloWorld', items: ['item1', 'item2'])`.
|
|
82
|
+
On loading you will see
|
|
80
83
|
|
|
81
|
-
|
|
84
|
+
- Rendered HelloWorld.svelte server-side: 0.075ms
|
|
82
85
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
Above mentioned installer adds `HelloWorld.svelte`, like so:
|
|
88
|
-
|
|
89
|
-
```sveltehtml
|
|
90
|
-
<script>
|
|
91
|
-
export let items
|
|
92
|
-
let count = 0;
|
|
93
|
-
|
|
94
|
-
function increment() {
|
|
95
|
-
count += 1;
|
|
96
|
-
}
|
|
97
|
-
</script>
|
|
98
|
-
|
|
99
|
-
<h1>Greetings from svelte</h1>
|
|
100
|
-
|
|
101
|
-
<ul>
|
|
102
|
-
<button on:click={increment}>Increment: {count}</button>
|
|
103
|
-
{#each items as item}
|
|
104
|
-
<li>{item}</li>
|
|
105
|
-
{/each}
|
|
106
|
-
</ul>
|
|
107
|
-
|
|
108
|
-
<style>
|
|
109
|
-
button {
|
|
110
|
-
background-color: darkred;
|
|
111
|
-
color: white;
|
|
112
|
-
padding: 10px;
|
|
113
|
-
border: none;
|
|
114
|
-
}
|
|
115
|
-
</style>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
And you should see «Greetings from svelte» on the browser.
|
|
86
|
+
On the rails console and you will see «Greetings from svelte»
|
|
87
|
+
on your view with a styled «Increment» button.
|
|
88
|
+
Styles you find within the svelte component.
|
|
89
|
+
Click this button and see that the component is alive.
|
|
119
90
|
|
|
120
|
-
|
|
91
|
+
On [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails)
|
|
92
|
+
are details how the frontend part is working.
|
|
121
93
|
|
|
122
94
|
Without the npm package installed,
|
|
123
95
|
or by passing `render_server_side: true` and `hydrate: false` to the view helper,
|
|
@@ -7,11 +7,11 @@ module SvelteOnRails
|
|
|
7
7
|
conf = SvelteOnRails::Configuration.instance
|
|
8
8
|
cff = conf.components_folder_full
|
|
9
9
|
file_path = cff + "#{filename}.svelte"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
raise "File
|
|
10
|
+
if !File.exist?(file_path)
|
|
11
|
+
raise file_not_found_messsage("File not found", file_path, filename)
|
|
12
|
+
elsif conf.watch_changes? && !SvelteOnRails::RenderServerSide.file_exist_case_sensitive?(cff, filename + '.svelte')
|
|
13
|
+
# on development environments we check case sensitivity too
|
|
14
|
+
raise file_not_found_messsage("File found but Upper and lower case letters are incorrect", file_path, filename)
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
# check what to do
|
|
@@ -74,5 +74,14 @@ module SvelteOnRails
|
|
|
74
74
|
end
|
|
75
75
|
end
|
|
76
76
|
|
|
77
|
+
def file_not_found_messsage(title, file_path, filename)
|
|
78
|
+
conf = SvelteOnRails::Configuration.instance
|
|
79
|
+
ff = conf.frontend_folder
|
|
80
|
+
cf = conf.components_folder
|
|
81
|
+
"svelte-on-rails gem, view helper #svelte_component\n\n#{title}:\n" +
|
|
82
|
+
"#{file_path}\n\n" +
|
|
83
|
+
"Your configurations are:\nfrontend_folder: «#{ff}»\ncomponents_folder: «#{cf}»\n.. and the filename attribute for the view helper: «#{filename}»\n"
|
|
84
|
+
end
|
|
85
|
+
|
|
77
86
|
end
|
|
78
87
|
end
|
|
@@ -12,7 +12,7 @@ namespace :svelte_on_rails do
|
|
|
12
12
|
end
|
|
13
13
|
|
|
14
14
|
desc "Installs SvelteOnRails for usage together with vite_rails and @hotwired/turbo-rails"
|
|
15
|
-
task :
|
|
15
|
+
task :install_for_vite_and_turbo do
|
|
16
16
|
|
|
17
17
|
create_configuration_file
|
|
18
18
|
|
|
@@ -28,6 +28,7 @@ namespace :svelte_on_rails do
|
|
|
28
28
|
|
|
29
29
|
puts ''
|
|
30
30
|
puts 'SvelteOnRails installed successfully for using together with vite_rails and @hotwired/turbo-rails.'
|
|
31
|
+
puts 'Restart the server and check if it all works.'
|
|
31
32
|
puts 'Happy coding!'
|
|
32
33
|
|
|
33
34
|
end
|
|
@@ -49,12 +50,13 @@ namespace :svelte_on_rails do
|
|
|
49
50
|
package_name = "@hotwired/turbo-rails"
|
|
50
51
|
file_content = File.exist?(pkg_js) ? File.read(pkg_js) : ""
|
|
51
52
|
|
|
52
|
-
if file_content.match?(/#{
|
|
53
|
-
puts "#{package_name} is already
|
|
53
|
+
if file_content.match?(/#{package_name}/)
|
|
54
|
+
puts "#{package_name} is already present in package.json, assuming that it is set up well and working."
|
|
54
55
|
else
|
|
55
56
|
puts "Installing #{package_name} via npm..."
|
|
56
57
|
if system("npm install #{package_name}")
|
|
57
58
|
puts "#{package_name} successfully installed."
|
|
59
|
+
add_line_to_file(Rails.root.join("app", "frontend", "entrypoints", "application.js"), "import '#{package_name}';")
|
|
58
60
|
else
|
|
59
61
|
abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
|
|
60
62
|
end
|