svelte-on-rails 0.0.30 → 0.0.31

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 343a3e6cdeed188bf622f4152032d851ab1db1b36cb36be7b4948df673d2cb13
-  data.tar.gz: cd28b8497abeff07f802e0ab71ac543ccb61e1504587ff79bcbbea5c1aeb2fec
+  metadata.gz: 2633f5ce568d2efa0e237ca750a61817a65824bd98ecc743c00b76230daf6c5c
+  data.tar.gz: 343f34a87f81e9a1e054993b8d4264acd3eb707c482ef74e1b86fab2ffe83282
 SHA512:
-  metadata.gz: 84a171bc560f4fe9e4ffe2ec5017f92a2e046f0e146f979f5282344ca20c195215730e6b43f2b798c810e6bc1d7840f1f095fd3a6af6b30f0b84e0589d4792cb
-  data.tar.gz: 8f091933d50d584686825c5c4a5dcd75f740194af2d81765ccc6b060aafd25c017a6e0f0a4b3b84c21c6e1d47a470b95b6c1761e0b20778df56aa0c0df07f2c5
+  metadata.gz: 53977d6319e3801b37bc89dcac688d9a2bbf59b3bd26c856b06eb187863ff5fa13920e8aa514949f00b17154df055d582ce6531b0688a1d3668bcd2509cb4c2d
+  data.tar.gz: b06e2417074271fd531a5d1b44e72522173c03ff90a43e3c3ffd0c21a50c80bb8aee524d70b3aa4fee279783c23b25cb5877121cba0f44ab42236f177ae157ed

data/README.md

@@ -33,6 +33,7 @@ If you have issues, please open one and contributors are welcome!
 - tested on ruby 3.2.2 and rails 7.1
 - 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 
 
 ## Installation from cero
 
@@ -221,8 +222,25 @@ Example from the rails console for a medium complex component
 
 ## Testing
 
-Testings are within the gem by `rspec`. And there is a [rails project](https://gitlab.com/users/sedl/projects) with 
-testings (based on playwright) where the npm package and this gem is tested together.
+Testings are within the gem by `rspec`. Mainly there are 2 types of tests:
+
+**compiler tests**
+
+The folder `spec/rails_vite_test_app` holds a package.json 
+with the `@csedl/svelte-on-rails` package, mainly because of the 
+peer dependencies necessary for ssr tests, and some example components.
+This is mainly for testing the compiler.
+
+**installer tests**
+ 
+The folder `spec/installer_tests` is for testing the installer: This folder, mainly, is emptied
+before test. Tests there are starting by `rails new` followed
+by running the installer.
+
+NOTE: Theese tests rely on rvm and fixed to specific ruby versions, which 
+must be installed on your machine.
+If you are on a different ruby version manager and you want to contribute,
+PR are welcome.
 
 ## Licence
 

data/lib/svelte_on_rails/compiler/compile.js

@@ -2,7 +2,11 @@
 
 import path from 'path';
 import fs from 'fs/promises';
-import {rawResolver, stringPlugin, ssrExternals} from "./customPlugins.js";
+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);
@@ -10,6 +14,21 @@ 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>');
@@ -28,18 +47,6 @@ const fileName = path.basename(inputFile, '.svelte');
 const outputFile = path.join(outputDir, `${fileName}.js`);
 const outputCss = path.join(outputDir, `${fileName}.css`);
 
-// Path to node_modules in the gem
-const gemNodeModules = path.join(gemPath, 'node_modules');
-
-// Dynamic imports of build tools from the gem
-const { rollup } = await import(path.join(gemNodeModules, 'rollup', 'dist', 'rollup.js'));
-const svelte = await import(path.join(gemNodeModules, 'rollup-plugin-svelte', 'index.js')).then(m => m.default);
-const resolve = await import(path.join(gemNodeModules, '@rollup', 'plugin-node-resolve', 'dist', 'es', 'index.js')).then(m => m.default);
-const commonjs = await import(path.join(gemNodeModules, '@rollup/plugin-commonjs', 'dist', 'es', 'index.js')).then(m => m.default);
-const url = await import(path.join(gemNodeModules, '@rollup', 'plugin-url', 'dist', 'es', 'index.js')).then(m => m.default);
-const css = await import(path.join(gemNodeModules, 'rollup-plugin-css-only', 'dist', 'index.mjs')).then(m => m.default);
-const { sveltePreprocess } = await import(path.join(gemNodeModules, 'svelte-preprocess', 'dist', 'index.js'));
-
 const rollupConfig = {
     input: inputFile,
     output: {
@@ -47,36 +54,26 @@ const rollupConfig = {
         format: 'esm',
     },
     external: [
-        // Node.js built-ins that should not be bundled
         'fs', 'path', 'url', 'module', 'http', 'https', 'zlib', 'stream', 'buffer',
-        // Browser-specific modules ignored during SSR
         'axios', 'form-data'
     ],
     onwarn(warning, warn) {
-        // Ignore certain warnings, e.g., Circular Dependencies
-        if (warning.code === 'CIRCULAR_DEPENDENCY') {
-            return;
-        }
-        // Ignore warnings for empty chunks or unused external modules
-        if (warning.code === 'EMPTY_BUNDLE' || warning.code === 'UNUSED_EXTERNAL_IMPORT') {
-            return;
-        }
+        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
             },
-            // Ignore browser-specific modules during SSR
             onwarn(warning, handler) {
-                if (warning.code === 'MISSING_EXPORT' && warning.exporter.includes('axios')) {
-                    return;
-                }
+                if (warning.code === 'MISSING_EXPORT' && warning.exporter.includes('axios')) return;
                 handler(warning);
             }
         }),
