svelte-on-rails 0.0.42 → 0.0.43

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c46f6cb43c90617bc4798072b58a35e81a311886a858c379224216fc63c03d3e
-  data.tar.gz: 2bd3286eac9420225ac3f641d1cf783a84f48f575d69c0bce53a9b1da9d9d262
+  metadata.gz: 0c45b43d02daa6e2a67f661348deecb1819734e2f16855b0595089663825a9ba
+  data.tar.gz: 430a7f1f67145346e4e589d1d7a08c93a77260b5035c9c1b87dfaf7fba00fa79
 SHA512:
-  metadata.gz: 9e4ae887620aaabd737fc30864bed6eea15dcc9bb47e6ef9db4ab1e38f0ea96a1643b2f12cd81aeadf2c636e6e1575920da2efca62886e877a71dbe25b2818a2
-  data.tar.gz: 821084886d515faf8e68440a001bc4a3fd5d310c6068efbb1578ca558774f0ad731e5cf13f142b3223db7e5a2b380775319de9ce3e75a54e597ff59ba1a505cc
+  metadata.gz: 96973f2cbf7f97e5e8ac886fd38335fe064ab75a6ad06e06a50a85aa6a2ca039a02bceb42beee754d60c33435898d9bea684ea83ac6812c9df75b6e948a4edbb
+  data.tar.gz: a1e53b966389e9d1f196fe931bb4842237f46c07ad6b4b44c06311f2333b0dbf9fe6c9c970b5bc0d292c4c1c16646058b69711b1497b96615905a7939cf2b954

data/README.md

@@ -8,17 +8,8 @@ requests it provides a empty tag that will be mounted on the frontend by the ass
 
 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 rollup.
+optimized. SSR compilation is handled by vite.
 
-Server-side rendering is the bottleneck on such a pipeline.
-Although rollup is powerful, this gem is in an early state
-and there may be limitations.
-
-Javascript is written in ESM syntax, orientated by the functionality of vite.
-Although the common-js plugin is installed, I have not tested it,
-so for example `require` may not work in Svelte components.
-
-But we have done everything we can to make your setup work smoothly.
 
 This all is developed on Rails-7 together with `vite_rails`.
 
@@ -31,9 +22,11 @@ If you have issues, please open one and contributors are welcome!
 
 - actual node installed on the server
 - tested on ruby 3.2.2 and rails 7.1
+- vite_rails (the installer will install it by option --full or --vite)
 - 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))
 - if you use special packages (like pug) that requires commonjs, you may need
+- npm on latest versions
 
 ## Installation from cero
 
@@ -154,21 +147,15 @@ Among others there are
 
 ### Precompile assets
 
-When the rails app runs `assets:precompile` a additional rake task is triggered: `rails svelte_on_rails:reset_and_compile_all`.
+Usual vite has a `vite.config.ts` file, that is used for the client side precompilation.
 
-This is not absolutely necessary but it reduces the loading time of the very first calling of the first component.
-So, on deploying or doing `rails assets:precompile` you shoud see something like:
+By running this installer it adds a npm runner so that you can do `npm run build:ssr`
+which does the server side precompilation.
 
-```
---------------------------------------------------------------------------------
-compiled 1/3: javascript/components/Pug.svelte
-compiled 2/3: javascript/components/SvelteOnRailsHelloWorld.svelte
-compiled 3/3: javascript/components/sub/NestedComponent.svelte
-Svelte on Rails: Reset dist and compile-all executed
---------------------------------------------------------------------------------
-```
+The same job is triggered alongside `rails assets:precompile` for production environments.
 
-on the console.
+On development, when `watch_changes` is configured, the precompilation is triggered 
+after any `*.svelte` file within the configured `components_folder` changed.
 
 ## Option `ssr: :auto`
 
