svelte-on-rails 0.0.2 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 020cf12ff6ad0e75c765a711c76d341928df3133427a63f32d1b04dbac433f32
-  data.tar.gz: 70b5116cdb56f355767608016acf1cb8c7b1bdcfa5d95b3b2c2710329fbf26cd
+  metadata.gz: e44ccc4689a527118303fecadbf493f88f3ac7c697aa11a9d63d7b481df0631c
+  data.tar.gz: e4db1b64136757c45a80a080c43e6624d9ad45a3069398a57056c7826d2ec7e7
 SHA512:
-  metadata.gz: 36e4621e0b8a5f4e77ead87b3fd1c5083e574be31a2bb286b4b3ad26eb0d4c3be385d6e9fd7b89fd0a0693eba41ec7e808cd33f9618cefb4b0003fdc882bae35
-  data.tar.gz: f534ef99ab6c2f2218c8e4afe1ff93de39609bc0de3954d1614c5115f236004e86e80b84d70084dd0e79668b29ca0b8e1e150ffe116870a3973f3979c1cf8cfe
+  metadata.gz: a8ee735aff772931a5f7fd44d61ff4bf57b997b3264399ad50a227fccde6bc38d468b5c35691f0ca29a9074faf4b299618d760b7e72b232bba2b795e1ae2e333
+  data.tar.gz: 966685f0dfab7e6ced316b7f2ebfa51a589b0c4881ad23e4364edfad1637e2188a565bf5973a169167c7cd287e82c0c102b4c4edc6cb65cc2ef44bbf35fe86d1

data/README.md

@@ -5,15 +5,16 @@ 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.
-So, please always test your components early if they pass ssr. 
+Server-side rendering is the bottleneck on such a pipeline. 
+Although rollup is powerful, this gem is in an early state 
+and there are certainly limitations.
+So please always test your components early if they pass ssr.
 
 I have written everything in ESM syntax.
-Although the common-js plugin is installed, I did not test it, 
-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.
+Although the common-js plugin is installed, I have not tested it, 
+so for example `require` 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`.
 
@@ -23,6 +24,8 @@ and [ElMassimo](https://github.com/ElMassimo) because they all helped me with th
 ## Requirements
 
 - actual node installed on the server
+- 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
 
@@ -38,9 +41,9 @@ and run
 $ rails svelte_on_rails:install
 ```
 
-this creates a config file, please check the comments there.
+This will create a little config file, please read the comments there.
 
-setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side
+Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side.
 
 ## Usage
 
@@ -48,13 +51,25 @@ setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@cse
 = svelte_component("myComponent", items: ['item1', 'item2'])
 ```
 
+### 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.
+
+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
 
 By passing the `render_server_side: :auto` option to the view helper, 
 it checks if the request is an initial request (request header `X-Turbo-Request-ID` is not present), 
-then does nothing server-side but add a tag. Assuming the filename is `HelloWorld.svelte`:
+then does nothing server-side except add a tag. Assuming the filename is `HelloWorld.svelte`:
 
 ```haml
 = svelte_component("HelloWorld", message: "Property from the server", render_server_side: :auto, class: "box")
@@ -64,10 +79,10 @@ Added Svelte-Tag for custom element: «<hello-world-svelte class='box svelte-com
 
 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 
-has the `%hello-world` tag, the component will appear immediately. 
-This is not a default setting, as it requires more configuration.
+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 has the `%hello-world` tag, the component will appear immediately.
+This is not a default setting as it requires more configuration.
 
 ## Styles
 

data/lib/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/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/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/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.

data/lib/svelte_on_rails/node_modules/rollup-plugin-svelte/README.md

