svelte-on-rails 0.0.32 → 0.0.34

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b437bee130ee620c17fd1874e37032e316f02e14bb6c90863534c9c3131776e3
-  data.tar.gz: bbfe5547994bfbd95b7e886c998aa233eb7c850114449bf0e34659e0c3bf2652
+  metadata.gz: 3fdbb3868bbac50f65971957df0748db4c578fc317bab77065e64155b5d9c2d9
+  data.tar.gz: b30194ddee3daf2742d1d21e3d63ca835ff60123f6514dade9c5b6d930e0bc82
 SHA512:
-  metadata.gz: 52bb2bd60cf155cab50966649643c675c4584367b8a7de2c6179bd0355e48952a05f10e6a5c67d5bd4f151d303bbea69b26937c36d10dff28e6364c434f7ba9d
-  data.tar.gz: ab731d288b0b4e91c7d4df6f8935505e5c3e38799909112d5f3cc380924fa20e2f31787744c453111c7946b061d0499e7e0dee74411568f406aa475ee1005319
+  metadata.gz: dbf57486fba0f80bb50077243d7781b3d4ea3e21adf8c98dd54a6df7e71c416db846072e515c85296652db815d8b0423c528491ec5560edd998bdd614d28ad76
+  data.tar.gz: 9db84e5d1ad4f60cc0a9bb1e5c69c81f40a1c2466fc67f4f27faa8a53148f66f2cfe5636884960573db1e8f99d8d4e8223fe3534f1083d0297732970b4172df1

data/README.md

@@ -1,4 +1,4 @@
-# Svelte. On rails! Awesome.
+# Svelte on Rails
 
 Seamless and robust Svelte in Rails integration.
 
@@ -80,6 +80,14 @@ It tells you all what he is doing.
 At the end, you just have to (re-) start your server
 and you will see a Svelte component.
 
+Then, you can run
+
+```bash
+rails svelte_on_rails:remove_hello_world
+```
+
+and start coding.
+
 ## Minimal Installation
 
 within the app folder
@@ -143,6 +151,24 @@ Among others there are
 - `import { someFunction } from '../customJavascript.js';`
 - `import Child from './Child.svelte';`
 
+### Precompile assets
+
+When the rails app runs `assets:precompile` a additional rake task is triggered: `rails svelte_on_rails:reset_and_compile_all`.
+
+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:
+
+```
+--------------------------------------------------------------------------------
+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
+--------------------------------------------------------------------------------
+```
+
+on the console.
+
 ## Option `ssr: :auto`
 
 `ssr: :auto` is the default option, as set on config file and can be overridden on the view helper.
@@ -242,16 +268,19 @@ 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**
+**Fully complete tests**
  
-The folder `spec/installer_tests` is for testing the installer: This folder, mainly, is emptied
+The folder `spec/installer_tests`, mainly, is emptied
 before test. Tests there are starting by `rails new` followed
 by running the installer.
 
-NOTE: Theese tests are running within your current ruby environment. If you want
-to test if a installer with a specific ruby version is running you must switch
-this by your development environment. And theese tests are killing all puma processes
-before and after run.
+NOTE: Theese tests are dependend on your environment, including the running ruby version!
+I am woring on `rvm` If you work on a different environment, tests may have to be adopted.
+
+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.
 
 Development helpers:
 
@@ -269,6 +298,13 @@ rake svelte_on_rails:replace_test_app_hello_world
 
 Overwrites the hello world files within this test app from template.
 
+As a rule of thumb, for **component tests**, before each test, templates are copied onto the tests-app, and be tested by playwright and the rails server should remain running at the end of each component test. 
+On that way the templates easily can be developped and tested, the end user has maximum function stability and the developer always see the latest changes.
+
+Idea is to have all working examples within the template and included in the testing scope as in the hello world component.
+
+... for having a 100% WYSIWYG and a easy maintainable package so that contributors are motivated to come into my project. 
+
 ## Licence
 
 License is MIT

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

@@ -37,11 +37,10 @@ module SvelteOnRails
       def svelte_on_rails
         utils = SvelteOnRails::Installer::Utils
         npm_i = SvelteOnRails::Installer::Npm
