ESM (#1323)

* .svelte -> .svelte-kit * update gitignores in project templates * changeset * convert all config files to ESM * convert adapters to ESM * rename file * replace outdated warning with suggestion to convert svelte.config.cjs to ESM * update docs * changesets * fix type * fix example * doh * missed a few * remove __dirname * bit of tidying up * add types * document JSON imports
sveltejs · May 4, 2021 · c6fde99 · c6fde99
1 parent 0befffb
commit c6fde99
Show file tree

Hide file tree

Showing 40 changed files with 181 additions and 128 deletions.
diff --git a/.changeset/thin-trains-own.md b/.changeset/thin-trains-own.md
@@ -0,0 +1,10 @@
+---
+'@sveltejs/adapter-begin': patch
+'@sveltejs/adapter-cloudflare-workers': patch
+'@sveltejs/adapter-netlify': patch
+'@sveltejs/adapter-node': patch
+'@sveltejs/adapter-static': patch
+'@sveltejs/adapter-vercel': patch
+---
+
+Convert to ESM
diff --git a/.changeset/wise-bugs-run.md b/.changeset/wise-bugs-run.md
@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+Switch to ESM in config files
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,6 @@ yarn.lock
 .env
 .vercel_build_output
 .netlify
-.svelte
+.svelte-kit
 .cloudflare
 .pnpm-debug.log
diff --git a/documentation/docs/10-adapters.md b/documentation/docs/10-adapters.md
@@ -7,10 +7,10 @@ Before you can deploy your SvelteKit app, you need to _adapt_ it for your deploy
 For example, if you want to run your app as a simple Node server, you would use the `@sveltejs/adapter-node` package:
 
 ```js
-// svelte.config.cjs
-const node = require('@sveltejs/adapter-node');
+// svelte.config.js
+import node from '@sveltejs/adapter-node';
 
-module.exports = {
+export default {
 	kit: {
 		adapter: node()
 	}
@@ -20,10 +20,10 @@ module.exports = {
 With this, [svelte-kit build](#command-line-interface-svelte-kit-build) will generate a self-contained Node app inside `build`. You can pass options to adapters, such as customising the output directory in `adapter-node`:
 
 ```diff
-// svelte.config.cjs
-const node = require('@sveltejs/adapter-node');
+// svelte.config.js
+import node from '@sveltejs/adapter-node';
 
-module.exports = {
+export default {
 	kit: {
 -		adapter: node()
 +		adapter: node({ out: 'my-output-directory' })

diff --git a/documentation/docs/13-configuration.md b/documentation/docs/13-configuration.md
@@ -2,11 +2,11 @@
 title: Configuration
 ---
 
-Your project's configuration lives in a `svelte.config.cjs` file. All values are optional. The complete list of options, with defaults, is shown here:
+Your project's configuration lives in a `svelte.config.js` file. All values are optional. The complete list of options, with defaults, is shown here:
 
 ```js
 /** @type {import('@sveltejs/kit').Config} */
-module.exports = {
+const config = {
 	// options passed to svelte.compile (https://svelte.dev/docs#svelte_compile)
 	compilerOptions: null,
 
@@ -48,6 +48,8 @@ module.exports = {
 	// options passed to svelte.preprocess (https://svelte.dev/docs#svelte_preprocess)
 	preprocess: null
 };
+
+export default config;
 ```
 
 ### adapter
@@ -94,8 +96,8 @@ A value that overrides the `Host` header when populating `page.host`
 If your app is behind a reverse proxy (think load balancers and CDNs) then the `Host` header will be incorrect. In most cases, the underlying host is exposed via the [`X-Forwarded-Host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) header and you should specify this in your config if you need to access `page.host`:
 
 ```js
-// svelte.config.cjs
-module.exports = {
+// svelte.config.js
+export default {
 	kit: {
 		hostHeader: 'X-Forwarded-Host'
 	}

diff --git a/documentation/faq/50-aliases.md b/documentation/faq/50-aliases.md
@@ -2,14 +2,13 @@
 question: How do I setup a path alias?
 ---
 
-Please be aware that you will probably want the alias specified in two places.
-
-In `svelte.config.cjs` add [`vite.resolve.alias`](https://vitejs.dev/config/#resolve-alias):
+First, you need to add it to the Vite configuration. In `svelte.config.js` add [`vite.resolve.alias`](https://vitejs.dev/config/#resolve-alias):
 
 ```js
-// svelte.config.cjs
-const path = require('path');
-module.exports = {
+// svelte.config.js
+import path from 'path';
+
+export default {
 	kit: {
 		vite: {
 			resolve: {
@@ -22,7 +21,7 @@ module.exports = {
 };
 ```
 
-In `tsconfig.json` (for TypeScript users) or `jsconfig.json` (for JavaScript users) to make VS Code aware of the alias:
+Then, to make TypeScript aware of the alias, add it to `tsconfig.json` (for TypeScript users) or `jsconfig.json`:
 
 ```js
 {

diff --git a/documentation/faq/70-packages.md b/documentation/faq/70-packages.md
@@ -2,8 +2,14 @@
 question: How do I fix the error I'm getting trying to include a package?
 ---
 
-Old beta versions of the SvelteKit template included the configuration value `noExternal: Object.keys(pkg.dependencies || {})` in `svelte.config.cjs`. First, please check if this line is present in your project and remove it if so. Removing this line fixes most issues and has since been removed from the template.
+Old beta versions of the SvelteKit template included the configuration value `noExternal: Object.keys(pkg.dependencies || {})` in `svelte.config.js`. First, please check if this line is present in your project and remove it if so. Removing this line fixes most issues and has since been removed from the template.
 
-The second most commonly-encountered issue is having a Svelte component that imports a CommonJS library. In this case, you should try to work with the library authors to distribute an ESM version of the dependency. However, in the meantime, you can workaround this issue by adding the dependency to `vite.optimizeDeps.include` in `svelte.config.cjs`.
+> Note that you can no longer directly require JSON files, since SvelteKit expects [`svelte.config.js`](/docs#configuration) to be an ES module. You can load JSON like so:
+>
+> ```js
+> const pkg = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf8'));
+> ```
+
+The second most commonly-encountered issue is having a Svelte component that imports a CommonJS library. In this case, you should try to work with the library authors to distribute an ESM version of the dependency. However, in the meantime, you can workaround this issue by adding the dependency to `vite.optimizeDeps.include` in `svelte.config.js`.
 
 Finally, Vite has had some issues that have been fixed, so we recommend upgrading to the latest version of Vite. If you are still encountering issues we recommend searching both [the Vite issue tracker](https://github.com/vitejs/vite/issues) and the issue tracker of the library in question. Sometimes issues can be worked around by fiddling with the [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options) or [`ssr`](https://vitejs.dev/config/#ssr-options) config values.
diff --git a/documentation/faq/80-integrations.md b/documentation/faq/80-integrations.md
@@ -8,7 +8,7 @@ Please see [sveltejs/integrations](https://github.com/sveltejs/integrations#svel
 
 ### How do I use `svelte-preprocess`?
 
-`svelte-preprocess` provides support for Babel, CoffeeScript, Less, PostCSS / SugarSS, Pug, scss/sass, Stylus, TypeScript, `global` styles, and replace. Adding [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) to your [`svelte.config.cjs`](#configuration) is the first step. It is provided by the template if you're using TypeScript. JavaScript users will need to add it. For many of the tools listed above, you will then only need to install the corresponding library such as `npm install -D sass`or `npm install -D less`. See the [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) docs for full details.
+`svelte-preprocess` provides support for Babel, CoffeeScript, Less, PostCSS / SugarSS, Pug, scss/sass, Stylus, TypeScript, `global` styles, and replace. Adding [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) to your [`svelte.config.js`](#configuration) is the first step. It is provided by the template if you're using TypeScript. JavaScript users will need to add it. For many of the tools listed above, you will then only need to install the corresponding library such as `npm install -D sass`or `npm install -D less`. See the [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) docs for full details.
 
 Also see [sveltejs/integrations](https://github.com/sveltejs/integrations#sveltekit) for examples of setting up these and similar libraries.
 

diff --git a/documentation/migrating/03-project-files.md b/documentation/migrating/03-project-files.md
@@ -6,7 +6,7 @@ The bulk of your app, in `src/routes`, can be left where it is, but several proj
 
 ### Configuration
 
-Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.cjs`, as documented [here](/docs#configuration). Svelte preprocessor options should be moved to `config.preprocess`.
+Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.js`, as documented [here](/docs#configuration). Svelte preprocessor options should be moved to `config.preprocess`.
 
 You will need to add an [adapter](/docs#adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.
 

diff --git a/packages/adapter-begin/README.md b/packages/adapter-begin/README.md
@@ -6,12 +6,12 @@ Adapter for Svelte apps that creates a [Begin](https://begin.com/) app, using a
 
 Add `"@sveltejs/adapter-begin": "next"` to the `devDependencies` in your `package.json` and run `npm install`.
 
-Then add the adapter to your `svelte.config.cjs`:
+Then add the adapter to your `svelte.config.js`:
 
 ```js
-const begin = require('@sveltejs/adapter-begin');
+import begin from '@sveltejs/adapter-begin';
 
-module.exports = {
+export default {
 	kit: {
 		...
 		adapter: begin()

diff --git a/packages/adapter-cloudflare-workers/index.js b/packages/adapter-cloudflare-workers/index.js
@@ -1,11 +1,10 @@
-'use strict';
+import fs from 'fs';
+import { execSync } from 'child_process';
+import esbuild from 'esbuild';
+import toml from 'toml';
+import { fileURLToPath } from 'url';
 
-const fs = require('fs');
-const { execSync } = require('child_process');
-const esbuild = require('esbuild');
-const toml = require('toml');
-
-module.exports = function () {
+export default function () {
 	/** @type {import('@sveltejs/kit').Adapter} */
 	const adapter = {
 		name: '@sveltejs/adapter-cloudflare-workers',
@@ -15,18 +14,20 @@ module.exports = function () {
 			const bucket = site.bucket;
 			const entrypoint = site['entry-point'] || 'workers-site';
 
+			const files = fileURLToPath(new URL('./files', import.meta.url));
+
 			utils.rimraf(bucket);
 			utils.rimraf(entrypoint);
 
 			utils.log.info('Installing worker dependencies...');
-			utils.copy(`${__dirname}/files/_package.json`, '.svelte-kit/cloudflare-workers/package.json');
+			utils.copy(`${files}/_package.json`, '.svelte-kit/cloudflare-workers/package.json');
 
 			// TODO would be cool if we could make this step unnecessary somehow
 			const stdout = execSync('npm install', { cwd: '.svelte-kit/cloudflare-workers' });
 			utils.log.info(stdout.toString());
 
 			utils.log.minor('Generating worker...');
-			utils.copy(`${__dirname}/files/entry.js`, '.svelte-kit/cloudflare-workers/entry.js');
+			utils.copy(`${files}/entry.js`, '.svelte-kit/cloudflare-workers/entry.js');
 
 			await esbuild.build({
 				entryPoints: ['.svelte-kit/cloudflare-workers/entry.js'],
@@ -50,7 +51,7 @@ module.exports = function () {
 	};
 
 	return adapter;
-};
+}
 
 function validate_config(utils) {
 	if (fs.existsSync('wrangler.toml')) {

diff --git a/packages/adapter-cloudflare-workers/package.json b/packages/adapter-cloudflare-workers/package.json
@@ -1,6 +1,10 @@
 {
 	"name": "@sveltejs/adapter-cloudflare-workers",
 	"version": "0.0.2-next.5",
+	"type": "module",
+	"exports": {
+		"import": "./index.js"
+	},
 	"main": "index.js",
 	"types": "index.d.ts",
 	"files": [

diff --git a/packages/adapter-netlify/README.md b/packages/adapter-netlify/README.md
@@ -12,11 +12,12 @@ This is very experimental; the adapter API isn't at all fleshed out, and things
 npm i -D @sveltejs/adapter-netlify@next
 ```
 
-You can then configure it inside of `svelte.config.cjs`:
+You can then configure it inside of `svelte.config.js`:
 
 ```js
-const adapter = require('@sveltejs/adapter-netlify');
-module.exports = {
+import adapter from '@sveltejs/adapter-netlify';
+
+export default {
 	kit: {
 		adapter: adapter(), // currently the adapter does not take any options
 		target: '#svelte'

diff --git a/packages/adapter-netlify/index.js b/packages/adapter-netlify/index.js
@@ -1,9 +1,10 @@
-const { existsSync, readFileSync, writeFileSync } = require('fs');
-const { join } = require('path');
-const esbuild = require('esbuild');
-const toml = require('toml');
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import esbuild from 'esbuild';
+import toml from 'toml';
 
-module.exports = function () {
+export default function () {
 	/** @type {import('@sveltejs/kit').Adapter} */
 	const adapter = {
 		name: '@sveltejs/adapter-netlify',
@@ -14,7 +15,7 @@ module.exports = function () {
 			utils.rimraf(publish);
 			utils.rimraf(functions);
 
-			const files = join(__dirname, 'files');
+			const files = fileURLToPath(new URL('./files', import.meta.url));
 
 			utils.log.minor('Generating serverless function...');
 			utils.copy(join(files, 'entry.js'), '.svelte-kit/netlify/entry.js');
@@ -43,7 +44,7 @@ module.exports = function () {
 	};
 
 	return adapter;
-};
+}
 
 function validate_config() {
 	if (existsSync('netlify.toml')) {

diff --git a/packages/adapter-netlify/package.json b/packages/adapter-netlify/package.json
@@ -1,6 +1,10 @@
 {
 	"name": "@sveltejs/adapter-netlify",
 	"version": "1.0.0-next.10",
+	"type": "module",
+	"exports": {
+		"import": "./index.js"
+	},
 	"main": "index.js",
 	"types": "index.d.ts",
 	"files": [

diff --git a/packages/adapter-node/index.cjs → packages/adapter-node/index.js b/packages/adapter-node/index.cjs → packages/adapter-node/index.js
@@ -1,12 +1,13 @@
-const { copyFileSync } = require('fs');
-const { join } = require('path');
+import { copyFileSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
 
 /**
  * @param {{
  *   out?: string;
  * }} options
  */
-module.exports = function ({ out = 'build' } = {}) {
+export default function ({ out = 'build' } = {}) {
 	/** @type {import('@sveltejs/kit').Adapter} */
 	const adapter = {
 		name: '@sveltejs/adapter-node',
@@ -20,7 +21,8 @@ module.exports = function ({ out = 'build' } = {}) {
 			utils.log.minor('Copying server');
 			utils.copy_server_files(out);
 
-			copyFileSync(`${__dirname}/files/server.js`, `${out}/index.js`);
+			const files = fileURLToPath(new URL('./files', import.meta.url));
+			copyFileSync(`${files}/server.js`, `${out}/index.js`);
 
 			utils.log.minor('Prerendering static pages');
 			await utils.prerender({
@@ -30,4 +32,4 @@ module.exports = function ({ out = 'build' } = {}) {
 	};
 
 	return adapter;
-};
+}
diff --git a/packages/adapter-node/package.json b/packages/adapter-node/package.json
@@ -1,8 +1,11 @@
 {
 	"name": "@sveltejs/adapter-node",
 	"version": "1.0.0-next.17",
-	"main": "index.cjs",
 	"type": "module",
+	"exports": {
+		"import": "./index.js"
+	},
+	"main": "index.js",
 	"types": "index.d.ts",
 	"files": [
 		"files",

diff --git a/packages/adapter-node/tsconfig.json b/packages/adapter-node/tsconfig.json
@@ -9,5 +9,5 @@
 		"moduleResolution": "node",
 		"allowSyntheticDefaultImports": true
 	},
-	"include": ["index.cjs", "src"]
+	"include": ["index.js", "src"]
 }
diff --git a/packages/adapter-static/README.md b/packages/adapter-static/README.md
@@ -3,10 +3,10 @@
 [Adapter](https://kit.svelte.dev/docs#adapters) for SvelteKit apps that prerenders your site as a collection of static files.
 
 ```js
-// svelte.config.cjs
-const adapter = require('@sveltejs/adapter-static');
+// svelte.config.js
+import adapter from '@sveltejs/adapter-static';
 
-module.exports = {
+export default {
 	kit: {
 		adapter: adapter({
 			// default options are shown
@@ -43,10 +43,10 @@ You can use `adapter-static` to create a single-page app or SPA by specifying a
 The fallback page is a blank HTML page that loads your SvelteKit app and navigates to the correct route. For example [Surge](https://surge.sh/help/adding-a-200-page-for-client-side-routing), a static web host, lets you add a `200.html` file that will handle any requests that don't otherwise match. We can create that file like so:
 
 ```js
-// svelte.config.cjs
-const adapter = require('@sveltejs/adapter-static');
+// svelte.config.js
+import adapter from '@sveltejs/adapter-static';
 
-module.exports = {
+export default {
 	kit: {
 		adapter: adapter({
 			fallback: '200.html'

diff --git a/packages/adapter-static/index.cjs → packages/adapter-static/index.js b/packages/adapter-static/index.cjs → packages/adapter-static/index.js
@@ -1,4 +1,11 @@
-module.exports = function ({ pages = 'build', assets = pages, fallback = null } = {}) {
+/**
+ * @param {{
+ *   pages?: string;
+ *   assets?: string;
+ *   fallback?: string;
+ * }} [opts]
+ */
+export default function ({ pages = 'build', assets = pages, fallback = null } = {}) {
 	/** @type {import('@sveltejs/kit').Adapter} */
 	const adapter = {
 		name: '@sveltejs/adapter-static',
@@ -16,4 +23,4 @@ module.exports = function ({ pages = 'build', assets = pages, fallback = null }
 	};
 
 	return adapter;
-};
+}