[feat] Legacy JS support (fixes #12)

.changeset/mighty-carrots-whisper.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+[feat] add legacy support on JS bundling by auto-integrating with @vitejs/plugin-legacy

.eslintrc.json

@@ -11,5 +11,19 @@
 	"ignorePatterns": ["packages/create-svelte/shared/"],
 	"rules": {
 		"unicorn/prefer-node-protocol": "error"
-	}
+	},
+	"overrides": [{
+		"files": ["packages/kit/src/runtime/app/*.js", "packages/kit/src/runtime/client/*.js"],
+		"env": {
+			"browser": true
+		},
+		"settings": {
+			"polyfills": ["URL", "URLSearchParams", "Promise", "fetch", "AbortController", "IntersectionObserver"]
+		},
+		"plugins": ["compat", "unicorn"],
+		"rules": {
+			"compat/compat": "error",
+			"unicorn/prefer-node-protocol": "error"
+		}
+	}]
 }

package.json

@@ -32,7 +32,9 @@
 		"@rollup/plugin-node-resolve": "^15.0.1",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@typescript-eslint/eslint-plugin": "^5.53.0",
+		"@typescript-eslint/parser": "^5.0.0",
 		"eslint": "^8.33.0",
+		"eslint-plugin-compat": "^4.0.2",
 		"eslint-plugin-unicorn": "^46.0.0",
 		"playwright": "^1.29.2",
 		"prettier": "^2.8.0",

packages/kit/package.json

@@ -32,6 +32,7 @@
 		"@types/node": "^16.18.6",
 		"@types/sade": "^1.7.4",
 		"@types/set-cookie-parser": "^2.4.2",
+		"eslint": "^8.32.0",
 		"marked": "^4.2.3",
 		"rollup": "^3.7.0",
 		"svelte": "^3.56.0",
@@ -90,5 +91,11 @@
 	"types": "types/index.d.ts",
 	"engines": {
 		"node": "^16.14 || >=18"
-	}
+	},
+	"browserslist": [
+		"> 0.05% and not ie < 11 and not safari < 10 and not chrome < 14",
+		"ie >= 11",
+		"chrome >= 14",
+		"safari >= 10"
+	]
 }

packages/kit/src/exports/vite/dev/index.js

