svelte-on-rails 0.0.25 → 0.0.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8263684fe285763605b75de1b9b4d4e72f6c3292742fb9eebb551a708b13f323
-  data.tar.gz: 6f10c28aca7e69a0b3a6cf73f0900aedd667388420bda2bc80d80d531c84c2f8
+  metadata.gz: fd9c8ec95be856becb268359d375e01f376f5b3024d9221db30cedae9ac9a72a
+  data.tar.gz: faf4829d8d7578c179671c1da34c03052cf9cbb4ffecc5ae0594919a44cee197
 SHA512:
-  metadata.gz: 518c1924296b238f4ac82606b5b9ab4d8afe83c15e78b37269ed02d0e3e029b97daf088a3b7b0ba40232792295bef45f77e5db001b5074eab0adf3db97a30800
-  data.tar.gz: 0f7c0baf8700d6ca0c812f9537d2aa97421d04626e27e9288ba3d96425f9546e1e53bbd575b6efa77b12c27878d67d76350d0d00fd658d2b849a56643e75a1a6
+  metadata.gz: 160ebff8d660ff911ae53a8a6ffec3d279e1d628acd7c8d3ab8260aa4084af3b71a1d9f3ac062ae1a8db186279e5bcab713ef68b2f9b1d47c2446860f6f1d871
+  data.tar.gz: c03ca0029d17f5a6a2507d696fe050d58e57c3f2dd06d916fd94bc93265a3f0b788fe72b0eeba7fa584b66dc80a0cd1fdefd0dad774ab2d043eeeb65bfaf4ad5

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

@@ -2,17 +2,15 @@ module SvelteOnRails
   module Installer
     module HelloWorld
 
-      def self.install_hello_world
+      def self.install_hello_world(files)
+
         utils_i = SvelteOnRails::Installer::Utils
 
         # write templates
 
-        templates = %w[
-          app/controllers/svelte_on_rails_hello_world_controller.rb
-          app/views/svelte_on_rails_hello_world/index.haml
-          app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
-        ]
-        utils_i.write_templates(templates)
+
+        utils_i.write_templates(files)
+
 
         # route
 
@@ -37,16 +35,10 @@ module SvelteOnRails
 
       end
 
-      def self.remove_hello_world
+      def self.remove_hello_world(files)
 
         utils = SvelteOnRails::Installer::Utils
         if utils.ask_yn('Remove the Hello World component?')
-          files = %w[
-            app/views/svelte_on_rails_hello_world/index.haml
-            app/views/svelte_on_rails_hello_world
-            app/controllers/svelte_on_rails_hello_world_controller.rb
-            app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
-          ]
           utils.remove_files(files)
           utils.remove_line_from_file('config/routes.rb', 'svelte_on_rails_hello_world')
         end

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,9 @@
 <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'
+    import {nestedJavascriptFunction} from '../nestedJavascript.js'
     export let items
     let count = 0;
 
@@ -20,7 +25,19 @@
             <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 />
+
+    <hr/>
+    <p>{nestedJavascriptFunction()}</p>
+</span>
 
 <style>
     button {
@@ -41,4 +58,10 @@
         -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/frontend/javascript/nestedJavascript.js

@@ -0,0 +1,3 @@
+export function nestedJavascriptFunction() {
+    return 'nestedJavascript!';
+}

data/lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/nestedJavascriptToggled.js

@@ -0,0 +1,3 @@
+export function nestedJavascriptFunction() {
+    return 'nestedJavascript («toggled»)';
+}

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

@@ -8,6 +8,23 @@ require 'svelte_on_rails/installer/haml'
 utils = SvelteOnRails::Installer::Utils
 npm_i = SvelteOnRails::Installer::Npm
 application_js_path = Rails.root.join("app", "frontend", "entrypoints", "application.js")
+toggle_hello_world_files = %w[
+          app/frontend/images/svg.svg
+          app/frontend/images/atom.svg
+          app/frontend/javascript/nestedJavascript.js
+          app/frontend/javascript/nestedJavascriptToggled.js
+        ]
+hello_world_files = %w[
+          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/javascript/nestedJavascript.js
+          app/frontend/javascript/nestedJavascriptToggled.js
+          app/frontend/javascript/components/sub/NestedComponent.svelte
+          app/frontend/images/svg.svg
+          app/frontend/images/check-circle-green.png
+        ]
 
 namespace :svelte_on_rails do
 
@@ -59,7 +76,7 @@ namespace :svelte_on_rails do
     hello_world_path = nil
     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
+      hello_world_path = hw_i.install_hello_world(hello_world_files)
     end
 
     # finish
@@ -91,7 +108,8 @@ namespace :svelte_on_rails do
   task :remove_hello_world do
 
     hw_i = SvelteOnRails::Installer::HelloWorld
-    hw_i.remove_hello_world
+    f = hello_world_files + toggle_hello_world_files
+    hw_i.remove_hello_world(f.uniq)
 
   end
 
@@ -100,11 +118,43 @@ namespace :svelte_on_rails do
 
     puts '-' * 80
     hw_i = SvelteOnRails::Installer::HelloWorld
-    hello_world_path = hw_i.install_hello_world
+    hello_world_path = hw_i.install_hello_world(hello_world_files)
     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
+
+    utils_i.write_templates(toggle_hello_world_files, ask_for_overwrite: false)
+
+    puts '+++'
+
+    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')
+      File.delete('app/frontend/javascript/nestedJavascript.js')
+      FileUtils.mv('app/frontend/javascript/nestedJavascriptToggled.js', 'app/frontend/javascript/nestedJavascript.js')
+      puts "toggled svg.svg and nestedJavascriptToggled.js"
+    else
+      puts "toggled svg.svg and nestedJavascriptToggled.js back to original"
+       FileUtils.touch(toggler)
+    end
+
+    puts '+++'
+
+    puts "=> The Svelte components are living within the components folder"
+    puts "=> The hereby toggled files are outside of the components folder, but within the frontend folder"
+    puts "=> this toggling should work because the whole javascript folder is watched for changes (if configured so)"
+
+  end
+
   desc "Compile all Svelte components"
   task :reset_and_compile_all do
     SvelteOnRails::RenderServerSide.reset_and_compile_all

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.25
+  version: 0.0.28
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -40,8 +40,14 @@ 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/frontend/javascript/nestedJavascript.js
+- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/nestedJavascriptToggled.js
 - 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/svelte.rb