From 870f83db1a3c671a53828da15817d9b93f51b57a Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 3 Dec 2024 09:37:00 +0100
Subject: [PATCH] fix: add polyfills / avoid using `structuredClone`

- 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
---
 apps/svelte.dev/src/hooks.client.js            |  1 +
 .../(authed)/playground/[id]/+page.svelte      |  4 ++--
 .../editor/src/lib/compile-worker/worker.ts    |  1 +
 packages/repl/src/lib/workers/bundler/index.ts |  1 +
 packages/site-kit/package.json                 |  3 +++
 packages/site-kit/src/lib/polyfills/index.ts   | 18 ++++++++++++++++++
 packages/site-kit/src/lib/search/search.ts     |  1 +
 7 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 apps/svelte.dev/src/hooks.client.js
 create mode 100644 packages/site-kit/src/lib/polyfills/index.ts

diff --git a/apps/svelte.dev/src/hooks.client.js b/apps/svelte.dev/src/hooks.client.js
new file mode 100644
index 0000000000..e6e098b1ec
--- /dev/null
+++ b/apps/svelte.dev/src/hooks.client.js
@@ -0,0 +1 @@
+import '@sveltejs/site-kit/polyfills';
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index d11f2522b7..f5181943ce 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/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;
diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index dcd517572a..9ea49a6b5f 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/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';
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 1aae33b2a2..fbb7e9540f 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/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';
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 71c07c0906..84abf82b95 100644
--- a/packages/site-kit/package.json
+++ b/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": {
diff --git a/packages/site-kit/src/lib/polyfills/index.ts b/packages/site-kit/src/lib/polyfills/index.ts
new file mode 100644
index 0000000000..b2f91178dd
--- /dev/null
+++ b/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 };
+	};
+}
diff --git a/packages/site-kit/src/lib/search/search.ts b/packages/site-kit/src/lib/search/search.ts
index 56e022118f..01555ecd2d 100644
--- a/packages/site-kit/src/lib/search/search.ts
+++ b/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';