svelte-on-rails 0.0.40 → 0.0.41

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3aba14bf1be2f5922836ead6b80d3ec3c095b434eca70653615c1494972aa08c
-  data.tar.gz: f5be349e7db50271dbfd7d353d71788149da16b82a69934badc4f0769dc610e5
+  metadata.gz: 683e0e4881fc72969224d9792ba06ff4049c19adbcf55bc8e0ba817ba4be48d4
+  data.tar.gz: 6a9ed00119ddbdb2b9a095458b010150ecd938d751e9112b26629343bc782656
 SHA512:
-  metadata.gz: 129581abaf1f4dfc69b38210fbaed7e467e6a0c9813ddd5412256092f9fa7d26bea8440e59974ef9a34277627ccb83e4f9897c894e8ae057894228093ce703ab
-  data.tar.gz: b4653a855ad17d7f5f4953155089b3a62db3068e6099ef6853ebaa870ab9b7677c6c49dcc138ac71789d16e65f0c489550668c6e9b75ec557cf3a04b9b65266e
+  metadata.gz: a166ff91777a7969f50874feb855c522aeac968dae0c6f1659b92ced9ac461683cbac34eee6f3999b961db6669732dbcbea41d3f659f621a3c198fc6b3204e76
+  data.tar.gz: dd7c49785a50f484c936fbac6f5a8000fc46d6fc7165113c55a7e437b4b2ac20a05a1da4d9311b24d8757d307fa14061c35b2fdf607614502bd6ff24aa0ee948

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.41
 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