fix: import ESM issues

sveltejs#1791

.gitignore

@@ -3,6 +3,8 @@
 /test/**/node_modules
 __sapper__
 dist
+/runtime/app.js
 /runtime/app.mjs
+/runtime/server.js
 /runtime/server.mjs
-/.vscode/settings.json
+/.vscode/settings.json

config/rollup.js

@@ -1,2 +1,2 @@
-import { default as rollup } from '../dist/rollup.js';
+import { default as rollup } from '../dist/config/rollup.js';
 export default rollup;

config/webpack.js

@@ -1,2 +1,2 @@
-export { default as webpack } from '../dist/webpack.js';
+import { default as webpack } from '../dist/config/webpack.js';
 export default webpack;

package.json

@@ -6,6 +6,17 @@
     "sapper": "./dist/cli.js"
   },
   "type": "module",
+  "exports": {
+    "./package.json": {
+      "import": "./package.json"
+    },
+    "./config/rollup.js": {
+      "import": "./config/rollup.js"
+    },
+    "./config/webpack.js": {
+      "import": "./config/webpack.js"
+    }
+  },
   "files": [
     "*.js",
     "webpack",
@@ -35,7 +46,7 @@
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.4.0",
     "@types/cookie": "^0.4.1",
     "@types/mocha": "^8.2.3",
-    "@types/node": "^16.3.3",
+    "@types/node": "^16.4.0",
     "@types/node-fetch": "^2.5.11",
     "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
@@ -48,24 +59,22 @@
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-svelte3": "^3.2.0",
-    "import-meta-resolve": "^1.1.1",
+    "import-meta-resolve": "workspace:^1.1.1",
     "kleur": "^4.1.4",
     "mime": "^2.5.2",
     "mocha": "^9.0.2",
     "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.5",
     "polka": "^0.5.2",
     "port-authority": "^1.1.2",
-    "pretty-bytes": "^5.6.0",
+    "pretty-bytes": "workspace:^5.6.0",
     "puppeteer": "^10.1.0",
-    "require-relative": "^0.8.7",
     "rimraf": "^3.0.2",
-    "rollup": "^2.53.2",
-    "rollup-dependency-tree": "0.0.14",
-    "rollup-plugin-css-chunks": "^2.0.3",
+    "rollup": "^2.53.3",
+    "rollup-plugin-css-chunks": "workspace:^2.0.3",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-typescript2": "^0.30.0",
-    "sade": "^1.7.4",
+    "sade": "workspace:^1.7.4",
     "sirv": "^1.0.12",
     "string-replace-async": "^2.0.0",
     "svelte": "^3.38.3",
@@ -74,7 +83,7 @@
     "tslib": "^2.3.0",
     "typescript": "^4.3.5",
     "webpack": "^5.45.1",
-    "webpack-format-messages": "^2.0.6",
+    "webpack-format-messages": "workspace:^2.0.6",
     "webpack-modules": "^1.0.0"
   },
   "peerDependencies": {
@@ -83,7 +92,7 @@
   "scripts": {
     "test": "mocha --config=.mocharc.yml",
     "pretest": "npm run check",
-    "build": "rimraf dist && rollup -c",
+    "build": "rimraf dist && tsc -p tsconfig.src.json && rollup -c",
     "check": "rimraf dist && cross-env TS_CHECK_ENABLED=true rollup -c",
     "lint": "eslint '{src,runtime,test}/**/*.{ts,js,svelte}' && cd site && npm run lint",
     "prepare": "npm run build",
@@ -104,4 +113,4 @@
     "url": "https://github.com/sveltejs/sapper/issues"
   },
   "homepage": "https://github.com/sveltejs/sapper#readme"
-}
+}

rollup.config.js

@@ -1,17 +1,8 @@
 import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from 'rollup-plugin-typescript2';
-import pkg from './package.json';
 import { builtinModules } from 'module';
 
