feat(playground): add svelte 5 playground

.gitignore

@@ -28,4 +28,6 @@ dist-ssr
 
 src/generatedContent
 
-archive
+archive
+
+vite.config.js.timestamp*

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;
 }

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]);
+      }
+    }
+  }
+}

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(),