svelte-on-rails 0.0.24 → 0.0.27

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 97f95713831cb35b5ba7ff76b63f320be3a5f7ef682844c65523728f78455c90
-  data.tar.gz: 9501a5d850b4d5451dbc98055fbf4c21fd2b617dfdc2cc971c26cf02cbe6738e
+  metadata.gz: eca3dd8708bc889d9ae91fb041e8b717fd3a01e7284826cf644dd526d7cbdffc
+  data.tar.gz: 1206959ce1a1c2a428faf76ab606a43acf1bdc8c8e7188e68e0c39225719510d
 SHA512:
-  metadata.gz: bc4a71238b2d358d38f616081ed56d1143f8745729d7fc80dfc4b1ceba85f70b0be542c760fdbc16095833eb88dfc7485ce22c73a76f940254de97e3c3af463c
-  data.tar.gz: 16870d9e12978fc0e111b2fa380b09bb65b7d824f34b1a7e715d60b4e32414a7f07de824b92c6d0d5be3ef1888f492235d1a3dc231ba46dfae265bf1242ab741
+  metadata.gz: 8399eb534ceade658383e042a25042e814935cae9f0e48580780c582b545dbbb29d4e99ac886b210873f9beb25d8f735a8f2b7a22b78f8752857614912a865ec
+  data.tar.gz: 0db580b51db77febbc22f3ca3a4977fc5c0350868917c8b210cbba4c390d763067f454dda591bbae47a9c89323a32420d96b45cafe51638ab7d4c8a2a90b5b9f

data/README.md

