svelte-on-rails 0.0.40 → 0.0.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3aba14bf1be2f5922836ead6b80d3ec3c095b434eca70653615c1494972aa08c
-  data.tar.gz: f5be349e7db50271dbfd7d353d71788149da16b82a69934badc4f0769dc610e5
+  metadata.gz: c46f6cb43c90617bc4798072b58a35e81a311886a858c379224216fc63c03d3e
+  data.tar.gz: 2bd3286eac9420225ac3f641d1cf783a84f48f575d69c0bce53a9b1da9d9d262
 SHA512:
-  metadata.gz: 129581abaf1f4dfc69b38210fbaed7e467e6a0c9813ddd5412256092f9fa7d26bea8440e59974ef9a34277627ccb83e4f9897c894e8ae057894228093ce703ab
-  data.tar.gz: b4653a855ad17d7f5f4953155089b3a62db3068e6099ef6853ebaa870ab9b7677c6c49dcc138ac71789d16e65f0c489550668c6e9b75ec557cf3a04b9b65266e
+  metadata.gz: 9e4ae887620aaabd737fc30864bed6eea15dcc9bb47e6ef9db4ab1e38f0ea96a1643b2f12cd81aeadf2c636e6e1575920da2efca62886e877a71dbe25b2818a2
+  data.tar.gz: 821084886d515faf8e68440a001bc4a3fd5d310c6068efbb1578ca558774f0ad731e5cf13f142b3223db7e5a2b380775319de9ce3e75a54e597ff59ba1a505cc

data/README.md

@@ -263,10 +263,20 @@ Example from the rails console for a medium complex component
 
 ## Contributors Guide
 
-Tests are based on the included templates, like the `hello world template` and on the installer.
+Contributors welcome!
+
+After downloaded the gem, please run the task
+
+```bash 
+rake svelte_on_rails:create_contributor_configs_file
+```
+and define a `generated_test_app_folder_path` (required) for apps, generated for the testings.
 
-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.
+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.
 
 **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 +303,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/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/tasks/svelte_on_rails_tasks.rake

@@ -71,4 +71,31 @@ namespace :svelte_on_rails 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__)
+
+    if File.exist?(path)
+      puts "Config file for Contributors already exists: file://#{path}"
+      puts 'nothing done.'
+      exit
+    end
+
+    content = <<-END
+#local_npm_package_path: /path/to/my/local/csedl-svelte-on-rails-main
+
+# 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
+
+generated_test_app_folder_path: /destination/folder/for/generated/test/app
+
+# 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/rails_vite_hello_world/app/controllers/svelte_on_rails_hello_world_controller.rb

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

data/templates/rails_vite_hello_world/app/frontend/images/atom.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="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

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

@@ -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/templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+<p>Example view</p>
+
+<%= 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/templates/svelte_on_rails_vite_base/app/frontend/initializers/svelte.js

@@ -0,0 +1,18 @@
+
+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/templates/svelte_on_rails_vite_base/config/svelte_on_rails.yml

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svelte-on-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.40
+  version: 0.0.42
 platform: ruby
 authors:
 - Christian Sedlmair
@@ -52,6 +52,18 @@ files:
 - lib/svelte_on_rails/renderer/utils.js
 - lib/svelte_on_rails/view_helpers.rb
 - lib/tasks/svelte_on_rails_tasks.rake
+- 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/javascript/components/SvelteOnRailsHelloWorld.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/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
 homepage: https://gitlab.com/sedl/svelte-on-rails
 licenses:
 - MIT