diff --git a/create-snowpack-app/app-template-11ty/README.md b/create-snowpack-app/app-template-11ty/README.md index 2616c8f2f8..745522a440 100644 --- a/create-snowpack-app/app-template-11ty/README.md +++ b/create-snowpack-app/app-template-11ty/README.md @@ -17,7 +17,7 @@ You will also see any lint errors in the console. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. +**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file. ### Q: What about Eject? diff --git a/create-snowpack-app/app-template-11ty/_output/static/favicon.png b/create-snowpack-app/app-template-11ty/_output/static/favicon.png deleted file mode 100644 index 4f5789e072..0000000000 Binary files a/create-snowpack-app/app-template-11ty/_output/static/favicon.png and /dev/null differ diff --git a/create-snowpack-app/app-template-11ty/_output/static/index.css b/create-snowpack-app/app-template-11ty/_output/static/index.css deleted file mode 100644 index 49cf0821b9..0000000000 --- a/create-snowpack-app/app-template-11ty/_output/static/index.css +++ /dev/null @@ -1,26 +0,0 @@ -body { - background: #222; - color: #eee; - font-family: Arial, Helvetica, sans-serif; - text-align: center; -} -a { - color: #aaa; -} -.banner { - display: flex; - justify-content: center; - align-items: center; -} -.banner img, -.banner svg { - display: block; - padding: 1.5rem; -} - -#canvas { - display: block; - margin: 0rem auto; - width: 720px; - height: 420px; -} diff --git a/create-snowpack-app/app-template-11ty/_output/static/logo.svg b/create-snowpack-app/app-template-11ty/_output/static/logo.svg deleted file mode 100644 index 493a6d28e7..0000000000 --- a/create-snowpack-app/app-template-11ty/_output/static/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/create-snowpack-app/app-template-11ty/snowpack.config.js b/create-snowpack-app/app-template-11ty/snowpack.config.mjs similarity index 97% rename from create-snowpack-app/app-template-11ty/snowpack.config.js rename to create-snowpack-app/app-template-11ty/snowpack.config.mjs index 8f3f380bdc..ac27a0e021 100644 --- a/create-snowpack-app/app-template-11ty/snowpack.config.js +++ b/create-snowpack-app/app-template-11ty/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { _output: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-blank-typescript/README.md b/create-snowpack-app/app-template-blank-typescript/README.md index 2616c8f2f8..745522a440 100644 --- a/create-snowpack-app/app-template-blank-typescript/README.md +++ b/create-snowpack-app/app-template-blank-typescript/README.md @@ -17,7 +17,7 @@ You will also see any lint errors in the console. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. +**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file. ### Q: What about Eject? diff --git a/create-snowpack-app/app-template-blank-typescript/snowpack.config.js b/create-snowpack-app/app-template-blank-typescript/snowpack.config.mjs similarity index 97% rename from create-snowpack-app/app-template-blank-typescript/snowpack.config.js rename to create-snowpack-app/app-template-blank-typescript/snowpack.config.mjs index 8b59366a20..e0f7882b1f 100644 --- a/create-snowpack-app/app-template-blank-typescript/snowpack.config.js +++ b/create-snowpack-app/app-template-blank-typescript/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-blank/README.md b/create-snowpack-app/app-template-blank/README.md index 2616c8f2f8..745522a440 100644 --- a/create-snowpack-app/app-template-blank/README.md +++ b/create-snowpack-app/app-template-blank/README.md @@ -17,7 +17,7 @@ You will also see any lint errors in the console. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. +**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file. ### Q: What about Eject? diff --git a/create-snowpack-app/app-template-blank/snowpack.config.js b/create-snowpack-app/app-template-blank/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-blank/snowpack.config.js rename to create-snowpack-app/app-template-blank/snowpack.config.mjs index 452b3bb778..a82679836a 100644 --- a/create-snowpack-app/app-template-blank/snowpack.config.js +++ b/create-snowpack-app/app-template-blank/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-lit-element-typescript/snowpack.config.js b/create-snowpack-app/app-template-lit-element-typescript/snowpack.config.mjs similarity index 97% rename from create-snowpack-app/app-template-lit-element-typescript/snowpack.config.js rename to create-snowpack-app/app-template-lit-element-typescript/snowpack.config.mjs index dc2b609df4..d283e8bfac 100644 --- a/create-snowpack-app/app-template-lit-element-typescript/snowpack.config.js +++ b/create-snowpack-app/app-template-lit-element-typescript/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-lit-element/snowpack.config.js b/create-snowpack-app/app-template-lit-element/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-lit-element/snowpack.config.js rename to create-snowpack-app/app-template-lit-element/snowpack.config.mjs index d91705dfcd..2c7acb19e0 100644 --- a/create-snowpack-app/app-template-lit-element/snowpack.config.js +++ b/create-snowpack-app/app-template-lit-element/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-minimal/README.md b/create-snowpack-app/app-template-minimal/README.md index 2616c8f2f8..745522a440 100644 --- a/create-snowpack-app/app-template-minimal/README.md +++ b/create-snowpack-app/app-template-minimal/README.md @@ -17,7 +17,7 @@ You will also see any lint errors in the console. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. +**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file. ### Q: What about Eject? diff --git a/create-snowpack-app/app-template-minimal/snowpack.config.js b/create-snowpack-app/app-template-minimal/snowpack.config.mjs similarity index 95% rename from create-snowpack-app/app-template-minimal/snowpack.config.js rename to create-snowpack-app/app-template-minimal/snowpack.config.mjs index f394b76e54..f4340c6e05 100644 --- a/create-snowpack-app/app-template-minimal/snowpack.config.js +++ b/create-snowpack-app/app-template-minimal/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { /* ... */ }, diff --git a/create-snowpack-app/app-template-preact-typescript/snowpack.config.js b/create-snowpack-app/app-template-preact-typescript/snowpack.config.mjs similarity index 97% rename from create-snowpack-app/app-template-preact-typescript/snowpack.config.js rename to create-snowpack-app/app-template-preact-typescript/snowpack.config.mjs index 422e7b5995..8e6e5a73ee 100644 --- a/create-snowpack-app/app-template-preact-typescript/snowpack.config.js +++ b/create-snowpack-app/app-template-preact-typescript/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-preact/snowpack.config.js b/create-snowpack-app/app-template-preact/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-preact/snowpack.config.js rename to create-snowpack-app/app-template-preact/snowpack.config.mjs index d863827106..5f7e89fe6d 100644 --- a/create-snowpack-app/app-template-preact/snowpack.config.js +++ b/create-snowpack-app/app-template-preact/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-react-typescript/README.md b/create-snowpack-app/app-template-react-typescript/README.md index aecd4ed2c8..7722026f50 100644 --- a/create-snowpack-app/app-template-react-typescript/README.md +++ b/create-snowpack-app/app-template-react-typescript/README.md @@ -17,7 +17,7 @@ You will also see any lint errors in the console. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.js` config file. +**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.mjs` config file. ### npm test diff --git a/create-snowpack-app/app-template-react-typescript/snowpack.config.js b/create-snowpack-app/app-template-react-typescript/snowpack.config.mjs similarity index 97% rename from create-snowpack-app/app-template-react-typescript/snowpack.config.js rename to create-snowpack-app/app-template-react-typescript/snowpack.config.mjs index 7d7c28cfd2..62ba3dd2bf 100644 --- a/create-snowpack-app/app-template-react-typescript/snowpack.config.js +++ b/create-snowpack-app/app-template-react-typescript/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-react/README.md b/create-snowpack-app/app-template-react/README.md index aecd4ed2c8..7722026f50 100644 --- a/create-snowpack-app/app-template-react/README.md +++ b/create-snowpack-app/app-template-react/README.md @@ -17,7 +17,7 @@ You will also see any lint errors in the console. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.js` config file. +**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.mjs` config file. ### npm test diff --git a/create-snowpack-app/app-template-react/snowpack.config.js b/create-snowpack-app/app-template-react/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-react/snowpack.config.js rename to create-snowpack-app/app-template-react/snowpack.config.mjs index 4e468a33e4..ca360551d5 100644 --- a/create-snowpack-app/app-template-react/snowpack.config.js +++ b/create-snowpack-app/app-template-react/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, diff --git a/create-snowpack-app/app-template-svelte-typescript/README.md b/create-snowpack-app/app-template-svelte-typescript/README.md index 57e29d428b..932cb5c91d 100644 --- a/create-snowpack-app/app-template-svelte-typescript/README.md +++ b/create-snowpack-app/app-template-svelte-typescript/README.md @@ -22,7 +22,7 @@ See the section about running tests for more information. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. +**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file. ### Q: What about Eject? diff --git a/create-snowpack-app/app-template-svelte-typescript/snowpack.config.js b/create-snowpack-app/app-template-svelte-typescript/snowpack.config.mjs similarity index 97% rename from create-snowpack-app/app-template-svelte-typescript/snowpack.config.js rename to create-snowpack-app/app-template-svelte-typescript/snowpack.config.mjs index 2eb4179feb..11326c5a69 100644 --- a/create-snowpack-app/app-template-svelte-typescript/snowpack.config.js +++ b/create-snowpack-app/app-template-svelte-typescript/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: {url: '/', static: true}, src: {url: '/dist'}, diff --git a/create-snowpack-app/app-template-svelte/README.md b/create-snowpack-app/app-template-svelte/README.md index 57e29d428b..932cb5c91d 100644 --- a/create-snowpack-app/app-template-svelte/README.md +++ b/create-snowpack-app/app-template-svelte/README.md @@ -22,7 +22,7 @@ See the section about running tests for more information. Builds a static copy of your site to the `build/` folder. Your app is ready to be deployed! -**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. +**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file. ### Q: What about Eject? diff --git a/create-snowpack-app/app-template-svelte/snowpack.config.js b/create-snowpack-app/app-template-svelte/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-svelte/snowpack.config.js rename to create-snowpack-app/app-template-svelte/snowpack.config.mjs index 66f8485191..b446905705 100644 --- a/create-snowpack-app/app-template-svelte/snowpack.config.js +++ b/create-snowpack-app/app-template-svelte/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: {url: '/', static: true}, src: {url: '/dist'}, diff --git a/create-snowpack-app/app-template-vue-typescript/snowpack.config.js b/create-snowpack-app/app-template-vue-typescript/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-vue-typescript/snowpack.config.js rename to create-snowpack-app/app-template-vue-typescript/snowpack.config.mjs index 10495f4db1..7c8861878a 100644 --- a/create-snowpack-app/app-template-vue-typescript/snowpack.config.js +++ b/create-snowpack-app/app-template-vue-typescript/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: {url: '/', static: true}, src: {url: '/dist'}, diff --git a/create-snowpack-app/app-template-vue/snowpack.config.js b/create-snowpack-app/app-template-vue/snowpack.config.mjs similarity index 96% rename from create-snowpack-app/app-template-vue/snowpack.config.js rename to create-snowpack-app/app-template-vue/snowpack.config.mjs index 1b63812d9a..578923c2f7 100644 --- a/create-snowpack-app/app-template-vue/snowpack.config.js +++ b/create-snowpack-app/app-template-vue/snowpack.config.mjs @@ -1,5 +1,5 @@ /** @type {import("snowpack").SnowpackUserConfig } */ -module.exports = { +export default { mount: { public: {url: '/', static: true}, src: {url: '/dist'}, diff --git a/docs/guides/babel.md b/docs/guides/babel.md index 5a6c13c6d8..8da2b42e8c 100644 --- a/docs/guides/babel.md +++ b/docs/guides/babel.md @@ -15,8 +15,10 @@ description: How to use Babel in your Snowpack project. **To use Babel with Snowpack:** add the [@snowpack/plugin-babel](https://www.npmjs.com/package/@snowpack/plugin-babel) plugin to your project. ```diff -// snowpack.config.js -"plugins": [ -+ ["@snowpack/plugin-babel"] -] + // snowpack.config.mjs + export default { + "plugins": [ ++ ['@snowpack/plugin-babel'], + ], + }; ``` diff --git a/docs/guides/connecting-tools.md b/docs/guides/connecting-tools.md index 6840e08b11..6b4ba1ea83 100644 --- a/docs/guides/connecting-tools.md +++ b/docs/guides/connecting-tools.md @@ -24,30 +24,34 @@ For example, if you'd like to use sass, you can install [`@snowpack/plugin-sass` npm install @snowpack/plugin-sass ``` -Then if you don't already have a Snowpack configuration file (`snowpack.config.js`) you can create one with this command: +Then if you don't already have a Snowpack configuration file (`snowpack.config.mjs`) you can create one with this command: ```bash snowpack init ``` -Open up `snowpack.config.js` and add the name of your new plugin to the plugins object: +Open up `snowpack.config.mjs` and add the name of your new plugin to the plugins object: ```diff -// snowpack.config.js - plugins: [ + // snowpack.config.mjs + export default { + plugins: [ - /* ... */ -+ '@snowpack/plugin-sass' - ], ++ '@snowpack/plugin-sass', + ], + }; ``` -What about the other optional configuration options? [The `@snowpack/plugin-sass` documentation](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-sass) lists all the options and where to put them in the `snowpack.config.js` file. If I wanted the `compressed` output `style` I'd turn the `@snowpack/plugin-sass` value into an array with an object containing the configuration: +What about the other optional configuration options? [The `@snowpack/plugin-sass` documentation](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-sass) lists all the options and where to put them in the `snowpack.config.mjs` file. If I wanted the `compressed` output `style` I'd turn the `@snowpack/plugin-sass` value into an array with an object containing the configuration: ```diff -// snowpack.config.js - plugins: [ -- '@snowpack/plugin-sass' -+ ['@snowpack/plugin-sass', { style: 'compressed'}] - ], + // snowpack.config.mjs + export default { + plugins: [ +- '@snowpack/plugin-sass' ++ ['@snowpack/plugin-sass', { style: 'compressed'}] + ], + }; ``` If there isn't a plugin yet, you might be interested in making one. Check out our [Plugin API](/reference/plugins) @@ -59,13 +63,20 @@ If you can't find a plugin that fits your needs and don't want to write your own #### @snowpack/plugin-build-script ```js -// snowpack.config.json +// snowpack.config.mjs // [npm install @snowpack/plugin-build-script] -{ - "plugins": [ - ["@snowpack/plugin-build-script", { "cmd": "postcss", "input": [".css"], "output": [".css"]}] +export default { + plugins: [ + [ + '@snowpack/plugin-build-script', + { + cmd: 'postcss', + input: ['.css'], + output: ['.css'], + }, + ], ], -} +}; ``` This plugin allows you to connect any CLI into your build process. Just give it a `cmd` CLI command that can take input from `stdin` and emit the build result via `stdout`. Check out the [plugin documentation](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-build-script) for more information. @@ -73,13 +84,19 @@ This plugin allows you to connect any CLI into your build process. Just give it #### @snowpack/plugin-run-script ```js -// snowpack.config.json +// snowpack.config.mjs // [npm install @snowpack/plugin-run-script] -{ - "plugins": [ - ["@snowpack/plugin-run-script", { "cmd": "eleventy", "watch": "$1 --watch" }] +export default { + plugins: [ + [ + '@snowpack/plugin-run-script', + { + cmd: 'eleventy', + watch: '$1 --watch', + }, + ], ], -} +}; ``` This plugin allows you to run any CLI command as a part of your dev and build workflow. This plugin doesn't affect your build output, but it is useful for connecting developer tooling directly into Snowpack. Use this to add meaningful feedback to your dev console as you type, like TypeScript type-checking and ESLint lint errors. This doesn't affect how Snowpack builds your site. Check out the [plugin documentation](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-run-script) for more information. @@ -89,10 +106,19 @@ This plugin allows you to run any CLI command as a part of your dev and build wo #### PostCSS ```js -// snowpack.config.json -"plugins": [ - ["@snowpack/plugin-build-script", {"cmd": "postcss", "input": [".css"], "output": [".css"]}] -] +// snowpack.config.mjs +export default { + plugins: [ + [ + '@snowpack/plugin-build-script', + { + cmd: 'postcss', + input: ['.css'], + output: ['.css'], + }, + ], + ], +}; ``` The [`postcss-cli`](https://github.com/postcss/postcss-cli) package must be installed manually. You can configure PostCSS with a `postcss.config.js` file in your current working directory. @@ -100,12 +126,17 @@ The [`postcss-cli`](https://github.com/postcss/postcss-cli) package must be inst #### ESLint ```js -// snowpack.config.json -"plugins": [ - ["@snowpack/plugin-run-script", { - "cmd": "eslint src --ext .js,.jsx,.ts,.tsx", - // Optional: Use npm package "eslint-watch" to run on every file change - "watch": "esw -w --clear src --ext .js,.jsx,.ts,.tsx" - }] -] +// snowpack.config.mjs +export default { + plugins: [ + [ + '@snowpack/plugin-run-script', + { + cmd: 'eslint src --ext .js,.jsx,.ts,.tsx', + // Optional: Use npm package "eslint-watch" to run on every file change + watch: 'esw -w --clear src --ext .js,.jsx,.ts,.tsx', + }, + ], + ], +}; ``` diff --git a/docs/guides/optimize-and-bundle.md b/docs/guides/optimize-and-bundle.md index 8ad32a93c8..9fb3bc8158 100644 --- a/docs/guides/optimize-and-bundle.md +++ b/docs/guides/optimize-and-bundle.md @@ -16,9 +16,9 @@ Snowpack build optimizations come in two flavors: **built-in** (esbuild) & **plu Snowpack recently released a built-in optimization pipeline powered by [esbuild](https://esbuild.github.io/). Using this built-in optimizer, you can now bundle, transpile, and minify your production builds 10x-100x faster than Webpack or Rollup. However, esbuild is still young and [not yet production-ready](https://esbuild.github.io/faq/#production-readiness). At the moment, we only recommended this for smaller projects. ```js -// snowpack.config.js +// snowpack.config.mjs // Example: Using Snowpack's built-in bundling support -module.exports = { +export default { optimize: { bundle: true, minify: true, diff --git a/docs/guides/plugins.md b/docs/guides/plugins.md index cc2232ac68..d24d731004 100644 --- a/docs/guides/plugins.md +++ b/docs/guides/plugins.md @@ -38,16 +38,14 @@ For testing, [create a new, example Snowpack project](/tutorials/getting-started > The alternative would be to use `npm install --save-dev path_to_your_plugin`, which would create the "symlink-like" entry in your example Snowpack project’s `package.json` -In your example Snowpack project, add your plugin to the `snowpack.config.js` along with any plugin options you’d like to test: +In your example Snowpack project, add your plugin to the `snowpack.config.mjs` along with any plugin options you’d like to test: ```js -// snowpack.config.js +// snowpack.config.mjs // Example: enabling a Snowpack plugin called "my-snowpack-plugin" -{ - "plugins": [ - "my-snowpack-plugin" - ] -} +export default { + plugins: ['my-snowpack-plugin'], +}; ``` ## Testing and Troubleshooting @@ -63,26 +61,26 @@ In this step, you'll learn how to add user-configurable options to your plugin a In your example Snowpack project, instead of enabling the plugin as a string containing the plugin name, use an array. The first item is name of your plugin and the second a new object containing the plugin options. ```diff -// snowpack.config.js -{ - "plugins": [ -- "my-snowpack-plugin" -+ ["my-snowpack-plugin", { "optionA": "foo", "optionB": true }] - ] -} + // snowpack.config.mjs + export default { + plugins: [ +- 'my-snowpack-plugin' ++ ['my-snowpack-plugin', { optionA: 'foo', optionB: true }] + ] + }; ``` You access these through the `pluginOptions` ```diff -// my-snowpack-plugin.js -module.exports = function (snowpackConfig, pluginOptions) { -+ let optionA = pluginOptions.optionA -+ let optionB = pluginOptions.optionB - return { - name: 'my-snowpack-plugin' + // my-snowpack-plugin.js + module.exports = function (snowpackConfig, pluginOptions) { ++ let optionA = pluginOptions.optionA; ++ let optionB = pluginOptions.optionB; + return { + name: 'my-snowpack-plugin', + }; }; -}; ``` ### Plugin Use-Cases @@ -121,11 +119,19 @@ module.exports = function (snowpackConfig, pluginOptions) { }; ``` -```json -// snowpack.config.json -{ - "plugins": [["./my-snowpack-plugin.js", {"optionA": "foo", "optionB": "bar"}]] -} +```js +// snowpack.config.mjs +export default { + plugins: [ + [ + './my-snowpack-plugin.js', + { + optionA: 'foo', + optionB: 'bar', + }, + ], + ], +}; ``` A Snowpack plugin should be distributed as a function that can be called with plugin-specific options to return a plugin object. @@ -283,14 +289,20 @@ To develop and test a Snowpack plugin, the strategy is the same as with other np - Be aware that `npm install` will remove your linked plugin, so on any install, you will need to redo the `npm link my-snowpack-plugin`. - (The alternative would be to use `npm install --save-dev <folder_to_your_plugin_project>`, which would create the "symlink-like" entry in your example Snowpack project’s `package.json`) -In your example Snowpack project, add your plugin to the `snowpack.config.json` along with any plugin options you’d like to test: +In your example Snowpack project, add your plugin to the `snowpack.config.mjs` along with any plugin options you’d like to test: -```json -{ - "plugins": [ - ["my-snowpack-plugin", { "option-1": "testing", "another-option": false }] - " -} +```js +export default { + plugins: [ + [ + 'my-snowpack-plugin', + { + 'option-1': 'testing', + 'another-option': false, + }, + ], + ], +}; ``` ### Publishing a Plugin diff --git a/docs/guides/postcss.md b/docs/guides/postcss.md index 1f4fcaf3c9..ef388cdcbd 100644 --- a/docs/guides/postcss.md +++ b/docs/guides/postcss.md @@ -13,10 +13,12 @@ description: How to use PostCSS in your Snowpack project. **To use PostCSS with Snowpack:** add the [@snowpack/plugin-postcss](https://www.npmjs.com/package/@snowpack/plugin-postcss) plugin to your project. ```diff -// snowpack.config.js -"plugins": [ -+ "@snowpack/plugin-postcss" -] + // snowpack.config.mjs + export default { + plugins: [ ++ '@snowpack/plugin-postcss', + ], + }; ``` PostCSS requires a [`postcss.config.js`](https://github.com/postcss/postcss#usage) file in your project. By default, the plugin looks in the root directory of your project, but you can customize this yourself with the `config` option. See [the plugin README](https://www.npmjs.com/package/@snowpack/plugin-postcss) for all available options. diff --git a/docs/guides/preact.md b/docs/guides/preact.md index 0349b35b0e..284a7bfb20 100644 --- a/docs/guides/preact.md +++ b/docs/guides/preact.md @@ -13,9 +13,11 @@ You can import and use Preact without any custom configuration needed. ```js // Example: Lets you import "react" in your application, but uses preact internally -// snowpack.config.json -"alias": { - "react": "preact/compat", - "react-dom": "preact/compat" -} +// snowpack.config.mjs +export default { + alias: { + react: 'preact/compat', + 'react-dom': 'preact/compat', + }, +}; ``` diff --git a/docs/guides/react-global-imports.md b/docs/guides/react-global-imports.md index 4563582414..649df1c13c 100644 --- a/docs/guides/react-global-imports.md +++ b/docs/guides/react-global-imports.md @@ -25,7 +25,7 @@ export default MyComponent; To recreate this setup, follow 2 steps: 1. Create a [babel.config.js](./babel.config.js) file in the root of the project. Copy the settings shown. -2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.js](./snowpack.config.js) +2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.mjs](./snowpack.config.js) ### ⚠️ Caveat diff --git a/docs/guides/routing.md b/docs/guides/routing.md index ca0bd4080e..ef2e35b2ec 100644 --- a/docs/guides/routing.md +++ b/docs/guides/routing.md @@ -16,10 +16,16 @@ Single Page Applications (SPA) give the client application complete control over To implement this pattern, you'll want to define a single "catch-all" route for development: ```js -// snowpack.config.js -"routes": [ - {"match": "routes", "src": ".*", "dest": "/index.html"} -] +// snowpack.config.mjs +export default { + routes: [ + { + match: 'routes', + src: '.*', + dest: '/index.html', + }, + ], +}; ``` This tells Snowpack's dev server to serve the fallback `/index.html` URL for all routes (`.*` in RegEx means "match everything"). @@ -33,10 +39,10 @@ Many modern frontend applications will talk directly to an API. Often this API i To serve the correct API response to a URL like `/api/users` in development, you can configure Snowpack to proxy some requests to another server. In this example, we'll proxy all "/api/\*" requests to another server that we have running locally on port `3001`: ```js -// snowpack.config.js -const proxy = require('http2-proxy'); +// snowpack.config.mjs +import proxy from 'http2-proxy'; -module.exports = { +export default { routes: [ { src: '/api/.*', @@ -61,10 +67,10 @@ We recommend the [http2-proxy](https://www.npmjs.com/package/http2-proxy) librar Proxied requests can be upgraded to a WebSocket connection via the "upgrade" event handler. This allows you to proxy WebSocket requests through the Snowpack dev server during development. You can learn more about the upgrade mechanism on [MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism#upgrading_to_a_websocket_connection). ```js -// snowpack.config.js -const proxy = require('http2-proxy'); +// snowpack.config.mjs +import proxy = from 'http2-proxy'; -module.exports = { +export default { routes: [ { src: '/ws', diff --git a/docs/guides/sass.md b/docs/guides/sass.md index dd3e1a0b6f..465d2d247c 100644 --- a/docs/guides/sass.md +++ b/docs/guides/sass.md @@ -17,8 +17,10 @@ This article is a stub, you can help expand it into ```js -// snowpack.config.js +// snowpack.config.mjs // Example: expanded object notation "mount" usage -{ - "mount": { +export default { + mount: { // Same behavior as the "src" example above: - "src": {url: "/dist"}, + src: {url: '/dist'}, // Mount "public" to the root URL path ("/*") and serve files with zero transformations: - "public": {url: "/", static: true, resolve: false} - } -} + public: {url: '/', static: true, resolve: false}, + }, +}; ``` ## env @@ -114,11 +114,12 @@ You can further customize this the build behavior for any mounted directory by u Declare any environment variables that should be exposed on `import.meta.env` at runtime. See [Environment Variables](/reference/environment-variables) for more information. ```js -{ - "env": { - "API_URL": "api.google.com" - } -} +// snowpack.config.mjs +export default { + env: { + API_URL: 'api.google.com', + }, +}; ``` ## alias @@ -130,18 +131,18 @@ Configure import aliases for directories and packages. Note: In an older version of Snowpack, all mounted directories were also available as aliases by **Default**. As of Snowpack 2.7, this is no longer the case and no aliases are defined by **Default**. ```js -// snowpack.config.js +// snowpack.config.mjs // Example: alias types -{ +export default { alias: { // Type 1: Package Import Alias - "lodash": "lodash-es", - "react": "preact/compat", + lodash: 'lodash-es', + react: 'preact/compat', // Type 2: Local Directory Import Alias (relative to cwd) - "components": "./src/components" - "@app": "./src" - } -} + components: './src/components', + '@app': './src', + }, +}; ``` ## plugins @@ -153,9 +154,9 @@ Enable Snowpack plugins and their options. Also see our [Plugin guide](/guides/plugins) ```js -// snowpack-config.js +// snowpack.config.mjs // Example: enable plugins both simple and expanded -{ +export default { plugins: [ // Simple format: no options needed 'plugin-1', @@ -173,7 +174,7 @@ Configure the Snowpack dev server. ### devOptions.secure -**Type**: `boolean` or `object` +**Type**: `boolean` or `object` **Default**: `false` Toggles whether Snowpack dev server should use HTTPS with HTTP2 enabled. See the [SSL Certificates](/guides/https-ssl-certificates) Guide for more information. @@ -181,12 +182,13 @@ Toggles whether Snowpack dev server should use HTTPS with HTTP2 enabled. See the If the value is `true`, Snowpack will look for a `snowpack.crt` and `snowpack.key` file in your `root` directory. If the value is an `object`, you may pass your custom `cert` and `key` files directly to it. ```js -const fs = require('fs'); +// snowpack.config.mjs +import fs from 'fs'; -const cert = fs.readFileSync('/path/to/server.crt'); -const key = fs.readFileSync('/path/to/server.key'); +const cert = await fs.promises.readFile('/path/to/server.crt'); +const key = await fs.promises.readFile('/path/to/server.key'); -module.exports = { +export default { devOptions: { secure: {cert, key}, }, @@ -195,14 +197,14 @@ module.exports = { ### devOptions.hostname -**Type**: `string` +**Type**: `string` **Default**: `localhost` The hostname that the dev server is running on. Snowpack uses this information to configure the HMR websocket and properly open your browser on startup (see: [`devOptions.open`](#devoptions.open)). ### devOptions.port -**Type**: `number` +**Type**: `number` **Default**: `8080` The port the dev server runs on. @@ -215,7 +217,7 @@ Optional path to append to dev server url. May also include querystring paramete ### devOptions.fallback -**Type**: `string` +**Type**: `string` **Default**: `"index.html"` The HTML file to serve for non-resource routes. @@ -226,7 +228,7 @@ When using the Single-Page Application (SPA) pattern, this is the HTML "shell" f ### devOptions.open -**Type**: `string` +**Type**: `string` **Default**: `"**Default**"` Configures how the dev server opens in the browser when it starts. @@ -235,7 +237,7 @@ Any installed browser, e.g., "chrome", "firefox", "brave". Set "none" to disable ### devOptions.output -**Type**: `"stream" | "dashboard"` +**Type**: `"stream" | "dashboard"` **Default**: `"dashboard"` Set the output mode of the `dev` console: @@ -245,35 +247,35 @@ Set the output mode of the `dev` console: ### devOptions.hmr -**Type**: `boolean` +**Type**: `boolean` **Default**: `true` Toggles HMR on the Snowpack dev server. ### devOptions.hmrDelay -**Type**: `number` (milliseconds) +**Type**: `number` (milliseconds) **Default**: `0` Milliseconds to delay HMR-triggered browser update. ### devOptions.hmrPort -**Type**: `number` +**Type**: `number` **Default**: [`devOptions.port`](#devoptions.port) The port where Snowpack's HMR Websocket runs. ### devOptions.hmrErrorOverlay -**Type**: `boolean` +**Type**: `boolean` **Default**: `true` Toggles a browser overlay that displays JavaScript runtime errors when running HMR. ### devOptions.out -**Type**: `string` +**Type**: `string` **Default**: `"build"` _NOTE:_ Deprecated, see `buildOptions.out`. @@ -292,7 +294,7 @@ Configure how npm packages are installed and used. ### packageOptions.external -**Type**: `string[]` +**Type**: `string[]` **Example**: `"external": ["fs"]` Mark some imports as external. Snowpack will ignore these imports and leave them as-is in your final build. @@ -301,7 +303,7 @@ This is an advanced feature: Bare imports are not supported in any major browser ### packageOptions.source -**Type**: `"local" | "remote"` +**Type**: `"local" | "remote"` **Default**: `"local"` **Example**: `"source": "local"` @@ -321,7 +323,7 @@ Known dependencies to install with Snowpack. Used for installing packages any de #### packageOptions.polyfillNode -**Type**: `boolean` +**Type**: `boolean` **Default**: `false` This will automatically polyfill any Node.js dependencies as much as possible for the browser @@ -331,12 +333,15 @@ Converts packages that depend on Node.js built-in modules (`"fs"`, `"path"`, `"u If you'd like to customize this polyfill behavior, you can provide your own Rollup plugin for the installer: ```js +// snowpack.config.mjs // Example: If `--polyfill-node` doesn't support your use-case, you can provide your own custom Node.js polyfill behavior -module.exports = { +import rollupPluginNodePolyfills from 'rollup-plugin-node-polyfills'; + +export default { packageOptions: { polyfillNode: false, rollup: { - plugins: [require('rollup-plugin-node-polyfills')({crypto: true, ...})], + plugins: [rollupPluginNodePolyfills({crypto: true, ...})], }, }, }; @@ -356,7 +361,7 @@ This option is only supported in `source="local"` mode. `source="remote"` does n #### packageOptions.packageLookupFields -**Type**: `string[]` +**Type**: `string[]` **Example**: `"packageLookupFields": ["svelte"]` Set custom lookup fields for dependency `package.json` file entrypoints, in addition to the defaults like "module", "main", etc. @@ -365,7 +370,7 @@ This option is only supported in `source="local"` mode. `source="remote"` does n #### packageOptions.packageExportLookupFields -**Type**: `string[]` +**Type**: `string[]` **Example**: `"packageExportLookupFields": ["svelte"]` Set custom lookup fields for dependency `package.json` ["exports" mappings.](https://nodejs.org/api/packages.html#packages_package_entry_points) @@ -394,7 +399,7 @@ Enable streaming package imports. Load dependencies from our remote CDN. Manage #### packageOptions.origin -**Type**: `string` +**Type**: `string` **Default**: `https://pkg.snowpack.dev` The remote origin to import packages from. When you import a new package, Snowpack will fetch those resources from this URL. @@ -403,14 +408,14 @@ Currently, the origin must implement a specific response format that Snowpack ca #### packageOptions.cache -**Type**: `string` +**Type**: `string` **Default**: `.snowpack` The location of your project cache folder, relative to the project root. Snowpack will save cached data to this folder. For example, if `packageOptions.types` is set to true, Snowpack will save TypeScript types to a `types` directory within this folder. #### packageOptions.types -**Type**: `boolean` +**Type**: `boolean` **Default**: `false` If true, Snowpack will download TypeScript types for every package. @@ -430,7 +435,7 @@ The local directory that we output your final build to. ### buildOptions.baseUrl -**Type**: `string` +**Type**: `string` **Default**: `/` In your HTML, replace all instances of `%PUBLIC_URL%` with this @@ -439,7 +444,7 @@ Inspired by the same [Create React App](https://create-react-app.dev/docs/using- ### buildOptions.clean -**Type**: `boolean` +**Type**: `boolean` **Default**: `true` Set to `false` to prevent Snowpack from deleting the build output folder (`buildOptions.out`) between builds. @@ -454,7 +459,7 @@ _NOTE:_ Deprecated, see `buildOptions.metaUrlPath`. ### buildOptions.metaUrlPath -**Type**: `string` +**Type**: `string` **Default**: `_snowpack` Rename the default directory for Snowpack metadata. In every build, Snowpack creates meta files for loading things like [HMR](/concepts/hot-module-replacement), [Environment Variables](/reference/environment-variables), and your built npm packages. @@ -463,7 +468,7 @@ When you build your project, this will be a path on disk relative to the `buildO ### buildOptions.sourcemap -**Type**: `boolean` +**Type**: `boolean` **Default**: `false` Generates source maps. @@ -472,14 +477,14 @@ Generates source maps. ### buildOptions.watch -**Type**: `boolean` +**Type**: `boolean` **Default**: `false` Run Snowpack's build pipeline through a file watcher. This option works best for local development when you have a custom frontend server (ex: Rails, PHP, etc.) and the Snowpack dev server cannot be used. ### buildOptions.htmlFragments -**Type**: `boolean` +**Type**: `boolean` **Default**: `false` Toggles whether HTML fragments are transformed like full HTML pages. @@ -488,21 +493,21 @@ HTML fragments are HTML files not starting with "". ### buildOptions.jsxFactory -**Type**: `string` +**Type**: `string` **Default**: `React.createElement` (or `h` if Preact import is detected) Set the name of the function used to create JSX elements. ### buildOptions.jsxFragment -**Type**: `string` +**Type**: `string` **Default**: `React.Fragment` (or `Fragment` if Preact import is detected) Set the name of the function used to create JSX fragments. ### buildOptions.jsxInject -**Type**: `string` +**Type**: `string` **Default**: `undefined` If set, this string can be used to automatically inject JSX imports for every JSX/TSX file. @@ -514,7 +519,7 @@ Configure your tests. ### testOptions.files -**Type**: `string[]` +**Type**: `string[]` **Default**: `["__tests__/**/*", "**/*.@(spec|test).*"]` Specifies your test files. If `NODE_ENV` is set to "test", Snowpack includes these files in your site build and scan them for installable dependencies. Otherwise, Snowpack excludes these files. diff --git a/docs/reference/environment-variables.md b/docs/reference/environment-variables.md index 6e83df5823..92c94293f8 100644 --- a/docs/reference/environment-variables.md +++ b/docs/reference/environment-variables.md @@ -23,18 +23,18 @@ SNOWPACK_PUBLIC_API_URL=api.google.com snowpack dev **New in v3.1.0** Pass environment variables as an object to the `env` property. Note that these environment variables do not need to use the `SNOWPACK_PUBLIC_` prefix and anything set here will be available on `import.meta.env` (see below). ```js -// snowpack.config.js -module.exports = { +// snowpack.config.mjs +export default { env: { API_URL: 'api.google.com', }, }; ``` -**In prior versions**, we recommended setting environment variables by adding to `process.env.*` at the top of your `snowpack.config.js` file. This ended up being pretty confusing, so using the `env` property is now the recommended approach. +**In prior versions**, we recommended setting environment variables by adding to `process.env.*` at the top of your `snowpack.config.mjs` file. This ended up being pretty confusing, so using the `env` property is now the recommended approach. ```js -// snowpack.config.js +// snowpack.config.mjs process.env.SNOWPACK_PUBLIC_API_URL = 'api.google.com'; // ...rest of config ``` diff --git a/docs/reference/javascript-interface.md b/docs/reference/javascript-interface.md index 3de2dd90c4..287b29f724 100644 --- a/docs/reference/javascript-interface.md +++ b/docs/reference/javascript-interface.md @@ -17,7 +17,7 @@ import {createConfiguration} from 'snowpack'; const config = createConfiguration({...}); ``` -Almost everything that you do with Snowpack requires a configuration object. Snowpack is designed to work with zero config, and the `config` argument that this function takes can be full, empty, or only contain a couple of properties. The rest of the configuration object will be filled out with Snowpack's usual set of defaults, outlined in our [snowpack.config.js documentation.](/reference/configuration). +Almost everything that you do with Snowpack requires a configuration object. Snowpack is designed to work with zero config, and the `config` argument that this function takes can be full, empty, or only contain a couple of properties. The rest of the configuration object will be filled out with Snowpack's usual set of defaults, outlined in our [snowpack.config.mjs documentation.](/reference/configuration). The easiest way to think about the difference is that `SnowpackUserConfig` is the externally-documented configuration format, and `SnowpackConfig` is our internal representation with all optional/undefined values populated with the actual defaults. @@ -27,7 +27,7 @@ The easiest way to think about the difference is that `SnowpackUserConfig` is th ```js import {loadConfiguration} from 'snowpack'; -const config = await loadConfiguration({...}, '/path/to/snowpack.config.js'); +const config = await loadConfiguration({...}, '/path/to/snowpack.config.mjs'); ``` Similar to `createConfiguration`, but this function will actually check the file system to load a configuration file from disk. diff --git a/docs/reference/plugins.md b/docs/reference/plugins.md index 01e52a3e5d..7b8c6ddfb3 100644 --- a/docs/reference/plugins.md +++ b/docs/reference/plugins.md @@ -21,11 +21,13 @@ module.exports = function (snowpackConfig, pluginOptions) { }; }; -// To use this plugin, add it to your snowpack.config.js: +// To use this plugin, add it to your snowpack.config.mjs: // -// "plugins": [ -// ["./my-first-snowpack-plugin.js", {/* pluginOptions */ }] -// ] +// export default { +// plugins: [ +// ["./my-first-snowpack-plugin.js", {/* pluginOptions */ }], +// ], +// }; ``` A **Snowpack Plugin** is an object interface that lets you customize Snowpack's behavior. Snowpack provides different hooks for your plugin to connect to. For example, you can add a plugin to handle Svelte files, optimize CSS, convert SVGs to React components, run TypeScript during development, and much more. diff --git a/docs/tutorials/react.md b/docs/tutorials/react.md index aa95640811..6d26aac842 100644 --- a/docs/tutorials/react.md +++ b/docs/tutorials/react.md @@ -113,15 +113,17 @@ mv index.css public/index.css This means if you are running Snowpack right now, the site is now broken as the files are all in different places. Lets add a "mount" configuration to update your site to your new project layout. -The `mount` configuration changes where Snowpack looks for and builds files. Every Snowpack project comes with a `snowpack.config.js` file for any configuration that you might need. Right now, you should see a configuration file with empty options. Add this to the empty `mount` object: +The `mount` configuration changes where Snowpack looks for and builds files. Every Snowpack project comes with a `snowpack.config.mjs` file for any configuration that you might need. Right now, you should see a configuration file with empty options. Add this to the empty `mount` object: ```diff - mount: { -- /* ... */ -+ // directory name: 'build directory' -+ public: '/', -+ src: '/dist', - }, + export default { + mount: { +- /* ... */ ++ // directory name: 'build directory' ++ public: '/', ++ src: '/dist', + }, + }; ``` The original file configuration had Snowpack building the directory structure the same as the directories in the project, including root. Now the config builds only src and public. Src to the dist folder and public to root. diff --git a/docs/tutorials/svelte.md b/docs/tutorials/svelte.md index 628e1ba614..c5c278b6c7 100644 --- a/docs/tutorials/svelte.md +++ b/docs/tutorials/svelte.md @@ -60,24 +60,24 @@ npm install @snowpack/plugin-svelte --save-dev Snowpack [plugins](/plugins) are a way to extend Snowpack's capabilities without having to do custom configuration yourself. Install the `@snowpack/plugin-svelte` plugin so that Snowpack knows how built `.svelte` files into JavaScript and CSS files that run in the browser: -Once installed, you'll need to add the plugin to your Snowpack configuration file (`snowpack.config.js`) so that Snowpack knows to use it: +Once installed, you'll need to add the plugin to your Snowpack configuration file (`snowpack.config.mjs`) so that Snowpack knows to use it: ```diff -// snowpack.config.js - -module.exports = { - mount: { - /* ... */ - }, - plugins: [ -- /* ... */ -+ '@snowpack/plugin-svelte' - ], + // snowpack.config.mjs + export default { + mount: { + /* ... */ + }, + plugins: [ +- /* ... */ ++ '@snowpack/plugin-svelte', + ], + }; ``` Restart your Snowpack dev server to run it with the new configuration. Exit the process (ctrl + c in most Windows/Linux/macOS) and start it again with `npm run start`. -> 💡 Tip: Restart the Snowpack development server when you make configuration changes (changes to the `snowpack.config.js`). +> 💡 Tip: Restart the Snowpack development server when you make configuration changes (changes to the `snowpack.config.mjs`). Snowpack will recognize the new dependency (Svelte, or "svelte/internal") and print the following output as installs your dependencies for the frontend: @@ -160,17 +160,18 @@ mv index.css public/index.css This means if you are running Snowpack right now, the site is now broken as the files are all in different places. Lets add a "mount" configuration to update your site to your new project layout. -The `mount` configuration changes where Snowpack scan for and builds files. Head back to the `snowpack.config.js` file you edited when you added `@snowpack/plugin-svelte`. Add this to the empty `mount` object: +The `mount` configuration changes where Snowpack scan for and builds files. Head back to the `snowpack.config.mjs` file you edited when you added `@snowpack/plugin-svelte`. Add this to the empty `mount` object: ```diff -// snowpack.config.js - - mount: { -- /* ... */ -+ // directory name: 'build directory' -+ public: '/', -+ src: '/dist', - }, + // snowpack.config.mjs + export default { + mount: { +- /* ... */ ++ // directory name: 'build directory' ++ public: '/', ++ src: '/dist', + }, + }; ``` Graphic shows the original and new folder structures side by side. Arrows indicate that the files are built to where the arrow points. The Original side shows a folder labeled ./ entire directory with an arrow pointing to a folder labeled mysite.com/*. The New side shows a folder labeled ./src/* with an arrow pointing to a folder labeled mysite.com/_dist/*. Then a second folder labeled ./public/* with an arrow pointing to a folder labeled mysite.com/* diff --git a/docs/tutorials/vue.md b/docs/tutorials/vue.md index 20b5c59a74..2f144d61aa 100644 --- a/docs/tutorials/vue.md +++ b/docs/tutorials/vue.md @@ -57,24 +57,23 @@ npm install @snowpack/plugin-vue --save-dev Snowpack [plugins](/plugins) are a way to extend Snowpack's capabilities without having to do custom configuration yourself. Install the `@snowpack/plugin-vue` plugin so that Snowpack knows how built `.vue` files into JavaScript and CSS files that run in the browser: -Once installed, you'll need to add the plugin to your Snowpack configuration file (`snowpack.config.js`) so that Snowpack knows to use it: +Once installed, you'll need to add the plugin to your Snowpack configuration file (`snowpack.config.mjs`) so that Snowpack knows to use it: ```diff -// snowpack.config.js - - module.exports = { + // snowpack.config.mjs + export default { mount: { /* ... */ }, plugins: [ -+ '@snowpack/plugin-vue' - ] - } ++ '@snowpack/plugin-vue', + ], + }; ``` Restart your Snowpack dev server to run it with the new configuration. Exit the process (ctrl + c in most Windows/Linux/macOS) and start it again with `npm run start`. -> 💡 Tip: Restart the Snowpack development server when you make configuration changes (changes to the `snowpack.config.js`). +> 💡 Tip: Restart the Snowpack development server when you make configuration changes (changes to the `snowpack.config.mjs`). Snowpack will recognize the new dependency (Vue, or "vue/internal") and print the following output as installs your dependencies for the frontend: @@ -147,16 +146,17 @@ mv index.css public/index.css This means if you are running Snowpack right now, the site is now broken as the files are all in different places. Lets add a "mount" configuration to update your site to your new project layout. -The `mount` configuration changes where Snowpack scan for and builds files. Head back to the `snowpack.config.js` file you edited when you added `@snowpack/plugin-vue`. Add this to the empty `mount` object: +The `mount` configuration changes where Snowpack scan for and builds files. Head back to the `snowpack.config.mjs` file you edited when you added `@snowpack/plugin-vue`. Add this to the empty `mount` object: ```diff -// snowpack.config.js - - mount: { -- /* ... */ -+ public: '/', -+ src: '/dist', - }, + // snowpack.config.mjs + export default { + mount: { +- /* ... */ ++ public: '/', ++ src: '/dist', + }, + }; ``` Graphic shows the original and new folder structures side by side. Arrows indicate that the files are built to where the arrow points. The Original side shows a folder labeled ./ entire directory with an arrow pointing to a folder labeled mysite.com/*. The New side shows a folder labeled ./src/* with an arrow pointing to a folder labeled mysite.com/_dist/*. Then a second folder labeled ./public/* with an arrow pointing to a folder labeled mysite.com/* diff --git a/examples/react-global-imports/README.md b/examples/react-global-imports/README.md index c2cf99472b..81ed2da529 100644 --- a/examples/react-global-imports/README.md +++ b/examples/react-global-imports/README.md @@ -19,7 +19,7 @@ export default MyComponent; To recreate this setup, follow 2 steps: 1. Create a [babel.config.js](./babel.config.js) file in the root of the project. Copy the settings shown. -2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.js](./snowpack.config.js) +2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.mjs](./snowpack.config.js) ### ⚠️ Caveat diff --git a/plugins/plugin-babel/README.md b/plugins/plugin-babel/README.md index a24951c89c..abfb7fad98 100644 --- a/plugins/plugin-babel/README.md +++ b/plugins/plugin-babel/README.md @@ -7,25 +7,25 @@ npm install --save-dev @snowpack/plugin-babel ``` ```js -// snowpack.config.json -{ - "plugins": [ +// snowpack.config.mjs +export default { + plugins: [ [ - "@snowpack/plugin-babel", + '@snowpack/plugin-babel', { - "input": ['.js', '.mjs', '.jsx', '.ts', '.tsx'], // (optional) specify files for Babel to transform + input: ['.js', '.mjs', '.jsx', '.ts', '.tsx'], // (optional) specify files for Babel to transform transformOptions: { // babel transform options - } - } - ] - ] -} + }, + }, + ], + ], +}; ``` #### Plugin Options -| Name | Type | Description | -| :----------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| Name | Type | Description | +| :----------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | | `input` | `string[]` | (optional) By default, Babel scans & transfoms these extensions: `['.js', '.mjs', '.jsx', '.ts', '.tsx']`. Modify this array if you’d like to change this. | -| `transformOptions` | `object` | (optional) See [https://babeljs.io/docs/en/options](https://babeljs.io/docs/en/options) | +| `transformOptions` | `object` | (optional) See [https://babeljs.io/docs/en/options](https://babeljs.io/docs/en/options) | diff --git a/plugins/plugin-build-script/README.md b/plugins/plugin-build-script/README.md index d52d5ea252..3cbbb11d79 100644 --- a/plugins/plugin-build-script/README.md +++ b/plugins/plugin-build-script/README.md @@ -13,9 +13,9 @@ npm install @snowpack/plugin-build-script Then add the plugin to your Snowpack config: ```js -// snowpack.config.js +// snowpack.config.mjs -module.exports = { +export default { plugins: [ [ '@snowpack/plugin-build-script', diff --git a/plugins/plugin-dotenv/README.md b/plugins/plugin-dotenv/README.md index c65f9a04a5..1d7d15a64f 100644 --- a/plugins/plugin-dotenv/README.md +++ b/plugins/plugin-dotenv/README.md @@ -7,10 +7,10 @@ npm install --save-dev @snowpack/plugin-dotenv ``` ```js -// snowpack.config.json -{ - "plugins": ["@snowpack/plugin-dotenv"] -} +// snowpack.config.mjs +export default { + plugins: ['@snowpack/plugin-dotenv'], +}; ``` ``` diff --git a/plugins/plugin-optimize/README.md b/plugins/plugin-optimize/README.md index f60e2786a0..2880a87f7b 100644 --- a/plugins/plugin-optimize/README.md +++ b/plugins/plugin-optimize/README.md @@ -19,12 +19,17 @@ npm install --save-dev @snowpack/plugin-optimize Then add this plugin to your Snowpack config: ```js -// snowpack.config.json -{ - "plugins": [ - ["@snowpack/plugin-optimize", { /* see options below */ }] - ] -} +// snowpack.config.mjs +export default { + plugins: [ + [ + '@snowpack/plugin-optimize', + { + /* see options below */ + }, + ], + ], +}; ``` ### Plugin Options diff --git a/plugins/plugin-postcss/README.md b/plugins/plugin-postcss/README.md index 0adeb6f223..12f66d036c 100644 --- a/plugins/plugin-postcss/README.md +++ b/plugins/plugin-postcss/README.md @@ -13,12 +13,10 @@ npm install --save-dev @snowpack/plugin-postcss postcss postcss-cli Then add this plugin to your Snowpack config: ```js -// snowpack.config.json -{ - "plugins": [ - "@snowpack/plugin-postcss" - ] -} +// snowpack.config.mjs +export default { + plugins: ['@snowpack/plugin-postcss'], +}; ``` Lastly, add a `postcss.config.js` file to the root of your project as you would normally: diff --git a/plugins/plugin-react-refresh/README.md b/plugins/plugin-react-refresh/README.md index b9e20a31c4..1cd093fdf5 100644 --- a/plugins/plugin-react-refresh/README.md +++ b/plugins/plugin-react-refresh/README.md @@ -9,10 +9,15 @@ npm install --save-dev @snowpack/plugin-react-refresh ## Setup ```js -// snowpack.config.json -{ - "plugins": ["@snowpack/plugin-react-refresh", {/* options: see below */}] -} +// snowpack.config.mjs +export default { + plugins: [ + '@snowpack/plugin-react-refresh', + { + /* options: see below */ + }, + ], +}; ``` ## Plugin Options diff --git a/plugins/plugin-run-script/README.md b/plugins/plugin-run-script/README.md index cc295f19b0..d8fcbd709b 100644 --- a/plugins/plugin-run-script/README.md +++ b/plugins/plugin-run-script/README.md @@ -11,9 +11,9 @@ npm i @snowpack/plugin-run-script Then add the plugin to your Snowpack config: ```js -// snowpack.config.js +// snowpack.config.mjs -module.exports = { +export default { plugins: [ [ '@snowpack/plugin-run-script', diff --git a/plugins/plugin-sass/README.md b/plugins/plugin-sass/README.md index b3e555de8b..d4fd4960bd 100644 --- a/plugins/plugin-sass/README.md +++ b/plugins/plugin-sass/README.md @@ -19,9 +19,9 @@ npm i @snowpack/plugin-sass Then add the plugin to your Snowpack config: ```js -// snowpack.config.js +// snowpack.config.mjs -module.exports = { +export default { plugins: [ [ '@snowpack/plugin-sass', diff --git a/plugins/plugin-svelte/README.md b/plugins/plugin-svelte/README.md index 9e7bace30d..ddc789b0db 100644 --- a/plugins/plugin-svelte/README.md +++ b/plugins/plugin-svelte/README.md @@ -7,12 +7,17 @@ npm install --save-dev @snowpack/plugin-svelte ``` ```js -// snowpack.config.json -{ - "plugins": [ - ["@snowpack/plugin-svelte", { /* see optional “Plugin Options” below */ }] - ] -} +// snowpack.config.mjs +export default { + plugins: [ + [ + '@snowpack/plugin-svelte', + { + /* see optional “Plugin Options” below */ + }, + ], + ], +}; ``` ## Plugin Options diff --git a/plugins/plugin-typescript/README.md b/plugins/plugin-typescript/README.md index d2b37764b0..8b6bb152c3 100644 --- a/plugins/plugin-typescript/README.md +++ b/plugins/plugin-typescript/README.md @@ -13,9 +13,8 @@ npm i @snowpack/plugin-typescript typescript Then add the plugin to your Snowpack config: ```js -// snowpack.config.js - -module.exports = { +// snowpack.config.mjs +export default { plugins: ['@snowpack/plugin-typescript'], }; ``` @@ -27,15 +26,12 @@ module.exports = { | `tsc` | `string` | Optional custom tsc command. For example, you can use TypeScript compiler by specifying: `tsc: "tsc"`. | | `args` | `string` | Optional arguments to pass to the `tsc` CLI. For example, you can configure a custom project directory (with a custom `tsconfig.json` file) using `args: "--project ./your/custom/path"`. | - ## A Note on Yarn v2 (PnP) -TypeScript does not yet support PnP natively. The workaround is to replace the loading of the TypeScript plugin in `snowpack.config.js` with a call to [pnpify](https://yarnpkg.com/advanced/pnpify). +TypeScript does not yet support PnP natively. The workaround is to replace the loading of the TypeScript plugin in `snowpack.config.mjs` with a call to [pnpify](https://yarnpkg.com/advanced/pnpify). ```js // See https://github.com/microsoft/TypeScript/issues/28289 // More info: https://medium.com/swlh/getting-started-with-yarn-2-and-typescript-43321a3acdee -plugins: [ - ['@snowpack/plugin-typescript', { tsc: 'yarn pnpify tsc' }], -] +plugins: [['@snowpack/plugin-typescript', {tsc: 'yarn pnpify tsc'}]]; ``` diff --git a/plugins/plugin-vue/README.md b/plugins/plugin-vue/README.md index 73a0161436..d5de9c4325 100644 --- a/plugins/plugin-vue/README.md +++ b/plugins/plugin-vue/README.md @@ -7,12 +7,10 @@ npm install --save-dev @snowpack/plugin-vue ``` ```js -// snowpack.config.json -{ - "plugins": [ - "@snowpack/plugin-vue" - ] -} +// snowpack.config.mjs +export default { + plugins: ['@snowpack/plugin-vue'], +}; ``` #### Plugin Options diff --git a/plugins/plugin-webpack/README.md b/plugins/plugin-webpack/README.md index 03867df319..a5ffc2ef50 100644 --- a/plugins/plugin-webpack/README.md +++ b/plugins/plugin-webpack/README.md @@ -10,10 +10,10 @@ See our [build pipeline](https://www.snowpack.dev/concepts/build-pipeline) docs npm install --save-dev @snowpack/plugin-webpack ``` -Then add `@snowpack/plugin-webpack` to `snowpack.config.js`: +Then add `@snowpack/plugin-webpack` to `snowpack.config.mjs`: ```js -module.exports = { +export default { plugins: [ [ '@snowpack/plugin-webpack', @@ -41,8 +41,8 @@ Once added to the configuration, `@snowpack/plugin-webpack` will run automatical The `extendConfig` option is a function that you can provide to configure the default webpack config. If you provide this function, the plugin will pass its return value to `webpack.compile()`. Use this to make changes, add plugins, configure loaders, etc. ```js -// snowpack.config.js -module.exports = { +// snowpack.config.mjs +export default { plugins: [ [ '@snowpack/plugin-webpack', @@ -62,8 +62,8 @@ module.exports = { With `htmlMinifierOptions` you can either disable the minification entirely or provide your own [options](https://github.com/kangax/html-minifier#options-quick-reference). ```js -// snowpack.config.js -module.exports = { +// snowpack.config.mjs +export default { plugins: [ [ '@snowpack/plugin-webpack', diff --git a/plugins/web-test-runner-plugin/README.md b/plugins/web-test-runner-plugin/README.md index b5caa9f82f..f10c518137 100644 --- a/plugins/web-test-runner-plugin/README.md +++ b/plugins/web-test-runner-plugin/README.md @@ -17,6 +17,6 @@ module.exports = { ## Options -None! If you need to configure Snowpack, you can do so in your project `snowpack.config.js` file. +None! If you need to configure Snowpack, you can do so in your project `snowpack.config.mjs` file. Looking for support for some missing option/configuration? Please file an isuse! Your feedback is important. diff --git a/test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap b/test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap index f7ea174c17..65af16ffd1 100644 --- a/test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap +++ b/test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap @@ -7055,24 +7055,14 @@ exports[`create-snowpack-app app-template-minimal > build: package.json 1`] = ` `; exports[`create-snowpack-app app-template-minimal > build: snowpack.config.js 1`] = ` -"/** @type {import(\\"snowpack\\").SnowpackUserConfig } */ -module.exports = { - mount: { - }, - plugins: [ - ], - routes: [ - // {\\"match\\": \\"routes\\", \\"src\\": \\".*\\", \\"dest\\": \\"/index.html\\"}, - ], - optimize: { - // \\"bundle\\": true, - }, - packageOptions: { - }, - devOptions: { - }, - buildOptions: { - }, +"export default { + mount: {}, + plugins: [], + routes: [], + optimize: {}, + packageOptions: {}, + devOptions: {}, + buildOptions: {} };" `;