svelte-on-rails 0.0.14 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b31efba828e0d1f3416c684638903a5d80e42978b1ebe30a67fd447ae8d2bad
-  data.tar.gz: 45dbe8cd7110c0e36401ab1816c5186265850f79337783cd7a034a1677a6697e
+  metadata.gz: 677cbdec13a7a29dad5a6601755976aebce32a9cd5d4d132d62682650887b81d
+  data.tar.gz: 3cd12a78ff280021ff44ba0bc29371a3268a4b50de93264f9388925cc6fdad21
 SHA512:
-  metadata.gz: 9a73256d665867beb93c8221ecbdda94c4f8a5fab1cad3e226c4345804bd13a101b0da58177a6b9e58eeb822ca5bed99cd124eba01e939da348f5ec15ab2ca35
-  data.tar.gz: e7d878a42a7b7e57db9a9c061d059b7e8afd26a46df0f1bf1eac431227e3575d44f944bed9b0362bbb42b2d8343a43c1487b87012d7d68975d7a78b0d9587002
+  metadata.gz: 289186502e09d9e27b75b17f633cd017f066470efeafcaf1c9ab979f716f60705f4b7d7505da496380171d00ef971eef14b22fcfbb83781be810732ed3f4d3dc
+  data.tar.gz: 620d66d405bfea65fc134c837c7832ea3c7dae6c566aaedea3431a2ebb8906700a9255afd088ff65ab607ea5789132760c2b12f3b3e2c4676ce36a6ecf540747

data/README.md

