svelte-on-rails 0.0.43 → 0.0.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c45b43d02daa6e2a67f661348deecb1819734e2f16855b0595089663825a9ba
-  data.tar.gz: 430a7f1f67145346e4e589d1d7a08c93a77260b5035c9c1b87dfaf7fba00fa79
+  metadata.gz: 6ff301ac1c131b28f869668ca522cef6127e3d0946ed87b41da478555048fd8e
+  data.tar.gz: 4acb430643e3b6962c595299e2265c7c1075eb11c65eccb08b0fbc7ccc08e6b5
 SHA512:
-  metadata.gz: 96973f2cbf7f97e5e8ac886fd38335fe064ab75a6ad06e06a50a85aa6a2ca039a02bceb42beee754d60c33435898d9bea684ea83ac6812c9df75b6e948a4edbb
-  data.tar.gz: a1e53b966389e9d1f196fe931bb4842237f46c07ad6b4b44c06311f2333b0dbf9fe6c9c970b5bc0d292c4c1c16646058b69711b1497b96615905a7939cf2b954
+  metadata.gz: 67fc3e82acf84cf6e09a4eded78d0ab8cd74b4bee8b92a91438382205e4f81c6f4fa5f443c6e4ba06ba935ae7799e1ea3a7fe3e26c9306ec7a8696766162526a
+  data.tar.gz: f6f4564ded3293a4e6b37b65bf1557b88f69faba8e9ae0c7b857921b3733b73f144924ce81456b857d437dc0e9bf049ef174d1dd799355ba031e448514528690

data/README.md

@@ -3,18 +3,22 @@
 Seamless and robust Svelte in Rails integration.
 
 By default, and when installed together with `@hotwired/turbo-rails`, it renders