@@ -192,6 +192,12 @@ rails svelte_on_rails:add_hello_world
 rails svelte_on_rails:remove_hello_world
 ```
 
+```bash
+rails svelte_on_rails:toggle_hello_world_svg
+```
+
+toggles the svg nested to the hello world component for check if thee svg is refreshed when imported image changes
+
 ```bash
 rails svelte_on_rails:reset_and_compile_all
 ```

data/lib/svelte_on_rails/installer/hello_world.rb

@@ -3,6 +3,7 @@ module SvelteOnRails
     module HelloWorld
 
       def self.install_hello_world
+
         utils_i = SvelteOnRails::Installer::Utils
 
         # write templates
@@ -11,9 +12,13 @@ module SvelteOnRails
           app/controllers/svelte_on_rails_hello_world_controller.rb
           app/views/svelte_on_rails_hello_world/index.haml
           app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
+          app/frontend/javascript/components/sub/NestedComponent.svelte
+          app/frontend/images/svg.svg
+          app/frontend/images/check-circle-green.png
         ]
         utils_i.write_templates(templates)
 
+
         # route
 
         route = 'svelte_on_rails_hello_world#index'

data/lib/svelte_on_rails/installer/rails_template/app/frontend/images/atom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 224C238.3 224 223.1 238.4 223.1 256S238.3 288 256 288c17.62 0 32-14.38 32-32C287.9 238.4 273.6 224 256 224zM471.2 128c-15.62-27.75-49.62-41.38-93.11-41.38c-9.499 .125-18.87 .75-28.25 2C327.1 34.38 293.5 0 256 0S184.9 34.38 162.1 88.62c-9.374-1.25-18.75-1.875-28.25-2C90.39 86.62 56.4 100.2 40.78 128c-18.75 33.5-6.499 80.62 27.62 128c-34.12 47.38-46.37 94.5-27.62 128c15.62 27.75 49.62 41.38 93.11 41.38c9.499-.125 18.87-.75 28.25-2C184.9 477.6 218.5 512 256 512s71.12-34.38 93.86-88.63c9.374 1.25 18.75 1.875 28.25 2c43.49 0 77.49-13.62 93.11-41.38c18.75-33.5 6.499-80.63-27.62-128C477.7 208.6 489.1 161.5 471.2 128zM256 48c14.37 0 32.12 18.12 47.12 50C287.1 102.4 271.4 107.8 256 114.1c-15.37-6.375-31.12-11.76-47.12-16.14C223.9 66.12 241.6 48 256 48zM133.9 377.4c-26.5 0-46.74-6.625-52.74-17.38c-7.124-12.75-.5-37.63 18.62-66.63C111.4 305.2 123.8 316.5 136.8 327c2.25 16.5 5.374 33 9.624 49.13C142.3 376.4 137.9 377.4 133.9 377.4zM136.8 185C123.8 195.5 111.4 206.8 99.77 218.6C80.65 189.6 74.02 164.8 81.15 152c5.999-10.75 26.25-17.38 52.74-17.38c3.1 0 8.374 1 12.5 1.25C142.1 152 139 168.5 136.8 185zM256 464c-14.37 0-32.12-18.12-47.12-49.1C224.9 409.6 240.6 404.2 256 397.9c15.37 6.375 31.12 11.76 47.12 16.14C288.1 445.9 270.4 464 256 464zM256 352c-52.99 0-95.99-43-95.99-96S203 160 256 160s95.99 43 95.99 96S308.1 352 256 352zM430.9 360c-5.999 10.75-26.25 17.38-52.74 17.38c-3.1 0-8.374-1-12.5-1.25C369.9 360 372.1 343.5 375.2 327c12.1-10.5 25.37-21.75 36.1-33.63C431.4 322.4 437.1 347.2 430.9 360zM412.2 218.6C400.6 206.8 388.2 195.5 375.2 185C372.1 168.5 369.9 152 365.6 135.9c4.125-.25 8.499-1.25 12.5-1.25c26.5 0 46.74 6.625 52.74 17.38C437.1 164.8 431.4 189.6 412.2 218.6z"/></svg>

data/lib/svelte_on_rails/installer/rails_template/app/frontend/images/svg.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
+  <text x="10" y="30" font-family="Arial, sans-serif" font-size="24" fill="black">svg</text>
+</svg>

data/lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte

@@ -1,4 +1,8 @@
 <script>
+    import svgRaw from '../../images/svg.svg?raw'
+    import svg from '../../images/svg.svg'
+    import png from '../../images/check-circle-green.png'
+    import Nested from './sub/NestedComponent.svelte'
     export let items
     let count = 0;
 
@@ -8,15 +12,28 @@
 </script>
 
 <span class="svelte-component-wrapper">
-    <h1>Greetings from svelte!</h1>
+    <h1>Svelte is here!</h1>
+
+    <hr/>
+    <p>click the button and check if the component is alive</p>
     <button on:click={increment}>Increment: {count}</button>
 
+    <hr/>
     <ul>
         {#each items as item}
             <li>{item}</li>
         {/each}
     </ul>
-    </span>
+
+    <hr/>
+    <p>Images on various ways</p>
+    <span class="wrap-svg">{@html svgRaw}</span>
+    <img alt="svg ERROR" src={svg} />
+    <img alt="png ERROR" src={png} />
+
+    <hr/>
+    <Nested />
+</span>
 
 <style>
     button {
@@ -26,14 +43,21 @@
         border: none;
         cursor: pointer;
     }
+
     .svelte-component-wrapper {
         border: 1px solid black;
         padding: 10px;
         margin: 10px;
         background-color: #efefef;
         display: inline-block;
-        box-shadow: 2px 3px 16px -1px rgba(0,0,0,0.75);
-        -webkit-box-shadow: 2px 3px 16px -1px rgba(0,0,0,0.75);
-        -moz-box-shadow: 2px 3px 16px -1px rgba(0,0,0,0.75);
+        box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
+        -webkit-box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
+        -moz-box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
+    }
+    img, .wrap-svg {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        margin: 30px;
     }
 </style>

data/lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/sub/NestedComponent.svelte

@@ -0,0 +1 @@
+<p>Nested Svelte Component</p>

data/lib/svelte_on_rails/installer/rails_template/app/views/svelte_on_rails_hello_world/index.haml

@@ -1,3 +1,3 @@
 %p Example view
 
-= svelte_component "SvelteOnRailsHelloWorld", items: ['item-1', 'item-2', 'item-3']
+= svelte_component "SvelteOnRailsHelloWorld", items: ['attributes', 'are', 'parsed']

data/lib/svelte_on_rails/installer/utils.rb

@@ -171,12 +171,12 @@ module SvelteOnRails
         end
       end
 
-      def self.write_templates(template_paths)
+      def self.write_templates(template_paths, ask_for_overwrite: true)
 
         existing = template_paths.select { |p| File.exist?(p) }
         verb = 'Created'
 
-        if existing.present?
+        if existing.present? && ask_for_overwrite
           begin
             puts "#{'Template'.pluralize(existing.length)} already exists:\n#{existing.join("\n")}.\nOverwrite? (y/n)"
             continue = STDIN.gets.chomp.downcase[0]

data/lib/svelte_on_rails/render.js

@@ -2,28 +2,51 @@ import { existsSync } from 'node:fs';
 import { join, dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-// Hole das Verzeichnis des aktuellen Skripts
+// Get the directory of the current script
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-// Argumente aus der Kommandozeile
-const compiledFile = process.argv[2]; // Pfad zur kompilierten JavaScript-Datei
-const args = JSON.parse(atob(process.argv[3]));
+// Command line arguments
+const compiledFile = process.argv[2]; // Path to the compiled JavaScript file
+let args;
+
+try {
+    const base64Input = process.argv[3];
+    if (!base64Input) {
+        throw new Error('No Base64-encoded argument received in process.argv[3]');
+    }
+
+    let decodedString;
+    try {
+        decodedString = atob(base64Input);
+    } catch (decodeError) {
+        throw new Error(`Error decoding Base64 string: ${decodeError.message}\nInput (process.argv[3]): «${base64Input}»`);
+    }
+
+    try {
+        args = JSON.parse(decodedString);
+    } catch (parseError) {
+        throw new Error(`Error parsing JSON: ${parseError.message}\nInput (process.argv[3]): «${base64Input}»\nDecoded string: «${decodedString}»`);
+    }
+} catch (error) {
+    console.error('Error processing command line arguments:', error.message);
+    process.exit(1);
+}
 
 let MyComponent;
 (async () => {
     try {
-        // Konvertiere den relativen Pfad in einen absoluten Pfad
+        // Convert relative path to absolute path
         const absolutePath = resolve(__dirname, compiledFile);
 
-        // Konvertiere den absoluten Pfad in eine File-URL
+        // Convert absolute path to a file URL
         const modulePath = `file://${absolutePath}`;
 
