refactor routing logic

packages/kit/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+	"root": true,
+	"extends": "@sveltejs",
+	"parserOptions": {
+		"sourceType": "module"
+	}
+}

packages/kit/.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 /node_modules
 /dist
-/assets/app
+/assets/runtime
 /assets/renderer
 /client/**/*.d.ts

packages/kit/package.json

@@ -17,6 +17,7 @@
 		"@types/node": "^14.11.10",
 		"@types/rimraf": "^3.0.0",
 		"@types/sade": "^1.7.2",
+		"eslint": "^7.14.0",
 		"esm": "^3.2.25",
 		"estree-walker": "^2.0.1",
 		"kleur": "^4.1.3",
@@ -43,7 +44,7 @@
 	"scripts": {
 		"dev": "rollup -cw",
 		"build": "rollup -c",
-		"lint": "eslint --ignore-pattern node_modules/ --ignore-pattern dist/ \"**/*.{ts,mjs,js,svelte}\" && npm run check-format",
+		"lint": "eslint --ignore-pattern node_modules/ --ignore-pattern dist/ --ignore-pattern assets/ \"**/*.{ts,mjs,js,svelte}\" && npm run check-format",
 		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
 		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
 		"prepublishOnly": "npm run build",

packages/kit/rollup.config.js

@@ -12,16 +12,18 @@ const external = [].concat(
 export default [
 	{
 		input: {
-			navigation: 'src/runtime/navigation/index.js',
-			stores: 'src/runtime/stores/index.js'
+			'internal/start': 'src/runtime/internal/start.js',
+			'internal/singletons': 'src/runtime/internal/singletons.js',
+			'app/navigation': 'src/runtime/app/navigation/index.js',
+			'app/stores': 'src/runtime/app/stores/index.js'
 		},
 		output: {
-			dir: 'assets/app',
+			dir: 'assets/runtime',
 			format: 'esm',
 			sourcemap: true,
 			paths: {
-				ROOT: '../generated/root.svelte',
-				MANIFEST: '../generated/manifest.js'
+				ROOT: '../../generated/root.svelte',
+				MANIFEST: '../../generated/manifest.js'
 			}
 		},
 		external: ['svelte', 'svelte/store', 'ROOT', 'MANIFEST'],
@@ -69,4 +71,4 @@ export default [
 		],
 		preserveEntrySignatures: true
 	}
-];
+];

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

@@ -67,7 +67,7 @@ export async function build(config) {
 			fs.writeFileSync(setup_file, '');
 		}
 
-		const mount = `--mount.${config.paths.routes}=/_app/routes --mount.${config.paths.setup}=/_app/setup`
+		const mount = `--mount.${config.paths.routes}=/_app/routes --mount.${config.paths.setup}=/_app/setup`;
 
 		await exec(`node ${snowpack_bin} build ${mount} --out=${unoptimized}/server --ssr`);
 		log.success('server');
@@ -87,7 +87,7 @@ export async function build(config) {
 			deps: {}
 		};
 
-		const entry = path.resolve(`${unoptimized}/client/_app/assets/app/navigation.js`);
+		const entry = path.resolve(`${unoptimized}/client/_app/assets/runtime/internal/start.js`);
 
 		// https://github.com/snowpackjs/snowpack/discussions/1395
 		const re = /(\.\.\/)+_app\/assets\/app\//;

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

@@ -139,7 +139,7 @@ class Watcher extends EventEmitter {
 					root = (await load('/_app/assets/generated/root.js')).default;
 				} catch (e) {
 					res.statusCode = 500;
-					res.end(e.toString());
+					res.end(e.stack);
 					return;
 				}
 
@@ -162,7 +162,7 @@ class Watcher extends EventEmitter {
 						manifest: this.manifest,
 						target: this.config.target,
 						client: {
-							entry: 'assets/app/navigation.js',
+							entry: 'assets/runtime/internal/start.js',
 							deps: {}
 						},
 						dev: true,

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

@@ -160,7 +160,7 @@ export default function loader(snowpack, config) {
 					if (node.type === 'MetaProperty' && node.meta.name === 'import') {
 						code.overwrite(node.start, node.end, '__importmeta__');
 					} else if (node.type === 'ImportExpression') {
-						code.overwrite(node.start, node.start + 6, `__import__`);
+						code.overwrite(node.start, node.start + 6, '__import__');
 					}
 				}
 			});

packages/kit/src/api/index.js

