diff --git a/.changeset/thin-trains-own.md b/.changeset/thin-trains-own.md new file mode 100644 index 000000000000..72597fa35b76 --- /dev/null +++ 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 new file mode 100644 index 000000000000..34a70d3170aa --- /dev/null +++ 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 index 5f392d6c02e9..fefa41183277 100644 --- 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 index 8eee9d545f9f..6029b8e4db8f 100644 --- 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 index d126902e5f5c..e45edbeec77a 100644 --- 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 index 6a864115f4ea..390297c11ec2 100644 --- 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 index 293f4b6b6583..261f849564fc 100644 --- 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 index 123d99389221..bf158da126d3 100644 --- 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 index 9df3d50ef357..5a966898edc2 100644 --- 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 index 26996e27fc7a..2ba5f1919f44 100644 --- 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 index 308e015f0ac5..7fe50ad5f57c 100644 --- 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 index cb0a08c4fefd..6cb5596fec24 100644 --- 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 index 3bb21cda3483..7fea71cac2b8 100644 --- 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 index d3962aa5525f..5954270b449b 100644 --- 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 index 79b015f85f44..5479453ad32b 100644 --- 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 b/packages/adapter-node/index.js similarity index 67% rename from packages/adapter-node/index.cjs rename to packages/adapter-node/index.js index c2a3cef0147c..238b29133bc4 100644 --- a/packages/adapter-node/index.cjs +++ b/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 index adc6d97fd964..4b2f246bd787 100644 --- 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 index 79ee3a6fb47a..517604c951ec 100644 --- 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 index b8c64ae0f404..7b5a285a5925 100644 --- 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 b/packages/adapter-static/index.js similarity index 62% rename from packages/adapter-static/index.cjs rename to packages/adapter-static/index.js index 17ca222dc919..6546a923f976 100644 --- a/packages/adapter-static/index.cjs +++ b/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; -}; +} diff --git a/packages/adapter-static/package.json b/packages/adapter-static/package.json index 082baca8675a..10b1bf9c5aba 100644 --- a/packages/adapter-static/package.json +++ b/packages/adapter-static/package.json @@ -1,6 +1,11 @@ { "name": "@sveltejs/adapter-static", "version": "1.0.0-next.7", + "type": "module", + "main": "index.js", + "exports": { + "import": "./index.js" + }, "types": "index.d.ts", "scripts": { "lint": "eslint --ignore-path .gitignore \"**/*.{ts,js,svelte}\" && npm run check-format", @@ -15,10 +20,5 @@ "port-authority": "^1.1.2", "sirv": "^1.0.11", "typescript": "^4.2.4" - }, - "type": "module", - "main": "index.cjs", - "exports": { - "require": "./index.cjs" } } diff --git a/packages/adapter-static/test/apps/prerendered/svelte.config.cjs b/packages/adapter-static/test/apps/prerendered/svelte.config.cjs deleted file mode 100644 index 40f26e69fd62..000000000000 --- a/packages/adapter-static/test/apps/prerendered/svelte.config.cjs +++ /dev/null @@ -1,7 +0,0 @@ -/** @type {import('@sveltejs/kit').Config} */ -module.exports = { - kit: { - adapter: require('../../../index.cjs')(), - target: '#svelte' - } -}; diff --git a/packages/adapter-static/test/apps/prerendered/svelte.config.js b/packages/adapter-static/test/apps/prerendered/svelte.config.js new file mode 100644 index 000000000000..bdf36d80ed0b --- /dev/null +++ b/packages/adapter-static/test/apps/prerendered/svelte.config.js @@ -0,0 +1,11 @@ +import adapter from '../../../index.js'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + kit: { + adapter: adapter(), + target: '#svelte' + } +}; + +export default config; diff --git a/packages/adapter-static/test/apps/spa/svelte.config.cjs b/packages/adapter-static/test/apps/spa/svelte.config.js similarity index 51% rename from packages/adapter-static/test/apps/spa/svelte.config.cjs rename to packages/adapter-static/test/apps/spa/svelte.config.js index fdd98ce5120a..6cc713a25f9a 100644 --- a/packages/adapter-static/test/apps/spa/svelte.config.cjs +++ b/packages/adapter-static/test/apps/spa/svelte.config.js @@ -1,9 +1,13 @@ +import adapter from '../../../index.js'; + /** @type {import('@sveltejs/kit').Config} */ -module.exports = { +const config = { kit: { - adapter: require('../../../index.cjs')({ + adapter: adapter({ fallback: '200.html' }), target: '#svelte' } }; + +export default config; diff --git a/packages/adapter-static/tsconfig.json b/packages/adapter-static/tsconfig.json index 5e88bbd94a98..113d5b4c70e3 100644 --- a/packages/adapter-static/tsconfig.json +++ b/packages/adapter-static/tsconfig.json @@ -10,5 +10,5 @@ "allowSyntheticDefaultImports": true, "skipLibCheck": true }, - "include": ["index.cjs", "test/*.js"] + "include": ["index.js", "test/*.js"] } diff --git a/packages/adapter-vercel/README.md b/packages/adapter-vercel/README.md index 60b0c49da826..fb66a193ceb7 100644 --- a/packages/adapter-vercel/README.md +++ b/packages/adapter-vercel/README.md @@ -9,9 +9,9 @@ Add `"@sveltejs/adapter-vercel": "next"` to the `devDependencies` in your `packa Then in your `svelte.config.js`: ```js -const vercel = require('@sveltejs/adapter-vercel'); +import vercel from '@sveltejs/adapter-vercel'; -module.exports = { +export default { kit: { ... adapter: vercel() diff --git a/packages/adapter-vercel/index.js b/packages/adapter-vercel/index.js index 59b8b9d6b9ca..10bd4e63b1ad 100644 --- a/packages/adapter-vercel/index.js +++ b/packages/adapter-vercel/index.js @@ -1,8 +1,9 @@ -const { writeFileSync } = require('fs'); -const { join } = require('path'); -const esbuild = require('esbuild'); +import { writeFileSync } from 'fs'; +import { join } from 'path'; +import { fileURLToPath } from 'url'; +import esbuild from 'esbuild'; -module.exports = function () { +export default function () { /** @type {import('@sveltejs/kit').Adapter} */ const adapter = { name: '@sveltejs/adapter-vercel', @@ -11,7 +12,7 @@ module.exports = function () { const dir = '.vercel_build_output'; utils.rimraf(dir); - const files = join(__dirname, 'files'); + const files = fileURLToPath(new URL('./files', import.meta.url)); const dirs = { static: join(dir, 'static'), @@ -50,4 +51,4 @@ module.exports = function () { }; return adapter; -}; +} diff --git a/packages/adapter-vercel/package.json b/packages/adapter-vercel/package.json index 16fa29d64959..7b040a4edb18 100644 --- a/packages/adapter-vercel/package.json +++ b/packages/adapter-vercel/package.json @@ -1,6 +1,10 @@ { "name": "@sveltejs/adapter-vercel", "version": "1.0.0-next.15", + "type": "module", + "exports": { + "import": "./index.js" + }, "main": "index.js", "types": "index.d.ts", "files": [ diff --git a/packages/adapter-vercel/rollup.config.js b/packages/adapter-vercel/rollup.config.js deleted file mode 100644 index 656e98946125..000000000000 --- a/packages/adapter-vercel/rollup.config.js +++ /dev/null @@ -1,23 +0,0 @@ -import { nodeResolve } from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; - -export default [ - { - input: 'src/entry.js', - output: { - file: 'files/entry.mjs', - format: 'es', - sourcemap: true, - exports: 'default' - }, - plugins: [nodeResolve(), commonjs()], - external: [...require('module').builtinModules, './server/app.mjs'] - }, - { - input: 'src/index.cjs', - output: { - file: 'files/index.js' - }, - external: './entry.mjs' - } -]; diff --git a/packages/create-svelte/shared/+typescript/svelte.config.cjs b/packages/create-svelte/shared/+typescript/svelte.config.js similarity index 76% rename from packages/create-svelte/shared/+typescript/svelte.config.cjs rename to packages/create-svelte/shared/+typescript/svelte.config.js index 9133017977fe..5eb051a07d70 100644 --- a/packages/create-svelte/shared/+typescript/svelte.config.cjs +++ b/packages/create-svelte/shared/+typescript/svelte.config.js @@ -1,7 +1,7 @@ -const preprocess = require('svelte-preprocess'); +import preprocess from 'svelte-preprocess'; /** @type {import('@sveltejs/kit').Config} */ -module.exports = { +const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(), @@ -11,3 +11,5 @@ module.exports = { target: '#svelte' } }; + +export default config; diff --git a/packages/create-svelte/shared/-typescript/svelte.config.cjs b/packages/create-svelte/shared/-typescript/svelte.config.js similarity index 77% rename from packages/create-svelte/shared/-typescript/svelte.config.cjs rename to packages/create-svelte/shared/-typescript/svelte.config.js index edb9c69ab38b..b879536152cc 100644 --- a/packages/create-svelte/shared/-typescript/svelte.config.cjs +++ b/packages/create-svelte/shared/-typescript/svelte.config.js @@ -1,7 +1,9 @@ /** @type {import('@sveltejs/kit').Config} */ -module.exports = { +const config = { kit: { // hydrate the
element in src/app.html target: '#svelte' } }; + +export default config; diff --git a/packages/create-svelte/templates/default/svelte.config.cjs b/packages/create-svelte/templates/default/svelte.config.js similarity index 73% rename from packages/create-svelte/templates/default/svelte.config.cjs rename to packages/create-svelte/templates/default/svelte.config.js index 375adf7c5a01..6cb2528d152c 100644 --- a/packages/create-svelte/templates/default/svelte.config.cjs +++ b/packages/create-svelte/templates/default/svelte.config.js @@ -1,5 +1,4 @@ -const sveltePreprocess = require('svelte-preprocess'); -const pkg = require('./package.json'); +import preprocess from 'svelte-preprocess'; const adapter = process.env.ADAPTER; const options = JSON.parse(process.env.OPTIONS || '{}'); @@ -8,7 +7,7 @@ const options = JSON.parse(process.env.OPTIONS || '{}'); const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors - preprocess: sveltePreprocess(), + preprocess: preprocess(), kit: { // hydrate the
element in src/app.html @@ -20,4 +19,4 @@ if (adapter) { config.kit.adapter = require(adapter)(options); } -module.exports = config; +export default config; diff --git a/packages/create-svelte/templates/skeleton/svelte.config.cjs b/packages/create-svelte/templates/skeleton/svelte.config.js similarity index 75% rename from packages/create-svelte/templates/skeleton/svelte.config.cjs rename to packages/create-svelte/templates/skeleton/svelte.config.js index dac8a8b71a66..3406f45bac3f 100644 --- a/packages/create-svelte/templates/skeleton/svelte.config.cjs +++ b/packages/create-svelte/templates/skeleton/svelte.config.js @@ -1,5 +1,4 @@ -const node = require('@sveltejs/adapter-node'); -const pkg = require('./package.json'); +import node from '@sveltejs/adapter-node'; /** @type {import('@sveltejs/kit').Config} */ const config = { @@ -14,4 +13,4 @@ const config = { } }; -module.exports = config; +export default config; diff --git a/packages/kit/src/cli.js b/packages/kit/src/cli.js index 705534385e91..97b44bac0836 100644 --- a/packages/kit/src/cli.js +++ b/packages/kit/src/cli.js @@ -7,15 +7,17 @@ import { networkInterfaces, release } from 'os'; async function get_config() { // TODO this is temporary, for the benefit of early adopters - if (existsSync('snowpack.config.js') || existsSync('snowpack.config.cjs')) { + if (existsSync('svelte.config.cjs')) { // prettier-ignore console.error(colors.bold().red( - 'SvelteKit now uses https://vitejs.dev. Please remove snowpack.config.js and put Vite config in svelte.config.cjs: https://kit.svelte.dev/docs#configuration-vite' + 'svelte.config.cjs should be renamed to svelte.config.js and converted to an ES module. See https://kit.svelte.dev/docs#configuration for an example' )); - } else if (existsSync('vite.config.js')) { + } + + if (existsSync('vite.config.js')) { // prettier-ignore console.error(colors.bold().red( - 'Please remove vite.config.js and put Vite config in svelte.config.cjs: https://kit.svelte.dev/docs#configuration-vite' + 'Please remove vite.config.js and put Vite config in svelte.config.js: https://kit.svelte.dev/docs#configuration-vite' )); } diff --git a/packages/kit/test/apps/amp/svelte.config.cjs b/packages/kit/test/apps/amp/svelte.config.cjs deleted file mode 100644 index 51eb2c8466ef..000000000000 --- a/packages/kit/test/apps/amp/svelte.config.cjs +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - kit: { - amp: true - } -}; diff --git a/packages/kit/test/apps/amp/svelte.config.js b/packages/kit/test/apps/amp/svelte.config.js new file mode 100644 index 000000000000..5fe016e42d3d --- /dev/null +++ b/packages/kit/test/apps/amp/svelte.config.js @@ -0,0 +1,8 @@ +/** @type {import('@sveltejs/kit').Config} */ +const config = { + kit: { + amp: true + } +}; + +export default config; diff --git a/packages/kit/test/apps/basics/svelte.config.cjs b/packages/kit/test/apps/basics/svelte.config.js similarity index 76% rename from packages/kit/test/apps/basics/svelte.config.cjs rename to packages/kit/test/apps/basics/svelte.config.js index 594bd5a8bb07..32c11b217047 100644 --- a/packages/kit/test/apps/basics/svelte.config.cjs +++ b/packages/kit/test/apps/basics/svelte.config.js @@ -1,4 +1,5 @@ -module.exports = { +/** @type {import('@sveltejs/kit').Config} */ +const config = { kit: { hostHeader: 'x-forwarded-host', vite: { @@ -14,3 +15,5 @@ module.exports = { } } }; + +export default config; diff --git a/packages/kit/test/apps/custom-extension/svelte.config.cjs b/packages/kit/test/apps/custom-extension/svelte.config.js similarity index 51% rename from packages/kit/test/apps/custom-extension/svelte.config.cjs rename to packages/kit/test/apps/custom-extension/svelte.config.js index 890653d52119..02b844782a30 100644 --- a/packages/kit/test/apps/custom-extension/svelte.config.cjs +++ b/packages/kit/test/apps/custom-extension/svelte.config.js @@ -1,3 +1,6 @@ -module.exports = { +/** @type {import('@sveltejs/kit').Config} */ +const config = { extensions: ['.jesuslivesineveryone', '.whokilledthemuffinman', '.svelte.md', '.svelte'] }; + +export default config; diff --git a/packages/kit/test/apps/options/svelte.config.cjs b/packages/kit/test/apps/options/svelte.config.js similarity index 77% rename from packages/kit/test/apps/options/svelte.config.cjs rename to packages/kit/test/apps/options/svelte.config.js index 29b77bb58b5e..f3e343724df6 100644 --- a/packages/kit/test/apps/options/svelte.config.cjs +++ b/packages/kit/test/apps/options/svelte.config.js @@ -1,4 +1,5 @@ -module.exports = { +/** @type {import('@sveltejs/kit').Config} */ +const config = { kit: { files: { assets: 'public', @@ -18,3 +19,5 @@ module.exports = { } } }; + +export default config; diff --git a/packages/kit/types/config.d.ts b/packages/kit/types/config.d.ts index daa8c131614c..662be69770e5 100644 --- a/packages/kit/types/config.d.ts +++ b/packages/kit/types/config.d.ts @@ -40,6 +40,7 @@ export type Config = { serviceWorker?: string; template?: string; }; + floc?: boolean; host?: string; hostHeader?: string; hydrate?: boolean;