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..3be73ed5 100644 --- a/build/lib/generateContent.js +++ b/build/lib/generateContent.js @@ -110,9 +110,10 @@ export default async function generateContent() { (f) => f.id === frameworkId ); frameworkSnippet.files = filesSorter(frameworkSnippet.files); - const playgroundURL = generatePlaygroundURL( + const playgroundURL = await generatePlaygroundURL( frameworkId, - frameworkSnippet.files + frameworkSnippet.files, + title ); if (playgroundURL) { @@ -205,7 +206,7 @@ async function writeJsFile(filepath, jsCode) { await fs.writeFile(filepath, codeFormatted); } -function generatePlaygroundURL(frameworkId, files) { +async function generatePlaygroundURL(frameworkId, files, title) { const frameworkIdPlayground = frameworkPlayground[frameworkId]; if (!frameworkIdPlayground) { return; @@ -220,8 +221,10 @@ function generatePlaygroundURL(frameworkId, files) { return acc; }, {}); - const playgroundURL = - frameworkIdPlayground.fromContentByFilename(contentByFilename); + const playgroundURL = await frameworkIdPlayground.fromContentByFilename( + contentByFilename, + title + ); return playgroundURL; } diff --git a/build/lib/playground/createSvelte5Playground.js b/build/lib/playground/createSvelte5Playground.js new file mode 100644 index 00000000..0f0e99a5 --- /dev/null +++ b/build/lib/playground/createSvelte5Playground.js @@ -0,0 +1,57 @@ +import path from "node:path"; + +export default function createSvelte5Playground() { + const BASE_URL = "https://svelte.dev/playground/untitled?version=5#"; + + async function fromContentByFilename(contentByFilename, title) { + const filenames = Object.keys(contentByFilename); + if (filenames.some((f) => f.includes(".html"))) { + return; + } + + const files = filenames.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 payload = { title, files }; + + const hash = await compress_and_encode_text(JSON.stringify(payload)); + + 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(),