diff --git a/packages/playground/package.json b/packages/playground/package.json index 9605ceb7..79dffe0f 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -35,6 +35,7 @@ "typescript": "^5.4.5", "unocss": "^0.60.0", "vite": "^5.2.11", + "vite-plugin-node-polyfills": "^0.22.0", "vite-plugin-solid": "^2.10.2" } } diff --git a/packages/playground/public/sw.js b/packages/playground/public/sw.js index 9d3a4283..f54881cf 100644 --- a/packages/playground/public/sw.js +++ b/packages/playground/public/sw.js @@ -1,19 +1,22 @@ 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'); } } @@ -21,9 +24,49 @@ async function fetchAndCacheIfOk(event, stale) { 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; } diff --git a/packages/playground/src/app.tsx b/packages/playground/src/app.tsx index e9594523..42820649 100644 --- a/packages/playground/src/app.tsx +++ b/packages/playground/src/app.tsx @@ -1,11 +1,9 @@ import { Show, JSX, Suspense } from 'solid-js'; -import { Router, Route } from '@solidjs/router'; +import { Router, Route, Navigate } from '@solidjs/router'; import { eventBus, setEventBus } from './utils/serviceWorker'; import { Update } from './components/update'; import { useZoom } from 'solid-repl/src/hooks/useZoom'; import { Edit } from './pages/edit'; -import { Home } from './pages/home'; -import { Login } from './pages/login'; import { AppContextProvider } from './context'; export const App = (): JSX.Element => { @@ -29,6 +27,8 @@ export const App = (): JSX.Element => { } }); + const searchParams = new URLSearchParams(window.location.search); + return (
- or{' '} - - open my scratchpad - -
-Title | -Edited | -Options | -
---|---|---|
- - | - - } - > -||
- {repl.title} - | -- {timeAgo(Date.now() - new Date(repl.updated_at || repl.created_at).getTime())} - | -
- |
-
Are you sure you want to delete that?
-