@@ -1,4 +1,4 @@
 export { dev } from './dev';
 export { build } from './build';
 export { start } from './start';
-export { load_config } from './load_config';
+export { load_config } from './load_config';

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

@@ -21,4 +21,4 @@ export function load_config({ cwd = process.cwd() } = {}) {
 			...config.paths
 		}
 	};
-}
+}

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

@@ -53,4 +53,4 @@ export function start({ port }) {
 			fulfil(server);
 		});
 	});
-}
+}

packages/kit/src/api/utils.js

@@ -2,5 +2,5 @@ import { resolve } from 'path';
 import { copy } from '@sveltejs/app-utils/files';
 
 export function copy_assets() {
-	copy(resolve(__dirname, `../assets`), '.svelte/assets');
+	copy(resolve(__dirname, '../assets'), '.svelte/assets');
 }

packages/kit/src/core/create_app.js

@@ -47,12 +47,6 @@ export function create_serviceworker_manifest({
 	write_if_changed(`${output}/service-worker.js`, code);
 }
 
-function create_param_match(param, i) {
-	return /^\.{3}.+$/.test(param)
-		? `${param.replace(/.{3}/, '')}: d(match[${i + 1}]).split('/')`
-		: `${param}: d(match[${i + 1}])`;
-}
-
 function generate_client_manifest(manifest_data) {
 	const page_ids = new Set(manifest_data.pages.map(page =>
 		page.pattern.toString()));
@@ -74,49 +68,52 @@ function generate_client_manifest(manifest_data) {
 
 	let needs_decode = false;
 
-	let routes = `[
-				${manifest_data.pages
-					.map(
-						(page) => `{
+	let pages = `[
+		${manifest_data.pages
+			.map(
+				(page) => `{
 					// ${page.parts[page.parts.length - 1].component.file}
 					pattern: ${page.pattern},
 					parts: [
 						${page.parts
 							.map((part) => {
 								const missing_layout = !part;
-								if (missing_layout) return 'null';
+								if (missing_layout) return null;
 
 								if (part.params.length > 0) {
 									needs_decode = true;
-									const props = part.params.map(create_param_match);
-									return `{ i: ${
-										component_indexes[part.component.name]
-									}, params: match => ({ ${props.join(', ')} }) }`;
+									const props = part.params.map((param, i) => {
+										return param.startsWith('...')
+											? `${param.slice(3)}: d(m[${i + 1}]).split('/')`
+											: `${param}: d(m[${i + 1}])`;
+									});
+									return `[components[${component_indexes[part.component.name]}], m => ({ ${props.join(', ')} })]`;
 								}
 
-								return `{ i: ${component_indexes[part.component.name]} }`;
+								return `[components[${component_indexes[part.component.name]}]]`;
 							})
-							.join(',\n\t\t\t\t\t\t')}
+							.filter(Boolean)
+							.join(',\n\t\t\t\t')}
 					]
-				}`
-					)
-					.join(',\n\n\t\t\t\t')}
+		}`).join(',\n\n\t\t')}
 	]`.replace(/^\t/gm, '');
 
 	if (needs_decode) {
-		routes = `(d => ${routes})(decodeURIComponent)`;
+		pages = `(d => ${pages})(decodeURIComponent)`;
 	}
 
 	return `
 		import * as layout from ${JSON.stringify(manifest_data.layout.url)};
-		export { layout };
-		export { default as ErrorComponent } from ${JSON.stringify(manifest_data.error.url)};
 
-		export const ignore = [${endpoints_to_ignore.map(route => route.pattern).join(', ')}];
+		const components = ${components};
 
-		export const components = ${components};
+		export const pages = ${pages};
 
-		export const routes = ${routes};
+		export const ignore = [
+			${endpoints_to_ignore.map(route => route.pattern).join(',\n\t\t\t')}
+		];
+
+		export { layout };
 	`
 		.replace(/^\t{2}/gm, '')
 		.trim();
@@ -130,18 +127,18 @@ function generate_app(manifest_data) {
 	);
 
 	const levels = [];
-	for (let i = 0; i < max_depth; i += 1) {
-		levels.push(i + 1);
+	for (let i = 0; i <= max_depth; i += 1) {
+		levels.push(i);
 	}
 
 	let l = max_depth;
 
-	let pyramid = `<svelte:component this={level${l}.component} {...level${l}.props}/>`;
+	let pyramid = `<svelte:component this={components[${l}]} {...(props_${l} || {})}/>`;
 
 	while (l-- > 1) {
 		pyramid = `