@@ -93,18 +90,16 @@ const rollupConfig = {
         resolve({
             dedupe: ['svelte'],
             exportConditions: ['svelte', 'server'],
-            modulePaths: [gemNodeModules],
+//            modulePaths: [appNodeModules, gemNodeModules], // Prioritize app's node_modules
+            modulePaths: [appNodeModules], // Prioritize app's node_modules
             extensions: ['.mjs', '.js', '.cjs', '.ts'],
-            // Prefer Node-specific modules
             mainFields: ['main', 'module']
         }),
         commonjs({
-            // Explicitly handle CommonJS modules
             include: [/node_modules/],
-            // Transform mixed ES/CommonJS modules
             transformMixedEsModules: true
         }),
-        ssrExternals() // New plugin to ignore axios and form-data
+        ssrExternals()
     ],
 };
 

data/lib/svelte_on_rails/compiler/compiler.rb

@@ -2,114 +2,119 @@ module SvelteOnRails
 
   class Compiler
 
-      require 'open3'
-      def initialize(filename, base_path: SvelteOnRails::Configuration.instance.components_folder_full)
+    require 'open3'
 
-        utils = SvelteOnRails::Lib::Utils
-        @files = utils.component_files(filename, base_path: base_path)
+    def initialize(filename, base_path: SvelteOnRails::Configuration.instance.components_folder_full)
 
-      end
+      utils = SvelteOnRails::Lib::Utils
+      @files = utils.component_files(filename, base_path: base_path)
+
+    end
 
-      # compiler
-      def compile_if_changes
+    # compiler
+    def compile_if_changes
 
-        # letzte Änderung innerhalb des ordners ermitteln
+      # letzte Änderung innerhalb des ordners ermitteln
 
-        watch_changes = SvelteOnRails::Configuration.instance.watch_changes?
-        ts_file = SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
+      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)
+      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
+                       # 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
-                         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
+                       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_js_file
+      @files[:compiled_file] + '.js'
+    end
 
-      def compiled_css_file
-        @files[:compiled_file] + '.css'
-      end
+    def compiled_css_file
+      @files[:compiled_file] + '.css'
+    end
 
-      def compiled_file
-        @files[:compiled_file]
-      end
+    def compiled_file
+      @files[:compiled_file]
+    end
+
+    def compile
 
-      def compile
+      start_time = Time.now
 
-        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
 
-        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(' ')
 
-        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(cmd, chdir: SvelteOnRails::Configuration.instance.rails_root)
+        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
-
-        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')
+      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
-        SvelteOnRails::RenderServerSide.reset_dist
-        cnf = SvelteOnRails::Configuration.instance
-        frontend_folder = cnf.frontend_folder_full
-        sveltes = Dir.glob(cnf.frontend_folder_full.join('**/*.svelte'))
-        sveltes.each_with_index do |file, ind|
-          comp_name = file.to_s[(cnf.frontend_folder_full.to_s.length + 1)..-1]
+    def self.reset_and_compile_all
+      SvelteOnRails::RenderServerSide.reset_dist
+      cnf = SvelteOnRails::Configuration.instance
+      frontend_folder = cnf.frontend_folder_full
+      sveltes = Dir.glob(cnf.frontend_folder_full.join('**/*.svelte'))
+      sveltes.each_with_index do |file, ind|
+        comp_name = file.to_s[(cnf.frontend_folder_full.to_s.length + 1)..-1]
 
-          n = SvelteOnRails::RenderServerSide.new(comp_name, base_path: frontend_folder)
-          n.compile
+        n = SvelteOnRails::RenderServerSide.new(comp_name, base_path: frontend_folder)
+        n.compile
 
-          puts "compiled #{ind + 1}/#{sveltes.length}: #{comp_name}"
+        puts "compiled #{ind + 1}/#{sveltes.length}: #{comp_name}"
 
-        end
       end
-
     end
+
+  end
 end

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

@@ -0,0 +1,14 @@
+<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>

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

@@ -1,3 +1,5 @@
 %p Example view
 
-= svelte_component "SvelteOnRailsHelloWorld", items: ['attributes', 'are', 'parsed']
+= 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"

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -18,6 +18,7 @@ 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/Pug.svelte
           app/frontend/javascript/components/sub/NestedComponent.svelte
           app/frontend/javascript/nestedJavascript.js
           app/frontend/javascript/nestedJavascriptToggled.js
@@ -73,11 +74,9 @@ namespace :svelte_on_rails do
     # Hello World
 
     puts '-' * 80
-    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_files)
-    end
+
+    hw_i = SvelteOnRails::Installer::HelloWorld
+    hello_world_path = hw_i.install_hello_world(hello_world_files)
 
     # finish
 
@@ -144,7 +143,7 @@ namespace :svelte_on_rails do
       puts "toggled svg.svg and nestedJavascriptToggled.js"
     else
       puts "toggled svg.svg and nestedJavascriptToggled.js back to original"
-       FileUtils.touch(toggler)
+      FileUtils.touch(toggler)
     end
 
     puts '+++'