svelte-on-rails 0.0.1 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '04309bc3d95848982b66c90f7395f9d25c67c9adf9a65f4db968d7eb05c54542'
-  data.tar.gz: ac4b7759f6ea6ddc73117ffd1567a7ae504a1d867bbd33561c48607ea8441c16
+  metadata.gz: 63fd8216a8e992b4357b94950c46cdba9d107b64d1b3d3d6b15a1b7c7f3e92ea
+  data.tar.gz: 034fc6c768eb1645acd934374df229f3eca5c9484fd32af8260be3118214225e
 SHA512:
-  metadata.gz: be481f02888b3fa42e258ae52c7a08c9d7e79236a583dace0dbe1c73acbf4b79db67cf4e9d4c8322f7310792560ff2bef30b12db4667fa2c77d2eedf6f296b5b
-  data.tar.gz: d5f64ab65a7e8417905c30f4657dd941a7d7e174e786fd4ecd8c6bc65596cfc69d9776246b7c17d43dd2082c3044eacd04144329406f7c7b8cc5e5dac61affa9
+  metadata.gz: ac2920e177aa42e613519a5a06617c475186a97b838526df66857b7048a365107c8121c6a00d7c52ae6c1d85042b84712ca7add36d0a06d1c0ca19b933d51afc
+  data.tar.gz: a0cec2eda153ab725622906c0242c1563a626dd1b27e36d7cc5d7ee911dd41f14ac84f782c9e004bb6c86ff3b3b27c4aac2c92f64c06ce22bcad1793c8f55355

data/README.md

@@ -1,10 +1,9 @@
-# Mount Svelte
+# Svelte on rails
 
-Render Svelte Components server-side via rollup.
-For performance reasons, compilation only happens when some code has changed.
-Although it should be independent, I developed and tested everything on `vite_rails`.
-
-## Status / Notice
+Seamless and robust Svelte in Rails integration. 
+Can render server-side, always or only on first request, and 
+handle subsequent turbo requests as custom elements without shadow-dom. 
+Server-side compilation via rollup.
 
 Server-side rendering is the bottleneck in this pipeline. Although rollup is mighty,
 this gem is in a early state and there sure are limitations.
@@ -16,34 +15,54 @@ so `require` for example may not work in Svelte components.
 To check which import statements work, please check the components in the 
 `spec/rails-vite-test-app/app/frontend/javascript/components` gem.
 
