svelte-on-rails 0.0.14 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b31efba828e0d1f3416c684638903a5d80e42978b1ebe30a67fd447ae8d2bad
-  data.tar.gz: 45dbe8cd7110c0e36401ab1816c5186265850f79337783cd7a034a1677a6697e
+  metadata.gz: 4a2ed41a0affd2cea3341eba61240ed04d6faf5566b825cc2b5998ced521ac2a
+  data.tar.gz: 66ea8b433279d645e7e7a4947031a167e3404bcdcbb65671851c0b1cd0feacc2
 SHA512:
-  metadata.gz: 9a73256d665867beb93c8221ecbdda94c4f8a5fab1cad3e226c4345804bd13a101b0da58177a6b9e58eeb822ca5bed99cd124eba01e939da348f5ec15ab2ca35
-  data.tar.gz: e7d878a42a7b7e57db9a9c061d059b7e8afd26a46df0f1bf1eac431227e3575d44f944bed9b0362bbb42b2d8343a43c1487b87012d7d68975d7a78b0d9587002
+  metadata.gz: 9de5f9e82cad01f18ddbf0a9e579cc1de688cb679aebdf6108f4881885bb73c40e38e3d8f816ff8a023788ae76665370774d70ebb950c31ac852717e211f3d9d
+  data.tar.gz: 2eb846846e3d664c4883df6db37c5afc37f62a887bc25f6c827c0ab867d9f3e3e41185b0f5dc3790db49add22e26f0bba043b1ac368bf99bd1bca87a8a0e24bb

data/README.md

@@ -34,25 +34,47 @@ 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)
+- [Setup Svelte](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk)
+
 ## 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 +84,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 +106,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 +119,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?(/#{line}/)
+      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.15
 platform: ruby
 authors:
 - Christian Sedlmair