From 95627d0213913f8513bdfc2d1ef367c90c7ac55b Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Wed, 29 Mar 2023 18:49:13 +0530
Subject: [PATCH] Localize the examples dependents

---
 .../src/lib/components/ReplWidget.svelte      |  7 ++-
 .../src/lib/server/examples/get-examples.js   |  2 +-
 .../src/lib/server/examples/types.d.ts        |  4 +-
 .../routes/(authed)/repl/[id].json/+server.js | 45 ++++++++-----------
 .../routes/(authed)/repl/embed/+page.svelte   |  1 -
 .../routes/examples/[slug].json/+server.js    |  7 +++
 .../src/routes/examples/[slug]/+page.svelte   |  2 +-
 7 files changed, 32 insertions(+), 36 deletions(-)
 create mode 100644 sites/svelte.dev/src/routes/examples/[slug].json/+server.js

diff --git a/sites/svelte.dev/src/lib/components/ReplWidget.svelte b/sites/svelte.dev/src/lib/components/ReplWidget.svelte
index 497081233f..85c2f6f68a 100644
--- a/sites/svelte.dev/src/lib/components/ReplWidget.svelte
+++ b/sites/svelte.dev/src/lib/components/ReplWidget.svelte
@@ -1,9 +1,8 @@
 <script>
-	import Repl from '@sveltejs/repl';
-	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { process_example } from '$lib/utils/examples';
-	import { PUBLIC_API_BASE } from '$env/static/public';
+	import Repl from '@sveltejs/repl';
+	import { onMount } from 'svelte';
 
 	export let version = '3';
 	export let gist = null;
@@ -58,7 +57,7 @@
 					repl.set({ components });
 				});
 		} else if (example) {
-			fetch(`${PUBLIC_API_BASE}/docs/svelte/examples/${example}`).then(async (response) => {
+			fetch(`/examples/${example}.json`).then(async (response) => {
 				if (response.ok) {
 					const data = await response.json();
 					const components = process_example(data.files);
diff --git a/sites/svelte.dev/src/lib/server/examples/get-examples.js b/sites/svelte.dev/src/lib/server/examples/get-examples.js
index 09b06723df..fd767aeb34 100644
--- a/sites/svelte.dev/src/lib/server/examples/get-examples.js
+++ b/sites/svelte.dev/src/lib/server/examples/get-examples.js
@@ -42,7 +42,7 @@ export function get_examples_data() {
 				.readdirSync(example_base_dir)
 				.filter((file) => !file.endsWith('meta.json'))) {
 				files.push({
-					filename: file,
+					name: file,
 					type: file.split('.').at(-1),
 					content: fs.readFileSync(`${example_base_dir}/${file}`, 'utf-8'),
 				});
diff --git a/sites/svelte.dev/src/lib/server/examples/types.d.ts b/sites/svelte.dev/src/lib/server/examples/types.d.ts
index 5fe93a0ca5..71abd66311 100644
--- a/sites/svelte.dev/src/lib/server/examples/types.d.ts
+++ b/sites/svelte.dev/src/lib/server/examples/types.d.ts
@@ -6,8 +6,8 @@ export type ExamplesData = {
 		slug: string;
 		files: {
 			content: string;
-			type: 'svelte' | 'js';
-			filename: string;
+			type: string;
+			name: string;
 		}[];
 	}[];
 }[];
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
index ef55e41199..054b1d36ae 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
@@ -1,15 +1,23 @@
-import { error, json } from '@sveltejs/kit';
 import { dev } from '$app/environment';
-import * as session from '$lib/db/session';
 import { client } from '$lib/db/client';
 import * as gist from '$lib/db/gist';
-import { PUBLIC_API_BASE } from '$env/static/public';
+import * as session from '$lib/db/session';
+import { get_example } from '$lib/server/examples';
+import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
+import { error, json } from '@sveltejs/kit';
 
 const UUID_REGEX = /^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/;
 
-/** @type {Set<string>} */
-let examples;
+const examples_data = get_examples_data();
+
+const examples = new Set(
+	get_examples_list(examples_data)
+		.map((category) => category.examples)
+		.flat()
+		.map((example) => example.slug)
+);
 
+/** @param {import('$lib/server/examples/types').ExamplesData[number]['examples'][number]['files'][number][]} files  */
 function munge(files) {
 	return files
 		.map((file) => {
@@ -18,6 +26,7 @@ function munge(files) {
 			let type = file.name.slice(dot + 1);
 
 			if (type === 'html') type = 'svelte';
+			// @ts-expect-error what is file.source? by @PuruVJ
 			return { name, type, source: file.source ?? file.content ?? '' };
 		})
 		.sort((a, b) => {
@@ -31,33 +40,14 @@ function munge(files) {
 }
 
 export async function GET({ params }) {
-	if (!examples) {
-		const res = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples`);
-		examples = new Set(
-			(await res.json())
-				.map((category) => category.examples)
-				.flat()
-				.map((example) => example.slug)
-		);
-	}
-
 	if (examples.has(params.id)) {
-		const res = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples/${params.id}`);
-
-		if (!res.ok) {
-			return new Response(await res.json(), {
-				status: res.status,
-				headers: { 'Content-Type': 'application/json' },
-			});
-		}
-
-		const example = await res.json();
+		const example = get_example(examples_data, params.id);
 
 		return json({
 			id: params.id,
-			name: example.name,
+			name: example.title,
 			owner: null,
-			relaxed: example.relaxed, // TODO is this right?
+			relaxed: false, // TODO is this right? EDIT: It was example.relaxed before, which no example return to my knowledge. By @PuruVJ
 			components: munge(example.files),
 		});
 	}
@@ -83,6 +73,7 @@ export async function GET({ params }) {
 		name: app.name,
 		owner: app.userid,
 		relaxed: false,
+		// @ts-expect-error app.files has a `source` property
 		components: munge(app.files),
 	});
 }
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
index 807a6ee9d2..4e2287e350 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
@@ -2,7 +2,6 @@
 	import { browser } from '$app/environment';
 	import ReplWidget from '$lib/components/ReplWidget.svelte';
 
-	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
 
diff --git a/sites/svelte.dev/src/routes/examples/[slug].json/+server.js b/sites/svelte.dev/src/routes/examples/[slug].json/+server.js
new file mode 100644
index 0000000000..58bb600f37
--- /dev/null
+++ b/sites/svelte.dev/src/routes/examples/[slug].json/+server.js
@@ -0,0 +1,7 @@
+import { get_example } from '$lib/server/examples';
+import { get_examples_data } from '$lib/server/examples/get-examples';
+import { json } from '@sveltejs/kit';
+
+export const GET = async ({ params }) => {
+	return json(get_example(get_examples_data(), params.slug));
+};
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
index c27de536b7..35749fbebe 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
@@ -16,7 +16,7 @@
 	let repl;
 
 	const clone = (file) => ({
-		name: file.filename.replace(/.\w+$/, ''),
+		name: file.name.replace(/.\w+$/, ''),
 		type: file.type,
 		source: file.content,
 	});