-svelte components on first request server side («SSR») and for subsequent
-requests it provides a empty tag that will be mounted on the frontend by the associated npm package [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the frontend.
+svelte components on the first request server side («SSR») and for subsequent
+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 it is maximum performance
-optimized. SSR compilation is handled by vite.
+this unpleasant «blink» on the frontend and is optimised for maximum 
+performance. SSR compilation is done by vite.
 
-
-This all is developed on Rails-7 together with `vite_rails`.
+All this is developed on Rails-7 together with `vite_rails`.
 
 Thanks to [shakacode](https://github.com/shakacode/react_on_rails)
-and [ElMassimo](https://github.com/ElMassimo) because they all helped me with theyr gems.
+and [ElMassimo](https://github.com/ElMassimo) for inspiring and helping me with their gems.
+
+**STATUS** This gem is in early development but ready to use for curious developers.
+It has a 100% test coverage, all tests pass when triggered indiviudally.
+Running all tests together fails for some tests (ToDo).
 
 If you have issues, please open one and contributors are welcome!
 
@@ -111,34 +115,26 @@ Within the config file, there are mainly two important tags:
 
 ## Check if it all works
 
-Add a controller and a view with the helper `= svelte_component('HelloWorld', items: ['item1', 'item2'])`.
-On loading you will see
-
-- Rendered HelloWorld.svelte server-side: 0.075ms
-
-On the rails console and you will see «Greetings from svelte»
-on your view with a styled «Increment» button.
-Styles you find within the svelte component.
-Click this button and see that the component is alive.
+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. 
 
-On [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails)
-are details how the frontend part is working.
+For check the **ssr pipeline** you can pass the options `ssr: true` and `hydrate: false`
+to the view helper. That Way you will see a dead html (no javascript is working).
 
-Without the npm package installed,
-or by passing `ssr: true` and `hydrate: false` to the view helper,
-you would see the same html, and the styled button,
-but the increment button would not work.
+For check the **client side pipeline** you can pass the option `ssr: false` and
+`hydrate: true` to the view helper.
 
-I inserted very detailed error messages on rails and on the
-npm package, for making sure that thisk setup  is working.
-So please check the logs on your browser.
+If both are looking similar, you are good to go.
 
 ### Import statements
 
-For check which statements are working and actively tested, please check the
-[components folder](https://gitlab.com/sedl/svelte-on-rails/-/tree/main/spec/rails-vite-test-app/app/frontend/javascript/components?ref_type=heads) within the gem specs.
+The most importand import statements that are served by this gem are included in the
+hello world component and by that they are also within the testing scope. So you can
+be sure that they are working. If importand statements are missing there, pelase
+tell me.
 
-Among others there are
+Among others, working statements are:
 
 - `import svg from '../example.svg?raw'`
 - `<script lang="ts">` (svelte component with typescript syntax)
@@ -149,7 +145,7 @@ Among others there are
 
 Usual vite has a `vite.config.ts` file, that is used for the client side precompilation.
 
-By running this installer it adds a npm runner so that you can do `npm run build:ssr`
+By running this installer it adds `vite-ssr.config.ts` and a npm runner so that you can do `npm run build:ssr`
 which does the server side precompilation.
 
 The same job is triggered alongside `rails assets:precompile` for production environments.
@@ -179,33 +175,6 @@ loaded on very first load to the frontend, then the most work is done
 in frontend and the server is relieved, except on initial request.
 You will see no unpleasant «blink» on the page.
 
-## Styles
-
-For 99% of use cases you can just skip this chapter.
-
-You can simply work with global styles as well as styles within the svelte component.
-
-A server-side rendered svelte component has 2 states:
-
-#### Before hydration
-
-- The `svelte_component` view helper renders the styles contained within the component
-  into a style tag within the component's wrapper element. This has to be done this way because of Turbo.
-- In very, very rare cases, global styles are not applied in the same way as after hydration.
-
-#### After hydration
-
-- Svelte adds a style tag inside the header
-- Svelte renders the component again, which removes the style tag inside the component wrapper.
-
-#### If you notice a "blink"
-
-For the app to look stable, both states must appear in the same way.
-Normally this is the case. But if there are problems,
-or you want to see the state before hydration, for development purposes, you can pass
-the `hydrate: false` option to the view helper,
-and no hydration will happen for this component.
-
 ## More rake tasks
 
 This tasks are more for testing/playground purposes
@@ -260,6 +229,47 @@ The current test cases including (among others):
 create a completely new rails app, running the full installer and check if a hello World component is visible and javascript is working.
 run assets:precompile within a rails app and check if the gem does its precompiling too.
 
+## Understanding the process
+
+**Why not client and server rendering in one process?**
+
+That was my idea! `application.js` which is the usual entry point for the client
+side could live on the same assets and manifest like svelte components that are
+compiled as chunks which each is its own entry point. This failed:
+
+- The `vite-plugin-ruby` did not support this: it constrained all to one entry point.
+- See how fat the `vite-ssr.config.ts`. For the client side this is not necessary.
+
+At the end, I decided to split the process. But that is not the last decision.
+
+**Why not compiling server side purely by rollup?**
+
+Advantages would be much slimmer packages and faster compilation. On the first
+step i did this and i backed up a working and tested code on the branch [rollup-ssr](https://gitlab.com/sedl/svelte-on-rails/-/blob/rollup-ssr/BRANCH_INFO.md?ref_type=heads).
+
+I decided to use Vite to bring the client and server side rendering
+closer together.
+
+But this, too, is not the last decision. 
+
+For now we proceed with vite.
+
+**How does it work now?**
+
+Client side rendering is done by vite like usual.
+
+Server side rendering is triggered, similar to [vite_rails](https://vite-ruby.netlify.app/guide/deployment.html)
+on `assets:precompile`, and, if `watch_changes` is configured, 
+which is default for development, it is triggered
+on every change of a `*.svelte` file within the configured `components_folder`.
+
+On the server side only the `*.svelte` files are served. Theyr included
+assets are linked to the client side assets folder, which is mapped by `manifest.json`.
+
+Then, vite has two output folders: `vite-dev` for development and `vite` for production.
+Within `vite-ssr.config.ts`, by the `RAILS_ENV` variable, is decided which one is used.
+
+
 ## Licence
 
 License is MIT

data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/backend_frontend_rendered.html.erb

@@ -13,7 +13,6 @@
 
 
 <h1>SSR / Client side rendering test</h1>
-<p>On the always client side rendered components you will see a unpleasant «blink» on the initial request.</p>
 <p>After rendering both, client and server side rendered components, must look similar for making sure that on ssr:
   :auto (which is default)
   no unpleasant «blink» is appearing.</p>
@@ -30,6 +29,7 @@
 
 <hr>
 <h3>Always rendered client side</h3>
+<p>Here you will see a unpleasant «blink» on the initial request.</p>
 <div class="client-only">
   <% components.each do |component| %>
     <%= svelte_component(component, ssr: false, hydrate: true, title: component) %>

metadata

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