svelte-on-rails 0.0.2 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 020cf12ff6ad0e75c765a711c76d341928df3133427a63f32d1b04dbac433f32
4
- data.tar.gz: 70b5116cdb56f355767608016acf1cb8c7b1bdcfa5d95b3b2c2710329fbf26cd
3
+ metadata.gz: e44ccc4689a527118303fecadbf493f88f3ac7c697aa11a9d63d7b481df0631c
4
+ data.tar.gz: e4db1b64136757c45a80a080c43e6624d9ad45a3069398a57056c7826d2ec7e7
5
5
  SHA512:
6
- metadata.gz: 36e4621e0b8a5f4e77ead87b3fd1c5083e574be31a2bb286b4b3ad26eb0d4c3be385d6e9fd7b89fd0a0693eba41ec7e808cd33f9618cefb4b0003fdc882bae35
7
- data.tar.gz: f534ef99ab6c2f2218c8e4afe1ff93de39609bc0de3954d1614c5115f236004e86e80b84d70084dd0e79668b29ca0b8e1e150ffe116870a3973f3979c1cf8cfe
6
+ metadata.gz: a8ee735aff772931a5f7fd44d61ff4bf57b997b3264399ad50a227fccde6bc38d468b5c35691f0ca29a9074faf4b299618d760b7e72b232bba2b795e1ae2e333
7
+ data.tar.gz: 966685f0dfab7e6ced316b7f2ebfa51a589b0c4881ad23e4364edfad1637e2188a565bf5973a169167c7cd287e82c0c102b4c4edc6cb65cc2ef44bbf35fe86d1
data/README.md CHANGED
@@ -5,15 +5,16 @@ Can render server-side, always or only on first request, and
5
5
  handle subsequent turbo requests as custom elements without shadow-dom.
6
6
  Server-side compilation via rollup.
7
7
 
8
- Server-side rendering is the bottleneck in this pipeline. Although rollup is mighty,
9
- this gem is in a early state and there sure are limitations.
10
- So, please always test your components early if they pass ssr.
8
+ Server-side rendering is the bottleneck on such a pipeline.
9
+ Although rollup is powerful, this gem is in an early state
10
+ and there are certainly limitations.
11
+ So please always test your components early if they pass ssr.
11
12
 
12
13
  I have written everything in ESM syntax.
13
- Although the common-js plugin is installed, I did not test it,
14
- so `require` for example may not work in Svelte components.
15
- To check which import statements work, please check the components in the
16
- `spec/rails-vite-test-app/app/frontend/javascript/components` gem.
14
+ Although the common-js plugin is installed, I have not tested it,
15
+ so for example `require` may not work in Svelte components.
16
+ To check which import statements work, please check the components
17
+ in the `spec/rails-vite-test-app/app/frontend/javascript/components` gem.
17
18
 
18
19
  This all is developed on Rails-7 together with `vite_rails`.
19
20
 
