Maintain editor state in browser (#33)

Author: Nicell

src/App.svelte

@@ -3,13 +3,44 @@
   import Editor from '$lib/components/Editor.svelte';
   import Output from '$lib/components/Output.svelte';
   import BytecodeView from '$lib/components/BytecodeView.svelte';
-  import { showBytecode } from '$lib/stores/settings';
+  import { settings, showBytecode } from '$lib/stores/settings';
+  import { files, activeFile } from '$lib/stores/playground';
   import { isEmbed, embedTheme } from '$lib/stores/embed';
   import { initTheme, setTheme } from '$lib/utils/theme';
   import { loadLuauWasm } from '$lib/luau/wasm';
+  import { parseStateFromHash } from '$lib/utils/decode';
+  import { derived } from 'svelte/store';
+  import { onMount } from 'svelte';
 
   let mounted = $state(false);
 
+  function clearUrlHash(): void {
+    if (!window.location.hash) return;
+    const url = new URL(window.location.href);
+    url.hash = '';
+    window.history.replaceState(null, '', url.toString());
+  }
+
+  onMount(() => {
+    if (parseStateFromHash(window.location.hash) === null) return;
+
+    const stateChanges = derived([files, activeFile, settings, showBytecode], (values) => values);
+    let isFirstEmission = true;
+    let unsubscribe: () => void = () => {};
+
+    unsubscribe = stateChanges.subscribe(() => {
+      if (isFirstEmission) {
+        isFirstEmission = false;
+        return;
+      }
+
+      clearUrlHash();
+      unsubscribe();
+    });
+
+    return unsubscribe;
+  });
+
   // Initialize on mount
   $effect(() => {
     if (!mounted) {

src/app.css

@@ -222,6 +222,10 @@ body {
   opacity: 0.12;
 }
 
+.cm-lineNumbers .cm-gutterElement {
+  padding-left: 12px !important;
+}
+
 /* CodeMirror lint gutter - custom minimal markers using SVG */
 .cm-gutterElement .cm-lint-marker,
 .cm-lint-marker {

src/lib/constants.ts

@@ -14,6 +14,12 @@ export const defaultSettings: PlaygroundSettings = {
 // Key for localStorage persistence of settings
 export const STORAGE_KEY = 'luau-playground-settings';
 
+// Key for localStorage persistence of editor/files state
+export const PLAYGROUND_STORAGE_KEY = 'luau-playground-state';
+
+// Key for localStorage persistence of small UI state (panels, etc)
+export const UI_STORAGE_KEY = 'luau-playground-ui';
+
 // Filename used when working with a single default file
 export const DEFAULT_FILENAME = 'main.luau';
 

src/lib/editor/setup.ts

@@ -96,9 +96,6 @@ function createExtensions(onChange: (content: string) => void): Extension[] {
       '.cm-content': {
         padding: '12px 0',
       },
-      '.cm-gutters': {
-        paddingLeft: '8px',
-      },
     }),
 
     // Update listener

src/lib/stores/playground.ts

@@ -1,6 +1,7 @@
 import { writable, get } from 'svelte/store';
 import { parseStateFromHash } from '$lib/utils/decode';
 import type { OutputLine } from '$lib/utils/output';
+import { DEFAULT_FILENAME, PLAYGROUND_STORAGE_KEY } from '$lib/constants';
 
 // Re-export for backwards compatibility
 export type { OutputLine };
@@ -12,6 +13,11 @@ export interface PlaygroundState {
   isRunning: boolean;
 }
 
+interface PersistedPlaygroundState {
+  files: Record<string, string>;
+  activeFile: string;
+}
+
 // Default initial code
 const defaultCode = `-- Welcome to the Luau Playground!
 -- Write your code here and click Run
@@ -31,21 +37,40 @@ end
 print("Sum:", sum)
 `;
 
+function loadFromStorage(): { files: Record<string, string>; activeFile: string } | null {
+  if (typeof window === 'undefined') return null;
+
+  try {
+    const stored = localStorage.getItem(PLAYGROUND_STORAGE_KEY);
+    if (!stored) return null;
+
+    const parsed = JSON.parse(stored) as Partial<PersistedPlaygroundState>;
+    if (!parsed.files || typeof parsed.files !== 'object') return null;
+    if (!parsed.activeFile || typeof parsed.activeFile !== 'string') return null;
+
+    const fileNames = Object.keys(parsed.files);
+    if (fileNames.length === 0) return null;
+    if (!(parsed.activeFile in parsed.files)) return null;
+    return { files: parsed.files as Record<string, string>, activeFile: parsed.activeFile };
+  } catch {
+    return null;
+  }
+}
+
 // Load initial state from URL if available
 function getInitialState(): { files: Record<string, string>; activeFile: string } {
-  const defaultState = { files: { 'main.luau': defaultCode }, activeFile: 'main.luau' };
+  const defaultState = { files: { [DEFAULT_FILENAME]: defaultCode }, activeFile: DEFAULT_FILENAME };
 
   if (typeof window === 'undefined') {
     return defaultState;
   }
 
   const state = parseStateFromHash(window.location.hash);
-  if (!state || Object.keys(state.files).length === 0) {
-    return defaultState;
+  if (state && Object.keys(state.files).length > 0 && state.active in state.files) {
+    return { files: state.files, activeFile: state.active };
   }
-  
-  const active = state.active in state.files ? state.active : Object.keys(state.files)[0];
-  return { files: state.files, activeFile: active };
+
+  return loadFromStorage() ?? defaultState;
 }
 
 const initialState = getInitialState();
@@ -62,6 +87,45 @@ export function setExecutionTime(ms: number | null) {
   executionTime.set(ms);
 }
 
+function debounce(fn: () => void, ms: number): () => void {
+  let t: ReturnType<typeof setTimeout> | null = null;
+  return () => {
+    if (t) clearTimeout(t);
+    t = setTimeout(() => {
+      t = null;
+      fn();
+    }, ms);
+  };
+}
+
+function saveToStorage(): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    const f = get(files);
+    const a = get(activeFile);
+    const fileNames = Object.keys(f);
+    if (fileNames.length === 0) return;
+    if (!(a in f)) return;
+
+    const state: PersistedPlaygroundState = {
+      files: f,
+      activeFile: a,
+    };
+
+    localStorage.setItem(PLAYGROUND_STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+// Persist editor state (files + active file) between reloads
+if (typeof window !== 'undefined') {
+  const scheduleSave = debounce(saveToStorage, 250);
+  files.subscribe(() => scheduleSave());
+  activeFile.subscribe(() => scheduleSave());
+}
+
 // Actions
 export function addFile(name: string, content: string = '') {
   files.update((f) => ({ ...f, [name]: content }));

src/lib/stores/settings.ts

@@ -1,6 +1,6 @@
 import { writable, get } from 'svelte/store';
 import { parseStateFromHash } from '$lib/utils/decode';
-import { STORAGE_KEY, defaultSettings } from '$lib/constants';
+import { STORAGE_KEY, UI_STORAGE_KEY, defaultSettings } from '$lib/constants';
 
 export type LuauMode = "strict" | "nonstrict" | "nocheck";
 export type SolverMode = "new" | "old";
@@ -43,22 +43,34 @@ function loadSettingsFromStorage(): PlaygroundSettings {
 
   try {
     const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      const parsed = JSON.parse(stored) as Partial<PlaygroundSettings>;
-      return {
-        mode: parsed.mode ?? defaultSettings.mode,
-        solver: parsed.solver ?? defaultSettings.solver,
-        optimizationLevel: parsed.optimizationLevel ?? defaultSettings.optimizationLevel,
-        debugLevel: parsed.debugLevel ?? defaultSettings.debugLevel,
-        outputFormat: parsed.outputFormat ?? defaultSettings.outputFormat,
-        compilerRemarks: parsed.compilerRemarks ?? defaultSettings.compilerRemarks,
-      };
-    }
+    if (!stored) return { ...defaultSettings };
+    return mergeSettings(JSON.parse(stored) as Partial<PlaygroundSettings>);
   } catch {
     // Ignore parse errors
+    return { ...defaultSettings };
+  }
+}
+
+function loadShowBytecodeFromStorage(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  try {
+    return localStorage.getItem(UI_STORAGE_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function saveShowBytecodeToStorage(value: boolean): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    localStorage.setItem(UI_STORAGE_KEY, value ? '1' : '0');
+  } catch {
+    // Ignore storage errors
   }
-  
-  return { ...defaultSettings };
 }
 
 function mergeSettings(partial: Partial<PlaygroundSettings>): PlaygroundSettings {
@@ -83,7 +95,7 @@ function loadSettings(): { settings: PlaygroundSettings; showBytecode: boolean }
     ? mergeSettings(settingsFromUrl)
     : loadSettingsFromStorage();
 
-  const showBytecode = showFromUrl ?? false;
+  const showBytecode = showFromUrl ?? loadShowBytecodeFromStorage();
 
   return {
     settings,
@@ -113,6 +125,11 @@ settings.subscribe((value) => {
   saveSettings(value);
 });
 
+// Auto-save UI state when it changes
+showBytecode.subscribe((value) => {
+  saveShowBytecodeToStorage(value);
+});
+
 export function setMode(mode: LuauMode): void {
   settings.update((s) => ({ ...s, mode }));
 }