fix: add polyfills / avoid using structuredClone (#915)

- polyfills for `at` and `withResolvers`
- avoid using `structuredClone`, we can use `JSON.parse(JSON.stringify(..))` instead at that position

makes the site work in more browsers

closes #911

Author: dummdidumm

apps/svelte.dev/src/hooks.client.js

@@ -0,0 +1 @@
+import '@sveltejs/site-kit/polyfills';

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -69,8 +69,8 @@
 
 		if (!hash && !saved) {
 			repl?.set({
-				// TODO make this munging unnecessary
-				files: structuredClone(data.gist.components).map(munge)
+				// TODO make this munging unnecessary (using JSON instead of structuredClone for better browser compat)
+				files: JSON.parse(JSON.stringify(data.gist.components)).map(munge)
 			});
 
 			modified = false;

packages/editor/src/lib/compile-worker/worker.ts

@@ -1,3 +1,4 @@
+import '@sveltejs/site-kit/polyfills';
 import { parseTar } from 'tarparser';
 import type { CompileResult } from 'svelte/compiler';
 import type { ExposedCompilerOptions, File } from '../Workspace.svelte';

packages/repl/src/lib/workers/bundler/index.ts

@@ -1,3 +1,4 @@
+import '@sveltejs/site-kit/polyfills';
 import '../patch_window';
 import { sleep } from '../../utils';
 import { rollup } from '@rollup/browser';

packages/site-kit/package.json

@@ -98,6 +98,9 @@
 			"default": "./src/lib/nav/index.ts",
 			"svelte": "./src/lib/nav/index.ts"
 		},
+		"./polyfills": {
+			"default": "./src/lib/polyfills/index.ts"
+		},
 		"./icons/link.svg": "./src/lib/icons/link.svg",
 		"./icons/search.svg": "./src/lib/icons/search.svg",
 		"./search": {

packages/site-kit/src/lib/polyfills/index.ts

@@ -0,0 +1,18 @@
+// Some polyfills for things used throughout the app for better browser compat
+
+if (!Array.prototype.at) {
+	Array.prototype.at = /** @param {number} index */ function (index) {
+		return this[index >= 0 ? index : this.length + index];
+	};
+}
+
+if (!Promise.withResolvers) {
+	Promise.withResolvers = function () {
+		let resolve: any, reject: any;
+		const promise = new Promise<any>((res, rej) => {
+			resolve = res;
+			reject = rej;
+		});
+		return { resolve, reject, promise };
+	};
+}

packages/site-kit/src/lib/search/search.ts

@@ -1,3 +1,4 @@
+import '@sveltejs/site-kit/polyfills';
 import flexsearch, { type Index as FlexSearchIndex } from 'flexsearch';
 import type { Block, BlockGroup } from './types';