fix: separate framework code from app code (#8957)

* separate app code from framework code * fix, simplify * changeset * DRY * try this? * Revert "try this?" This reverts commit a08b5d8. * simplify * debug logs * Revert "debug logs" This reverts commit ec618f5. * bump timeout * set public env in `<script>`, implementing preloading on safari (#9018) * load public env lazily * not sure why this fixes it but hey * fix tests * fix test * eager imports * use a hacky polyfill instead of eagerly importing * hash things up a bit * use header/element combo * remove hack * add an explanatory comment * remove TODO * implement generatePublicEnv * fix test * add a clarifying comment * fix tests * Update packages/adapter-static/test/test.js * ugh let this be the last one * always inline public env * fix * remove unused re-export * lint * lint * tidy up * add missing .env file * tidy up * get rid of set_version * set assets from window * load app eagerly * huh * fix test * fix * tidy up * changesets --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
sveltejs · Feb 19, 2023 · 46eec82 · 46eec82
1 parent fa18dc5
commit 46eec82
Show file tree

Hide file tree

Showing 40 changed files with 316 additions and 237 deletions.
diff --git a/.changeset/brave-eggs-sparkle.md b/.changeset/brave-eggs-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: set public env before starting app
diff --git a/.changeset/eighty-peas-do.md b/.changeset/eighty-peas-do.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: preload modules on Safari
diff --git a/.changeset/lemon-camels-applaud.md b/.changeset/lemon-camels-applaud.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: make `assets` work in client when app is served from a subfolder
diff --git a/packages/adapter-static/test/apps/prerendered/.env b/packages/adapter-static/test/apps/prerendered/.env
@@ -0,0 +1 @@
+PUBLIC_ANSWER=42
diff --git a/packages/adapter-static/test/apps/prerendered/.gitignore b/packages/adapter-static/test/apps/prerendered/.gitignore
@@ -3,3 +3,4 @@ node_modules
 /.svelte-kit
 /build
 /functions
+!/.env
diff --git a/packages/adapter-static/test/apps/prerendered/src/routes/public-env/+page.svelte b/packages/adapter-static/test/apps/prerendered/src/routes/public-env/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { env } from '$env/dynamic/public';
+</script>
+
+<h1>The answer is {env.PUBLIC_ANSWER}</h1>
diff --git a/packages/adapter-static/test/test.js b/packages/adapter-static/test/test.js
@@ -20,6 +20,11 @@ run('prerendered', (test) => {
 	test('prerenders a referenced endpoint with implicit `prerender` setting', async ({ cwd }) => {
 		assert.ok(fs.existsSync(`${cwd}/build/endpoint/implicit.json`));
 	});
+
+	test('exposes public env vars to the client', async ({ cwd, base, page }) => {
+		await page.goto(`${base}/public-env`);
+		assert.equal(await page.textContent('h1'), 'The answer is 42');
+	});
 });
 
 run('spa', (test) => {

diff --git a/packages/kit/src/core/env.js b/packages/kit/src/core/env.js
@@ -3,11 +3,6 @@ import { runtime_base } from './utils.js';
 
 /**
  * @typedef {'public' | 'private'} EnvType
- * @typedef {{
- * 	public: Record<string, string>;
- * 	private: Record<string, string>;
- * 	prefix: string;
- * }} EnvData
  */
 
 /**
@@ -44,12 +39,12 @@ export function create_dynamic_module(type, dev_values) {
 		);
 		return `export const env = {\n${keys.join(',\n')}\n}`;
 	}
-	return `export { ${type}_env as env } from '${runtime_base}/shared.js';`;
+	return `export { ${type}_env as env } from '${runtime_base}/shared-server.js';`;
 }
 
 /**
  * @param {EnvType} id
- * @param {EnvData} env
+ * @param {import('types').Env} env
  * @returns {string}
  */
 export function create_static_types(id, env) {
@@ -63,15 +58,16 @@ export function create_static_types(id, env) {
 
 /**
  * @param {EnvType} id
- * @param {EnvData} env
+ * @param {import('types').Env} env
+ * @param {string} prefix
  * @returns {string}
  */
-export function create_dynamic_types(id, env) {
+export function create_dynamic_types(id, env, prefix) {
 	const properties = Object.keys(env[id])
 		.filter((k) => valid_identifier.test(k))
 		.map((k) => `\t\t${k}: string;`);
 
-	const prefixed = `[key: \`${env.prefix}\${string}\`]`;
+	const prefixed = `[key: \`${prefix}\${string}\`]`;
 
 	if (id === 'private') {
 		properties.push(`\t\t${prefixed}: undefined;`);

diff --git a/packages/kit/src/core/generate_manifest/index.js b/packages/kit/src/core/generate_manifest/index.js
@@ -86,7 +86,7 @@ export function generate_manifest({ build_data, relative_path, routes }) {
 		assets: new Set(${s(assets)}),
 		mimeTypes: ${s(get_mime_lookup(build_data.manifest_data))},
 		_: {
-			entry: ${s(build_data.client_entry)},
+			client: ${s(build_data.client)},
 			nodes: [
 				${(node_paths).map(loader).join(',\n\t\t\t\t')}
 			],

diff --git a/packages/kit/src/core/sync/write_ambient.js b/packages/kit/src/core/sync/write_ambient.js
@@ -21,9 +21,10 @@ function read_description(filename) {
 }
 
 /**
- * @param {import('../env.js').EnvData} env
+ * @param {import('types').Env} env
+ * @param {string} prefix
  */
-const template = (env) => `
+const template = (env, prefix) => `
 ${GENERATED_COMMENT}
 
 /// <reference types="@sveltejs/kit" />
@@ -35,10 +36,10 @@ ${read_description('$env+static+public.md')}
 ${create_static_types('public', env)}
 
 ${read_description('$env+dynamic+private.md')}
-${create_dynamic_types('private', env)}
+${create_dynamic_types('private', env, prefix)}
 
 ${read_description('$env+dynamic+public.md')}
-${create_dynamic_types('public', env)}
+${create_dynamic_types('public', env, prefix)}
 `;
 
 /**
@@ -53,6 +54,6 @@ export function write_ambient(config, mode) {
 
 	write_if_changed(
 		path.join(config.outDir, 'ambient.d.ts'),
-		template({ ...env, prefix: config.env.publicPrefix })
+		template(env, config.env.publicPrefix)
 	);
 }
diff --git a/packages/kit/src/core/sync/write_client_manifest.js b/packages/kit/src/core/sync/write_client_manifest.js
@@ -106,9 +106,8 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 
 	const hooks_file = resolve_entry(kit.files.hooks.client);
 
-	// String representation of __CLIENT__/manifest.js
 	write_if_changed(
-		`${output}/manifest.js`,
+		`${output}/app.js`,
 		trim(`
 			${hooks_file ? `import * as client_hooks from '${relative_path(output, hooks_file)}';` : ''}
 
@@ -125,6 +124,8 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 					hooks_file ? 'client_hooks.handleError || ' : ''
 				}(({ error }) => { console.error(error) }),
 			};
+
+			export { default as root } from '../root.svelte';
 		`)
 	);
 

diff --git a/packages/kit/src/core/sync/write_server.js b/packages/kit/src/core/sync/write_server.js
@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { hash } from '../../runtime/hash.js';
 import { posixify, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
 import { load_error_page, load_template } from '../config/index.js';
@@ -25,11 +26,11 @@ const server_template = ({
 	error_page
 }) => `
 import root from '../root.svelte';
-import { set_assets, set_building, set_private_env, set_public_env, set_version } from '${runtime_directory}/shared.js';
-
-set_version(${s(config.kit.version.name)});
+import { set_building } from '__sveltekit/environment';
+import { set_assets, set_private_env, set_public_env } from '${runtime_directory}/shared-server.js';
 
 export const options = {
+	app_template_contains_nonce: ${template.includes('%sveltekit.nonce%')},
 	csp: ${s(config.kit.csp)},
 	csrf_check_origin: ${s(config.kit.csrf.checkOrigin)},
 	embedded: ${config.kit.embedded},
@@ -50,7 +51,8 @@ export const options = {
 		error: ({ status, message }) => ${s(error_page)
 			.replace(/%sveltekit\.status%/g, '" + status + "')
 			.replace(/%sveltekit\.error\.message%/g, '" + message + "')}
-	}
+	},
+	version_hash: ${s(hash(config.kit.version.name))}
 };
 
 export function get_hooks() {

diff --git a/packages/kit/src/exports/vite/build/utils.js b/packages/kit/src/exports/vite/build/utils.js
@@ -6,6 +6,7 @@ import path from 'node:path';
  * @param {import('vite').Manifest} manifest
  * @param {string} entry
  * @param {boolean} add_dynamic_css
+ * @returns {import('types').AssetDependencies}
  */
 export function find_deps(manifest, entry, add_dynamic_css) {
 	/** @type {Set<string>} */

diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js
@@ -105,11 +105,19 @@ export async function dev(vite, vite_config, svelte_config) {
 			assets: new Set(manifest_data.assets.map((asset) => asset.file)),
 			mimeTypes: get_mime_lookup(manifest_data),
 			_: {
-				entry: {
-					file: `${runtime_base}/client/start.js`,
-					imports: [],
-					stylesheets: [],
-					fonts: []
+				client: {
+					start: {
+						file: `${runtime_base}/client/start.js`,
+						imports: [],
+						stylesheets: [],
+						fonts: []
+					},
+					app: {
+						file: `${svelte_config.kit.outDir}/generated/client/app.js`,
+						imports: [],
+						stylesheets: [],
+						fonts: []
+					}
 				},
 				nodes: manifest_data.nodes.map((node, index) => {
 					return async () => {
@@ -443,15 +451,13 @@ export async function dev(vite, vite_config, svelte_config) {
 					await vite.ssrLoadModule(`${runtime_base}/server/index.js`)
 				);
 
-				const { set_assets, set_version, set_fix_stack_trace } =
+				const { set_assets, set_fix_stack_trace } =
 					/** @type {import('types').ServerInternalModule} */ (
-						await vite.ssrLoadModule(`${runtime_base}/shared.js`)
+						await vite.ssrLoadModule(`${runtime_base}/shared-server.js`)
 					);
 
 				set_assets(assets);
 
-				set_version(svelte_config.kit.version.name);
-
 				set_fix_stack_trace(fix_stack_trace);
 
 				const server = new Server(manifest);