svelte-on-rails 0.0.41 → 0.0.43

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 683e0e4881fc72969224d9792ba06ff4049c19adbcf55bc8e0ba817ba4be48d4
-  data.tar.gz: 6a9ed00119ddbdb2b9a095458b010150ecd938d751e9112b26629343bc782656
+  metadata.gz: 0c45b43d02daa6e2a67f661348deecb1819734e2f16855b0595089663825a9ba
+  data.tar.gz: 430a7f1f67145346e4e589d1d7a08c93a77260b5035c9c1b87dfaf7fba00fa79
 SHA512:
-  metadata.gz: a166ff91777a7969f50874feb855c522aeac968dae0c6f1659b92ced9ac461683cbac34eee6f3999b961db6669732dbcbea41d3f659f621a3c198fc6b3204e76
-  data.tar.gz: dd7c49785a50f484c936fbac6f5a8000fc46d6fc7165113c55a7e437b4b2ac20a05a1da4d9311b24d8757d307fa14061c35b2fdf607614502bd6ff24aa0ee948
+  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,43 +218,23 @@ rails svelte_on_rails:add_hello_world
 rails svelte_on_rails:remove_hello_world
 ```
 
-[//]: # (```bash)
-
-[//]: # (rails svelte_on_rails:toggle_hello_world_svg)
+## Contributors Guide
 
-[//]: # (```)
+Contributors welcome!
 
-[//]: # ()
-[//]: # (toggles the svg nested to the hello world component for check if thee svg is refreshed when imported image changes)
+After downloaded the gem, please run the task
 
-```bash
-rails svelte_on_rails:reset_and_compile_all
+```bash 
+rake svelte_on_rails:create_contributor_configs_file
 ```
+and define a `generated_test_app_folder_path` (required) for apps, generated for the testings.
 
-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
+For development of the **npm package @csedl/svelte-on-rails** you can set the
+`local_npm_package_path` (optional) and insert the path to the npm package on your local machine.
+This will cause the installer, to install the npm package from a local path instead from the npm registry.
 
 Tests are based on the included templates, like the `hello world template` and on the installer.
 
-On the gem folder you can put a file `generated_test_app_path`, and put the path for a existing
-folder where the tests generate a test rails app.
-
 **Installer tests** starting with completely destroy the rails app within the `generated_test_app_path`,
 generating a new rails app and running the installer and test by `playwright` if the components are working.
 
@@ -293,13 +260,6 @@ The current test cases including (among others):
 create a completely new rails app, running the full installer and check if a hello World component is visible and javascript is working.
 run assets:precompile within a rails app and check if the gem does its precompiling too.
 
-For development of the **npm package @csedl/svelte-on-rails** you can add the file
-`local_npm_package_path` and insert the path to the npm package on your local machine.
-This will cause the installer, not to install the npm package from npm, but to use the local one.
-
-‼️ **ATTENTION:** Please do never commit the file `local_npm_package_path` to the repo! This is only for developers!
-Otherwise a user would, on running the installer, get an error, because the npm package is not found.
-
 ## Licence
 
 License is MIT

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/installer/npm.rb

@@ -68,7 +68,7 @@ module SvelteOnRails
         if pkg
           {
             type: pkg.match(/^.*?(?=\/[^\/]*$)/).to_s,
-            version: version.split('.').map(&:to_i)
+            version: version&.split('.')&.map(&:to_i)
           }
         end
 

data/lib/svelte_on_rails/lib/development_utils.rb

@@ -2,18 +2,15 @@ module SvelteOnRails
   class DevelopmentUtils
 
     def self.local_npm_package_url
-      config_file = gem_folder.join('local_npm_package_path')
-      if !File.exist?(config_file)
-        return nil
+      str = contributor_config('local_npm_package_path', required: false)
+      if !str.present?
+        nil
+      elsif !Dir.exist?(str)
+        raise "Invalid path given on local_npm_package_path: «#{str}»"
+      elsif !File.exist?(Pathname.new(str).join('package.json'))
+        raise "Given local_npm_package_path does not seem to be a valid npm package as it does not contain a package.json"
       else
-        str = File.read(config_file).strip
-        if !Dir.exist?(str)
-          raise "Invalid path given on local_npm_package_path: «#{str}»"
-        elsif !File.exist?(Pathname.new(str).join('package.json'))
-          raise "Given local_npm_package_path does not seem to be a valid npm package as it does not contain a package.json"
-        else
-          return Pathname.new(str)
-        end
+        return Pathname.new(str)
       end
     end
 
@@ -21,5 +18,21 @@ module SvelteOnRails
       Pathname.new(File.expand_path('../../..', __dir__))
     end
 
+    def self.contributor_config(key, required: true)
+      config_file = File.expand_path('../svelte_on_rails_contributor_configs.yml', gem_folder)
+      if !File.exist?(config_file)
+        if required
+          raise "Missing configuration file, searched at: «#{config_file}»"
+        end
+      else
+        yml = YAML.load_file(config_file)
+        value = yml[key.to_s]
+        if required && !value.present?
+          raise "Missing value «#{key}» in configuration file: «#{config_file}»"
+        end
+        value
+      end
+    end
+
   end
 end

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,41 +38,31 @@ 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
+  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__)
 
-    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)
+    if File.exist?(path)
+      puts "Config file for Contributors already exists: file://#{path}"
+      puts 'nothing done.'
+      exit
     end
 
-    puts '+++'
+    content = <<-END
+#local_npm_package_path: /path/to/my/local/csedl-svelte-on-rails-main
 
-    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)"
+# optional
+# If you want to develop the @csedl/svelte-on-rails package
+# add full path like /path/to/csedl-svelte-on-rails-main
+# Then, on running the generator, it installs this package from your local root folder
 
-  end
+generated_test_app_folder_path: /destination/folder/for/generated/test/app
 
-  desc "Compile all Svelte components"
-  task :reset_and_compile_all do
-    SvelteOnRails::Compiler.reset_and_compile_all
+# required!
+# When you run tests, a rails app will be generated into this folder
+    END
+    File.write(path, content)
+    puts "Config file for Contributors created at: #{path}"
   end
 
 end

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
+}