@@ -23,6 +24,8 @@ and [ElMassimo](https://github.com/ElMassimo) because they all helped me with th
23
24
  ## Requirements
24
25
 
25
26
  - actual node installed on the server
27
+ - tested on ruby 3.2.2 and rails 7.1
28
+ - svelte (see: [install svelte on vite/rails](https://dev.to/chmich/setup-inertia-and-svelte-on-rails-7-3glk))
26
29
 
27
30
  ## Installation
28
31
 
@@ -38,9 +41,9 @@ and run
38
41
  $ rails svelte_on_rails:install
39
42
  ```
40
43
 
41
- this creates a config file, please check the comments there.
44
+ This will create a little config file, please read the comments there.
42
45
 
43
- setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side
46
+ Set up the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@csedl/svelte-on-rails) on the client side.
44
47
 
45
48
  ## Usage
46
49
 
@@ -48,13 +51,25 @@ setup the npm module [@csedl/svelte-on-rails](https://www.npmjs.com/package/@cse
48
51
  = svelte_component("myComponent", items: ['item1', 'item2'])
49
52
  ```
50
53
 
54
+ ### Import statements
55
+
56
+ For check which statements are working and actively tested, please check the
57
+ [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.
58
+
59
+ Among others there are
60
+
61
+ - `import svg from '../example.svg?raw'`
62
+ - `<script lang="ts">` (svelte component with typescript syntax)
63
+ - `import { someFunction } from '../customJavascript.js';`
64
+ - `import Child from './Child.svelte';`
65
+
51
66
  ## Option render_server_side: :auto
52
67
 
53
68
  Works with `hotwired/turbo` only
54
69
 
55
70
  By passing the `render_server_side: :auto` option to the view helper,
56
71
  it checks if the request is an initial request (request header `X-Turbo-Request-ID` is not present),
57
- then does nothing server-side but add a tag. Assuming the filename is `HelloWorld.svelte`:
72
+ then does nothing server-side except add a tag. Assuming the filename is `HelloWorld.svelte`:
58
73
 
59
74
  ```haml
60
75
  = 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
64
79
 
65
80
  If configured on the npm module, it instaniates a custom element and adopts it to the element.
66
81
 
67
- This works perfectly with hotwired/turbo because the custom elements are built on the
68
- first page load and survive page visits from turbo. If you then visit a page that
69
- has the `%hello-world` tag, the component will appear immediately.
70
- This is not a default setting, as it requires more configuration.
82
+ This works perfectly with hotwired/turbo because the custom elements are
83
+ built on the first page load and survive page visits from turbo.
84
+ If you then visit a page that has the `%hello-world` tag, the component will appear immediately.
85
+ This is not a default setting as it requires more configuration.
71
86
 
72
87
  ## Styles
73
88
 
@@ -1,15 +1,15 @@
1
- # Installation
2
- > `npm install --save @types/estree`
3
-
4
- # Summary
5
- This package contains type definitions for estree (https://github.com/estree/estree).
6
-
7
- # Details
8
- Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree.
9
-
10
- ### Additional Details
11
- * Last updated: Mon, 24 Mar 2025 07:34:10 GMT
12
- * Dependencies: none
13
-
14
- # Credits
15
- These definitions were written by [RReverser](https://github.com/RReverser).
1
+ # Installation
2
+ > `npm install --save @types/estree`
3
+
4
+ # Summary
5
+ This package contains type definitions for estree (https://github.com/estree/estree).
6
+
7
+ # Details
8
+ Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree.
9
+
10
+ ### Additional Details
11
+ * Last updated: Mon, 24 Mar 2025 07:34:10 GMT
12
+ * Dependencies: none
13
+
14
+ # Credits
15
+ These definitions were written by [RReverser](https://github.com/RReverser).
@@ -1,16 +1,16 @@
1
- # Installation
2
- > `npm install --save @types/resolve`
3
-
4
- # Summary
5
- This package contains type definitions for resolve (https://github.com/browserify/resolve).
6
-
7
- # Details
8
- Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/resolve.
9
-
10
- ### Additional Details
11
- * Last updated: Thu, 21 Apr 2022 18:01:43 GMT
12
- * Dependencies: none
13
- * Global values: none
14
-
15
- # Credits
16
- These definitions were written by [Mario Nebl](https://github.com/marionebl), [Klaus Meinhardt](https://github.com/ajafff), and [Jordan Harband](https://github.com/ljharb).
1
+ # Installation
2
+ > `npm install --save @types/resolve`
3
+
4
+ # Summary
5
+ This package contains type definitions for resolve (https://github.com/browserify/resolve).
6
+
7
+ # Details
8
+ Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/resolve.
9
+
10
+ ### Additional Details
11
+ * Last updated: Thu, 21 Apr 2022 18:01:43 GMT
12
+ * Dependencies: none
13
+ * Global values: none
14
+
15
+ # Credits
16
+ These definitions were written by [Mario Nebl](https://github.com/marionebl), [Klaus Meinhardt](https://github.com/ajafff), and [Jordan Harband](https://github.com/ljharb).
@@ -1246,76 +1246,76 @@ yargsParser.camelCase = camelCase;
1246
1246
  yargsParser.decamelize = decamelize;
1247
1247
  yargsParser.looksLikeNumber = looksLikeNumber;
1248
1248
 
1249
- /******************************************************************************
1250
- Copyright (c) Microsoft Corporation.
1251
-
1252
- Permission to use, copy, modify, and/or distribute this software for any
1253
- purpose with or without fee is hereby granted.
1254
-
1255
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
1256
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
1257
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
1258
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
1259
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
1260
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
1261
- PERFORMANCE OF THIS SOFTWARE.
1262
- ***************************************************************************** */
1263
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
1264
-
1265
-
1266
- function __addDisposableResource(env, value, async) {
1267
- if (value !== null && value !== void 0) {
1268
- if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
1269
- var dispose, inner;
1270
- if (async) {
1271
- if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
1272
- dispose = value[Symbol.asyncDispose];
1273
- }
1274
- if (dispose === void 0) {
1275
- if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
1276
- dispose = value[Symbol.dispose];
1277
- if (async) inner = dispose;
1278
- }
1279
- if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
1280
- if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
1281
- env.stack.push({ value: value, dispose: dispose, async: async });
1282
- }
1283
- else if (async) {
1284
- env.stack.push({ async: true });
1285
- }
1286
- return value;
1287
-
1288
- }
1289
-
1290
- var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
1291
- var e = new Error(message);
1292
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
1293
- };
1294
-
1295
- function __disposeResources(env) {
1296
- function fail(e) {
1297
- env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
1298
- env.hasError = true;
1299
- }
1300
- var r, s = 0;
1301
- function next() {
1302
- while (r = env.stack.pop()) {
1303
- try {
1304
- if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
1305
- if (r.dispose) {
1306
- var result = r.dispose.call(r.value);
1307
- if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
1308
- }
1309
- else s |= 1;
1310
- }
1311
- catch (e) {
1312
- fail(e);
1313
- }
1314
- }
1315
- if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
1316
- if (env.hasError) throw env.error;
1317
- }
1318
- return next();
1249
+ /******************************************************************************
1250
+ Copyright (c) Microsoft Corporation.
1251
+
1252
+ Permission to use, copy, modify, and/or distribute this software for any
1253
+ purpose with or without fee is hereby granted.
1254
+
1255
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
1256
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
1257
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
1258
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
1259
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
1260
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
1261
+ PERFORMANCE OF THIS SOFTWARE.
1262
+ ***************************************************************************** */
1263
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
1264
+
1265
+
1266
+ function __addDisposableResource(env, value, async) {
1267
+ if (value !== null && value !== void 0) {
1268
+ if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
1269
+ var dispose, inner;
1270
+ if (async) {
1271
+ if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
1272
+ dispose = value[Symbol.asyncDispose];
1273
+ }
1274
+ if (dispose === void 0) {
1275
+ if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
1276
+ dispose = value[Symbol.dispose];
1277
+ if (async) inner = dispose;
1278
+ }
1279
+ if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
1280
+ if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
1281
+ env.stack.push({ value: value, dispose: dispose, async: async });
1282
+ }
1283
+ else if (async) {
1284
+ env.stack.push({ async: true });
1285
+ }
1286
+ return value;
1287
+
1288
+ }
1289
+
1290
+ var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
1291
+ var e = new Error(message);
1292
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
1293
+ };
1294
+
1295
+ function __disposeResources(env) {
1296
+ function fail(e) {
1297
+ env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
1298
+ env.hasError = true;
1299
+ }
1300
+ var r, s = 0;
1301
+ function next() {
1302
+ while (r = env.stack.pop()) {
1303
+ try {
1304
+ if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
1305
+ if (r.dispose) {
1306
+ var result = r.dispose.call(r.value);
1307
+ if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
1308
+ }
1309
+ else s |= 1;
1310
+ }
1311
+ catch (e) {
1312
+ fail(e);
1313
+ }
1314
+ }
1315
+ if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
1316
+ if (env.hasError) throw env.error;
1317
+ }
1318
+ return next();
1319
1319
  }
1320
1320
 
1321
1321
  const toZeroIfInfinity = value => Number.isFinite(value) ? value : 0;
@@ -1,7 +1,7 @@
1
- Copyright (c) 2016 Rich Harris
2
-
3
- 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:
4
-
5
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
-
7
- 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.
1
+ Copyright (c) 2016 Rich Harris
2
+
3
+ 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:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ 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.
@@ -1,135 +1,135 @@
1
- > 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/).
2
-
3
- # rollup-plugin-svelte [![CI](https://github.com/sveltejs/rollup-plugin-svelte/workflows/CI/badge.svg)](https://github.com/sveltejs/rollup-plugin-svelte/actions)
4
-
5
- Compile Svelte components.
6
-
7
-
8
- ## Installation
9
-
10
- ```bash
11
- npm install --save-dev svelte rollup-plugin-svelte
12
- ```
13
-
14
- Note that we need to install Svelte as well as the plugin, as it's a 'peer dependency'.
15
-
16
-
17
- ## Usage
18
-
19
- ```js
20
- // rollup.config.js
21
- import svelte from 'rollup-plugin-svelte';
22
- import resolve from '@rollup/plugin-node-resolve';
23
-
24
- export default {
25
- input: 'src/main.js',
26
- output: {
27
- file: 'public/bundle.js',
28
- format: 'iife'
29
- },
30
- plugins: [
31
- svelte({
32
- // By default, all ".svelte" files are compiled
33
- extensions: ['.my-custom-extension'],
34
-
35
- // You can restrict which files are compiled
36
- // using `include` and `exclude`
37
- include: 'src/components/**/*.svelte',
38
-
39
- // Optionally, preprocess components with svelte.preprocess:
40
- // https://svelte.dev/docs#compile-time-svelte-preprocess
41
- preprocess: {
42
- style: ({ content }) => {
43
- return transformStyles(content);
44
- }
45
- },
46
-
47
- // Emit CSS as "files" for other plugins to process. default is true
48
- emitCss: false,
49
-
50
- // Warnings are normally passed straight to Rollup. You can
51
- // optionally handle them here, for example to squelch
52
- // warnings with a particular code
53
- onwarn: (warning, handler) => {
54
- // e.g. don't warn on <marquee> elements, cos they're cool
55
- if (warning.code === 'a11y-distracting-elements') return;
56
-
57
- // let Rollup handle all other warnings normally
58
- handler(warning);
59
- },
60
-
61
- // You can pass any of the Svelte compiler options
62
- compilerOptions: {
63
-
64
- // By default, the client-side compiler is used. You
65
- // can also use the server-side rendering compiler
66
- generate: 'ssr',
67
-
68
- // ensure that extra attributes are added to head
69
- // elements for hydration (used with generate: 'ssr')
70
- hydratable: true,
71
-
72
- // You can optionally set 'customElement' to 'true' to compile
73
- // your components to custom elements (aka web elements)
74
- customElement: false
75
- }
76
- }),
77
- // see NOTICE below
78
- resolve({
79
- browser: true,
80
- exportConditions: ['svelte'],
81
- extensions: ['.svelte']
82
- }),
83
- // ...
84
- ]
85
- }
86
- ```
87
-
88
- > **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.
89
-
90
-
91
- ## Preprocessing and dependencies
92
-
93
- 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.
94
-
95
-
96
- ## `svelte` exports condition
97
-
98
- 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...
99
-
100
- ```js
101
- {
102
- "name": "some-component",
103
-
104
- // this means 'some-component' resolves to 'some-component/src/SomeComponent.svelte'
105
- "exports": {
106
- ".": {
107
- "svelte": "./src/MyComponent.svelte"
108
- }
109
- }
110
- }
111
- ```
112
-
113
- ...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.
114
-
115
- 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`.
116
-
117
- If you are publishing a package containing multiple components, you can create an `index.js` file that re-exports all the components, like this:
118
-
119
- ```js
120
- export { default as Component1 } from './Component1.svelte';
121
- export { default as Component2 } from './Component2.svelte';
122
- ```
123
-
124
- 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.
125
-
126
-
127
- ## Extracting CSS
128
-
129
- 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.
130
-
131
- 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.
132
-
133
- ## License
134
-
135
- MIT
1
+ > 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/).
2
+
3
+ # rollup-plugin-svelte [![CI](https://github.com/sveltejs/rollup-plugin-svelte/workflows/CI/badge.svg)](https://github.com/sveltejs/rollup-plugin-svelte/actions)
4
+
5
+ Compile Svelte components.
6
+
7
+
8
+ ## Installation
9
+
10
+ ```bash
11
+ npm install --save-dev svelte rollup-plugin-svelte
12
+ ```
13
+
14
+ Note that we need to install Svelte as well as the plugin, as it's a 'peer dependency'.
15
+
16
+
17
+ ## Usage
18
+
19
+ ```js
20
+ // rollup.config.js
21
+ import svelte from 'rollup-plugin-svelte';
22
+ import resolve from '@rollup/plugin-node-resolve';
23
+
24
+ export default {
25
+ input: 'src/main.js',
26
+ output: {
27
+ file: 'public/bundle.js',
28
+ format: 'iife'
29
+ },
30
+ plugins: [
31
+ svelte({
32
+ // By default, all ".svelte" files are compiled
33
+ extensions: ['.my-custom-extension'],
34
+
35
+ // You can restrict which files are compiled
36
+ // using `include` and `exclude`
37
+ include: 'src/components/**/*.svelte',
38
+
39
+ // Optionally, preprocess components with svelte.preprocess:
40
+ // https://svelte.dev/docs#compile-time-svelte-preprocess
41
+ preprocess: {
42
+ style: ({ content }) => {
43
+ return transformStyles(content);
44
+ }
45
+ },
46
+
47
+ // Emit CSS as "files" for other plugins to process. default is true
48
+ emitCss: false,
49
+
50
+ // Warnings are normally passed straight to Rollup. You can
51
+ // optionally handle them here, for example to squelch
52
+ // warnings with a particular code
53
+ onwarn: (warning, handler) => {
54
+ // e.g. don't warn on <marquee> elements, cos they're cool
55
+ if (warning.code === 'a11y-distracting-elements') return;
56
+
57
+ // let Rollup handle all other warnings normally
58
+ handler(warning);
59
+ },
60
+
61
+ // You can pass any of the Svelte compiler options
62
+ compilerOptions: {
63
+
64
+ // By default, the client-side compiler is used. You
65
+ // can also use the server-side rendering compiler
66
+ generate: 'ssr',
67
+
68
+ // ensure that extra attributes are added to head
69
+ // elements for hydration (used with generate: 'ssr')
70
+ hydratable: true,
71
+
72
+ // You can optionally set 'customElement' to 'true' to compile
73
+ // your components to custom elements (aka web elements)
74
+ customElement: false
75
+ }
76
+ }),
77
+ // see NOTICE below
78
+ resolve({
79
+ browser: true,
80
+ exportConditions: ['svelte'],
81
+ extensions: ['.svelte']
82
+ }),
83
+ // ...
84
+ ]
85
+ }
86
+ ```
87
+
88
+ > **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.
89
+
90
+
91
+ ## Preprocessing and dependencies
92
+
93
+ 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.
94
+
95
+
96
+ ## `svelte` exports condition
97
+
98
+ 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...
99
+
100
+ ```js
101
+ {
102
+ "name": "some-component",
103
+
104
+ // this means 'some-component' resolves to 'some-component/src/SomeComponent.svelte'
105
+ "exports": {
106
+ ".": {
107
+ "svelte": "./src/MyComponent.svelte"
108
+ }
109
+ }
110
+ }
111
+ ```
112
+
113
+ ...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.
114
+
115
+ 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`.
116
+
117
+ If you are publishing a package containing multiple components, you can create an `index.js` file that re-exports all the components, like this:
118
+
119
+ ```js
120
+ export { default as Component1 } from './Component1.svelte';
121
+ export { default as Component2 } from './Component2.svelte';
122
+ ```
123
+
124
+ 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.
125
+
126
+
127
+ ## Extracting CSS
128
+
129
+ 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.
130
+
131
+ 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.
132
+
133
+ ## License
134
+
135
+ MIT