@@ -231,36 +218,6 @@ 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
-```
-
-This does the same step that ist triggered together with the
-`rails assets:precompile` step together with the deployment pipeline:
-it removes all contents of the svelte-on-rails compiled
-assets and compiles them all new.
-
-## Performance
-
-Example from the rails console for a medium complex component
-
-- Compiled MyComponent.svelte.js: 0.411ms
-  - => happens only once
-- Rendered MyComponent.svelte server-side: 0.518ms
-  - => happens on every SSR request
-- Rendered MyComponent.svelte as empty element that will be mounted on the client side
-  - => subsequent calls
-- Completed 200 OK in 521ms (Views: 520.2ms | ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.3ms)
-
 ## Contributors Guide
 
 Contributors welcome!

data/lib/generators/svelte_on_rails/install/install_generator.rb

@@ -10,6 +10,7 @@ module SvelteOnRails
       class_option :haml, type: :boolean, default: false, desc: "Use Haml"
       class_option :turbo, type: :boolean, default: false, desc: "Use @hotwired/turbo-rails"
       class_option :svelte, type: :boolean, default: false, desc: "Install Svelte"
+      class_option :pug, type: :boolean, default: false, desc: "Install Pug"
       class_option :hello_world, type: :boolean, default: false, desc: "Create Hello World component"
 
       require 'svelte_on_rails/installer/utils'
@@ -52,29 +53,35 @@ module SvelteOnRails
 
         utils = SvelteOnRails::Installer::Utils
         npm_i = SvelteOnRails::Installer::Npm
-        utils.write_templates(['svelte_on_rails_vite_base'], ask_for_overwrite: !options[:force])
+        utils.write_templates(['config_base'], ask_for_overwrite: !options[:force])
+
+        # add script to package json
+        pkg_js = JSON.parse(File.read('package.json'))
+        pkg_js['scripts'] ||= { 'build:ssr': "vite build --config vite-ssr.config.ts" }
+        File.write('package.json', JSON.pretty_generate(pkg_js))
 
         if @local_npm_package_url
-          puts '☝️ <<<'
-          puts 'LINK LOCAL PACKAGE'
-          puts 'BUGFIX: npm does not install peer dependencies of local linked packages!'
-          puts '    For packages from the registry, this does since newer versins of npm.'
-          puts '    So we need to install the peer dependencies manually.'
-          npm_i.install_or_update_package('rollup-plugin-svelte', dev_dependency: true)
-          npm_i.install_or_update_package('rollup', dev_dependency: true)
-          npm_i.install_or_update_package('@rollup/plugin-node-resolve', dev_dependency: true)
-          npm_i.install_or_update_package('@rollup/plugin-commonjs', dev_dependency: true)
-          npm_i.install_or_update_package('@rollup/plugin-url', dev_dependency: true)
-          npm_i.install_or_update_package('rollup-plugin-css-only', dev_dependency: true)
-          npm_i.install_or_update_package('rollup-plugin-string', dev_dependency: true)
-          npm_i.install_or_update_package('svelte-preprocess', dev_dependency: true)
-          npm_i.install_or_update_package('pug', dev_dependency: true)
-          npm_i.install_or_update_package('typescript', dev_dependency: true)
-          puts '☝️ >>>'
-          npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
+        #   puts '☝️ <<<'
+        #   puts 'LINK LOCAL PACKAGE'
+        #   puts 'BUGFIX: npm does not install peer dependencies of local linked packages!'
+        #   puts '    For packages from the registry, this does since newer versins of npm.'
+        #   puts '    So we need to install the peer dependencies manually.'
+        #   npm_i.install_or_update_package('rollup-plugin-svelte', dev_dependency: true)
+        #   npm_i.install_or_update_package('rollup', dev_dependency: true)
+        #   npm_i.install_or_update_package('@rollup/plugin-node-resolve', dev_dependency: true)
+        #   npm_i.install_or_update_package('@rollup/plugin-commonjs', dev_dependency: true)
+        #   npm_i.install_or_update_package('@rollup/plugin-url', dev_dependency: true)
+        #   npm_i.install_or_update_package('rollup-plugin-css-only', dev_dependency: true)
+        #   npm_i.install_or_update_package('rollup-plugin-string', dev_dependency: true)
+        #   npm_i.install_or_update_package('svelte-preprocess', dev_dependency: true)
+        #   npm_i.install_or_update_package('pug', dev_dependency: true) # must be there because compile.js on the backend imports is
+        #   puts '☝️ >>>'
+           npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
         else
           npm_i.install_or_update_package(NPM_PACKAGE_NAME)
         end
+        npm_i.install_or_update_package('typescript')
+        npm_i.install_or_update_package('@types/node')
 
         # insert_initializer
         #uts = SvelteOnRails::Installer::Utils

data/lib/svelte-on-rails.rb

@@ -1,7 +1,6 @@
 require "svelte_on_rails/configuration"
 require "svelte_on_rails/view_helpers"
 require "svelte_on_rails/renderer/renderer"
-require "svelte_on_rails/compiler/compiler"
 require "svelte_on_rails/lib/utils"
 require "svelte_on_rails/lib/initializable"
 require "svelte_on_rails/railtie" if defined?(Rails)

data/lib/svelte_on_rails/configuration.rb

@@ -34,21 +34,46 @@ module SvelteOnRails
     end
 
     def frontend_folder
-      @configs['frontend_folder']
+      Pathname.new(@configs['frontend_folder'].to_s)
     end
 
     def frontend_folder_full
       rails_root.join(@configs['frontend_folder'].to_s)
     end
 
+    def components_folder
+      Pathname.new(@configs['components_folder'].to_s)
+    end
+
     def components_folder_full
       Pathname.new(frontend_folder_full).join(components_folder.to_s)
     end
 
-    def components_folder
-      @configs['components_folder']
+    def assets_folder
+      dist_folder.join('assets')
+    end
+
+    def ssr_manifest
+      file = rails_root.join('public', 'vite-ssr', 'manifest.json')
+
+      if watch_changes?
+        begin
+          JSON.parse(File.read(file))
+        rescue
+          raise "ERROR: Could not read public/vite-ssr/manifest.json."
+        end
+      else
+        @manifest ||= JSON.parse(File.read(file))
+      end
+
     end
 
+    # def manifest=(manifest_hash)
+    #   file = dist_folder.join('manifest.json')
+    #   @manifest = manifest_hash
+    #   File.write(file, JSON.pretty_generate(manifest_hash))
+    # end
+
     def ssr
       rss = @configs['ssr']
       if rss == false || rss == :auto
@@ -58,8 +83,20 @@ module SvelteOnRails
       end
     end
 
-    def dist_folder(app_root = nil)
-      rails_root(app_root).join('public', 'svelteDist')
+    # def dist_folder(app_root = nil)
+    #   rails_root(app_root).join('public', 'svelteDist')
+    # end
+
+    def client_dist_folder(app_root = nil)
+      if Rails.env.development?
+        rails_root(app_root).join('public', 'vite')
+      else
+        rails_root(app_root).join('public', 'vite')
+      end
+    end
+
+    def ssr_dist_folder(app_root = nil)
+      rails_root(app_root).join('public', 'vite-ssr')
     end
 
     def system_type

data/lib/svelte_on_rails/installer/hello_world.rb

@@ -13,6 +13,11 @@ module SvelteOnRails
         # route
 
         route = 'svelte_on_rails_hello_world#index'
+
+        utils_i.add_route("  get \"#{route.sub('#', '/')}\"", app_root: app_root)
+        utils_i.add_route("  get \"svelte_on_rails_hello_world/backend_frontend_rendered\"", app_root: app_root)
+        utils_i.add_route("  get \"svelte_on_rails_hello_world/ssr_auto_rendered\"", app_root: app_root)
+
         rr = utils_i.which_root_route(app_root)
         root_url = "/"
         url = root_url + route.sub('#', '/')
@@ -24,7 +29,6 @@ module SvelteOnRails
           puts "route «#{route}» already exists, skipping."
           url
         elsif rr
-          utils_i.add_route("  get \"#{route.sub('#', '/')}\"", app_root: app_root)
           url
         else
           utils_i.add_route('  root "svelte_on_rails_hello_world#index"', app_root: app_root)

data/lib/svelte_on_rails/lib/utils.rb

@@ -6,6 +6,13 @@ module SvelteOnRails
         File.expand_path('../../svelte_on_rails', __dir__) + '/'
       end
 
+      def self.asset_path(filename)
+        config = SvelteOnRails::Configuration.instance
+        path = (config.frontend_folder + config.components_folder).join(filename)
+        manifest = config.ssr_manifest
+        manifest[path.to_s.sub(/\.svelte$/, '') + '.svelte']['file']
+      end
+
       def self.file_exist_case_sensitive?(containing_dir, filename)
         # Combine the directory path and filename
         full_path = File.join(containing_dir, filename)
@@ -21,7 +28,8 @@ module SvelteOnRails
         svelte_file = (base_path + fn).to_s + '.svelte'
         svelte_filename = fn + '.svelte'
         cnf = SvelteOnRails::Configuration.instance
-        cf = cnf.dist_folder + cnf.components_folder + fn
+        cf = cnf.rails_root.join('public', 'vite-ssr', asset_path(filename).sub(/.js$/, ''))
+        a = 1
 
         {
           svelte_file: svelte_file,
@@ -30,6 +38,34 @@ module SvelteOnRails
         }
       end
 
+      def self.watch_changes_and_precompile
+        config = SvelteOnRails::Configuration.instance
+        return unless config.watch_changes?
+
+        mtime = Dir[File.join(config.components_folder_full, '**/*.svelte')].map do |file|
+          File.mtime(file).to_f
+        end.max || 0.0
+        mtime_path = config.ssr_dist_folder.join('last_mtime')
+        last = (File.exist?(mtime_path) ? File.read(mtime_path).to_f : 0.0)
+
+        if mtime > last
+          precompile(mtime)
+        end
+
+      end
+
+      def self.precompile(last_mtime = nil)
+        config = SvelteOnRails::Configuration.instance
+        Dir.chdir(config.rails_root) do
+          cmd = "./node_modules/.bin/vite build --config vite-ssr.config.ts"
+          puts `#{cmd}`
+        end
+        if last_mtime
+          mtime_path = config.ssr_dist_folder.join('last_mtime')
+          File.write(mtime_path, last_mtime.to_s)
+        end
+      end
+
     end
   end
 end