-        utils.write_templates(['config/svelte_on_rails.yml'])
+        utils.write_templates(['svelte_on_rails_vite_base'])
         npm_i.install_or_update_package('@csedl/svelte-on-rails')
         # insert_initializer
         uts = SvelteOnRails::Installer::Utils
-        uts.write_templates(['app/frontend/initializers/svelte.js'])
         # add import statements
         js_i = SvelteOnRails::Installer::Javascript
         init_stat = '../initializers/svelte.js'
@@ -74,7 +73,7 @@ module SvelteOnRails
         puts '-' * 80
 
         hw_i = SvelteOnRails::Installer::HelloWorld
-        @hello_world_path = hw_i.install_hello_world(HELLO_WORLD_FILES)
+        @hello_world_path = hw_i.install_hello_world(['rails_vite_hello_world'], app_root: nil, force: true, silent: true)
       end
 
       def finish
@@ -90,18 +89,18 @@ module SvelteOnRails
         puts "Happy coding!"
       end
 
-      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
-          app/frontend/javascript/components/sub/NestedComponent.svelte
-          app/frontend/images/svg.svg
-          app/frontend/images/check-circle-green.png
-      ]
+      # 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
+      #     app/frontend/javascript/components/sub/NestedComponent.svelte
+      #     app/frontend/images/svg.svg
+      #     app/frontend/images/check-circle-green.png
+      # ]
 
       private
 

data/lib/svelte_on_rails/installer/hello_world.rb

@@ -2,15 +2,13 @@ module SvelteOnRails
   module Installer
     module HelloWorld
 
-      def self.install_hello_world(files, force: false, app_root: nil)
+      def self.install_hello_world(templates, force: false, app_root: nil, silent: false)
 
         utils_i = SvelteOnRails::Installer::Utils
 
         # write templates
 
-
-        utils_i.write_templates(files, ask_for_overwrite: !force, app_root: app_root)
-
+        utils_i.write_templates(templates, ask_for_overwrite: !force, app_root: app_root, silent: silent)
 
         # route
 
@@ -26,22 +24,33 @@ module SvelteOnRails
           puts "route «#{route}» already exists, skipping."
           url
         elsif rr
-          utils_i.add_route("  get \"#{route.sub('#', '/')}\"")
+          utils_i.add_route("  get \"#{route.sub('#', '/')}\"", app_root: app_root)
           url
         else
-          utils_i.add_route('  root "svelte_on_rails_hello_world#index"')
+          utils_i.add_route('  root "svelte_on_rails_hello_world#index"', app_root: app_root)
           root_url
         end
 
       end
 
-      def self.remove_hello_world(files)
+      def self.remove_hello_world(templates = ['rails_vite_hello_world'], app_root: nil, ask: true)
 
         utils = SvelteOnRails::Installer::Utils
-        if utils.ask_yn('Remove the Hello World component?')
-          utils.remove_files(files)
-          utils.remove_line_from_file('config/routes.rb', 'svelte_on_rails_hello_world')
+
+        files = utils.template_paths(templates, app_root: app_root)
+
+        existing_files = files.dup.select { |f| File.exist?(f[2]) }
+
+        return unless existing_files.any?
+        if ask
+          question = "Remove Hello World component?\nThe following files will be removed:\n#{existing_files.map { |f| f[1] }.join("\n")}"
+          return unless utils.ask_yn(question)
+        end
+
+        existing_files.each do |f|
+          File.delete(f[2])
         end
+        puts "Removed Hello World component files."
       end
 
     end

data/lib/svelte_on_rails/installer/utils.rb

@@ -171,37 +171,61 @@ module SvelteOnRails
         end
       end
 
-      def self.write_templates(template_paths, ask_for_overwrite: true, app_root: nil)
+      def self.write_templates(templates, ask_for_overwrite: true, app_root: nil, silent: false)
 
-        a_root = app_root_path(app_root)
 
-        existing = template_paths.select { |p| File.exist?(a_root.join(p)) }
+        paths = template_paths(templates, app_root: app_root)
+
+
+        existing = paths.dup.select { |p| File.exist?(p[2]) }
+
 
         if existing.present? && ask_for_overwrite
           begin
