Chore: update docs to refer to snowpack.config.mjs

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?
 

create-snowpack-app/app-template-11ty/snowpack.config.js → 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' },

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?
 

create-snowpack-app/app-template-blank-typescript/snowpack.config.js → 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' },

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?
 

create-snowpack-app/app-template-blank/snowpack.config.js → 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' },

create-snowpack-app/app-template-lit-element-typescript/snowpack.config.js → 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' },

create-snowpack-app/app-template-lit-element/snowpack.config.js → 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' },

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?
 

create-snowpack-app/app-template-minimal/snowpack.config.js → create-snowpack-app/app-template-minimal/snowpack.config.mjs

@@ -1,5 +1,5 @@
 /** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
+export default {
   mount: {
     /* ... */
   },

create-snowpack-app/app-template-preact-typescript/snowpack.config.js → 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' },

create-snowpack-app/app-template-preact/snowpack.config.js → 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' },

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
 

create-snowpack-app/app-template-react-typescript/snowpack.config.js → 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' },

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
 

create-snowpack-app/app-template-react/snowpack.config.js → 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' },

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?
 

create-snowpack-app/app-template-svelte-typescript/snowpack.config.js → 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'},

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?
 

create-snowpack-app/app-template-svelte/snowpack.config.js → 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'},

create-snowpack-app/app-template-vue-typescript/snowpack.config.js → 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'},

create-snowpack-app/app-template-vue/snowpack.config.js → 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'},

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'],
+    ],
+  };
 ```

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,27 +63,40 @@ 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.
 
 #### @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,23 +106,37 @@ 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.
 
 #### 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',
+      },
+    ],
+  ],
+};
 ```

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,