@@ -1,135 +1,135 @@
-> Undecided yet what bundler to use? We suggest using [SvelteKit](https://kit.svelte.dev) or Vite with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/).
-
-# rollup-plugin-svelte [![CI](https://github.com/sveltejs/rollup-plugin-svelte/workflows/CI/badge.svg)](https://github.com/sveltejs/rollup-plugin-svelte/actions)
-
-Compile Svelte components.
-
-
-## Installation
-
-```bash
-npm install --save-dev svelte rollup-plugin-svelte
-```
-
-Note that we need to install Svelte as well as the plugin, as it's a 'peer dependency'.
-
-
-## Usage
-
-```js
-// rollup.config.js
-import svelte from 'rollup-plugin-svelte';
-import resolve from '@rollup/plugin-node-resolve';
-
-export default {
-  input: 'src/main.js',
-  output: {
-    file: 'public/bundle.js',
-    format: 'iife'
-  },
-  plugins: [
-    svelte({
-      // By default, all ".svelte" files are compiled
-      extensions: ['.my-custom-extension'],
-
-      // You can restrict which files are compiled
-      // using `include` and `exclude`
-      include: 'src/components/**/*.svelte',
-
-      // Optionally, preprocess components with svelte.preprocess:
-      // https://svelte.dev/docs#compile-time-svelte-preprocess
-      preprocess: {
-        style: ({ content }) => {
-          return transformStyles(content);
-        }
-      },
-
-      // Emit CSS as "files" for other plugins to process. default is true
-      emitCss: false,
-
-      // Warnings are normally passed straight to Rollup. You can
-      // optionally handle them here, for example to squelch
-      // warnings with a particular code
-      onwarn: (warning, handler) => {
-        // e.g. don't warn on <marquee> elements, cos they're cool
-        if (warning.code === 'a11y-distracting-elements') return;
-
-        // let Rollup handle all other warnings normally
-        handler(warning);
-      },
-
-      // You can pass any of the Svelte compiler options
-      compilerOptions: {
-
-        // By default, the client-side compiler is used. You
-        // can also use the server-side rendering compiler
-        generate: 'ssr',
-
-        // ensure that extra attributes are added to head
-        // elements for hydration (used with generate: 'ssr')
-        hydratable: true,
-
-        // You can optionally set 'customElement' to 'true' to compile
-        // your components to custom elements (aka web elements)
-        customElement: false
-      }
-    }),
-    // see NOTICE below
-    resolve({
-      browser: true,
-      exportConditions: ['svelte'],
-      extensions: ['.svelte']
-    }),
-    // ...
-  ]
-}
-```
-
-> **NOTICE:** You will need additional Rollup plugins. <br>Alone, this plugin translates Svelte components into CSS and JavaScript files. <br>You will need to include [`@rollup/plugin-node-resolve`](https://www.npmjs.com/package/@rollup/plugin-node-resolve) – and probably [`@rollup/plugin-commonjs`](https://www.npmjs.com/package/@rollup/plugin-commonjs) – in your Rollup config.
-
-
-## Preprocessing and dependencies
-
-If you are using the `preprocess` feature, then your callback responses may — in addition to the `code` and `map` values described in the Svelte compile docs — also optionally include a `dependencies` array. This should be the paths of additional files that the preprocessor result in some way depends upon. In Rollup 0.61+ in watch mode, any changes to these additional files will also trigger re-builds.
-
-
-## `svelte` exports condition
-
-If you're importing a component from your node_modules folder, and that component's `package.json` has a `"svelte"` property in its `exports` condition...
-
-```js
-{
-  "name": "some-component",
-
-  // this means 'some-component' resolves to 'some-component/src/SomeComponent.svelte'
-  "exports": {
-    ".": {
-      "svelte": "./src/MyComponent.svelte"
-    }
-  }
-}
-```
-
-...then this plugin together with `@rollup/plugin-node-resolve` (and its `exportConditions` option containing the `'svelte'` condition – see configuration example above) will ensure that your app imports the *uncompiled* component source code. That will result in a smaller, faster app (because code is deduplicated, and shared functions get optimized quicker), and makes it less likely that you'll run into bugs caused by your app using a different version of Svelte to the component.
-
-Conversely, if you're *publishing* a component to npm, you should ship the uncompiled source (together with the compiled distributable, for people who aren't using Svelte elsewhere in their app) and include the `"svelte"` property in the `exports` of your `package.json`.
-
-If you are publishing a package containing multiple components, you can create an `index.js` file that re-exports all the components, like this:
-
-```js
-export { default as Component1 } from './Component1.svelte';
-export { default as Component2 } from './Component2.svelte';
-```
-
-and so on. Then, in `package.json`, set the `svelte` condition to point to this `index.js` file. Or you may create an export for each individual Svelte file. Using a single `index.js` which exports all files will allow multiple components to be imported with a single line, but may load more slowly during development. An export per file may load more quickly during development but require a separate import statement for each file.
-
-
-## Extracting CSS
-
-By default (when `emitCss: true`) the CSS styles will be emitted into a virtual file, allowing another Rollup plugin – for example, [`rollup-plugin-css-only`](https://www.npmjs.com/package/rollup-plugin-css-only), [`rollup-plugin-postcss`](https://www.npmjs.com/package/rollup-plugin-postcss), etc. – to take responsibility for the new stylesheet. In fact, emitting CSS files _requires_ that you use a Rollup plugin to handle the CSS. Otherwise, your build(s) will fail! This is because this plugin will add an `import` statement to import the emitted CSS file. It's not valid JS to import a CSS file into a JS file, but it allows the CSS to be linked to its respective JS file and is a common pattern that other Rollup CSS plugins know how to handle.
-
-If you set `emitCss: false` and your Svelte components contain `<style>` tags, the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not the default, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
-
-## License
-
-MIT
+> Undecided yet what bundler to use? We suggest using [SvelteKit](https://kit.svelte.dev) or Vite with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/).
+
+# rollup-plugin-svelte [![CI](https://github.com/sveltejs/rollup-plugin-svelte/workflows/CI/badge.svg)](https://github.com/sveltejs/rollup-plugin-svelte/actions)
+
+Compile Svelte components.
+
+
+## Installation
+
+```bash
+npm install --save-dev svelte rollup-plugin-svelte
+```
+
+Note that we need to install Svelte as well as the plugin, as it's a 'peer dependency'.
+
+
+## Usage
+
+```js
+// rollup.config.js
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+
+export default {
+  input: 'src/main.js',
+  output: {
+    file: 'public/bundle.js',
+    format: 'iife'
+  },
+  plugins: [
+    svelte({
+      // By default, all ".svelte" files are compiled
+      extensions: ['.my-custom-extension'],
+
+      // You can restrict which files are compiled
+      // using `include` and `exclude`
+      include: 'src/components/**/*.svelte',
+
+      // Optionally, preprocess components with svelte.preprocess:
+      // https://svelte.dev/docs#compile-time-svelte-preprocess
+      preprocess: {
+        style: ({ content }) => {
+          return transformStyles(content);
+        }
+      },
+
+      // Emit CSS as "files" for other plugins to process. default is true
+      emitCss: false,
+
+      // Warnings are normally passed straight to Rollup. You can
+      // optionally handle them here, for example to squelch
+      // warnings with a particular code
+      onwarn: (warning, handler) => {
+        // e.g. don't warn on <marquee> elements, cos they're cool
+        if (warning.code === 'a11y-distracting-elements') return;
+
+        // let Rollup handle all other warnings normally
+        handler(warning);
+      },
+
+      // You can pass any of the Svelte compiler options
+      compilerOptions: {
+
+        // By default, the client-side compiler is used. You
+        // can also use the server-side rendering compiler
+        generate: 'ssr',
+
+        // ensure that extra attributes are added to head
+        // elements for hydration (used with generate: 'ssr')
+        hydratable: true,
+
+        // You can optionally set 'customElement' to 'true' to compile
+        // your components to custom elements (aka web elements)
+        customElement: false
+      }
+    }),
+    // see NOTICE below
+    resolve({
+      browser: true,
+      exportConditions: ['svelte'],
+      extensions: ['.svelte']
+    }),
+    // ...
+  ]
+}
+```
+
+> **NOTICE:** You will need additional Rollup plugins. <br>Alone, this plugin translates Svelte components into CSS and JavaScript files. <br>You will need to include [`@rollup/plugin-node-resolve`](https://www.npmjs.com/package/@rollup/plugin-node-resolve) – and probably [`@rollup/plugin-commonjs`](https://www.npmjs.com/package/@rollup/plugin-commonjs) – in your Rollup config.
+
+
+## Preprocessing and dependencies
+
+If you are using the `preprocess` feature, then your callback responses may — in addition to the `code` and `map` values described in the Svelte compile docs — also optionally include a `dependencies` array. This should be the paths of additional files that the preprocessor result in some way depends upon. In Rollup 0.61+ in watch mode, any changes to these additional files will also trigger re-builds.
+
+
+## `svelte` exports condition
+
+If you're importing a component from your node_modules folder, and that component's `package.json` has a `"svelte"` property in its `exports` condition...
+
+```js
+{
+  "name": "some-component",
+
+  // this means 'some-component' resolves to 'some-component/src/SomeComponent.svelte'
+  "exports": {
+    ".": {
+      "svelte": "./src/MyComponent.svelte"
+    }
+  }
+}
+```
+
+...then this plugin together with `@rollup/plugin-node-resolve` (and its `exportConditions` option containing the `'svelte'` condition – see configuration example above) will ensure that your app imports the *uncompiled* component source code. That will result in a smaller, faster app (because code is deduplicated, and shared functions get optimized quicker), and makes it less likely that you'll run into bugs caused by your app using a different version of Svelte to the component.
+
+Conversely, if you're *publishing* a component to npm, you should ship the uncompiled source (together with the compiled distributable, for people who aren't using Svelte elsewhere in their app) and include the `"svelte"` property in the `exports` of your `package.json`.
+
+If you are publishing a package containing multiple components, you can create an `index.js` file that re-exports all the components, like this:
+
+```js
+export { default as Component1 } from './Component1.svelte';
+export { default as Component2 } from './Component2.svelte';
+```
+
+and so on. Then, in `package.json`, set the `svelte` condition to point to this `index.js` file. Or you may create an export for each individual Svelte file. Using a single `index.js` which exports all files will allow multiple components to be imported with a single line, but may load more slowly during development. An export per file may load more quickly during development but require a separate import statement for each file.
+
+
+## Extracting CSS
+
+By default (when `emitCss: true`) the CSS styles will be emitted into a virtual file, allowing another Rollup plugin – for example, [`rollup-plugin-css-only`](https://www.npmjs.com/package/rollup-plugin-css-only), [`rollup-plugin-postcss`](https://www.npmjs.com/package/rollup-plugin-postcss), etc. – to take responsibility for the new stylesheet. In fact, emitting CSS files _requires_ that you use a Rollup plugin to handle the CSS. Otherwise, your build(s) will fail! This is because this plugin will add an `import` statement to import the emitted CSS file. It's not valid JS to import a CSS file into a JS file, but it allows the CSS to be linked to its respective JS file and is a common pattern that other Rollup CSS plugins know how to handle.
+
+If you set `emitCss: false` and your Svelte components contain `<style>` tags, the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not the default, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
+
+## License
+
+MIT