-            puts "#{'Template'.pluralize(existing.length)} already exists:\n#{existing.join("\n")}.\nOverwrite? (y/n)"
+            puts "#{'File'.pluralize(existing.length)} already exists:\n#{existing.map { |p| p[1] }.join("\n")}.\nOverwrite? (y/n)"
             continue = STDIN.gets.chomp.downcase[0]
           end until ['y', 'n'].include?(continue)
           if continue == 'n'
-            puts "Skipping write #{'template'.pluralize(template_paths.length)}."
+            puts "Skipping write #{'template'.pluralize(templates.length)}."
             return
           end
         end
 
-        template_paths.each do |p|
-          source_path = File.expand_path('rails_template', __dir__) + '/' + p
+        paths.each do |p|
 
-          dest_path = a_root.join(p)
-          v = (File.exist?(dest_path) ? 'replaced' : 'created')
+          v = (File.exist?(p[2]) ? 'replaced' : 'created')
 
-          FileUtils.mkdir_p(File.dirname(a_root.join(p)))
-          FileUtils.cp(source_path, a_root.join(p))
+          FileUtils.mkdir_p(File.dirname(p[2]))
+          FileUtils.cp(p.first, p[2])
 
-          puts "#{v}: #{p}"
+          puts "#{v}: #{p[1]}" unless silent
         end
 
       end
 
+      def self.template_paths(templates, app_root: nil)
+        paths = []
+        app_root = app_root_path(app_root)
+
+        templates.each do |t|
+          templates_folder = File.expand_path("../../../templates", __dir__)
+          template_root = templates_folder + '/' + t
+          raise "ERROR: Template «#{t}» not found:\n#{template_root}" unless File.directory?(template_root)
+
+          files = Dir.glob(template_root + '/**/*').select { |e| File.file? e }
+          files.each do |f|
+            paths.push(
+              [
+                f,
+                f.gsub(template_root + '/', ''),
+                app_root.join(f.gsub(template_root + '/', ''))
+              ]
+            )
+          end
+        end
+        paths
+      end
+
       def self.ask_yn(question)
         begin
           puts "#{question} (y/n)"
@@ -221,9 +245,9 @@ module SvelteOnRails
         end
       end
 
-      def self.add_route(route)
+      def self.add_route(route, app_root: nil)
 
-        file_path = 'config/routes.rb'
+        file_path = app_root_path(app_root).join('config/routes.rb')
 
         # Read the file content
         content = File.read(file_path)

data/lib/tasks/svelte_on_rails_tasks.rake

@@ -1,9 +1,9 @@
-if defined?(Rails)
+if defined?(Rails) && Rake::Task.task_defined?("assets:precompile")
   Rake::Task["assets:precompile"].enhance do
-    puts '-'*80
+    puts '-' * 80
     SvelteOnRails::Compiler.reset_and_compile_all
     puts "Svelte on Rails: Reset dist and compile-all executed"
-    puts '-'*80
+    puts '-' * 80
   end
 end
 
@@ -46,7 +46,7 @@ namespace :svelte_on_rails do
 
     puts '+++'
 
-    toggler = File.expand_path('../svelte_on_rails/installer/rails_template', __dir__) + '/hello_world_toggler'
+    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')
@@ -69,7 +69,7 @@ namespace :svelte_on_rails do
 
   desc "Compile all Svelte components"
   task :reset_and_compile_all do
-    #SvelteOnRails::RenderServerSide.reset_and_compile_all
+    SvelteOnRails::Compiler.reset_and_compile_all
   end
 
   desc "Build test app within spec/installer_tests"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.32
+  version: 0.0.34
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -40,18 +40,6 @@ files:
 - lib/svelte_on_rails/installer/hello_world.rb
 - lib/svelte_on_rails/installer/javascript.rb
 - lib/svelte_on_rails/installer/npm.rb