-const external = [].concat(
-	Object.keys(pkg.dependencies),
-	Object.keys(process.binding('natives')),
-	'sapper/core.js',
-	'svelte/compiler'
-);
-
 const tsOptions = {
 	check: !!process.env.TS_CHECK_ENABLED,
 	tsconfigOverride: {
@@ -23,7 +14,7 @@ function template(kind, external) {
 	return {
 		input: `runtime/src/${kind}/index.ts`,
 		output: {
-			file: `runtime/${kind}.mjs`,
+			file: `runtime/${kind}.js`,
 			format: 'es',
 			paths: id => id.replace('@sapper', '.')
 		},
@@ -41,31 +32,4 @@ function template(kind, external) {
 export default [
 	template('app', id => /^(svelte\/?|@sapper\/)/.test(id)),
 	template('server', id => /^(svelte\/?|@sapper\/)/.test(id) || builtinModules.includes(id)),
-
-	{
-		input: [
-			`src/api.ts`,
-			`src/cli.ts`,
-			`src/core.ts`,
-			`src/config/rollup.ts`,
-			`src/config/webpack.ts`
-		],
-		output: {
-			dir: 'dist',
-			format: 'es',
-			interop: false,
-			sourcemap: true,
-			chunkFileNames: '[name].js',
-			exports: 'auto'
-		},
-		external,
-		plugins: [
-			json(),
-			resolve({
-				extensions: ['.mjs', '.js', '.ts']
-			}),
-			commonjs(),
-			typescript(tsOptions)
-		]
-	}
 ];

runtime/internal/shared.mjs

@@ -1,5 +1,3 @@
-import { writable } from 'svelte/store';
-
 export const CONTEXT_KEY = {};
 
-export const preload = () => ({});
+export const preload = () => ({});

runtime/src/app/app.ts

@@ -5,24 +5,24 @@ import {
 	init as init_router,
 	load_current_page,
 	select_target
-} from './router';
-import { get_prefetched, start as start_prefetching } from './prefetch';
+} from './router/index.js';
+import { get_prefetched, start as start_prefetching } from './prefetch/index.js';
 import {
 	ErrorComponent,
 	components,
 	root_comp
-} from '@sapper/internal/manifest-client';
+} from '@sapper/internal/manifest-client.js';
 import {
 	HydratedTarget,
 	Target,
 	Redirect,
 	Branch,
 	Page,
 	InitialData
-} from './types';
+} from './types.js';
 import { PageContext } from '@sapper/common';
-import goto from './goto';
-import { page_store } from './stores';
+import goto from './goto/index.js';
+import { page_store } from './stores/index.js';
 
 declare const __SAPPER__;
 export const initial_data: InitialData = typeof __SAPPER__ !== 'undefined' && __SAPPER__;

runtime/src/app/goto/index.ts

@@ -1,5 +1,5 @@
-import { cid, history, navigate, select_target } from '../router';
-import { get_base_uri } from '../baseuri_helper';
+import { cid, history, navigate, select_target } from '../router/index.js';
+import { get_base_uri } from '../baseuri_helper.js';
 
 export default function goto(
 	href: string,

runtime/src/app/prefetch/index.ts

@@ -1,8 +1,8 @@
-import { hydrate_target } from '../app';
-import { select_target } from '../router';
-import find_anchor from '../router/find_anchor';
-import { HydratedTarget, Target } from '../types';
-import { get_base_uri } from '../baseuri_helper';
+import { hydrate_target } from '../app.js';
+import { select_target } from '../router/index.js';
+import find_anchor from '../router/find_anchor.js';
+import { HydratedTarget, Target } from '../types.js';
+import { get_base_uri } from '../baseuri_helper.js';
 
 let prefetching: {
 	href: string;

runtime/src/app/prefetchRoutes/index.ts

@@ -1,4 +1,4 @@
-import { components, routes } from '@sapper/internal/manifest-client';
+import { components, routes } from '@sapper/internal/manifest-client.js';
 
 export default function prefetchRoutes(pathnames: string[]): Promise<void> {
 	return routes

runtime/src/app/router/index.ts

@@ -1,12 +1,12 @@
 import {
 	ScrollPosition,
 	Target
-} from '../types';
+} from '../types.js';
 import {
 	ignore,
 	routes
-} from '@sapper/internal/manifest-client';
-import find_anchor from './find_anchor';
+} from '@sapper/internal/manifest-client.js';
+import find_anchor from './find_anchor.js';
 import { Page, Query } from '@sapper/common';
 
 export let uid = 1;

runtime/src/app/types.ts

@@ -1,4 +1,4 @@
-import { DOMComponentConstructor, Route } from '@sapper/internal/manifest-client';
+import { DOMComponentConstructor, Route } from '@sapper/internal/manifest-client.js';
 
 export interface HydratedTarget {
 	redirect?: Redirect;

runtime/src/server/middleware/get_page_handler.ts

@@ -1,7 +1,8 @@
 import { writable } from 'svelte/store';
 import fs from 'fs';
 import path from 'path';
-import { parse } from 'cookie';
+import * as cookie from 'cookie';
+const { parse } = cookie;
 import devalue from 'devalue';
 import fetch from 'node-fetch';
 import URL from 'url';

runtime/src/server/middleware/index.ts

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import mime from 'mime/lite';
+import * as mime from 'mime/lite.js';
+const { getType } = mime;
 import { Handler, SapperRequest, SapperResponse, build_dir, dev, manifest } from '@sapper/internal/manifest-server';
 import { get_server_route_handler } from './get_server_route_handler';
 import { get_page_handler } from './get_page_handler';
@@ -112,7 +113,7 @@ export function serve({ prefix, pathname, cache_control }: {
 
 	return (req: SapperRequest, res: SapperResponse, next: () => void) => {
 		if (filter(req)) {
-			const type = mime.getType(req.path);
+			const type = getType(req.path);
 
 			try {
 				const file = path.posix.normalize(decodeURIComponent(req.path));

runtime/src/server/middleware/replace_async.ts

@@ -0,0 +1,54 @@
+// TODO: Use string-replace-async packages when https://github.com/dsblv/string-replace-async/issues/10 is resolved
+/*
+The MIT License (MIT)
+
+Copyright (c) Dmitrii Sobolev <disobolev@icloud.com> (github.com/dsblv)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+ */
+function replace_async(
+	string: string,
+	searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; },
+	replacer: (substring: string, ...args: any[]) => Promise<string>
+): Promise<string> {
+	try {
+		if (typeof replacer === 'function') {
+			// 1. Run fake pass of `replace`, collect values from `replacer` calls
+			// 2. Resolve them with `Promise.all`
+			// 3. Run `replace` with resolved values
+			var values = []
+			String.prototype.replace.call(string, searchValue, function () {
+				values.push(replacer.apply(undefined, arguments))
+				return ''
+			})
+			return Promise.all(values).then(function (resolvedValues) {
+				return String.prototype.replace.call(string, searchValue, function () {
+					return resolvedValues.shift()
+				})
+			})
+		} else {
+			return Promise.resolve(
+				String.prototype.replace.call(string, searchValue, replacer)
+			)
+		}
+	} catch (error) {
+		return Promise.reject(error)
+	}
+}
+export { replace_async }

runtime/src/server/middleware/sourcemap_stacktrace.ts

@@ -1,7 +1,9 @@
 import fs from 'fs';
 import path from 'path';
-import { SourceMapConsumer, RawSourceMap } from 'source-map';
-import replace_async from 'string-replace-async';
+import * as source_map from 'source-map';
+import type { RawSourceMap } from 'source-map';
+import { replace_async } from './replace_async';
+export const { SourceMapConsumer } = source_map;
 
 function get_sourcemap_url(contents: string) {
 	const reversed = contents

site/rollup.config.js

@@ -2,11 +2,17 @@
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
-import resolve from '@rollup/plugin-node-resolve';
+import node_resolve from '@rollup/plugin-node-resolve';
 import svelte from 'rollup-plugin-svelte';
 import { terser } from 'rollup-plugin-terser';
 import config from 'sapper/config/rollup.js';
-import pkg from './package.json';
+import { resolve } from 'import-meta-resolve';
+
+const pkg = JSON.parse(
+	(await readFile(
+		new URL(await resolve('../package.json', import.meta.url)).pathname
+	)).toString()
+)
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
@@ -32,7 +38,7 @@ export default {
 					hydratable: true
 				}
 			}),
-			resolve({
+			node_resolve({
 				browser: true,
 				dedupe: ['svelte']
 			}),
@@ -80,7 +86,7 @@ export default {
 				},
 				emitCss: false
 			}),
-			resolve({
+			node_resolve({
 				dedupe: ['svelte']
 			}),
 			commonjs()
@@ -97,7 +103,7 @@ export default {
 		input: config.serviceworker.input(),
 		output: config.serviceworker.output(),
 		plugins: [
-			resolve(),
+			node_resolve(),
 			replace({
 				'process.browser': true,
 				'process.env.NODE_ENV': JSON.stringify(mode)

src/api.ts

@@ -1,4 +1,4 @@
-export { dev } from './api/dev';
-export { build } from './api/build';
-export { export } from './api/export';
-export { find_page } from './api/find_page';
+export { dev } from './api/dev.js';
+export { build } from './api/build.js';
+export { export as export } from './api/export.js';
+export { find_page } from './api/find_page.js';