+This all is developed on Rails-7 together with `vite_rails`.
+
+Thanks to [chrisward](https://www.npmjs.com/~crisward), [shakacode](https://github.com/shakacode/react_on_rails) 
+and [ElMassimo](https://github.com/ElMassimo) because they all helped me with theyr gems.
+
 ## Requirements
 
 - actual node installed on the server
-- I tested it all on Rails-7
+- tested on ruby 3.2.2 and rails 7.1
+- svelte (see: [install svelte on vite/rails](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk))
 
 ## Installation
 
+add
 ```ruby
-gem "mount-svelte"
+gem "svelte-on-rails"
+```
+to your gemfile
 
-# and execute
-$ rails mount_svelte:install
-#=> writes config/mount_svelte.yaml 
-#=> all configs there
-#=> required configs: frontend_folder and components_folder
+and run
+
+```ruby
+$ rails svelte_on_rails:install
 ```
 
-setup the npm module [@csedl/mount-svelte](https://www.npmjs.com/package/@csedl/mount-svelte) on the client side
+this creates a config file, please check the comments there.
+
+setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side
 
 ## Usage
 
 ```haml
-= svelte_component("myComponent", props = { items: ['item1', 'item2'] })
+= svelte_component("myComponent", items: ['item1', 'item2'])
 ```
 
-## Option render_server_side: :auto
+### Import statements
+
+For check which statements are working and actively tested, please check the 
+[components folder](https://gitlab.com/sedl/svelte-on-rails/-/tree/main/spec/rails-vite-test-app/app/frontend/javascript/components?ref_type=heads) within the gem specs.
 
-default: `true`
+Among others there are
+
+- `import svg from '../example.svg?raw'`
+- `<script lang="ts">` (svelte component with typescript syntax)
+- `import { someFunction } from '../customJavascript.js';`
+- `import Child from './Child.svelte';`
+
+## Option render_server_side: :auto
 
 Works with `hotwired/turbo` only
 
@@ -54,16 +73,10 @@ then does nothing server-side but add a tag. Assuming the filename is `HelloWorl
 ```haml
 = svelte_component("HelloWorld", message: "Property from the server", render_server_side: :auto, class: "box")
 #=> output on the rails-console:
-Added Svelte-Tag for custom element: «<hello-world message='Property from the server' class='box svelte-component'></hello-world>»
+Added Svelte-Tag for custom element: «<hello-world-svelte class='box svelte-component'></hello-world>»
 ```
 
-The functionality of the javascript part to create the custom element is not 
-included in this gem and its dependent node-module.
-
-Svelte can be built as a custom element, but that way svelte would add a `shadow dom`
-so that global styles would not be applied to the components.
-However, with [svelte-tag](https://www.npmjs.com/package/svelte-tag) (i am using this) or its fork `svelte-retag` you can build
-a custom element without shadow dom.
+If configured on the npm module, it instaniates a custom element and adopts it to the element.
 
 This works perfectly with hotwired/turbo because the custom elements are built on the 
 first page load and survive page visits from turbo. If you then visit a page that 
@@ -108,6 +121,10 @@ Example from the rails console for a medium complex component
   - => happens on every request
 - Completed 200 OK in 521ms (Views: 520.2ms | ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.3ms)
 
+Best is to work with the `render_server_side: :auto` option, which you can
+set as default on the config file. Then, the server does the SSR only on 
+initial request and the rest happens on the frontend.
+
 ## Testing
 
 Testings are within the gem by `rspec`. And there is a [rails project](https://gitlab.com/users/sedl/projects) with 

data/lib/svelte-on-rails.rb

@@ -0,0 +1,13 @@
+require "svelte_on_rails/configuration"
+require "svelte_on_rails/view_helpers"
+require "svelte_on_rails/render_server_side"
+require "svelte_on_rails/railtie" if defined?(Rails)
+
+module SvelteOnRails
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+  end
+end

data/lib/{mount_svelte → svelte_on_rails}/configuration.rb

@@ -1,6 +1,6 @@
 require "yaml"
 
-module MountSvelte
+module SvelteOnRails
   class Configuration
 
     def self.instance
@@ -56,7 +56,7 @@ module MountSvelte
     private
 
     def load_yaml_config
-      config_path = Rails.root.join("config", "mount_svelte.yml")
+      config_path = Rails.root.join("config", "svelte_on_rails.yml")
       return unless File.exist?(config_path)
 
       config_data = YAML.load_file(config_path)

data/lib/{mount_svelte → svelte_on_rails}/node_modules/@types/estree/README.md

@@ -1,15 +1,15 @@
-# Installation
-> `npm install --save @types/estree`
-
-# Summary
-This package contains type definitions for estree (https://github.com/estree/estree).
-
-# Details
-Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree.
-
-### Additional Details
- * Last updated: Mon, 24 Mar 2025 07:34:10 GMT
- * Dependencies: none
-
-# Credits
-These definitions were written by [RReverser](https://github.com/RReverser).
+# Installation
+> `npm install --save @types/estree`
+
+# Summary
+This package contains type definitions for estree (https://github.com/estree/estree).
+
+# Details
+Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree.
+
+### Additional Details
+ * Last updated: Mon, 24 Mar 2025 07:34:10 GMT
+ * Dependencies: none
+
+# Credits
+These definitions were written by [RReverser](https://github.com/RReverser).

data/lib/{mount_svelte → svelte_on_rails}/node_modules/@types/resolve/README.md

@@ -1,16 +1,16 @@
-# Installation
-> `npm install --save @types/resolve`
-
-# Summary
-This package contains type definitions for resolve (https://github.com/browserify/resolve).
-
-# Details
-Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/resolve.
-
-### Additional Details
- * Last updated: Thu, 21 Apr 2022 18:01:43 GMT
- * Dependencies: none
- * Global values: none
-
-# Credits
-These definitions were written by [Mario Nebl](https://github.com/marionebl), [Klaus Meinhardt](https://github.com/ajafff), and [Jordan Harband](https://github.com/ljharb).
+# Installation
+> `npm install --save @types/resolve`
+
+# Summary
+This package contains type definitions for resolve (https://github.com/browserify/resolve).
+
+# Details
+Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/resolve.
+
+### Additional Details
+ * Last updated: Thu, 21 Apr 2022 18:01:43 GMT
+ * Dependencies: none
+ * Global values: none
+
+# Credits
+These definitions were written by [Mario Nebl](https://github.com/marionebl), [Klaus Meinhardt](https://github.com/ajafff), and [Jordan Harband](https://github.com/ljharb).

data/lib/{mount_svelte → svelte_on_rails}/node_modules/rollup/dist/bin/rollup

@@ -1246,76 +1246,76 @@ yargsParser.camelCase = camelCase;
 yargsParser.decamelize = decamelize;
 yargsParser.looksLikeNumber = looksLikeNumber;
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __addDisposableResource(env, value, async) {
-    if (value !== null && value !== void 0) {
-        if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
-        var dispose, inner;
-        if (async) {
-            if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
-            dispose = value[Symbol.asyncDispose];
-        }
-        if (dispose === void 0) {
-            if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
-            dispose = value[Symbol.dispose];
-            if (async) inner = dispose;
-        }
-        if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
-        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
-        env.stack.push({ value: value, dispose: dispose, async: async });
-    }
-    else if (async) {
-        env.stack.push({ async: true });
-    }
-    return value;
-
-}
-
-var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-function __disposeResources(env) {
-    function fail(e) {
-        env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
-        env.hasError = true;
-    }
-    var r, s = 0;
-    function next() {
-        while (r = env.stack.pop()) {
-            try {
-                if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
-                if (r.dispose) {
-                    var result = r.dispose.call(r.value);
-                    if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
-                }
-                else s |= 1;
-            }
-            catch (e) {
-                fail(e);
-            }
-        }
-        if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
-        if (env.hasError) throw env.error;
-    }
-    return next();
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __addDisposableResource(env, value, async) {
+    if (value !== null && value !== void 0) {
+        if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+        var dispose, inner;
+        if (async) {
+            if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+            dispose = value[Symbol.asyncDispose];
+        }
+        if (dispose === void 0) {
+            if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+            dispose = value[Symbol.dispose];
+            if (async) inner = dispose;
+        }
+        if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
+        env.stack.push({ value: value, dispose: dispose, async: async });
+    }
+    else if (async) {
+        env.stack.push({ async: true });
+    }
+    return value;
+
+}
+
+var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function __disposeResources(env) {
+    function fail(e) {
+        env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+        env.hasError = true;
+    }
+    var r, s = 0;
+    function next() {
+        while (r = env.stack.pop()) {
+            try {
+                if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+                if (r.dispose) {
+                    var result = r.dispose.call(r.value);
+                    if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                }
+                else s |= 1;
+            }
+            catch (e) {
+                fail(e);
+            }
+        }
+        if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
+        if (env.hasError) throw env.error;
+    }
+    return next();
 }
 
 const toZeroIfInfinity = value => Number.isFinite(value) ? value : 0;

data/lib/{mount_svelte → svelte_on_rails}/node_modules/rollup-plugin-svelte/LICENSE

@@ -1,7 +1,7 @@
-Copyright (c) 2016 Rich Harris
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Copyright (c) 2016 Rich Harris
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.