-- lib/svelte_on_rails/installer/rails_template/app/controllers/svelte_on_rails_hello_world_controller.rb
-- lib/svelte_on_rails/installer/rails_template/app/frontend/images/atom.svg
-- lib/svelte_on_rails/installer/rails_template/app/frontend/images/check-circle-green.png
-- lib/svelte_on_rails/installer/rails_template/app/frontend/images/svg.svg
-- lib/svelte_on_rails/installer/rails_template/app/frontend/initializers/svelte.js
-- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/Pug.svelte
-- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
-- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/components/sub/NestedComponent.svelte
-- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/nestedJavascript.js
-- lib/svelte_on_rails/installer/rails_template/app/frontend/javascript/nestedJavascriptToggled.js
-- lib/svelte_on_rails/installer/rails_template/app/views/svelte_on_rails_hello_world/index.haml
-- lib/svelte_on_rails/installer/rails_template/config/svelte_on_rails.yml
 - lib/svelte_on_rails/installer/svelte.rb
 - lib/svelte_on_rails/installer/utils.rb
 - lib/svelte_on_rails/installer/vite.rb

data/lib/svelte_on_rails/installer/rails_template/app/controllers/svelte_on_rails_hello_world_controller.rb

@@ -1,6 +0,0 @@
-class SvelteOnRailsHelloWorldController < ApplicationController
-
-  def index
-  end
-
-end

data/lib/svelte_on_rails/installer/rails_template/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/lib/svelte_on_rails/installer/rails_template/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/lib/svelte_on_rails/installer/rails_template/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);
-});

data/lib/svelte_on_rails/installer/rails_template/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>

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

@@ -1,66 +0,0 @@
-<script>
-    import svgRaw from '../../images/svg.svg?raw'
-    //import svg from '../../images/svg.svg'
-    import png from '../../images/check-circle-green.png'
-    import Nested from './sub/NestedComponent.svelte'
-    import {nestedJavascriptFunction} from '../nestedJavascript.js'
-    export let items
-    let count = 0;
-
-    function increment() {
-        count += 1;
-    }
-</script>
-
-<span class="svelte-component-wrapper">
-    <h1>Svelte is here!</h1>
-
-    <hr/>
-    <p>click the button and check if the component is alive</p>
-    <button on:click={increment}>Increment: {count}</button>
-
-    <hr/>
-    <ul>
-        {#each items as item}
-            <li>{item}</li>
-        {/each}
-    </ul>
-
-    <hr/>
-    <span class="wrap-svg">{@html svgRaw}</span>
-    <!--    <img alt="svg ERROR" src={svg} />-->
-    <img alt="png ERROR" src={png} />
-
-    <hr/>
-    <Nested />
-
-    <hr/>
-    <p>{nestedJavascriptFunction()}</p>
-</span>
-
-<style>
-    button {
-        background-color: darkred;
-        color: white;
-        padding: 10px;
-        border: none;
-        cursor: pointer;
-    }
-
-    .svelte-component-wrapper {
-        border: 1px solid black;
-        padding: 10px;
-        margin: 10px;
-        background-color: #efefef;
-        display: inline-block;
-        box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
-        -webkit-box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
-        -moz-box-shadow: 2px 3px 16px -1px rgba(0, 0, 0, 0.75);
-    }
-    img, .wrap-svg {
-        display: inline-block;
-        width: 30px;
-        height: 30px;
-        margin: 30px;
-    }
-</style>

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

@@ -1 +0,0 @@
-<p>Nested Svelte Component</p>

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

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

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

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

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

@@ -1,5 +0,0 @@
-%p Example view
-
-= 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/svelte_on_rails/installer/rails_template/config/svelte_on_rails.yml

@@ -1,23 +0,0 @@
-frontend_folder: "app/frontend"
-# the entrypoint that is your web root, example for vite: where @ points to
-# relative to Rails.root
-
-components_folder: "javascript/components"
-# relative to frontend_folder
-# where your svelte components are located
-
-ssr: :auto
-# options: true, false, :auto
-# :auto: render server side if request is initial request (works only with turbo, because it checks for the X-Turbo-Request-ID header)
-# when not server-side rendered the components must be built as custom elements, see node-package @csedl/svelte-on-rails
-
-development:
-  watch_changes: true
-  # Check on every request if any file within the svelte components folder have changed, for recompiling
-  # Case sensitive path checking, even the file system is case insensitive
-  # Make sure this ist set to tue for development and test, but not for production
-
-test:
-  watch_changes: true
-
-production: