convert everything to ESM (#355)

* start converting everything to ESM

* more stuff

* chore: finish ESM conversion (#360)

* fix(test): manually control `UVU_QUEUE` positions;

Have to replicate the `uvu` internals since all internal loader/iterator logic is bypassed.

* fix: force `UVU_QUEUE` values

* chore: add `context.reset` method;

- chasing unterminated process

* fix(kit): return `snowpack.shutdown` promise

- so that `dev.close` is await'able

* fix(runner): manually exit process;

- also part of what uvu cli does; derp

* chore: convert "test/apps/basics" fixture

* chore: convert "test/apps/options" fixture

* bump meriyah

* all tests passing, i think?

* simplify

* get CLI working

* brute force

Co-authored-by: Luke Edwards <[email protected]>

Author: Rich Harris

package.json

@@ -32,10 +32,10 @@
 		"eslint": "^7.19.0",
 		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-svelte3": "^3.0.0",
-		"esm": "^3.2.25",
 		"playwright": "^1.8.0",
 		"prettier": "2.2.1",
 		"rollup": "^2.38.3",
 		"typescript": "^4.1.3"
-	}
+	},
+	"type": "module"
 }

packages/app-utils/package.json

@@ -9,7 +9,7 @@
 		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
 		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
 		"prepublishOnly": "npm run build",
-		"test": "uvu -r esm"
+		"test": "uvu"
 	},
 	"dependencies": {
 		"mime": "^2.5.0"
@@ -19,20 +19,17 @@
 		"@types/node": "^14.14.22",
 		"@types/node-fetch": "^2.5.8",
 		"devalue": "^2.0.1",
-		"esm": "^3.2.25",
 		"node-fetch": "^2.6.1",
 		"rollup": "^2.38.3",
-		"svelte": "^3.32.1",
-		"uvu": "^0.3.5"
+		"svelte": "^3.32.1"
 	},
+	"type": "module",
 	"exports": {
 		"./files": {
-			"require": "./files/index.js",
-			"import": "./files/index.mjs"
+			"import": "./files/index.js"
 		},
 		"./http": {
-			"require": "./http/index.js",
-			"import": "./http/index.mjs"
+			"import": "./http/index.js"
 		}
 	},
 	"files": [

packages/app-utils/rimraf.js

@@ -1,4 +1,4 @@
-const fs = require('fs');
+import fs from 'fs';
 
 const rm = fs.rm || fs.rmdir;
 const [, , ...filenames] = process.argv;

packages/app-utils/rollup.config.js

@@ -8,22 +8,13 @@ Object.keys(pkg.exports).forEach((key) => {
 
 export default {
 	input,
-	output: [
-		{
-			dir: '.',
-			entryFileNames: '[name]/index.js',
-			chunkFileNames: 'common/[name].js',
-			format: 'cjs',
-			sourcemap: true
-		},
-		{
-			dir: '.',
-			entryFileNames: '[name]/index.mjs',
-			chunkFileNames: 'common/[name].js',
-			format: 'esm',
-			sourcemap: true
-		}
-	],
+	output: {
+		dir: '.',
+		entryFileNames: '[name]/index.js',
+		chunkFileNames: 'common/[name].js',
+		format: 'esm',
+		sourcemap: true
+	},
 	plugins: [nodeResolve()],
 	external: [...require('module').builtinModules, ...Object.keys(pkg.dependencies)]
 };

packages/app-utils/src/files/index.spec.js renamed to packages/app-utils/src/files/index.spec.mjs

@@ -3,7 +3,7 @@ import { tmpdir } from 'os';
 import { join } from 'path';
 import { suite } from 'uvu';
 import * as assert from 'uvu/assert';
-import { copy } from '.';
+import { copy } from './index.js';
 
 const suite_copy = suite('#copy()');
 

packages/create-svelte/cli/index.js

@@ -4,7 +4,7 @@ import parser from 'gitignore-parser';
 import { bold, cyan, gray, green, red } from 'kleur/colors';
 import path from 'path';
 import prompts from 'prompts/lib/index';
-import glob from 'tiny-glob/sync';
+import glob from 'tiny-glob/sync.js';
 import gitignore_contents from '../template/.gitignore';
 import add_css from './modifications/add_css';
 import add_typescript from './modifications/add_typescript';

packages/create-svelte/scripts/update-versions.js

@@ -1,6 +1,6 @@
 const { writeFileSync } = require('fs');
 const { join } = require('path');
-const glob = require('tiny-glob/sync');
+const glob = require('tiny-glob/sync.js');
 const template_pkg = require('../template/package.json');
 
 const cwd = join(__dirname, '../../');

packages/kit/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@sveltejs/kit",
 	"version": "1.0.0-next.31",
+	"type": "module",
 	"dependencies": {
 		"cheap-watch": "^1.0.3",
 		"http-proxy": "^1.18.1",
@@ -19,14 +20,13 @@
 		"@types/sade": "^1.7.2",
 		"amphtml-validator": "^1.0.34",
 		"eslint": "^7.19.0",
-		"esm": "^3.2.25",
 		"estree-walker": "^2.0.2",
 		"is-reference": "^1.2.1",
 		"kleur": "^4.1.4",
 		"magic-string": "^0.25.7",
-		"meriyah": "^3.1.6",
+		"meriyah": "^4.1.1",
 		"node-fetch": "^2.6.1",
-		"periscopic": "^2.0.3",
+		"periscopic": "^3.0.0",
 		"port-authority": "^1.1.2",
 		"require-relative": "^0.8.7",
 		"rimraf": "^3.0.2",
@@ -36,7 +36,7 @@
 		"tiny-glob": "^0.2.8"
 	},
 	"bin": {
-		"svelte-kit": "svelte-kit"
+		"svelte-kit": "svelte-kit.js"
 	},
 	"files": [
 		"assets",
@@ -50,6 +50,14 @@
 		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
 		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
 		"prepublishOnly": "npm run build",
-		"test": "uvu src \"(spec.js|test/index.js)\" -r esm"
+		"test": "uvu src \"(spec.mjs|test/index.mjs)\""
+	},
+	"exports": {
+		"./api": {
+			"import": "./dist/api.js"
+		},
+		"./renderer": {
+			"import": "./dist/renderer.js"
+		}
 	}
 }

packages/kit/rollup.config.js

@@ -45,7 +45,7 @@ export default [
 		},
 		output: {
 			dir: 'dist',
-			format: 'cjs',
+			format: 'esm',
 			sourcemap: true,
 			chunkFileNames: '[name].js'
 		},

packages/kit/src/api/adapt/Builder.js

@@ -1,5 +1,5 @@
 import { copy } from '@sveltejs/app-utils/files';
-import { prerender } from './prerender';
+import { prerender } from './prerender.js';
 
 export default class Builder {
 	#generated_files;

packages/kit/src/api/adapt/index.js

@@ -1,5 +1,5 @@
 import colors from 'kleur';
-import relative from 'require-relative';
+import { pathToFileURL } from 'url';
 import { logger } from '../utils';
 import Builder from './Builder';
 
@@ -20,7 +20,8 @@ export async function adapt(config, { verbose }) {
 		log
 	});
 
-	const fn = relative(adapter);
+	const resolved = await import.meta.resolve(adapter, pathToFileURL(process.cwd()));
+	const fn = await import(resolved);
 	await fn(builder, options);
 
 	log.success('done');

packages/kit/src/api/adapt/prerender.js

@@ -1,7 +1,7 @@
 import fs, { readFileSync } from 'fs';
 import { dirname, join, resolve as resolve_path } from 'path';
 import { parse, resolve, URLSearchParams } from 'url';
-import glob from 'tiny-glob/sync';
+import glob from 'tiny-glob/sync.js';
 import { mkdirp } from '@sveltejs/app-utils/files';
 
 function clean_html(html) {
@@ -47,7 +47,7 @@ export async function prerender({ dir, out, log, config, force }) {
 	const seen = new Set();
 
 	const server_root = resolve_path(dir);
-	const app = require(`${server_root}/server/app.cjs`);
+	const app = await import(`${server_root}/server/app.js`);
 
 	app.init({
 		paths: config.paths

packages/kit/src/api/adapt/test/index.js renamed to packages/kit/src/api/adapt/test/index.mjs

@@ -4,8 +4,12 @@ import { join } from 'path';
 import * as uvu from 'uvu';
 import * as assert from 'uvu/assert';
 import rimraf from 'rimraf';
-import glob from 'tiny-glob/sync';
-import Builder from '../Builder';
+import glob from 'tiny-glob/sync.js';
+import Builder from '../Builder.js';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = join(__filename, '..');
 
 const suite = uvu.suite('Builder');
 

packages/kit/src/api/build/index.js

@@ -1,4 +1,5 @@
-import fs, { readFileSync, writeFileSync } from 'fs';
+import fs, { existsSync, readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
 import path from 'path';
 import child_process from 'child_process';
 import { promisify } from 'util';
@@ -14,11 +15,15 @@ import { css_injection } from './css_injection';
 
 const execFile = promisify(child_process.execFile);
 
-const snowpack_main = require.resolve('snowpack');
-const snowpack_pkg_file = path.join(snowpack_main, '../../package.json');
-const snowpack_pkg = require(snowpack_pkg_file); // eslint-disable-line
-const snowpack_bin = path.resolve(path.dirname(snowpack_pkg_file), snowpack_pkg.bin.snowpack);
+let snowpack_pkg_file;
+let dir = fileURLToPath(import.meta.url);
+while (dir !== (dir = path.join(dir, '..'))) {
+	snowpack_pkg_file = path.join(dir, 'node_modules/snowpack/package.json');
+	if (existsSync(snowpack_pkg_file)) break;
+}
 
+const snowpack_pkg = JSON.parse(readFileSync(snowpack_pkg_file, 'utf-8')); // eslint-disable-line
+const snowpack_bin = path.resolve(path.dirname(snowpack_pkg_file), snowpack_pkg.bin.snowpack);
 const ignorable_warnings = new Set(['EMPTY_BUNDLE', 'MISSING_EXPORT']);
 const onwarn = (warning, handler) => {
 	// TODO would be nice to just eliminate the circular dependencies instead of
@@ -112,7 +117,8 @@ export async function build(config) {
 					}
 				}
 			},
-			css_chunks({
+			// TODO the .default suggests a bug in the css_chunks plugin
+			css_chunks.default({
 				sourcemap: true
 			}),
 			css_injection,
@@ -247,7 +253,7 @@ export async function build(config) {
 	fs.writeFileSync(
 		app_file,
 		`
-			import * as renderer from '@sveltejs/kit/dist/renderer';
+			import * as renderer from '@sveltejs/kit/renderer';
 			import root from './${config.appDir}/assets/generated/root.svelte.js';
 			import { set_paths } from './${config.appDir}/assets/runtime/internal/singletons.js';
 			import * as setup from './${config.appDir}/setup/index.js';
@@ -378,11 +384,11 @@ export async function build(config) {
 
 	await server_chunks.write({
 		dir: `${OPTIMIZED}/server`,
-		format: 'cjs', // TODO some adapters might want ESM?
+		format: 'esm',
 		exports: 'named',
-		entryFileNames: '[name].cjs',
-		chunkFileNames: 'chunks/[name].cjs',
-		assetFileNames: 'assets/[name].cjs',
+		entryFileNames: '[name].js',
+		chunkFileNames: 'chunks/[name].js',
+		assetFileNames: 'assets/[name].js',
 		sourcemap: true
 	});
 

packages/kit/src/api/dev/index.js

@@ -340,7 +340,7 @@ class Watcher extends EventEmitter {
 
 		this.server.close();
 		this.cheapwatch.close();
-		this.snowpack.shutdown();
+		return this.snowpack.shutdown();
 	}
 }
 

packages/kit/src/api/dev/loader.js

@@ -17,7 +17,7 @@ export default function loader(sp) {
 			return load(pathname, url_stack);
 		}
 
-		return Promise.resolve(load_node(imported));
+		return import(imported);
 	};
 
 	const invalidate_all = (path) => {
@@ -128,18 +128,3 @@ export default function loader(sp) {
 
 	return async (url) => load(url, []);
 }
-
-function load_node(source) {
-	// mirror Rollup's interop by allowing both of these:
-	//  import fs from 'fs';
-	//  import { readFileSync } from 'fs';
-	return {
-		exports: new Proxy(require(source), {
-			get(mod, prop) {
-				if (prop === 'default') return mod;
-				return mod[prop];
-			}
-		}),
-		css: []
-	};
-}

packages/kit/src/api/dev/sourcemap_stacktrace.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { SourceMapConsumer } from 'source-map';
+import sourcemap from 'source-map';
 
 function get_sourcemap_url(contents) {
 	const reversed = contents.split('\n').reverse().join('\n');
@@ -65,12 +65,12 @@ export async function sourcemap_stacktrace(stack, load_contents) {
 
 				// TODO: according to typings, this code cannot work;
 				// the constructor returns a promise that needs to be awaited
-				const consumer = await new SourceMapConsumer(raw_sourcemap);
+				const consumer = await new sourcemap.SourceMapConsumer(raw_sourcemap);
 
 				const pos = consumer.originalPositionFor({
 					line: Number(line),
 					column: Number(column),
-					bias: SourceMapConsumer.LEAST_UPPER_BOUND
+					bias: sourcemap.SourceMapConsumer.LEAST_UPPER_BOUND
 				});
 
 				if (!pos.source) return input;

packages/kit/src/api/dev/transform.js

@@ -1,7 +1,7 @@
 import * as meriyah from 'meriyah';
 import MagicString from 'magic-string';
-import { analyze, extract_names } from 'periscopic';
-import { walk } from 'estree-walker';
+import * as periscopic from 'periscopic'; // eslint-disable-line import/no-unresolved
+import * as walker from 'estree-walker';
 import is_reference from 'is-reference';
 
 export function transform(data) {
@@ -11,11 +11,11 @@ export function transform(data) {
 		next: true
 	});
 
-	const { map, scope } = analyze(ast);
+	const { map, scope } = periscopic.analyze(ast);
 	const all_identifiers = new Set();
 
 	// first, get a list of all the identifiers used in the module...
-	walk(ast, {
+	walker.walk(ast, {
 		enter(node, parent) {
 			if (is_reference(node, parent)) {
 				all_identifiers.add(node.name);
@@ -109,7 +109,7 @@ export function transform(data) {
 				if (node.declaration.type === 'VariableDeclaration') {
 					const names = [];
 					node.declaration.declarations.forEach((declarator) => {
-						names.push(...extract_names(declarator.id));
+						names.push(...periscopic.extract_names(declarator.id));
 					});
 
 					suffix = names.map((name) => ` ${__export}('${name}', () => ${name});`).join('');
@@ -144,7 +144,7 @@ export function transform(data) {
 	if (replacements.size) {
 		let current_scope = scope;
 
-		walk(ast, {
+		walker.walk(ast, {
 			enter(node, parent) {
 				if (map.has(node)) {
 					current_scope = map.get(node) || current_scope;
@@ -176,7 +176,7 @@ export function transform(data) {
 
 	// replace import.meta and import(dynamic)
 	if (/import\s*\.\s*meta/.test(data) || /import\s*\(/.test(data)) {
-		walk(ast.body, {
+		walker.walk(ast.body, {
 			enter(node) {
 				if (node.type === 'MetaProperty' && node.meta.name === 'import') {
 					code.overwrite(node.start, node.end, __import_meta);