move kit runtime, expose via $app alias

.changeset/purple-impalas-deliver.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/kit': patch
+'@sveltejs/snowpack-config': patch
+---
+
+Move kit runtime code, expose via \$app aliases

packages/kit/.gitignore

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

packages/kit/rollup.config.js

@@ -12,17 +12,21 @@ const external = [].concat(
 
 export default [
 	{
-		input: 'src/client/index.ts',
+		input: {
+			navigation: 'src/runtime/navigation/index.ts',
+			stores: 'src/runtime/stores/index.ts'
+		},
 		output: {
-			file: 'assets/client.js',
+			dir: 'assets/runtime',
 			format: 'esm',
 			sourcemap: true,
 			paths: {
-				ROOT: './root.svelte',
-				MANIFEST: './manifest.js'
+				ROOT: '../generated/root.svelte',
+				MANIFEST: '../generated/manifest.js'
 			}
 		},
 		external: [
+			'svelte',
 			'svelte/store',
 			'ROOT',
 			'MANIFEST'

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

@@ -4,7 +4,7 @@ import child_process from 'child_process';
 import { promisify } from 'util';
 import colors from 'kleur';
 import relative from 'require-relative';
-import { mkdirp } from '@sveltejs/app-utils';
+import { mkdirp } from '@sveltejs/app-utils/files';
 import create_manifest_data from '../../core/create_manifest_data';
 import {
 	rollup,
@@ -28,7 +28,7 @@ const ignorable_warnings = new Set(['EMPTY_BUNDLE', 'CIRCULAR_DEPENDENCY']);
 const onwarn = (warning, handler) => {
 	// TODO would be nice to just eliminate the circular dependencies instead of
 	// squelching these warnings (it happens when e.g. the root layout imports
-	// from /_app/main/client)
+	// from /_app/main/runtime/navigation)
 	if (ignorable_warnings.has(warning.code)) return;
 	handler(warning);
 };
@@ -64,6 +64,12 @@ export async function build(config: SvelteAppConfig) {
 
 		copy_assets();
 
+		const setup_file = `${unoptimized}/server/_app/setup/index.js`;
+		if (!fs.existsSync(setup_file)) {
+			mkdirp(path.dirname(setup_file));
+			fs.writeFileSync(setup_file, '');
+		}
+
 		await exec(`${snowpack_bin} build --out=${unoptimized}/server --ssr`);
 		log.success('server');
 		await exec(`${snowpack_bin} build --out=${unoptimized}/client`);
@@ -76,11 +82,8 @@ export async function build(config: SvelteAppConfig) {
 		await exec(`rm -rf .svelte/build/optimized`);
 
 		const server_input = {
-			root: `${unoptimized}/server/_app/main/root.js`,
-			setup: fs.existsSync(`${unoptimized}/server/_app/setup/index.js`)
-				? `${unoptimized}/server/_app/setup/index.js`
-				: path.join(__dirname, '../assets/setup.js'),
-			// TODO session middleware etc
+			root: `${unoptimized}/server/_app/main/generated/root.js`,
+			setup: `${unoptimized}/server/_app/setup/index.js`
 		};
 
 		[
@@ -91,9 +94,21 @@ export async function build(config: SvelteAppConfig) {
 			server_input[`routes/${item.name}`] = `${unoptimized}/server${item.url.replace(/\.\w+$/, '.js')}`;
 		});
 
+		// https://github.com/snowpackjs/snowpack/discussions/1395
+		const re = /(\.\.\/)+_app\/main\/runtime\//;
+		const work_around_alias_bug = type => ({
+			name: 'work-around-alias-bug',
+			resolveId(imported) {
+				if (re.test(imported)) {
+					return path.resolve(`${unoptimized}/${type}/_app/main/runtime`, imported.replace(re, ''));
+				}
+			}
+		});
+
 		const server_chunks = await rollup({
 			input: server_input,
 			plugins: [
+				work_around_alias_bug('server'),
 				{
 					name: 'remove-css',
 					load(id) {
@@ -123,13 +138,14 @@ export async function build(config: SvelteAppConfig) {
 
 		log.success(`server`);
 
-		const entry = path.resolve(`${unoptimized}/client/_app/main/client.js`);
+		const entry = path.resolve(`${unoptimized}/client/_app/main/runtime/navigation.js`);
 
 		const client_chunks = await rollup({
 			input: {
 				entry
 			},
 			plugins: [
+				work_around_alias_bug('client'),
 				{
 					name: 'deproxy-css',
 					async resolveId(importee, importer) {
@@ -189,18 +205,18 @@ export async function build(config: SvelteAppConfig) {
 
 							const chunk = bundle[key];
 
-							if (!(chunk as OutputChunk).imports) {
-								console.log(chunk);
-							}
+							const imports = chunk && (chunk as OutputChunk).imports;
 
-							(chunk as OutputChunk).imports.forEach(key => {
-								if (key.endsWith('.css')) {
-									js.add(inject_styles);
-									css.add(key);
-								} else {
-									find_deps(key, js, css);
-								}
-							});
+							if (imports) {
+								imports.forEach(key => {
+									if (key.endsWith('.css')) {
+										js.add(inject_styles);
+										css.add(key);
+									} else {
+										find_deps(key, js, css);
+									}
+								});
+							}
 
 							return { js, css };
 						};

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

@@ -141,7 +141,7 @@ class Watcher extends EventEmitter {
 				let root;
 
 				try {
-					root = await load(`/_app/main/root.js`);
+					root = await load(`/_app/main/generated/root.js`);
 				}
 				catch (e) {
 					res.statusCode = 500;
@@ -163,7 +163,7 @@ class Watcher extends EventEmitter {
 					template,
 					manifest: this.manifest,
 					client: {
-						entry: 'main/client.js',
+						entry: 'main/runtime/navigation.js',
 						deps: {}
 					},
 					files: 'build',

packages/kit/src/api/utils.ts

@@ -1,11 +1,6 @@
-import { copyFileSync } from 'fs';
 import { resolve } from 'path';
-import { mkdirp } from '@sveltejs/app-utils/files';
+import { copy } from '@sveltejs/app-utils/files';
 
 export function copy_assets() {
-	mkdirp('.svelte/main/components');
-
-	['client.js', 'components/layout.svelte', 'components/error.svelte'].forEach(file => {
-		copyFileSync(resolve(__dirname, `../assets/${file}`), `.svelte/main/${file}`)
-	});
+	copy(resolve(__dirname, `../assets`), '.svelte/main');
 }

packages/kit/src/core/create_app.ts

@@ -16,8 +16,8 @@ export function create_app({
 
 	const app = generate_app(manifest_data);
 
-	write_if_changed(`${output}/manifest.js`, client_manifest);
-	write_if_changed(`${output}/root.svelte`, app);
+	write_if_changed(`${output}/generated/manifest.js`, client_manifest);
+	write_if_changed(`${output}/generated/root.svelte`, app);
 }
 
 export function create_serviceworker_manifest({ manifest_data, output, client_files, static_files }: {

packages/kit/src/client/goto/index.ts → packages/kit/src/runtime/navigation/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 '../internal';
+import { get_base_uri } from '../utils';
 
 export default function goto(
 	href: string,

packages/kit/src/runtime/navigation/index.ts

@@ -0,0 +1,4 @@
+export { default as goto } from './goto';
+export { default as prefetch } from './prefetch';
+export { default as prefetchRoutes } from './prefetchRoutes';
+export { default as start } from './start';

packages/kit/src/client/router/index.ts → packages/kit/src/runtime/navigation/internal.ts

@@ -1,5 +1,5 @@
-import { ScrollPosition, Target } from '../types';
-import find_anchor from './find_anchor';
+import { ScrollPosition, Target } from './types';
+import { find_anchor } from './utils';
 import { routes } from 'MANIFEST';
 
 // TODO

packages/kit/src/client/prefetch/index.ts → packages/kit/src/runtime/navigation/prefetch/index.ts

@@ -1,8 +1,7 @@
-import { hydrate_target } from '../app';
-import { select_target } from '../router';
-import find_anchor from '../router/find_anchor';
+import { hydrate_target } from '../start'; // TODO does this belong here?
+import { select_target } from '../internal';
+import { find_anchor, get_base_uri } from '../utils';
 import { HydratedTarget, Target } from '../types';
-import { get_base_uri } from '../baseuri_helper';
 
 let prefetching: {
 	href: string;

packages/kit/src/client/app.ts → packages/kit/src/runtime/navigation/start/index.ts

@@ -1,9 +1,9 @@
 import { writable } from 'svelte/store';
-import { extract_query, init as init_router, load_current_page, select_target } from './router';
-import { get_prefetched, start as start_prefetching } from './prefetch';
-import { HydratedTarget, Target, Redirect, Branch, Page, InitialData } from './types';
-import goto from './goto';
-import { page_store } from './stores';
+import { extract_query, init as init_router, load_current_page, select_target } from '../internal';
+import { get_prefetched, start as start_prefetching } from '../prefetch';
+import { HydratedTarget, Target, Redirect, Branch, Page, InitialData } from '../types';
+import goto from '../goto';
+import { page_store } from './page_store';
 import { ErrorComponent, components } from 'MANIFEST';
 import root from 'ROOT';
 

packages/kit/src/client/baseuri_helper.ts → packages/kit/src/runtime/navigation/utils.ts

@@ -8,3 +8,8 @@ export function get_base_uri(window_document) {
 
 	return baseURI;
 }
+
+export function find_anchor(node: Node) {
+	while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
+	return node;
+}

packages/kit/src/runtime/stores/index.ts

@@ -0,0 +1,43 @@
+import { getContext } from 'svelte';
+
+// const ssr = (import.meta as any).env.SSR;
+const ssr = typeof window === 'undefined'; // TODO why doesn't previous line work in build?
+
+export const getStores: () => {
+	page: any // TODO
+	preloading: any // TODO
+	session: any // TODO
+} = () => getContext('__svelte__');
+
+export const page = {
+	subscribe(fn) {
+		const store = getStores().page;
+		return store.subscribe(fn);
+	}
+};
+
+export const preloading = {
+	subscribe(fn) {
+		const store = getStores().preloading;
+		return store.subscribe(fn);
+	}
+};
+
+const error = verb => {
+	throw new Error(ssr ? `Can only ${verb} session store in browser` : `Cannot ${verb} session store before subscribing`);
+};
+
+export const session = {
+	subscribe(fn) {
+		const store = getStores().session;
+
+		if (!ssr) {
+			session.set = store.set;
+			session.update = store.update;
+		}
+
+		return store.subscribe(fn);
+	},
+	set: () => error('set'),
+	update: () => error('update')
+};

packages/kit/tsconfig.json

@@ -5,8 +5,10 @@
 		"moduleResolution": "node",
 		"target": "ES6",
 		"esModuleInterop": true,
-		"noEmit": true
+		"noEmit": true,
+		"noEmitOnError": true
 	},
 	"include": ["src/**/*"],
-	"lib": ["ES2020", "dom", "node"]
+	"lib": ["ES2020", "dom", "node"],
+	"strict": true
 }

packages/snowpack-config/snowpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
 		'src/setup': '/_app/setup'
 	},
 	alias: {
-		'@sveltejs/kit': '/_app/main',
+		$app: '/_app/main/runtime',
 		$components: './src/components'
 	}
 };