svelte-on-rails 1.0.2 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af8d4bb8fb9c9601a9aaf54fedf5e7f419ce3320b1f729fd35032e10fe3486cf
-  data.tar.gz: 6fea536491f0493e574a0432a7a2b9f2bbf2d28b8e0dab806585695da011d212
+  metadata.gz: 17330191e3f353b0cca95eae25a4772df872aa2f0a8a816b263f4c8380cb3c2d
+  data.tar.gz: b7355a317adcf9fae73e366ac7d702d4bb33de41dd13a769955d86cdfcc3d7e2
 SHA512:
-  metadata.gz: ec46124593dc6d40cf8ea051872746bc7070d9e2adec974c1ca7910645030e6324c5f7a280264cef4289dd99fdf60b1dd201291bae55e2aea01189bf5d6ec2fa
-  data.tar.gz: c7f5a5a822fc1e1f5cb961dcd4158808fdcc1ee8303ba5e2fc0d4a0c52f50cd4abe1fa8b426ea43798bdc4daa777b6fd3165c2f65057471a504fbc46cbba34d9
+  metadata.gz: f1fffe20498df636802e1e3c0909528e181aaf5ef218f58d9bcb9b97d575f7f68b5b128a2d4d75c824d75575a90183fa04d268afccb11600297a68eb7e562e42
+  data.tar.gz: 0401b3a33effbada6ce27aec384857c7ac8f28c8c0ac46a012f1fc7a61c9a677cab0a6bb59d584e4e4ebfed434ebc353a4b292210846c2ca889730ee06601345

data/README.md

@@ -1,4 +1,40 @@
-# Svelte on Rails
+<div style="text-align: center;">
+  <img src="./Svelte_Logo.svg.png" alt="Svelte Logo" height="120">
+</div>
+
+---
+
+Svelte is the missing peace for ambitious Rails frontends.
+
+# Why Svelte? 
+
+On every app there are parts where you want it to shine. This is where Svelte comes in.
+
+- Works perfectly with Hotwired/Turbo
+- Perfect addition to Stimulus
+- Easy to learn
+- Powerful
+- **Compared to Stimulus**
+  - No more writing double logic of the initial HTML state
+  - Stimulus is good for parts where you have simple and little javascript and lots of html
+  - The more complexity, the more you will love svelte
+- **Compared to React**
+  - No Shadow dom 
+  - Slimmer packages
+  - Easier to learn
+  - Faster
+
+Have a look at this entertaining video [rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)
+by Rich Harris, especially from 3:50 to 6:40 and his comparison to react.
+
+This all fits perfectly with the Rails way of minimalist javascript, but: Where we need it, we have it.
+
+# Features
+
+- 🤝 fully integrated with `assets:precompile`
+- 🚀 cero-config deployment
+
+# Svelte on Rails 👍
 
 Rock-solid and seamless integration of Svelte Components into Rails views, based on `vite_rails`.
 
@@ -8,8 +44,8 @@ requests it provides a empty tag which is mounted on the frontend
 by the associated npm package [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails).
 
 This way svelte works perfectly together with turbo. You will never notice
