use @jspm/generator for importmap

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"
   }
 }

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,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 (
     <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">
       <Router
@@ -38,13 +38,13 @@ export const App = (): JSX.Element => {
           </AppContextProvider>
         )}
       >
-        <Route path={['/:user/:repl', '/scratchpad']} component={Edit} />
-        <Route path="/:user" component={Home} />
-        <Route path="/" component={Home} />
-        <Route path="/login" component={Login} />
+        <Route path={['/:user/:repl', '/']} component={Edit} />
       </Router>
 
       <Show when={eventBus()} children={<Update onDismiss={() => setEventBus(false)} />} />
+      <Show when={searchParams.has("hash")}>
+        <Navigate href={`/anonymous/${searchParams.get("hash")}`} />
+      </Show>
     </div>
   );
 };

packages/playground/src/components/header.tsx

@@ -6,7 +6,7 @@ import { onCleanup, createSignal, Show, ParentComponent } from 'solid-js';
 import { share, link, arrowDownTray, xCircle, bars_3, moon, sun } from 'solid-heroicons/outline';
 import { exportToZip } from '../utils/exportFiles';
 import { ZoomDropdown } from './zoomDropdown';
-import { API, useAppContext } from '../context';
+import { useAppContext } from '../context';
 
 import logo from '../assets/logo.svg?url';
 
@@ -18,9 +18,7 @@ export const Header: ParentComponent<{
   const [copy, setCopy] = createSignal(false);
   const context = useAppContext()!;
   const [showMenu, setShowMenu] = createSignal(false);
-  const [showProfile, setShowProfile] = createSignal(false);
   let menuBtnEl!: HTMLButtonElement;
-  let profileBtn!: HTMLButtonElement;
 
   function shareLink() {
     props.share().then((url) => {
@@ -149,37 +147,6 @@ export const Header: ParentComponent<{
         </Show>
         <span class="sr-only">Show menu</span>
       </button>
-      <div class="relative h-8 cursor-pointer leading-snug">
-        <Show
-          when={context.user()?.avatar}
-          fallback={
-            <a
-              class="bg-solid-default mx-1 rounded px-3 py-2 text-lg text-slate-50"
-              href={`${API}/auth/login?redirect=${window.location.origin}/login?auth=success`}
-              rel="external"
-            >
-              Login
-            </a>
-          }
-        >
-          <button ref={profileBtn}>
-            <img crossOrigin="anonymous" src={context.user()?.avatar} class="h-8 w-8 rounded-full" />
-          </button>
-          <Dismiss menuButton={() => profileBtn} open={showProfile} setOpen={setShowProfile}>
-            <div class="dark:bg-solid-darkbg absolute right-0 flex flex-col items-center justify-center bg-white shadow-md">
-              <a class="px-2 py-2 hover:bg-gray-300 dark:hover:bg-gray-800" href="/">
-                {context.user()?.display}
-              </a>
-              <button
-                onClick={() => (context.token = '')}
-                class="w-full px-2 py-2 text-left text-xs hover:bg-gray-300 dark:hover:bg-gray-800"
-              >
-                Sign Out
-              </button>
-            </div>
-          </Dismiss>
-        </Show>
-      </div>
     </header>
   );
 };

packages/playground/src/context.tsx

@@ -1,10 +1,8 @@
-import { Accessor, createContext, createResource, createSignal, ParentComponent, Resource, useContext } from 'solid-js';
+import { Accessor, createContext, createSignal, ParentComponent, useContext } from 'solid-js';
 import type { Tab } from 'solid-repl';
 import { isDarkTheme } from './utils/isDarkTheme';
 
 interface AppContextType {
-  token: string;
-  user: Resource<{ display: string; avatar: string } | undefined>;
   tabs: Accessor<Tab[] | undefined>;
   setTabs: (x: Accessor<Tab[] | undefined> | undefined) => void;
   dark: Accessor<boolean>;
@@ -18,40 +16,13 @@ const AppContext = createContext<AppContextType>();
 export const API = 'https://api.solidjs.com';
 
 export const AppContextProvider: ParentComponent = (props) => {
-  const [token, setToken] = createSignal(localStorage.getItem('token') || '');
-  const [user] = createResource(token, async (token) => {
-    if (!token)
-      return {
-        display: '',
-        avatar: '',
-      };
-    const result = await fetch(`${API}/profile`, {
-      headers: {
-        authorization: `Bearer ${token}`,
-      },
-    });
-    const body = await result.json();
-    return {
-      display: body.display,
-      avatar: body.avatar,
-    };
-  });
-
   const [dark, setDark] = createSignal(isDarkTheme());
   document.body.classList.toggle('dark', dark());
 
   let [tabsGetter, setTabs] = createSignal<Accessor<Tab[] | undefined>>();
   return (
     <AppContext.Provider
       value={{
-        get token() {
-          return token();
-        },
-        set token(x) {
-          setToken(x);
-          localStorage.setItem('token', x);
-        },
-        user,
         tabs() {
           const tabs = tabsGetter();
           if (!tabs) return undefined;