From ff451034b03f890955a5aac5686d25c64fe8ff03 Mon Sep 17 00:00:00 2001
From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com>
Date: Fri, 25 Oct 2024 01:40:35 +0200
Subject: [PATCH] feat(playground): add svelte 5 playground

---
 .gitignore                                    |  4 +-
 build/lib/generateContent.js                  |  6 +--
 .../lib/playground/createSvelte5Playground.js | 50 +++++++++++++++++++
 build/lib/playground/index.js                 |  5 +-
 4 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 build/lib/playground/createSvelte5Playground.js

diff --git a/.gitignore b/.gitignore
index 23deb322..b13bd781 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,6 @@ dist-ssr
 
 src/generatedContent
 
-archive
\ No newline at end of file
+archive
+
+vite.config.js.timestamp*
\ No newline at end of file
diff --git a/build/lib/generateContent.js b/build/lib/generateContent.js
index 02aabdc9..b3c322ea 100644
--- a/build/lib/generateContent.js
+++ b/build/lib/generateContent.js
@@ -110,7 +110,7 @@ export default async function generateContent() {
               (f) => f.id === frameworkId
             );
             frameworkSnippet.files = filesSorter(frameworkSnippet.files);
-            const playgroundURL = generatePlaygroundURL(
+            const playgroundURL = await generatePlaygroundURL(
               frameworkId,
               frameworkSnippet.files
             );
@@ -205,7 +205,7 @@ async function writeJsFile(filepath, jsCode) {
   await fs.writeFile(filepath, codeFormatted);
 }
 
-function generatePlaygroundURL(frameworkId, files) {
+async function generatePlaygroundURL(frameworkId, files) {
   const frameworkIdPlayground = frameworkPlayground[frameworkId];
   if (!frameworkIdPlayground) {
     return;
@@ -221,7 +221,7 @@ function generatePlaygroundURL(frameworkId, files) {
     }, {});
 
   const playgroundURL =
-    frameworkIdPlayground.fromContentByFilename(contentByFilename);
+    await frameworkIdPlayground.fromContentByFilename(contentByFilename);
 
   return playgroundURL;
 }
diff --git a/build/lib/playground/createSvelte5Playground.js b/build/lib/playground/createSvelte5Playground.js
new file mode 100644
index 00000000..b0e1e957
--- /dev/null
+++ b/build/lib/playground/createSvelte5Playground.js
@@ -0,0 +1,50 @@
+import path from "node:path";
+
+export default function createSvelte5Playground() {
+  const BASE_URL = "https://svelte.dev/playground?version=5#";
+
+  async function fromContentByFilename(contentByFilename) {
+    const files = Object.keys(contentByFilename).map((filename, index) => {
+      const contents = contentByFilename[filename];
+      const name = index === 0 ? "App.svelte" : path.parse(filename).base;
+      return {
+        type: "file",
+        name,
+        basename: name,
+        contents,
+        text: true,
+      };
+    });
+
+    const hash = await compress_and_encode_text(JSON.stringify({ files }));
+
+    const url = `${BASE_URL}${hash}`;
+
+    return url;
+  }
+
+  return {
+    fromContentByFilename,
+  };
+}
+
+// method `compress_and_encode_text` from https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/src/routes/(authed)/playground/%5Bid%5D/gzip.js
+export async function compress_and_encode_text(input) {
+  const reader = new Blob([input])
+    .stream()
+    .pipeThrough(new CompressionStream("gzip"))
+    .getReader();
+  let buffer = "";
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) {
+      reader.releaseLock();
+      return btoa(buffer).replaceAll("+", "-").replaceAll("/", "_");
+    } else {
+      for (let i = 0; i < value.length; i++) {
+        // decoding as utf-8 will make btoa reject the string
+        buffer += String.fromCharCode(value[i]);
+      }
+    }
+  }
+}
diff --git a/build/lib/playground/index.js b/build/lib/playground/index.js
index b2202e90..a09238d8 100644
--- a/build/lib/playground/index.js
+++ b/build/lib/playground/index.js
@@ -1,13 +1,12 @@
 import createAlpinePlayground from "./createAlpinePlayground.js";
-// import createSveltePlayground from "./createSveltePlayground.js";
+import createSvelte5Playground from "./createSvelte5Playground.js";
 import createVue3Playground from "./createVue3Playground.js";
 import createSolidPlayground from "./createSolidPlayground.js";
 import createMarkoPlayground from "./createMarkoPlayground.js";
 
 export default {
   vue3: createVue3Playground(),
-  // @TODO: Svelte playground is broken, fixing it when possible
-  //svelte: createSveltePlayground(),
+  svelte5: createSvelte5Playground(),
   alpine: createAlpinePlayground(),
   solid: createSolidPlayground(),
   marko: createMarkoPlayground(),