@@ -34,25 +34,50 @@ If you have issues, please open one and contributors are welcome!
 - svelte v5 (see: [how to install svelte on rails/vite](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk))
 - turbo (recommended / [how to install turbo on rails](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#installation))
 
+## Setup from cero
+
+If you want to start from a new rails app, follow theese tutorials
+
+- [Create a new rails app with vite_rails](https://dev.to/chmich/setup-vite-on-rails-7-f1i)
+  - create a controller and a view and you should see `Vite ⚡️ Rails` on the browser console.
+  - make sure vite is on its latest version, sometimes you have to `npm i vite@latest`
+- [Setup Svelte](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk)
+  - and restart the app
+
 ## Installation
 
-add
-```ruby
-gem "svelte-on-rails"
+within the app folder
+
+```bash
+  bundle add svelte-on-rails
+```
+```bash
+  rails svelte_on_rails:install_for_vite_and_turbo
 ```
-to your gemfile and run
 
-```ruby
-$ bundle
+
+This will create a little config file, istalls the npm package,
+creates a initializer file and adds the import statement on `appplication.js` entrypoint file
+and it adds a HelloWorld.svelte component.
+If not installed, it installs `@hotwired/turbo-rails` too.
+
+Add a controller and a view with the view helper and you should see «Greetings from Svelte on your view».
+
+There is also a smaller installer:
+
+```bash
 $ rails svelte_on_rails:install
 ```
 
-This will create a little config file, please read the comments there and set the tags:
+that does nothing else than creating a config file.
+
+Within the config file, there are two tags:
 
 - `frontend_folder` (relative to Rails.root)
 - `components_folder` (relative to frontend_folder)
 
-Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side.
+Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) 
+on the client side.
 
 ## Test if it works
 
@@ -62,7 +87,7 @@ On the view
 = svelte_component("myComponent", items: ['item1', 'item2'])
 ```
 
-Within the `components_folder` (configs above), create a component like `myComponent.svelte`
+Above mentioned installer adds `HelloWorld.svelte`, like so:
 
 ```sveltehtml
 <script>
@@ -84,8 +109,11 @@ Within the `components_folder` (configs above), create a component like `myCompo
 </ul>
 
 <style>
-  ul {
-    list-style: none;
+  button {
+    background-color: darkred;
+    color: white;
+    padding: 10px;
+    border: none;
   }
 </style>
 ```
@@ -94,10 +122,14 @@ And you should see «Greetings from svelte» on the browser.
 
 Click the counter button and check if the component is alive.
 
-Without the npm package installed, you would see the same html, but the increment button would not work.
+Without the npm package installed, 
+or by passing `render_server_side: 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.
 
 I inserted very detailed error messages on rails and on the
-npm package, so please check the logs on your browser.
+npm package, for making sure that thisk setup  is working.
+So please check the logs on your browser.
 
 ### Import statements
 

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -1,5 +1,3 @@
-
-
 Rake::Task["assets:precompile"].enhance do
   SvelteOnRails::RenderServerSide.reset_dist
   puts "Mount Svelte: Reset dist ausgeführt"
@@ -8,8 +6,163 @@ end
 namespace :svelte_on_rails do
   desc "Installs SvelteOnRails YAML configuration into your Rails application"
   task :install do
-    config_path = Rails.root.join("config", "svelte_on_rails.yml")
 
+    create_configuration_file
+
+  end
+
+  desc "Installs SvelteOnRails for usage together with vite_rails and @hotwired/turbo-rails"
+  task :install_for_and_vite_turbo do
+
+    create_configuration_file
+
+    install_npm_package
+    install_turbo
+
+    create_folder(Rails.root.join("app", "frontend", "initializers"))
+    create_folder(Rails.root.join("app", "frontend", "javascript", "components"))
+    add_line_to_file(Rails.root.join("app", "frontend", "entrypoints", "application.js"), "import '../initializers/svelte.js';")
+
+    create_javascript_initializer
+    create_svelte_hello_world
+
+    puts ''
+    puts 'SvelteOnRails installed successfully for using together with vite_rails and @hotwired/turbo-rails.'
+    puts 'Happy coding!'
+
+  end
+
+  def install_npm_package
+    package_name = "@csedl/svelte-on-rails@latest"
+    puts "Installing #{package_name} via npm..."
+
+    if system("npm install #{package_name}")
+      puts "#{package_name} successfully installed."
+    else
+      abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
+    end
+  end
+
+  def install_turbo
+
+    pkg_js = Rails.root.join("package.json")
+    package_name = "@hotwired/turbo-rails"
+    file_content = File.exist?(pkg_js) ? File.read(pkg_js) : ""
+
+    if file_content.match?(/#{package_name}/)
+      puts "#{package_name} is already installed."
+    else
+      puts "Installing #{package_name} via npm..."
+      if system("npm install #{package_name}")
+        puts "#{package_name} successfully installed."
+      else
+        abort "Failed to install #{package_name}. Please ensure npm is installed and try running 'npm install #{package_name}' manually."
+      end
+    end
+
+  end
+
+  def create_javascript_initializer
+    config_path = Rails.root.join("app", "frontend", "initializers", "svelte.js")
+    if File.exist?(config_path)
+      puts "Initializer already exists: file://#{config_path}"
+    else
+      File.write(config_path, <<~JAVASCRIPT)
+
+        import { initializeSvelteComponents, cleanupSvelteComponents } from '@csedl/svelte-on-rails';
+
+        const components = import.meta.glob('/javascript/components/**/*.svelte', { eager: true });
+        const componentsRoot = '/javascript/components';
+
+        // Initialize Svelte components
+        initializeSvelteComponents(componentsRoot, components, true);
+
+        // Turbo event listener for page load
+        document.addEventListener('turbo:load', () => {
+            initializeSvelteComponents(componentsRoot, components, true);
+        });
+
+        // Turbo event listener for cleanup before page cache
+        document.addEventListener('turbo:before-cache', () => {
+            cleanupSvelteComponents(false);
+        });
+      JAVASCRIPT
+      puts "Created initializer file at file://#{config_path}"
+    end
+  end
+
+  def create_svelte_hello_world
+    file_path = Rails.root.join("app", "frontend", "javascript", "components", "HelloWorld.svelte")
+    if File.exist?(file_path)
+      puts "Hello World file already exists: file://#{file_path}"
+    else
+      File.write(file_path, <<~HTML)
+        <script>
+            export let items
+            let count = 0;
+        
+            function increment() {
+                count += 1;
+            }
+        </script>
+        
+        <h1>Greetings from svelte</h1>
+        
+        <button on:click={increment}>Increment: {count}</button>
+        <ul>
+            {#each items as item}
+                <li>{item}</li>
+            {/each}
+        </ul>
+        
+        <style>
+            button {
+                background-color: darkred;
+                color: white;
+                padding: 10px;
+                border: none;
+            }
+        </style>
+      HTML
+      puts "Hello World file at file://#{file_path}"
+    end
+  end
+
+  def create_file(file_path)
+
+    unless File.exist?(file_path)
+      FileUtils.touch(file_path)
+      puts "Created empty file at file://#{file_path}"
+    end
+  end
+
+  def add_line_to_file(file_path, line)
+    file_content = File.exist?(file_path) ? File.read(file_path) : ""
+
+    if file_content.match?(/#{line}/)
+      puts "#{line} already present in #{file_path}, nothing changed here."
+      return
+    end
+
+    File.open(file_path, 'a') do |file|
+      file.puts(line)
+    end
+    puts "added #{line} to #{file_path}."
+  rescue StandardError => e
+    puts "Error: #{e.message}"
+  end
+
+  def create_folder(folder)
+    if Dir.exist?(folder)
+      puts "Folder already exists: #{folder}"
+    else
+      FileUtils.mkdir_p(folder)
+      puts "Created folder: #{folder}"
+    end
+  end
+
+  def create_configuration_file
+    config_path = Rails.root.join("config", "svelte_on_rails.yml")
     if File.exist?(config_path)
       puts "Configuration file already exists at file://#{config_path}"
     else

metadata

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