-        // Importiere das Modul
+        // Import the module
         const module = await import(modulePath);
         MyComponent = module.default;
     } catch (error) {
-        console.error(`Fehler beim Laden der Komponente aus ${compiledFile}:`, error);
+        console.error(`Error loading component from ${compiledFile}:`, error);
         process.exit(1);
     }
 
@@ -31,9 +54,9 @@ let MyComponent;
     const payload = { out: '' };
 
     try {
-        MyComponent(payload, props); // Schreibt direkt in payload.out
+        MyComponent(payload, props); // Writes directly to payload.out
     } catch (error) {
-        console.error('Fehler beim Rendern der Komponente:', error);
+        console.error('Error rendering component:', error);
         process.exit(1);
     }
 

data/lib/svelte_on_rails/render_server_side.rb

@@ -54,7 +54,7 @@ module SvelteOnRails
     def render_compiled_file(props = {})
       require 'base64'
       require 'json'
-      props_enc = Base64.encode64(props.to_json).strip
+      props_enc = Base64.strict_encode64(props.to_json).strip
       cmd = [
         'node',
         '/Users/christian/projects-gmbh/gems/svelte-on-rails/svelte-on-rails-gem/lib/svelte_on_rails/render.js',
@@ -65,7 +65,7 @@ module SvelteOnRails
 
       stdout, stderr, status = Open3.capture3(cmd, chdir: self.class.gem_app_dir)
       unless status.to_s.match(/^pid [0-9]+ exit 0$/)
-        raise "Render Svelte Server-side:\nrender.js => #{compiled_js_file}\n" + stderr
+        raise "Render Svelte Server-side =>\n#{cmd}\n\nError output from render.js (stderr) =>\n+++\n" + stderr + "+++\n\n"
       end
 
       begin

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -17,7 +17,6 @@ namespace :svelte_on_rails do
     puts '-' * 80
     puts 'STARTING SVELTE-ON-RAILS INSTALLATION'
 
-
     # vite
 
     vite_i = SvelteOnRails::Installer::Vite
@@ -45,7 +44,7 @@ namespace :svelte_on_rails do
     tr_pkg = '@hotwired/turbo-rails'
 
     npm_i.install_or_update_package(tr_pkg)
-    
+
     js_i = SvelteOnRails::Installer::Javascript
     js_i.append_import_statement(application_js_path, tr_pkg, "import '#{tr_pkg}';")
 
@@ -91,8 +90,8 @@ namespace :svelte_on_rails do
   desc "Removes the Hello World component"
   task :remove_hello_world do
 
-      hw_i = SvelteOnRails::Installer::HelloWorld
-      hw_i.remove_hello_world
+    hw_i = SvelteOnRails::Installer::HelloWorld
+    hw_i.remove_hello_world
 
   end
 
@@ -100,10 +99,34 @@ namespace :svelte_on_rails do
   task :add_hello_world do
 
     puts '-' * 80
-    if utils.ask_yn('Do you want to install the Hello World component?')
-      hw_i = SvelteOnRails::Installer::HelloWorld
-      hello_world_path = hw_i.install_hello_world
-      puts "You can now see the Hello World component on: #{hello_world_path}."
+    hw_i = SvelteOnRails::Installer::HelloWorld
+    hello_world_path = hw_i.install_hello_world
+    puts "You can now see the Hello World component on: #{hello_world_path}."
+
+  end
+
+  desc "Toggle the svg, included in the Hello World component for checking if it is refreshed on the browser"
+  task :toggle_hello_world_svg do
+
+    utils_i = SvelteOnRails::Installer::Utils
+
+    # write templates
+
+    templates = %w[
+          app/frontend/images/svg.svg
+          app/frontend/images/atom.svg
+        ]
+    utils_i.write_templates(templates, ask_for_overwrite: false)
+
+    toggler = File.expand_path('../svelte_on_rails/installer/rails_template', __dir__) + '/hello_world_toggler'
+    if File.exist?(toggler)
+      File.delete(toggler)
+      File.delete('app/frontend/images/svg.svg')
+      FileUtils.mv('app/frontend/images/atom.svg', 'app/frontend/images/svg.svg')
+      puts "toggled svg.svg to atom.svg"
+    else
+      puts "toggled svg.svg to itself"
+       FileUtils.touch(toggler)
     end
 
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.24
+  version: 0.0.27
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -40,10 +40,15 @@ files:
 - lib/svelte_on_rails/installer/javascript.rb
 - lib/svelte_on_rails/installer/npm.rb
 - lib/svelte_on_rails/installer/rails_template/app/controllers/svelte_on_rails_hello_world_controller.rb
+- lib/svelte_on_rails/installer/rails_template/app/frontend/images/atom.svg
+- lib/svelte_on_rails/installer/rails_template/app/frontend/images/check-circle-green.png
+- lib/svelte_on_rails/installer/rails_template/app/frontend/images/svg.svg
 - lib/svelte_on_rails/installer/rails_template/app/frontend/initializers/svelte.js
 - lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
+- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/sub/NestedComponent.svelte
 - lib/svelte_on_rails/installer/rails_template/app/views/svelte_on_rails_hello_world/index.haml
 - lib/svelte_on_rails/installer/rails_template/config/svelte_on_rails.yml
+- lib/svelte_on_rails/installer/rails_template/hello_world_toggler
 - lib/svelte_on_rails/installer/svelte.rb
 - lib/svelte_on_rails/installer/utils.rb
 - lib/svelte_on_rails/installer/vite.rb