Sapper with hash based routing

More similar to SvelteKit:

	ESM
	+ ssr: global fetch,Request,Response,Headers
	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 +1,2 @@
-module.exports = require('../dist/rollup.js');
+import { default as rollup } from '../dist/config/rollup.js';
+export default rollup;

config/webpack.js

@@ -1 +1,2 @@
-module.exports = require('../dist/webpack.js');
+import { default as webpack } from '../dist/config/webpack.js';
+export default webpack;

package.json

@@ -3,7 +3,19 @@
   "version": "0.29.1",
   "description": "The next small thing in web development, powered by Svelte",
   "bin": {
-    "sapper": "./sapper"
+    "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",
@@ -20,67 +32,67 @@
   },
   "dependencies": {
     "html-minifier": "^4.0.0",
-    "http-link-header": "^1.0.2",
+    "http-link-header": "^1.0.3",
     "shimport": "^2.0.5",
-    "source-map": "^0.6.1",
-    "sourcemap-codec": "^1.4.6",
+    "source-map": "^0.7.3",
+    "sourcemap-codec": "^1.4.8",
     "string-hash": "^1.1.3"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^8.0.1",
-    "@rollup/plugin-replace": "^2.3.3",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-typescript": "^8.2.5",
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.4.0",
-    "@types/cookie": "^0.4.0",
-    "@types/mocha": "^8.0.0",
-    "@types/node": "^10.0.0",
-    "@types/node-fetch": "^2.5.7",
-    "@types/puppeteer": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "@typescript-eslint/parser": "^4.3.0",
-    "cheap-watch": "^1.0.2",
+    "@types/cookie": "^0.4.1",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^16.4.9",
+    "@types/node-fetch": "^2.5.12",
+    "@types/puppeteer": "^5.4.4",
+    "@typescript-eslint/eslint-plugin": "^4.28.5",
+    "@typescript-eslint/parser": "^4.28.5",
+    "cheap-watch": "^1.0.3",
     "cookie": "^0.4.1",
-    "cross-env": "^7.0.2",
-    "devalue": "^2.0.0",
-    "eslint": "^7.10.0",
-    "eslint-import-resolver-typescript": "^2.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-svelte3": "^2.7.3",
-    "kleur": "^4.0.0",
-    "mime": "^2.4.4",
-    "mocha": "^8.0.0",
-    "node-fetch": "^2.6.0",
+    "cross-env": "^7.0.3",
+    "devalue": "^2.0.1",
+    "eslint": "^7.32.0",
+    "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",
+    "kleur": "^4.1.4",
+    "mime": "^2.5.2",
+    "mocha": "^9.0.3",
+    "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.5",
     "polka": "^0.5.2",
-    "port-authority": "^1.0.5",
-    "pretty-bytes": "^5.3.0",
-    "puppeteer": "^5.0.0",
-    "require-relative": "^0.8.7",
+    "port-authority": "^1.1.2",
+    "pretty-bytes": "^5.6.0",
+    "puppeteer": "^10.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.29.0",
-    "rollup-dependency-tree": "0.0.14",
+    "rollup": "^2.55.1",
     "rollup-plugin-css-chunks": "^2.0.3",
-    "rollup-plugin-svelte": "^5.1.0",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "sade": "^1.6.1",
-    "sirv": "^1.0.0",
-    "svelte": "^3.24.0",
-    "svelte-loader": "^2.13.6",
-    "ts-node": "^8.10.2",
-    "tslib": "^2.0.0",
-    "typescript": "^4.0.3",
-    "webpack": "^4.38.0",
-    "webpack-format-messages": "^2.0.5",
+    "rollup-plugin-svelte": "^7.1.0",
+    "sade": "1.7.4",
+    "sirv": "^1.0.12",
+    "string-replace-async": "^2.0.0",
+    "svelte": "^3.41.0",
+    "svelte-loader": "^3.1.2",
+    "ts-node": "^10.1.0",
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.5",
+    "webpack": "^5.47.1",
+    "webpack-format-messages": "3.0.1",
     "webpack-modules": "^1.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.17.3"
+    "svelte": "^3.41.0"
   },
   "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",

rollup.config.js

@@ -1,29 +1,18 @@
 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 typescript from '@rollup/plugin-typescript';
 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: {
-		compilerOptions: { module: 'esnext' }
-	}
+	checkJs: !!process.env.TS_CHECK_ENABLED,
+	module: 'esnext'
 };
 
 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,30 +30,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: 'cjs',
-			interop: false,
-			sourcemap: true,
-			chunkFileNames: '[name].js'
-		},
-		external,
-		plugins: [
-			json(),
-			resolve({
-				extensions: ['.mjs', '.js', '.ts']
-			}),
-			commonjs(),
-			typescript(tsOptions)
-		]
-	}
 ];

runtime/internal/shared.js

@@ -0,0 +1,3 @@
+export const CONTEXT_KEY = {};
+
+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/index.ts

@@ -1 +1,2 @@
-export { default as middleware } from './middleware/index';
+import './install-fetch.js';
+export { default as middleware } from './middleware/index.js';

runtime/src/server/install-fetch.ts

@@ -0,0 +1,24 @@
+import fetch, { Response, Request, Headers } from 'node-fetch';
+
+// exported for dev, prerender, and preview
+export function __fetch_polyfill() {
+	Object.defineProperties(globalThis, {
+		fetch: {
+			enumerable: true,
+			value: fetch
+		},
+		Response: {
+			enumerable: true,
+			value: Response
+		},
+		Request: {
+			enumerable: true,
+			value: Request
+		},
+		Headers: {
+			enumerable: true,
+			value: Headers
+		}
+	});
+}
+__fetch_polyfill();

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';
@@ -259,7 +260,7 @@ export function get_page_handler(
 			});
 
 			if (error instanceof Error && error.stack) {
-				error.stack = sourcemap_stacktrace(error.stack);
+				error.stack = await sourcemap_stacktrace(error.stack);
 			}
 
 			const pageContext: PageContext = {

runtime/src/server/middleware/get_server_route_handler.ts

@@ -24,6 +24,7 @@ export function get_server_route_handler(routes: ServerRoute[]) {
 				res.setHeader = function(name: string, value: string) {
 					headers[name.toLowerCase()] = value;
 					setHeader.apply(res, [name, value]);
+					return res;
 				};
 
 				res.end = function(chunk?: any) {

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';
@@ -110,12 +111,12 @@ export function serve({ prefix, pathname, cache_control }: {
 		? (file: string) => fs.readFileSync(path.join(build_dir, file))
 		: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.join(build_dir, file)))).get(file);
 
-	return (req: SapperRequest, res: SapperResponse, next: () => void) => {
+	return async (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));
+				const file = path.posix.normalize(path.join('.', decodeURIComponent(req.path)));
 				const data = read(file);
 
 				res.setHeader('Content-Type', type);