-this unpleasant «blink» on the frontend and is optimised for maximum 
-performance. SSR compilation is done by vite.
+this unpleasant «blink» on the frontend while the whole process is maximum
+performance optimized.
 
 Thanks to [shakacode](https://github.com/shakacode/react_on_rails)
 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!
 - if you use special packages (like pug) that requires commonjs, you may need
 - npm on latest versions
 
-## Installation from cero
+## Installation from cero ⚙️
 
 With haml, vite, svelte and turbo:
 
@@ -50,6 +86,12 @@ and run the installer
 rails g svelte_on_rails:install --full
 ```
 
+You have done it! 👍
+
+Restart the server and you will see a svelte hello world component rendered on the browser.
+
+**Explanation:**
+
 The `--full` contains:
 
 - `--vite`
@@ -91,35 +133,64 @@ rails svelte_on_rails:remove_hello_world
 
 and start coding.
 
-## Minimal Installation
+## Installation on a existing app ⚙️
 
-For example, within a existing app, add the gem and run the installer without any options
+Required: `vite_rails` must be installed, it wants a `app/frontend` folder.
+
+Check Svelte Installation: [install svelte on rails](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk)
+
+Within the app, add the gem
+
+```bash
+bundle add svelte-on-rails
+```
+
+and run the minimal installer (you are free to add any options from above)
 
 ```bash
 rails g svelte_on_rails:install
 ```
 
-that does:
+Restart the server, add a example component like `app/frontend/javascript/HelloWorld.svelte`
+and the helper to a view, like
+
+```erb
+<%= svelte_component('HelloWorld') %>
+```
+
+And you should see your component rendered on the browser! 👍  🤗
+
+**Explanation**
+
+this Minimal installer does:
 
-- creating a config file.
-- installs the npm package
+- `app/frontend/initializers/svelte.js`
+- Adds a import statement for that initializer to `application.js`
+- `app/frontend/ssr/ssr.js`
+- `config/svelte_on_rails.yml`
+- `vite-ssr.config.ts`
+- installs or updates npm packages to the latest:
+  - `@csedl/svelte-on-rails`
+  - `typescript`
+  - `@types/node`
 
-please follow the instructions on [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails)
-for setup the workflow
+**Troubleshooting**
 
-Within the config file, there are mainly two important tags:
+In the first step, the installer runs the backend parts that are unlikely to fail.
+Then it installs the npm packages that are more likely to fail because of dependencies. 
+If so, just check that all the
+packages are installed on the latest versions and you should be fine. 🤓
 
-- `frontend_folder` (relative to Rails.root)
-- `components_folder` (relative to frontend_folder)
+The most importand rule is to firstly check all npm packages installed and passing before changing your view logik.
 
 ## Check if it all works
 
 Server Side Rendering (SSR) is a parallel pipeline to client side rendering.
 Both should return the same html. And your global styles should be applied same way
-for both cases. For 95% of use cases this is the case. 
+for both cases. For normal use cases this is. 
 
 For check the **ssr pipeline** you can pass the options `ssr: true` and `hydrate: false`
-to the view helper. This way you will see a «dead» html (no javascript is working).
+to the view helper. This way you will see a «dead» backend rendered HTML with no javascript applied.
 
 For check the **client side pipeline** you can pass the option `ssr: false` and
 `hydrate: true` to the view helper.

data/lib/generators/svelte_on_rails/install/install_generator.rb

@@ -61,21 +61,6 @@ module SvelteOnRails
         File.write('package.json', JSON.pretty_generate(pkg_js))
 
         if @local_npm_package_url
-        #   puts '☝️ <<<'
-        #   puts 'LINK LOCAL PACKAGE'
-        #   puts 'BUGFIX: npm does not install peer dependencies of local linked packages!'
-        #   puts '    For packages from the registry, this does since newer versins of npm.'
-        #   puts '    So we need to install the peer dependencies manually.'
-        #   npm_i.install_or_update_package('rollup-plugin-svelte', dev_dependency: true)
-        #   npm_i.install_or_update_package('rollup', dev_dependency: true)
-        #   npm_i.install_or_update_package('@rollup/plugin-node-resolve', dev_dependency: true)
-        #   npm_i.install_or_update_package('@rollup/plugin-commonjs', dev_dependency: true)
-        #   npm_i.install_or_update_package('@rollup/plugin-url', dev_dependency: true)
-        #   npm_i.install_or_update_package('rollup-plugin-css-only', dev_dependency: true)
-        #   npm_i.install_or_update_package('rollup-plugin-string', dev_dependency: true)
-        #   npm_i.install_or_update_package('svelte-preprocess', dev_dependency: true)
-        #   npm_i.install_or_update_package('pug', dev_dependency: true) # must be there because compile.js on the backend imports is
-        #   puts '☝️ >>>'
            npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
         else
           npm_i.install_or_update_package(NPM_PACKAGE_NAME)
@@ -83,9 +68,6 @@ module SvelteOnRails
         npm_i.install_or_update_package('typescript')
         npm_i.install_or_update_package('@types/node')
 
-        # insert_initializer
-        #uts = SvelteOnRails::Installer::Utils
-        # add import statements
         js_i = SvelteOnRails::Installer::Javascript
         init_stat = '../initializers/svelte.js'
         js_i.append_import_statement(application_js_path, init_stat, "import '#{init_stat}';")
@@ -139,7 +121,7 @@ module SvelteOnRails
 
       def finish
         puts '-' * 80
-        puts ' 👍 FINISHED SVELTE INSTALLATION 👍'
+        puts ' 👍  FINISHED SVELTE-ON-RAILS INSTALLATION 👍'
         puts '-' * 80
 
         puts "SvelteOnRails installed successfully!"

data/lib/svelte_on_rails/lib/utils.rb

@@ -45,10 +45,13 @@ module SvelteOnRails
         mtime = Dir[File.join(config.components_folder_full, '**/*.svelte')].map do |file|
           File.mtime(file).to_f
         end.max || 0.0
-        mtime_path = config.ssr_dist_folder.join('last_mtime')
-        last = (File.exist?(mtime_path) ? File.read(mtime_path).to_f : 0.0)
 
-        if mtime > last
+        last = if Dir.exist?(config.ssr_dist_folder)
+                 mtime_path = config.ssr_dist_folder.join('last_mtime')
+                 (File.exist?(mtime_path) ? File.read(mtime_path).to_f : 0.0)
+               end
+
+        if !last || mtime > last
           precompile(mtime)
         end
 

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -12,7 +12,6 @@ if defined?(Rails) && Rake::Task.task_defined?("assets:precompile")
 end
 
 
-require_relative '../../spec/test_helpers'
 require_relative '../../lib/svelte_on_rails/installer/hello_world'
 require_relative '../../lib/generators/svelte_on_rails/install/install_generator'
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.0.4
 platform: ruby
 authors:
 - Christian Sedlmair