data/lib/svelte_on_rails/renderer/renderer.rb

@@ -5,8 +5,13 @@ module SvelteOnRails
 
     def initialize(compiled_file: nil, component_name: nil, base_path: SvelteOnRails::Configuration.instance.components_folder_full)
 
+      config = SvelteOnRails::Configuration.instance
+      if config.watch_changes?
+        SvelteOnRails::Lib::Utils.watch_changes_and_precompile
+      end
+
       @compiled_file = if compiled_file
-                         compiled_file
+                         compiled_file.sub(/\.svelte$/, '')
                        elsif component_name
                          utils = SvelteOnRails::Lib::Utils
                          cf = utils.component_files(component_name, base_path: base_path)

data/lib/svelte_on_rails/renderer/utils.js

@@ -17,7 +17,8 @@ export async function loadComponentModule(compiledFile) {
         const module = await import(modulePath);
         return module.default;
     } catch (error) {
-        console.error(`Error loading component from ${compiledFile}:`, error);
+        console.error(`=> compiledFile: «${compiledFile}»`);
+        console.error(`[loadComponentModule] Error loading component from ${compiledFile}:`, error);
         process.exit(1);
     }
 }

data/lib/svelte_on_rails/view_helpers.rb

@@ -56,9 +56,7 @@ module SvelteOnRails
         # render server side
 
         start_time = Time.now
-        comp = SvelteOnRails::Compiler.new(filename)
-        comp.compile_if_changes
-        rend = SvelteOnRails::Renderer.new(compiled_file: comp.compiled_file)
+        rend = SvelteOnRails::Renderer.new(component_name: filename)
         res = rend.render(props)
         time = Time.now - start_time
         Rails.logger.info "  Rendered #{filename}.svelte server-side: #{time.round(3)}ms"

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -1,8 +1,12 @@
 if defined?(Rails) && Rake::Task.task_defined?("assets:precompile")
   Rake::Task["assets:precompile"].enhance do
     puts '-' * 80
