svelte-on-rails 1.0.13 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2bddaae521fc71ed3c7975612b8b9109830fd25210eda2d30c00c6150265dca
-  data.tar.gz: 7adeb7e7181508d704ff98087f5b601a596159d1205cb0ffb08e98f5fca81272
+  metadata.gz: a0e1e1cb1a95e07c184fb9b943315765340d46690f2c6a66f0041aaa233fbc19
+  data.tar.gz: 0b93fc9a113b43b5b997e81f912535015415d66e1e6dd480129a5f28091d227b
 SHA512:
-  metadata.gz: 77f1fd03901c9c73c8893c471b464db9e2e4fd212b9a36dad9a78f15b34f155865155b4796af3409e32b741dd4693a9756c369bcfb32caf05b1a1abdfa6e1af5
-  data.tar.gz: 7be8fd8640a3d7431dd6e8274a3bc3f3a9eca0c9c9e30f46d42f4eb00735f13a8e8421e8b0e6142c17ac0a0aab9bc9df5cc0914b17add50677498575401ac20b
+  metadata.gz: 4801f3526444fbc17446bfb06270eae0cf8962be0c1c07c51d3a4b166c0ef2376b3fa73532b3629f18d99e296df9b34b55b34287a9bea6e77dcf194b01ea5adc
+  data.tar.gz: 5641533b5e6625231c1a5803e5d2cf75c1e0b1f3749d44e0cb43176b60b0cf03437ade435fb50013b997e5d8b5252ebb42b4946084e416123c1dc5c2d6af7ccb

data/README.md

@@ -24,7 +24,7 @@ On every app there are parts where you want it to shine. This is where Svelte co
 - Super fast
 - **Compared to Stimulus**
   - No more writing double logic of the initial HTML state
-  - Stimulus is great for rails views with some javascript, but, complex parts: Svelte. Nothing else.
+  - Stimulus is great for rails views with some javascript, but, complex parts: You will love svelte.
 - **Compared to React**
   - No more shadow dom and all those packages that are supposed to improve performance (e.g. useCallback...)
   - Slimmer packages
@@ -39,9 +39,9 @@ but: Where needed, we want full power.
 
 # Features
 
-- 🤝 Fully integrated with `assets:precompile`
-- 🚀 Cero-config deployment
 - ✍️ Sophisticated error messages
+- 🚀 Cero-config deployment
+- 🤝 Fully integrated with `assets:precompile`
 - 😍 Contributor friendly
 
 # Known Issues
@@ -163,14 +163,24 @@ and run the minimal installer (you are free to add any options from above)
 rails g svelte_on_rails:install
 ```
 
-Restart the server, add a example component like `app/frontend/javascript/HelloWorld.svelte`
-and the helper to a view, like
+Restart the server, add a hello world component `app/frontend/javascript/HelloWorld.svelte` like 
+
+```sveltehtml
+<script>
+  export let title
+</script>
+
+<h1>Svelte {title}</h1>
+```
+
+Add it to the view
 
 ```erb
