From f5a0484a484942ea01dbcaeeb3c645cc2e05f685 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 24 Mar 2025 16:03:16 -0700 Subject: [PATCH 1/3] persist tailwind option --- .../src/routes/(authed)/playground/[id]/+page.svelte | 11 +++++++---- .../(authed)/playground/[id]/embed/+page.svelte | 5 +++-- packages/editor/src/lib/Workspace.svelte.ts | 4 +++- packages/repl/src/lib/Repl.svelte | 7 ++++--- 4 files changed, 17 insertions(+), 10 deletions(-) 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 7976235f1b..00579ed7a0 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte @@ -72,7 +72,8 @@ if (!hash && !saved) { repl?.set({ // TODO make this munging unnecessary (using JSON instead of structuredClone for better browser compat) - files: JSON.parse(JSON.stringify(data.gist.components)).map(munge) + files: JSON.parse(JSON.stringify(data.gist.components)).map(munge), + tailwind: false // TODO }); modified = false; @@ -92,7 +93,7 @@ name = recovered.name; } - repl.set({ files }); + repl.set({ files, tailwind: recovered.tailwind ?? false }); } catch { alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`); } @@ -155,7 +156,8 @@ async function update_hash() { // Only change hash when necessary to avoid polluting everyone's browser history if (modified) { - const json = JSON.stringify({ name, files: repl.toJSON().files }); + const { files, tailwind } = repl.toJSON(); + const json = JSON.stringify({ name, files, tailwind }); await set_hash(json); } } @@ -210,7 +212,8 @@ if (modified) { // we can't save to the hash because it's an async operation, so we use // a short-lived sessionStorage value instead - const json = JSON.stringify({ name, files: repl.toJSON().files }); + const { files, tailwind } = repl.toJSON(); + const json = JSON.stringify({ name, files, tailwind }); sessionStorage.setItem(STORAGE_KEY, json); } }} diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte index 6db54545e2..ab843d9ad3 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte @@ -45,7 +45,8 @@ if (!hash) { repl?.set({ - files: data.gist.components.map(munge) + files: data.gist.components.map(munge), + tailwind: false // TODO }); return; @@ -53,7 +54,7 @@ try { const recovered = JSON.parse(await decode_and_decompress_text(hash)); - repl.set({ files: recovered.files }); + repl.set({ files: recovered.files, tailwind: recovered.tailwind ?? false }); } catch { alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`); } diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts index e8ec12d208..16535d2344 100644 --- a/packages/editor/src/lib/Workspace.svelte.ts +++ b/packages/editor/src/lib/Workspace.svelte.ts @@ -393,12 +393,14 @@ export class Workspace { this.#onreset?.(this.#files); } - reset(new_files: Item[], selected?: string) { + reset(new_files: Item[], options: { tailwind: boolean }, selected?: string) { this.states.clear(); this.set(new_files, selected); this.mark_saved(); + this.#tailwind = options.tailwind; + this.#onreset(new_files); this.#reset_diagnostics(); } diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte index 0e023d797b..63d511776a 100644 --- a/packages/repl/src/lib/Repl.svelte +++ b/packages/repl/src/lib/Repl.svelte @@ -67,13 +67,14 @@ export function toJSON() { return { imports: $bundle?.imports ?? [], - files: workspace.files + files: workspace.files, + tailwind: workspace.tailwind }; } // TODO get rid - export async function set(data: { files: File[]; css?: string }) { - workspace.reset(data.files, 'App.svelte'); + export async function set(data: { files: File[]; tailwind?: boolean }) { + workspace.reset(data.files, { tailwind: data.tailwind }, 'App.svelte'); } // TODO get rid From 59be7a2c1787fdf5f867d51d5bde79ca52ba8878 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 24 Mar 2025 16:34:02 -0700 Subject: [PATCH 2/3] fix --- packages/editor/src/lib/Workspace.svelte.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts index 16535d2344..a4ec178e02 100644 --- a/packages/editor/src/lib/Workspace.svelte.ts +++ b/packages/editor/src/lib/Workspace.svelte.ts @@ -473,7 +473,7 @@ export class Workspace { set tailwind(value) { this.#tailwind = value; - this.#onreset(this.#files); + this.#onupdate(this.#current); } get vim() { From 3fe1aff834348aaacce134f2bcf20040d78517f5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 24 Mar 2025 16:38:46 -0700 Subject: [PATCH 3/3] fix --- packages/repl/src/lib/Repl.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte index 63d511776a..85bd3f520b 100644 --- a/packages/repl/src/lib/Repl.svelte +++ b/packages/repl/src/lib/Repl.svelte @@ -74,7 +74,7 @@ // TODO get rid export async function set(data: { files: File[]; tailwind?: boolean }) { - workspace.reset(data.files, { tailwind: data.tailwind }, 'App.svelte'); + workspace.reset(data.files, { tailwind: data.tailwind ?? false }, 'App.svelte'); } // TODO get rid