-    SvelteOnRails::Compiler.reset_and_compile_all
-    puts "Svelte on Rails: Reset dist and compile-all executed"
+    Dir.chdir(Rails.root) do
+      cmd = "npm run build:ssr"
+      puts cmd
+      puts '-' * 80
+      puts `#{cmd}`
+    end
     puts '-' * 80
   end
 end
@@ -34,43 +38,6 @@ namespace :svelte_on_rails do
 
   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_vite_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::Compiler.reset_and_compile_all
-  end
-
   desc "For contributors to this gem: writes a config file for developing options."
   task :create_contributor_configs_file do
     path = File.expand_path('../../../svelte_on_rails_contributor_configs.yml', __dir__)

data/templates/config_base/app/frontend/ssr/ssr.js

@@ -0,0 +1,4 @@
+// Placeholder SSR entrypoint for vite-plugin-ruby
+export default function () {
+    // No-op
+}

data/templates/config_base/vite-ssr.config.ts

@@ -0,0 +1,133 @@
+import { defineConfig } from 'vite';
+import RubyPlugin from 'vite-plugin-ruby';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import * as fs from 'fs';
+import * as path from 'path';
+import { Plugin } from 'vite';
+
+function rewriteAssetPathsPlugin(): Plugin {
+    const manifestPath = path.resolve('public/vite/manifest.json');
+    let manifest: Record<string, { file: string }> | null = null;
+
+    // Load client-side manifest if it exists (production)
+    if (fs.existsSync(manifestPath)) {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+    }
+
+    return {
+        name: 'rewrite-asset-paths',
+        enforce: 'pre',
+        transform(code, id) {
+            if (id.endsWith('.svelte')) {
+                if (manifest) {
+                    // Production: Rewrite asset paths using client-side manifest
+                    let transformedCode = code;
+                    for (const [assetKey, assetData] of Object.entries(manifest)) {
+                        // Match assets like /assets/image.jpg, /assets/script.js, /assets/style.css
+                        const assetRegex = new RegExp(`/assets/${assetKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g');
+                        transformedCode = transformedCode.replace(assetRegex, `/vite/${assetData.file}`);
+                    }
+                    return transformedCode;
+                } else {
+                    // Development: Fallback to /vite-dev/assets/ for all assets
+                    return code.replace(/\/assets\//g, '/vite-dev/assets/');
+                }
+            }
+            return null;
+        },
+    };
+}
+
+// Function to recursively find all .svelte files
+function findSvelteFiles(dir: string, baseDir: string = dir): Record<string, string> {
+    const entries: Record<string, string> = {};
+    const files = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const file of files) {
+        const fullPath = path.join(dir, file.name);
+        if (file.isDirectory()) {
+            // Recurse into subdirectories
+            Object.assign(entries, findSvelteFiles(fullPath, baseDir));
+        } else if (file.isFile() && file.name.endsWith('.svelte')) {
+            // Create entry for .svelte file
+            const relativePath = path.relative(baseDir, fullPath);
+            const name = relativePath.replace('.svelte', '').replace(/\//g, '-'); // e.g., components-MyComponent
+            entries[`svelte-${name}`] = fullPath;
+        }
+    }
+    return entries;
+}
+
+// Collect all .svelte files in app/frontend
+const svelteComponents = findSvelteFiles(path.resolve('app/frontend'));
+
+export default defineConfig(({ mode }) => {
+
+    const isProduction = (process.env.RAILS_ENV === 'development' || process.env.RAILS_ENV === 'test' ? false : true);
+
+    return {
+        base: isProduction ? '/vite/' : '/vite-dev/',
+        plugins: [
+            rewriteAssetPathsPlugin(),
+            {
+                ...RubyPlugin(),
+                apply(config, { command }) {
+                    if (command === 'build') {
+                        if (config.plugins) { // Add this check
+                            config.plugins = config.plugins.filter((plugin) => {
+                                return !!(plugin && typeof plugin === 'object' && 'name' in plugin && plugin.name !== 'vite-plugin-ruby:assets-manifest');
+                            });
+                        }
+                    }
+                    return true;
+                },
+            },
+            svelte({
+                include: ['app/frontend/**/*.svelte'],
+                compilerOptions: {
+                    // hydratable: false,
+                },
+            }),
+            {
+                name: 'force-manifest',
+                configResolved(config) {
+                    console.log('Resolved build.manifest:', config.build.manifest);
+                    if (!config.build.manifest) {
+                        config.build.manifest = 'manifest-ssr.json';
+                        console.log('Forced build.manifest to manifest-ssr.json');
+                    }
+                },
+            },
+        ],
+        build: {
+            ssr: true,
+            outDir: 'public/vite-ssr',
+            manifest: 'manifest.json',
+            rollupOptions: {
+                input: {
+                    ...svelteComponents,
+                    ssr: 'app/frontend/ssr/ssr.js',
+                },
+                output: {
+                    format: 'es',
+                    entryFileNames: 'assets/[name]-[hash].js',
+                    chunkFileNames: 'assets/[name]-[hash].js',
+                    assetFileNames: 'assets/[name]-[hash][extname]',
+                    manualChunks(id) {
+                        if (id.indexOf('.svelte') !== -1) {
+                            const lastSegment = id.split('/').pop();
+                            if (lastSegment) {
+                                const componentName = lastSegment.replace('.svelte', '');
+                                return `svelte-${componentName}`;
+                            }
+                        }
+                    }
+                },
+            },
+        },
+        optimizeDeps: {
+            include: ['svelte'],
+        },
+        logLevel: 'info',
+    };
+});

data/templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-face-smile-wink.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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM164.1 325.5C158.3 318.8 148.2 318.1 141.5 323.9C134.8 329.7 134.1 339.8 139.9 346.5C162.1 372.1 200.9 400 255.1 400C311.1 400 349.8 372.1 372.1 346.5C377.9 339.8 377.2 329.7 370.5 323.9C363.8 318.1 353.7 318.8 347.9 325.5C329.9 346.2 299.4 368 255.1 368C212.6 368 182 346.2 164.1 325.5H164.1zM176.4 176C158.7 176 144.4 190.3 144.4 208C144.4 225.7 158.7 240 176.4 240C194 240 208.4 225.7 208.4 208C208.4 190.3 194 176 176.4 176zM300.8 233.6C318.4 210.1 353.6 210.1 371.2 233.6C376.5 240.7 386.5 242.1 393.6 236.8C400.7 231.5 402.1 221.5 396.8 214.4C366.4 173.9 305.6 173.9 275.2 214.4C269.9 221.5 271.3 231.5 278.4 236.8C285.5 242.1 295.5 240.7 300.8 233.6z"/></svg>

data/templates/rails_vite_hello_world/app/frontend/javascript/components/JavascriptImport.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let title;
+    import {nestedJavascriptFunction} from "../nestedJavascript.js";
+</script>
+
+<p>{title}</p>
+<p>{nestedJavascriptFunction()}</p>

data/templates/rails_vite_hello_world/app/frontend/javascript/components/JpgImport.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let title;
+    import jpg from '../../images/svelte-on-rails-hello-world-switzerland.jpg'
+</script>
+
+<p>{title}</p>
+<img alt="Jpg not loaded!" src="{jpg}" />

data/templates/rails_vite_hello_world/app/frontend/javascript/components/ParentWithChild.svelte

@@ -0,0 +1,6 @@
+<script>
+    import Nested from './sub/NestedComponent.svelte'
+    export let title
+</script>
+<p>{title}</p>
+<Nested />

data/templates/rails_vite_hello_world/app/frontend/javascript/components/PngImport.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let title;
+    import png from '../../images/svelte-on-rails-hello-world-england.png'
+</script>
+
+<p>{title}</p>
+<img alt="Png not loaded!" src="{png}" />

data/templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte

@@ -1,7 +1,5 @@
 <script>
-    import svgRaw from '../../images/svg.svg?raw'
-    //import svg from '../../images/svg.svg'
-    import png from '../../images/check-circle-green.png'
+    import jpg from '../../images/svelte-on-rails-hello-world-switzerland.jpg'
     import Nested from './sub/NestedComponent.svelte'
     import {nestedJavascriptFunction} from '../nestedJavascript.js'
     export let items
@@ -27,9 +25,7 @@
     </ul>
 
     <hr/>
-    <span class="wrap-svg">{@html svgRaw}</span>
-    <!--    <img alt="svg ERROR" src={svg} />-->
-    <img alt="png ERROR" src={png} />
+    <img alt="png ERROR" src={jpg} />
 
     <hr/>
     <Nested />

data/templates/rails_vite_hello_world/app/frontend/javascript/components/SvgRawImport.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let title;
+    import svgRaw from '../../images/svelte-on-rails-hello-world-face-smile-wink.svg?raw'
+</script>
+
+<p>{title}</p>
+{@html svgRaw}

data/templates/rails_vite_hello_world/app/frontend/javascript/components/sub/NestedComponent.svelte

@@ -1 +1 @@
-<p>Nested Svelte Component</p>
+<p class="nested-component">Nested Svelte Component</p>

data/templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascript.js

@@ -1,3 +1,6 @@
+
+
 export function nestedJavascriptFunction() {
-    return 'nestedJavascript!';
+    const randomHex = Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0');
+    return `JS result: #${randomHex}`;
 }

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

@@ -0,0 +1,11 @@
+<div class="nav">
+  <%= link_to 'Hello World', '/svelte_on_rails_hello_world/index' %>
+  |
+  <%= link_to 'Backend/Frontend Test', '/svelte_on_rails_hello_world/backend_frontend_rendered' %>
+  |
+  <%= link_to 'SSR-Auto rendered (default)', '/svelte_on_rails_hello_world/ssr_auto_rendered' %>
+</div>
+
+<% turbo_id = request.headers['X-Turbo-Request-ID'] %>
+<p class="<%= (turbo_id.present? ? 'turbo-request' : 'initial-request') %>"><%= (turbo_id.blank? ? 'This is a initial request' : "Turbo-Request-ID: #{turbo_id}") %></p>
+<p>Rails.environment: <%= Rails.env %></p>

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

@@ -0,0 +1,16 @@
+<style>
+    p {
+        color: darkgray;
+    }
+    .turbo-request {
+        color: #359500;
+    }
+    .initial-request {
+        color: #8B0000;
+        font-weight: bold;
+    }
+    img, svg {
+        width: 32px;
+        height: 32px;
+    }
+</style>

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

@@ -0,0 +1,37 @@
+<%= render 'styles' %>
+<style>
+    .svelte-component {
+        border: 1px solid lightgray;
+        padding: 10px;
+        margin: 10px;
+        width: 100px;
+        display: inline-block;
+    }
+</style>
+
+<%= render 'nav' %>
+
+
+<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>
+<hr>
+
+<% components = ['SvgRawImport', 'JpgImport', 'PngImport', 'JavascriptImport', 'ParentWithChild'] %>
+
+<h3>Always rendered server side</h3>
+<div class="ssr-only">
+  <% components.each do |component| %>
+    <%= svelte_component(component, ssr: true, hydrate: false, title: component) %>
+  <% end %>
+</div>
+
+<hr>
+<h3>Always rendered client side</h3>
+<div class="client-only">
+  <% components.each do |component| %>
+    <%= svelte_component(component, ssr: false, hydrate: true, title: component) %>
+  <% end %>
+</div>

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

@@ -1,5 +1,9 @@
-<p>Example view</p>
+<%= render 'styles' %>
 
-<%= svelte_component "SvelteOnRailsHelloWorld", items: ['attributes', 'are', 'parsed'] %>
-<%= svelte_component "Pug", ssr: true, notice: "Pug is rendered server-side" %>
-<%= svelte_component "Pug", ssr: false, notice: "Pug is rendered client-side" %>
+
+<%= render 'nav' %>
+
+
+<h1>Svelte is here</h1>
+
+<%= svelte_component "SvelteOnRailsHelloWorld", items: ['attributes', 'are', 'parsed'] %>

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

@@ -0,0 +1,26 @@
+<%= render 'styles' %>
+<style>
+    .svelte-component {
+        border: 1px solid lightgray;
+        padding: 10px;
+        margin: 10px;
+        width: 100px;
+        display: inline-block;
+    }
+</style>
+
+<%= render 'nav' %>
+
+
+<h1>ssr: :auto (default)</h1>
+
+
+<% components = ['SvgRawImport', 'JpgImport', 'PngImport', 'JavascriptImport', 'ParentWithChild'] %>
+
+<h3>Rendered server side only on initial request</h3>
+<div class="ssr-auto">
+  <% components.each do |component| %>
+    <%= svelte_component(component, title: component) %>
+  <% end %>
+</div>
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.42
+  version: 0.0.43
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -31,9 +31,6 @@ files:
 - README.md
 - lib/generators/svelte_on_rails/install/install_generator.rb
 - lib/svelte-on-rails.rb
-- lib/svelte_on_rails/compiler/compile.js
-- lib/svelte_on_rails/compiler/compiler.rb
-- lib/svelte_on_rails/compiler/customPlugins.js
 - lib/svelte_on_rails/configuration.rb
 - lib/svelte_on_rails/installer/gem_utils.rb
 - lib/svelte_on_rails/installer/haml.rb
@@ -52,18 +49,28 @@ files:
 - lib/svelte_on_rails/renderer/utils.js
 - lib/svelte_on_rails/view_helpers.rb
 - lib/tasks/svelte_on_rails_tasks.rake
+- templates/config_base/app/frontend/initializers/svelte.js
+- templates/config_base/app/frontend/ssr/ssr.js
+- templates/config_base/config/svelte_on_rails.yml
+- templates/config_base/vite-ssr.config.ts
 - templates/rails_vite_hello_world/app/controllers/svelte_on_rails_hello_world_controller.rb
-- templates/rails_vite_hello_world/app/frontend/images/atom.svg
-- templates/rails_vite_hello_world/app/frontend/images/check-circle-green.png
-- templates/rails_vite_hello_world/app/frontend/images/svg.svg
-- templates/rails_vite_hello_world/app/frontend/javascript/components/Pug.svelte
+- templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-england.png
+- templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-face-smile-wink.svg
+- templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-switzerland.jpg
+- templates/rails_vite_hello_world/app/frontend/javascript/components/JavascriptImport.svelte
+- templates/rails_vite_hello_world/app/frontend/javascript/components/JpgImport.svelte
+- templates/rails_vite_hello_world/app/frontend/javascript/components/ParentWithChild.svelte
+- templates/rails_vite_hello_world/app/frontend/javascript/components/PngImport.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
+- templates/rails_vite_hello_world/app/frontend/javascript/components/SvgRawImport.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/components/sub/NestedComponent.svelte
 - templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascript.js
 - templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascriptToggled.js
+- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_nav.html.erb
+- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_styles.html.erb
+- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/backend_frontend_rendered.html.erb
 - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/index.html.erb
-- templates/svelte_on_rails_vite_base/app/frontend/initializers/svelte.js
-- templates/svelte_on_rails_vite_base/config/svelte_on_rails.yml
+- templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/ssr_auto_rendered.html.erb
 homepage: https://gitlab.com/sedl/svelte-on-rails
 licenses:
 - MIT

data/lib/svelte_on_rails/compiler/compile.js

@@ -1,123 +0,0 @@
-#!/usr/bin/env node
-
-import path from 'path';
-import fs from 'fs/promises';
-import { rawResolver, stringPlugin, ssrExternals } from "./customPlugins.js";
-
-// Debugging: Log NODE_PATH and current working directory
-console.log('NODE_PATH:', process.env.NODE_PATH);
-console.log('Current Working Directory:', process.cwd());
-
-// Arguments: inputFile, outputDir, gemPath
-const args = process.argv.slice(2);
-const inputFile = args[0];
-const outputDir = args[1];
-const gemPath = args[2];
-
-// Pfad zu node_modules im Gem
-const gemNodeModules = path.join(gemPath, 'node_modules');
-// Path to node_modules in the Rails app (current working directory)
-const appNodeModules = path.join(process.cwd(), 'node_modules');
-
-// Dynamische Importe der Build-Tools aus dem Gem
-const { rollup } = await import(path.join(appNodeModules, 'rollup', 'dist', 'rollup.js'));
-const svelte = await import(path.join(appNodeModules, 'rollup-plugin-svelte', 'index.js')).then(m => m.default);
-const resolve = await import(path.join(appNodeModules, '@rollup', 'plugin-node-resolve', 'dist', 'es', 'index.js')).then(m => m.default);
-const commonjs = await import(path.join(appNodeModules, '@rollup/plugin-commonjs', 'dist', 'es', 'index.js')).then(m => m.default);
-const url = await import(path.join(appNodeModules, '@rollup', 'plugin-url', 'dist', 'es', 'index.js')).then(m => m.default);
-const css = await import(path.join(appNodeModules, 'rollup-plugin-css-only', 'dist', 'index.mjs')).then(m => m.default);
-const { sveltePreprocess } = await import(path.join(appNodeModules, 'svelte-preprocess', 'dist', 'index.js'));
-
-
-if (!inputFile || !outputDir || !gemPath) {
-    console.error('Error: inputFile, outputDir, and gemPath must be specified.');
-    console.error('Usage: node script.js <inputFile> <outputDir> <gemPath>');
-    process.exit(1);
-}
-
-// Ensure that gemPath exists
-try {
-    await fs.access(gemPath);
-} catch (error) {
-    console.error(`Error: The gemPath "${gemPath}" does not exist.`);
-    process.exit(1);
-}
-
-const fileName = path.basename(inputFile, '.svelte');
-const outputFile = path.join(outputDir, `${fileName}.js`);
-const outputCss = path.join(outputDir, `${fileName}.css`);
-
-const rollupConfig = {
-    input: inputFile,
-    output: {
-        file: outputFile,
-        format: 'esm',
-    },
-    external: [
-        'fs', 'path', 'url', 'module', 'http', 'https', 'zlib', 'stream', 'buffer',
-        'axios', 'form-data'
-    ],
-    onwarn(warning, warn) {
-        if (warning.code === 'CIRCULAR_DEPENDENCY') return;
-        if (warning.code === 'EMPTY_BUNDLE' || warning.code === 'UNUSED_EXTERNAL_IMPORT') return;
-        warn(warning);
-    },
-    plugins: [
-        svelte({
-            preprocess: sveltePreprocess({
-                pug: true,
-                typescript: true
-            }),
-            compilerOptions: {
-                generate: 'ssr',
-                hydratable: false
-            },
-            onwarn(warning, handler) {
-                if (warning.code === 'MISSING_EXPORT' && warning.exporter.includes('axios')) return;
-                handler(warning);
-            }
-        }),
-        rawResolver(),
-        stringPlugin(),
-        url({
-            include: ['**/*.jpg', '**/*.png', '**/*.jpeg', '**/*.gif'],
-            limit: 0,
-            destDir: outputDir,
-            publicPath: outputDir,
-            emitFiles: true,
-        }),
-        css({ output: path.basename(outputCss) }),
-        resolve({
-            dedupe: ['svelte'],
-            exportConditions: ['svelte', 'server'],
-//            modulePaths: [appNodeModules, gemNodeModules], // Prioritize app's node_modules
-            modulePaths: [appNodeModules], // Prioritize app's node_modules
-            extensions: ['.mjs', '.js', '.cjs', '.ts'],
-            mainFields: ['main', 'module']
-        }),
-        commonjs({
-            include: [/node_modules/],
-            transformMixedEsModules: true
-        }),
-        ssrExternals()
-    ],
-};
-
-// Rollup build
-async function compile() {
-    try {
-        const startTime = performance.now();
-        const bundle = await rollup(rollupConfig);
-        await bundle.write(rollupConfig.output);
-        await bundle.close();
-        console.log(`Build successful: ${outputFile} and ${outputCss}`);
-        const endTime = performance.now();
-        const duration = (endTime - startTime).toFixed(2);
-        console.log(`Execution time: ${duration} ms`);
-    } catch (error) {
-        console.error('Build failed:', error);
-        process.exit(1);
-    }
-}
-
-compile();

data/lib/svelte_on_rails/compiler/compiler.rb

@@ -1,120 +0,0 @@
-module SvelteOnRails
-
-  class Compiler
-
-    require 'open3'
-
-    def initialize(filename, base_path: SvelteOnRails::Configuration.instance.components_folder_full)
-
-      utils = SvelteOnRails::Lib::Utils
-      @files = utils.component_files(filename, base_path: base_path)
-
-    end
-
-    # compiler
-    def compile_if_changes
-
-      # letzte Änderung innerhalb des ordners ermitteln
-
-      watch_changes = SvelteOnRails::Configuration.instance.watch_changes?
-      ts_file = SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
-
-      have_changes = if watch_changes && File.exist?(ts_file)
-
-                       # compare last modification timestamp
-                       last_modification = 100.years.ago.to_time
-                       Dir.glob("#{SvelteOnRails::Configuration.instance.components_folder}**/*").each do |path|
-                         if File.file?(path)
-                           mtime = File.mtime(path)
-                           if mtime > last_modification
-                             last_modification = mtime
-                           end
-                         end
-                       end
-                       File.mtime(ts_file) < last_modification
-
-                     elsif watch_changes
-                       true
-                     elsif !File.exist?(ts_file)
-                       true
-                     else
-                       false
-                     end
-
-      if have_changes || !File.exist?(compiled_js_file) || !File.exist?(compiled_css_file)
-        if have_changes || (!File.exist?(ts_file) && watch_changes)
-          self.class.reset_dist
-        end
-        compile
-      end
-    end
-
-    def compiled_js_file
-      @files[:compiled_file] + '.js'
-    end
-
-    def compiled_css_file
-      @files[:compiled_file] + '.css'
-    end
-
-    def compiled_file
-      @files[:compiled_file]
-    end
-
-    def compile
-
-      start_time = Time.now
-
-      cnf = SvelteOnRails::Configuration.instance
-      subs = @files[:svelte_filename].split('/')[0..-2].join('/')
-      dist = cnf.dist_folder + cnf.components_folder + subs
-      utils = SvelteOnRails::Lib::Utils
-
-      cmd = [
-        'node',
-        utils.gem_app_dir + 'compiler/compile.js',
-        @files[:svelte_file],
-        dist,
-        utils.gem_app_dir
-      ].join(' ')
-
-      Dir.chdir(cnf.rails_root) do
-        env = { 'NODE_PATH' => File.join(cnf.rails_root, 'node_modules') }
-
-        stdout, stderr, status = Open3.capture3(env, cmd, chdir: cnf.rails_root)
-
-        unless status.to_s.match(/^pid [0-9]+ exit 0$/)
-          raise "Compiling «#{@files[:svelte_filename]}» Server-side, script compile.js, executed within Rails.root:\n\n#{cmd}\n\n++++++\n\n#{stderr}\n\n++++++\n\n"
-        end
-      end
-
-      time = Time.now - start_time
-      Rails.logger.info "  Compiled #{@files[:svelte_filename]}.js: #{time.round(3)}ms" rescue nil
-    end
-
-    def self.reset_dist
-      unless Dir.exist?(SvelteOnRails::Configuration.instance.dist_folder)
-        FileUtils.mkdir_p(SvelteOnRails::Configuration.instance.dist_folder)
-      end
-      FileUtils.rm_rf Dir.glob("#{SvelteOnRails::Configuration.instance.dist_folder}/*")
-      FileUtils.touch SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
-    end
-
-    def self.reset_and_compile_all
-      reset_dist
-      cnf = SvelteOnRails::Configuration.instance
-      frontend_folder = cnf.frontend_folder_full
-      files = Dir.glob(cnf.frontend_folder_full.join('**/*.svelte'))
-      files.each_with_index do |file, ind|
-        comp_name = file.to_s[(cnf.frontend_folder_full.to_s.length + 1)..-1]
-
-        n = SvelteOnRails::Compiler.new(comp_name, base_path: frontend_folder)
-        n.compile
-
-        puts "compiled #{ind + 1}/#{files.length}: #{comp_name}"
-
-      end
-    end
-
-  end
-end

data/lib/svelte_on_rails/compiler/customPlugins.js

@@ -1,60 +0,0 @@
-import path from 'path';
-import fs from 'fs/promises';
-
-// Plugin for raw imports
-export function rawResolver() {
-    return {
-        name: 'raw-resolver',
-        resolveId(source, importer) {
-            console.log(`Raw-Resolver: source=${source}, importer=${importer}`);
-            if (source.endsWith('?raw')) {
-                const actualSource = source.replace('?raw', '');
-                const resolved = path.resolve(path.dirname(importer), actualSource);
-                console.log(`Raw-Resolver: Resolving ${source} to ${resolved}?raw`);
-                return `${resolved}?raw`;
-            }
-            return null;
-        },
-    };
-}
-
-export function stringPlugin() {
-    return {
-        name: 'string',
-        async load(id) {
-            if (id.endsWith('?raw')) {
-                console.log(`String-Plugin: Loading ${id}`);
-                const actualId = id.replace('?raw', '');
-                try {
-                    const content = await fs.readFile(actualId, 'utf-8');
-                    console.log(`String-Plugin: Content of ${actualId} loaded (excerpt): ${content.substring(0, 50)}...`);
-                    return `export default ${JSON.stringify(content)};`;
-                } catch (error) {
-                    console.error(`String-Plugin: Error loading ${actualId}:`, error);
-                    throw error;
-                }
-            }
-            return null;
-        },
-    };
-}
-
-// Plugin to ignore browser-specific modules during SSR
-export function ssrExternals() {
-    return {
-        name: 'ssr-externals',
-        resolveId(source) {
-            // Ignore modules like axios during SSR
-            if (source === 'axios' || source.includes('form-data')) {
-                return { id: 'void 0', external: true };
-            }
-            return null;
-        },
-        load(id) {
-            if (id === 'void 0') {
-                return 'export default null;';
-            }
-            return null;
-        }
-    };
-}

data/templates/rails_vite_hello_world/app/frontend/images/atom.svg

@@ -1 +0,0 @@
-<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/templates/rails_vite_hello_world/app/frontend/images/svg.svg

@@ -1,3 +0,0 @@
-<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/templates/rails_vite_hello_world/app/frontend/javascript/components/Pug.svelte

@@ -1,14 +0,0 @@
-<script>
-    export let notice
-    let ary = ['item-1', 'item-2', 'item-3']
-</script>
-
-<template lang="pug">
-    h1 Hello, Pug!
-    p {notice}
-    ul
-    <!--        The | Syntax is a workaround for situations where pug integration in svelte is not working really well-->
-    | {#each ary as item}
-    |    <li>{item}</li>
-    | {/each}
-</template>