New UI

package.json

@@ -14,13 +14,14 @@
     "./packages/*"
   ],
   "devDependencies": {
-    "@changesets/cli": "2.26.2",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4"
+    "@changesets/cli": "2.27.11",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.10"
   },
   "pnpm": {
     "patchedDependencies": {
-      "monaco-editor@0.43.0": "patches/monaco-editor@0.43.0.patch"
+      "monaco-editor": "patches/monaco-editor.patch"
     }
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/playground/package.json

@@ -4,36 +4,39 @@
   "scripts": {
     "build": "vite build",
     "start": "vite preview",
-    "dev": "vite"
+    "dev": "vite",
+    "tsc": "tsc"
   },
+  "type": "module",
   "dependencies": {
-    "@solid-primitives/scheduled": "^1.4.1",
-    "@solidjs/router": "^0.8.3",
-    "dedent": "^1.5.1",
+    "@solid-primitives/scheduled": "^1.5.0",
+    "@solidjs/router": "^0.15.3",
+    "@unocss/preset-wind3": "66.1.0-beta.3",
+    "dedent": "^1.5.3",
     "onigasm": "^2.2.5",
-    "solid-dismiss": "^1.7.121",
+    "solid-dismiss": "^1.8.2",
     "solid-heroicons": "^3.2.4",
-    "solid-js": "1.7.11",
+    "solid-js": "1.9.5",
     "solid-repl": "workspace:*"
   },
   "devDependencies": {
     "@amoutonbrady/lz-string": "^0.1.0",
-    "@babel/core": "^7.22.19",
-    "@babel/plugin-syntax-jsx": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.15",
-    "@babel/types": "^7.22.19",
-    "@solidjs/router": "^0.8.3",
-    "@types/babel__standalone": "^7.1.5",
-    "@types/dedent": "^0.7.0",
-    "@unocss/preset-wind": "^0.55.7",
+    "@babel/core": "^7.26.9",
+    "@babel/plugin-syntax-jsx": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/types": "^7.26.9",
+    "@solidjs/router": "^0.15.3",
+    "@types/babel__standalone": "^7.1.9",
+    "@types/dedent": "^0.7.2",
     "assert": "^2.1.0",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "jszip": "^3.10.1",
-    "monaco-editor": "^0.43.0",
+    "monaco-editor": "^0.52.2",
     "register-service-worker": "^1.7.2",
-    "typescript": "^5.2.2",
-    "unocss": "^0.55.7",
-    "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0"
+    "solid-devtools": "^0.33.0",
+    "typescript": "^5.8.2",
+    "unocss": "^66.0.0",
+    "vite": "^6.2.0",
+    "vite-plugin-solid": "^2.11.6"
   }
 }

packages/playground/public/sw.js

@@ -1,29 +1,72 @@
 const cacheName = 'my-cache';
 
-async function fetchAndCacheIfOk(event, stale) {
+async function revalidate(event) {
+  const client = await clients.get(event.clientId);
+  client.postMessage({ type: 'cache' });
+}
+
+async function fetchAndCacheIfOk(cache, event) {
   try {
     const response = await fetch(event.request);
 
     if (response.ok) {
-      const responseClone = response.clone();
-      const cache = await caches.open(cacheName);
-      await cache.put(event.request, responseClone);
-      if (stale) self.postMessage({ type: 'cache' });
+      await cache.put(event.request, response.clone());
     }
 
     return response;
   } catch (e) {
-    const cache = await caches.open(cacheName);
+    console.error(e);
+
     return await cache.match('/index.html');
   }
 }
 
 async function fetchWithCache(event) {
   const cache = await caches.open(cacheName);
   const response = await cache.match(event.request);
-  const result = fetchAndCacheIfOk(event, !!response);
+  const result = fetchAndCacheIfOk(cache, event);
   if (!!response) {
-    return response;
+    result.then(async (response2) => {
+      const reader1 = response.body.getReader();
+      const reader2 = response2.body.getReader();
+
+      let i = 0;
+      let j = 0;
+
+      let oldChunk1 = null;
+      let oldChunk2 = null;
+      if (!oldChunk1) {
+        oldChunk1 = await reader1.read();
+      }
+      if (!oldChunk2) {
+        oldChunk2 = await reader2.read();
+      }
+      while (!oldChunk1.done && !oldChunk2.done) {
+        if (oldChunk1.value[i] !== oldChunk2.value[j]) {
+          revalidate(event);
+          return;
+        }
+        i++;
+        j++;
+        if (i === oldChunk1.value.length) {
+          oldChunk1 = await reader1.read();
+          i = 0;
+        }
+        if (j === oldChunk2.value.length) {
+          oldChunk2 = await reader2.read();
+          j = 0;
+        }
+      }
+
+      if (oldChunk1.done && oldChunk2.done) {
+        return;
+      } else {
+        revalidate(event);
+        return;
+      }
+    });
+
+    return response.clone();
   } else {
     return result;
   }

packages/playground/src/app.tsx

@@ -1,5 +1,5 @@
 import { Show, JSX } from 'solid-js';
-import { Routes, Route, useSearchParams } from '@solidjs/router';
+import { Route, Router } from '@solidjs/router';
 import { eventBus, setEventBus } from './utils/serviceWorker';
 import { Update } from './components/update';
 import { useZoom } from 'solid-repl/src/hooks/useZoom';
@@ -28,20 +28,14 @@ export const App = (): JSX.Element => {
     }
   });
 
-  const [searchParams] = useSearchParams();
-
   return (
-    <div class="dark:bg-solid-darkbg relative flex h-screen flex-col overflow-auto bg-white font-sans text-slate-900 dark:text-slate-50">
-      <Routes>
-        <Route
-          path={['/:user/:repl', '/scratchpad']}
-          element={<Edit horizontal={searchParams.isHorizontal != undefined} />}
-        />
-        <Route path="/:user" element={<Home />} />
-        <Route path="/" element={<Home />} />
-        <Route path="/login" element={<Login />} />
-      </Routes>
-
+    <div class="dark:bg-darkerbg relative flex h-screen flex-col overflow-auto bg-lightbg font-sans text-slate-900 dark:text-slate-50">
+      <Router>
+        <Route path={['/:user/:repl', '/scratchpad']} component={Edit} />
+        <Route path="/:user" component={Home} />
+        <Route path="/" component={Home} />
+        <Route path="/login" component={Login} />
+      </Router>
       <Show when={eventBus()} children={<Update onDismiss={() => setEventBus(false)} />} />
     </div>
   );