-<%= svelte_component('HelloWorld') %>
+<%= svelte_component('HelloWorld', title: 'Hello World') %>
 ```
 
-And you should see your component rendered on the browser! 👍  🤗
+
+And you should see "Svelte Hello World" on the browser! 👍  🤗
 
 **Explanation**
 
@@ -259,6 +269,11 @@ loaded on very first load to the frontend, then the most work is done
 in frontend and the server is relieved, except on initial request.
 You will see no unpleasant «blink» on the page.
 
+**Tip: Performance optimisation for dropdowns**
+
+For example, if you have Svelte components inside dropdowns, you can pass `ssr: false` to the view helper
+because you will never see a "blink" there. This will reduce the load on the server.
+
 ## More rake tasks
 
 This tasks are more for testing/playground purposes

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

@@ -61,7 +61,10 @@ module SvelteOnRails
         File.write('package.json', JSON.pretty_generate(pkg_js))
 
         if @local_npm_package_url
-           npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
+          npm_i.link_local_package(NPM_PACKAGE_NAME, @local_npm_package_url)
+
+          # npm does not resolve peer dependencies on local package url
+          npm_i.install_or_update_package('@hotwired/stimulus')
         else
           npm_i.install_or_update_package(NPM_PACKAGE_NAME)
         end
@@ -69,7 +72,7 @@ module SvelteOnRails
         npm_i.install_or_update_package('@types/node')
 
         js_i = SvelteOnRails::Installer::Javascript
-        init_stat = '../initializers/svelte.js'
+        init_stat = '@csedl/svelte-on-rails'
         js_i.append_import_statement(application_js_path, init_stat, "import '#{init_stat}';")
       end
 

data/lib/svelte_on_rails/installer/npm.rb

@@ -37,6 +37,7 @@ module SvelteOnRails
 
       def self.link_local_package(package_name, local_package_url)
         Dir.chdir(local_package_url) do
+          `npm unlink`
           `npm link`
         end
         Dir.chdir(Rails.root) do

data/lib/svelte_on_rails/lib/utils.rb

@@ -59,35 +59,50 @@ module SvelteOnRails
       def self.precompile(last_mtime = nil)
         config = SvelteOnRails::Configuration.instance
 
-        mtime = (File.exist?(config.ssr_dist_folder.join('last_mtime')) ? File.read(config.ssr_dist_folder.join('last_mtime')).to_f : 0.0)
-
         Dir.chdir(config.rails_root) do
 
           # run build
 
           cmd = "./node_modules/.bin/vite build --config vite-ssr.config.ts"
+
           stdout, stderr, status = Open3.capture3(cmd)
-          mtime2 = (File.exist?(config.ssr_dist_folder.join('last_mtime')) ? File.read(config.ssr_dist_folder.join('last_mtime')).to_f : 0.0)
+
+          warnings = stderr.to_s.split("\n")
+          errors_matcher = Regexp.new('(Could not resolve|failed to resolve)')
+          error_lines = warnings.select { |e| e.match(errors_matcher) }
+          have_error = error_lines.present? || status.to_s.match(/exit 1/)
 
           # error handling
 
           if stderr.present?
 
-            nothing_done = mtime2 == mtime
-            color = (nothing_done ? "\033[97;41m" : "\033[30;106m")
-
-            msg = "  +++  #{nothing_done ? 'ERROR' : 'WARNING'} compiling Svelte components#{nothing_done ? ' failed' : ''} («#{cmd}»)  +++  "
-            puts "#{color}#{msg}\033[0m"
-            errs = stderr.split("\n")
-            errs.each { |e| puts "#{color}  \033[0m #{e}" }
-            puts "#{color}  +++  End of error message  +++  \033[0m"
-            puts "#{color}  +++  Run «npm run build:ssr» on the console to see the original error message  +++  \033[0m"
-
-            if nothing_done
-              critical_lines = errs.select { |e| e.match(/Could not resolve/i) }
-              cl_str = if critical_lines.present?
-                     "#{critical_lines.join("\n")}\n\n"
-                   end
+            red_background = "\033[97;41m"
+            light_blue_background = "\033[30;106m"
+            clear_colors = "\033[0m"
+
+            msg = "  +++  #{have_error ? 'ERROR' : 'WARNING'} compiling Svelte components#{have_error ? ' failed' : ''} («#{cmd}»)  +++  "
+            puts "#{have_error ? red_background : light_blue_background}#{msg}#{clear_colors}"
+
+            warnings.each do |e|
+              if e.match(errors_matcher)
+                red_font = "\033[31m"
+                puts "#{red_background}  #{clear_colors}#{red_font} #{e}#{clear_colors}"
+              else
+                puts "#{light_blue_background}  #{clear_colors}#{e}"
+              end
+            end
+
+            if have_error
+              puts "#{red_background}  +++  End of error message  +++  #{clear_colors}"
+            else
+              puts "#{light_blue_background}  +++  End of compiling warnings  +++  #{clear_colors}"
+            end
+            puts "#{have_error ? red_background : light_blue_background}  +++  Run «npm run build:ssr» on the console to see the original error message  +++  #{clear_colors}"
+
+            if have_error
+              cl_str = if error_lines.present?
+                         "#{error_lines.join("\n")}\n\n"
+                       end
               raise "Svelte components compilation failed\n\n#{cl_str}Full message:\n+++\n#{stderr}+++\n\nYou can run «npm run build:ssr» on the console to see the original error message\n"
             end
 
@@ -104,6 +119,15 @@ module SvelteOnRails
           mtime_path = config.ssr_dist_folder.join('last_mtime')
           File.write(mtime_path, last_mtime.to_s)
         end
+
+      end
+
+      def self.puts_error(text)
+        red_background = "\033[97;41m"
+        clear_colors = "\033[0m"
+        text.split("\n").each do |line|
+          puts "#{red_background}  #{clear_colors}  #{line}"
+        end
       end
 
     end

data/lib/svelte_on_rails/renderer/renderer.rb

@@ -33,7 +33,8 @@ module SvelteOnRails
 
       unless status.to_s.match(/^pid [0-9]+ exit 0$/)
         cmp = "#{@component_files[:svelte_filename]} could not be rendered Server-side\n\n"
-        raise "#{cmp}Error output from render.js (stderr) =>\n+++\n" + stderr + "+++\n\nRender Svelte Server-side =>\n#{cmd}\n\n"
+        msg = "#{cmp}Error output from render.js (stderr) =>\n+++\n" + stderr + "+++\n\nRender Svelte Server-side =>\n#{cmd}\n\n"
+        utils.puts_error(msg)
       end
 
       begin

data/lib/svelte_on_rails/view_helpers.rb

@@ -46,10 +46,11 @@ module SvelteOnRails
       # set up html
 
       options[:class] = options[:class].to_s + ' svelte-component'
-      options[:class] += ' please-hydrate-me-svelte-on-rails' if hydrate
+      #options[:class] += ' please-hydrate-me-svelte-on-rails' if hydrate
       options[:data] ||= {}
       options[:data][:props] = props.to_json
-      options[:data][:svelte_component] = filename
+      options[:data][:svelte_component] = "/#{conf.components_folder + filename}"
+      options[:data][:controller] = 'svelte-on-rails'
 
       if ssr
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.13
+  version: 2.0.0
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -49,7 +49,6 @@ 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

data/templates/config_base/app/frontend/initializers/svelte.js

@@ -1,18 +0,0 @@
-
-import { initializeSvelteComponents, cleanupSvelteComponents } from '@csedl/svelte-on-rails';
-
-const components = import.meta.glob('/javascript/components/**/*.svelte', { eager: true });
-const componentsRoot = '/javascript/components';
-
-// Initialize Svelte components
-initializeSvelteComponents(componentsRoot, components, true);
-
-// Turbo event listener for page load
-document.addEventListener('turbo:load', () => {
-    initializeSvelteComponents(componentsRoot, components, true);
-});
-
-// Turbo event listener for cleanup before page cache
-document.addEventListener('turbo:before-cache', () => {
-    cleanupSvelteComponents(false);
-});