@@ -119,14 +119,18 @@ export async function dev(vite, vite_config, svelte_config) {
 						file: `${runtime_base}/client/start.js`,
 						imports: [],
 						stylesheets: [],
-						fonts: []
+						fonts: [],
+						legacy_file: null // No legacy support in dev mode
 					},
 					app: {
 						file: `${svelte_config.kit.outDir}/generated/client/app.js`,
 						imports: [],
 						stylesheets: [],
-						fonts: []
-					}
+						fonts: [],
+						legacy_file: null
+					},
+					legacy_polyfills_file: null,
+					modern_polyfills_file: null
 				},
 				nodes: manifest_data.nodes.map((node, index) => {
 					return async () => {

packages/kit/src/exports/vite/index.js

@@ -174,6 +174,8 @@ function kit({ svelte_config }) {
 	/** @type {import('vite').ConfigEnv} */
 	let vite_config_env;
 
+	let output_count = 0;
+
 	/** @type {boolean} */
 	let is_build;
 
@@ -643,7 +645,7 @@ function kit({ svelte_config }) {
 		},
 
 		/**
-		 * Vite builds a single bundle. We need three bundles: client, server, and service worker.
+		 * Vite builds a single bundle(or two on legacy). We need three bundles: client, server, and service worker.
 		 * The user's package.json scripts will invoke the Vite CLI to execute the server build. We
 		 * then use this hook to kick off builds for the client and service worker.
 		 */
@@ -652,6 +654,13 @@ function kit({ svelte_config }) {
 			async handler(_options) {
 				if (secondary_build_started) return; // only run this once
 
+				++output_count;
+				const config_output = vite_config.build.rollupOptions.output;
+				const config_output_length = Array.isArray(config_output) ? config_output.length : 1;
+				if (output_count < config_output_length) {
+					return; // Wait untill all output will be done building, since we need the manifest
+				}
+
 				const verbose = vite_config.logLevel === 'info';
 				const log = logger({ verbose });
 
@@ -700,38 +709,61 @@ function kit({ svelte_config }) {
 
 				secondary_build_started = true;
 
+				const getLastFlat = (/** @type {unknown} */ arrOrObj) =>
+					Array.isArray(arrOrObj) ? arrOrObj[arrOrObj.length - 1] : arrOrObj;
+
 				const { output } = /** @type {import('rollup').RollupOutput} */ (
-					await vite.build({
-						configFile: vite_config.configFile,
-						// CLI args
-						mode: vite_config_env.mode,
-						logLevel: vite_config.logLevel,
-						clearScreen: vite_config.clearScreen,
-						build: {
-							minify: initial_config.build?.minify,
-							assetsInlineLimit: vite_config.build.assetsInlineLimit,
-							sourcemap: vite_config.build.sourcemap
-						},
-						optimizeDeps: {
-							force: vite_config.optimizeDeps.force
-						}
-					})
+					getLastFlat(
+						await vite.build({
+							configFile: vite_config.configFile,
+							// CLI args
+							mode: vite_config_env.mode,
+							logLevel: vite_config.logLevel,
+							clearScreen: vite_config.clearScreen,
+							build: {
+								minify: initial_config.build?.minify,
+								assetsInlineLimit: vite_config.build.assetsInlineLimit,
+								sourcemap: vite_config.build.sourcemap
+							},
+							optimizeDeps: {
+								force: vite_config.optimizeDeps.force
+							}
+						})
+					)
 				);
 
 				/** @type {import('vite').Manifest} */
 				const client_manifest = JSON.parse(read(`${out}/client/${vite_config.build.manifest}`));
 
-				build_data.client = {
-					start: find_deps(
+				/**
+				 *
+				 * @param {string} entry
+				 */
+				const find_file_if_exist = (entry) =>
+					entry in client_manifest ? client_manifest[entry].file : null;
+
+				/**
+				 *
+				 * @param {string} dir
+				 * @param {string} entry_name
+				 * @returns {import('types').AssetDependenciesWithLegacy}
+				 */
+				const find_deps_with_optional_legacy = (dir, entry_name) => ({
+					...find_deps(
 						client_manifest,
-						posixify(path.relative('.', `${runtime_directory}/client/start.js`)),
+						posixify(path.relative('.', `${dir}/${entry_name}.js`)),
 						false
 					),
-					app: find_deps(
-						client_manifest,
-						posixify(path.relative('.', `${kit.outDir}/generated/client-optimized/app.js`)),
-						false
+					legacy_file: find_file_if_exist(
+						posixify(path.relative('.', `${dir}/${entry_name}-legacy.js`))
 					)
+				});
+
+				build_data.client = {
+					start: find_deps_with_optional_legacy(`${runtime_directory}/client`, 'start'),
+					app: find_deps_with_optional_legacy(`${kit.outDir}/generated/client-optimized`, 'app'),
+					legacy_polyfills_file: find_file_if_exist('vite/legacy-polyfills-legacy'),
+					modern_polyfills_file: find_file_if_exist('vite/legacy-polyfills')
 				};
 
 				const css = output.filter(

packages/kit/src/runtime/app/forms.js

@@ -108,7 +108,11 @@ export function enhance(form, submit = () => {}) {
 				},
 				cache: 'no-store',
 				body: data,
-				signal: controller.signal
+				signal: controller.signal,
+				// Althought the default value of `credentials` is 'same-origin', we must specify it explicitly,
+				//  since the default value of the (recomended) `whatwg-fetch` polyfill is different (sadly :-( )),
+				//  and equals to 'omit' instead.
+				credentials: 'same-origin'
 			});
 
 			result = deserialize(await response.text());

packages/kit/src/runtime/client/client.js

@@ -115,6 +115,7 @@ export function create_client(app, target) {
 	let root;
 
 	// keeping track of the history index in order to prevent popstate navigation events if needed
+	// eslint-disable-next-line compat/compat -- if the browser doesn't support `history.state` then this will be just undefined
 	let current_history_index = history.state?.[INDEX_KEY];
 
 	if (!current_history_index) {
@@ -1457,7 +1458,10 @@ export function create_client(app, target) {
 		},
 
 		_start_router: () => {
-			history.scrollRestoration = 'manual';
+			// If the browser supports `history.scrollRestoration`
+			if (history.scrollRestoration) {
+				history.scrollRestoration = 'manual';
+			}
 
 			// Adopted from Nuxt.js
 			// Reset scrollRestoration to auto when leaving page, allowing page reload
@@ -1822,13 +1826,58 @@ async function load_data(url, invalid) {
 	}
 
 	return new Promise(async (resolve) => {
+		/**
+		 * Kinda support somehow legacy environments that don't support the Stream API.
+		 * @param {Response} response
+		 */
+		const sloppy_legacy_friendly_reader_decoder = (response) => {
+			if ('body' in response && typeof TextDecoder !== 'undefined') {
+				return {
+					reader: /** @type {ReadableStream<Uint8Array>} */ (res.body).getReader(),
+					decoder: /** @type {{decode: (value: BufferSource | string | undefined) => string}} */ (
+						new TextDecoder()
+					)
+				};
+			}
+			// otherwise, we're in a legacy environment that doesn't support `Response.body`, so we shall simulate it
+
+			/** @type {string[] | undefined} */
+			let text_lines = undefined;
+			let current_line = 0;
+
+			return {
+				reader: {
+					read: async () => {
+						if (text_lines === undefined) {
+							const text = await res.text();
+
+							// Split the string on \n or \r characters
+							text_lines = text.split(/\r?\n|\r|\n/g);
+						}
+
+						if (current_line >= text_lines.length) {
+							return { done: true, value: undefined };
+						} else {
+							return { done: false, value: text_lines[current_line++] };
+						}
+					}
+				},
+				decoder: {
+					/**
+					 *
+					 * @param {BufferSource | string | undefined} value
+					 */
+					decode: (value) => /** @type {string} */ (value)
+				}
+			};
+		};
+
 		/**
 		 * Map of deferred promises that will be resolved by a subsequent chunk of data
 		 * @type {Map<string, import('types').Deferred>}
 		 */
 		const deferreds = new Map();
-		const reader = /** @type {ReadableStream<Uint8Array>} */ (res.body).getReader();
-		const decoder = new TextDecoder();
+		const { reader, decoder } = sloppy_legacy_friendly_reader_decoder(res);
 
 		/**
 		 * @param {any} data