-			<svelte:component this={level${l}.component} segment={segments[${l}]} {...level${l}.props}>
-				{#if level${l + 1}}
+			<svelte:component this={level${l}.component} {...(props_${l} || {})}>
+				{#if components[${l + 1}]}
 					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
 				{/if}
 			</svelte:component>
@@ -154,25 +151,28 @@ function generate_app(manifest_data) {
 		<!-- This file is generated by @sveltejs/kit — do not edit it! -->
 		<script>
 			import { setContext, afterUpdate } from 'svelte';
-			import { layout, ErrorComponent } from './manifest.js';
-
-			const Layout = layout.default;
+			import ErrorComponent from ${JSON.stringify(manifest_data.error.url)};
 
 			// error handling
 			export let status = undefined;
 			export let error = undefined;
 
+			// stores
 			export let stores;
-			export let segments;
-			export let level0;
-			${levels.map((l) => `export let level${l} = null;`).join('\n\t\t\t')}
-			export let notify;
+			export let page;
+
+			export let components;
+			${levels.map((l) => `export let props_${l} = null;`).join('\n\t\t\t')}
+
+			const Layout = components[0];
 
-			afterUpdate(notify);
 			setContext('__svelte__', stores);
+
+			$: stores.page.set(page);
+			afterUpdate(stores.page.notify);
 		</script>
 
-		<Layout segment={segments[0]} {...level0.props}>
+		<Layout {...(props_0 || {})}>
 			{#if error}
 				<ErrorComponent {status} {error}/>
 			{:else}

packages/kit/src/core/create_manifest_data.js

@@ -128,7 +128,7 @@ export default function create_manifest_data(
 					path.join(dir, item.basename),
 					segments,
 					params,
-					component ? stack.concat({ component, params }) : stack.concat(null)
+					component ? stack.concat({ component, params }) : stack
 				);
 			} else if (item.is_page) {
 				const component = {

packages/kit/src/core/test/create_manifest_data.spec.js

@@ -47,7 +47,6 @@ test('creates routes', () => {
 			path: null,
 			pattern: /^\/blog\/([^/]+?)\/?$/,
 			parts: [
-				null,
 				{ component: blog_$slug, params: ['slug'] }
 			]
 		}
@@ -119,16 +118,16 @@ test('sorts routes correctly', () => {
 		['index.svelte'],
 		['about.svelte'],
 		['post/index.svelte'],
-		[null, 'post/bar.svelte'],
-		[null, 'post/foo.svelte'],
-		[null, 'post/f[xx].svelte'],
-		[null, 'post/[id([0-9-a-z]{3,})].svelte'],
-		[null, 'post/[id].svelte'],
+		['post/bar.svelte'],
+		['post/foo.svelte'],
+		['post/f[xx].svelte'],
+		['post/[id([0-9-a-z]{3,})].svelte'],
+		['post/[id].svelte'],
 		['[wildcard].svelte'],
-		[null, null, null, '[...spread]/deep/[...deep_spread]/xyz.svelte'],
-		[null, null, '[...spread]/deep/[...deep_spread]/index.svelte'],
-		[null, '[...spread]/deep/index.svelte'],
-		[null, '[...spread]/abc.svelte'],
+		['[...spread]/deep/[...deep_spread]/xyz.svelte'],
+		['[...spread]/deep/[...deep_spread]/index.svelte'],
+		['[...spread]/deep/index.svelte'],
+		['[...spread]/abc.svelte'],
 		['[...spread]/index.svelte']
 	]);
 });
@@ -184,8 +183,7 @@ test('fails on clashes', () => {
 	}, /The \[bar\]\/index\.svelte and \[foo\]\.svelte pages clash/);
 
 	assert.throws(() => {
-		const { server_routes } = create_manifest_data(path.join(__dirname, 'samples/clash-routes'));
-		console.log(server_routes);
+		create_manifest_data(path.join(__dirname, 'samples/clash-routes'));
 	}, /The \[bar\]\/index\.js and \[foo\]\.js routes clash/);
 });
 
@@ -257,7 +255,6 @@ test('works with custom extensions' , () => {
 			path: null,
 			pattern: /^\/blog\/([^/]+?)\/?$/,
 			parts: [
-				null,
 				{ component: blog_$slug, params: ['slug'] }
 			]
 		}
@@ -281,4 +278,4 @@ test('works with custom extensions' , () => {
 	]);
 });
 
-test.run();
+test.run();