legacy build

milomg · milomg · commit 2acbe51f1e7f · 2024-09-04T15:26:15.000-04:00
fixes
diff --git a/packages/playground/src/app.tsx b/packages/playground/src/app.tsx
@@ -4,8 +4,6 @@ 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 => {
@@ -38,10 +36,7 @@ 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)} />} />
diff --git a/packages/playground/src/components/header.tsx b/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>
   );
 };
diff --git a/packages/playground/src/context.tsx b/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;
diff --git a/packages/playground/src/pages/edit.tsx b/packages/playground/src/pages/edit.tsx
@@ -7,14 +7,29 @@ import FormatterWorker from 'solid-repl/repl/formatter?worker';
 import LinterWorker from 'solid-repl/repl/linter?worker';
 import onigasm from 'onigasm/lib/onigasm.wasm?url';
 import { batch, createResource, createSignal, lazy, onCleanup, Show, Suspense } from 'solid-js';
-import { useMatch, useNavigate, useParams, useSearchParams } from '@solidjs/router';
+import { useNavigate, useParams, useSearchParams } from '@solidjs/router';
 import { API, useAppContext } from '../context';
 import { debounce } from '@solid-primitives/scheduled';
 import { defaultTabs } from 'solid-repl/src';
 import type { Tab } from 'solid-repl';
-import type { APIRepl } from './home';
 import { Header } from '../components/header';
 
+export interface ReplFile {
+  name: string;
+  content: string;
+}
+export interface APIRepl {
+  id: string;
+  title: string;
+  labels: string[];
+  files: ReplFile[];
+  version: string;
+  public: boolean;
+  size: number;
+  created_at: string;
+  updated_at?: string;
+}
+
 const Repl = lazy(() => import('../components/setupSolid'));
 
 window.MonacoEnvironment = {
@@ -40,7 +55,6 @@ interface InternalTab extends Tab {
 }
 export const Edit = () => {
   const [searchParams] = useSearchParams();
-  const scratchpad = useMatch(() => '/scratchpad');
   const compiler = new CompilerWorker();
   const formatter = new FormatterWorker();
   const linter = new LinterWorker();
@@ -51,8 +65,6 @@ export const Edit = () => {
 
   let disableFetch: true | undefined;
 
-  let readonly = () => !scratchpad() && context.user()?.display != params.user && !localStorage.getItem(params.repl);
-
   const mapTabs = (toMap: (Tab | InternalTab)[]): InternalTab[] =>
     toMap.map((tab) => {
       if ('_source' in tab) return tab;
@@ -82,16 +94,19 @@ export const Edit = () => {
   onCleanup(() => context.setTabs(undefined));
 
   const [current, setCurrent] = createSignal<string | undefined>(undefined, { equals: false });
-  const [resource, { mutate }] = createResource<APIRepl, { repl: string; scratchpad: boolean }>(
-    () => ({ repl: params.repl, scratchpad: !!scratchpad() }),
-    async ({ repl, scratchpad }): Promise<APIRepl> => {
+  const [resource, { mutate }] = createResource<APIRepl, { repl: string }>(
+    () => ({ repl: params.repl }),
+    async ({ repl }): Promise<APIRepl> => {
       if (disableFetch) {
         disableFetch = undefined;
         if (resource.latest) return resource.latest;
       }
 
       let output: APIRepl;
-      if (scratchpad) {
+
+      if (repl) {
+        output = await fetch(`${API}/repl/${repl}`).then((r) => r.json());
+      } else {
         const myScratchpad = localStorage.getItem('scratchpad');
         if (!myScratchpad) {
           output = {
@@ -104,10 +119,6 @@ export const Edit = () => {
         } else {
           output = JSON.parse(myScratchpad);
         }
-      } else {
-        output = await fetch(`${API}/repl/${repl}`, {
-          headers: { authorization: context.token ? `Bearer ${context.token}` : '' },
-        }).then((r) => r.json());
       }
 
       batch(() => {
@@ -129,109 +140,51 @@ export const Edit = () => {
       setCurrent(defaultTabs[0].name);
     });
   };
+  const updateRepl = debounce(() => {
+    const files = tabs().map((x) => ({ name: x.name, content: x.source }));
 
-  const updateRepl = debounce(
-    () => {
-      const files = tabs().map((x) => ({ name: x.name, content: x.source }));
-
-      if (readonly()) {
-        localStorage.setItem('scratchpad', JSON.stringify({ files }));
-        disableFetch = true;
-        navigate('/scratchpad');
-        return;
-      } else if (scratchpad()) {
-        localStorage.setItem('scratchpad', JSON.stringify({ files }));
-      }
-
-      const repl = resource.latest;
-      if (!repl) return;
-
-      if ((context.token && context.user()?.display == params.user) || localStorage.getItem(params.repl)) {
-        fetch(`${API}/repl/${params.repl}`, {
-          method: 'PUT',
-          headers: {
-            'authorization': context.token ? `Bearer ${context.token}` : '',
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            ...(localStorage.getItem(params.repl) ? { write_token: localStorage.getItem(params.repl) } : {}),
-            title: repl.title,
-            version: repl.version,
-            public: repl.public,
-            labels: repl.labels,
-            files,
-          }),
-        });
-      }
-    },
-    !!scratchpad() ? 10 : 1000,
-  );
-
+    localStorage.setItem('scratchpad', JSON.stringify({ files }));
+  }, 10);
   return (
     <>
       <Header
         compiler={compiler}
         fork={() => {}}
         share={async () => {
-          if (scratchpad()) {
-            const newRepl = {
-              title: context.user()?.display ? `${context.user()!.display}'s Scratchpad` : 'Anonymous Scratchpad',
-              public: true,
-              labels: [],
-              version: '1.0',
-              files: tabs().map((x) => ({ name: x.name, content: x.source })),
-            };
-            const response = await fetch(`${API}/repl`, {
-              method: 'POST',
-              headers: {
-                'authorization': context.token ? `Bearer ${context.token}` : '',
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(newRepl),
-            });
-            if (response.status >= 400) {
-              throw new Error(response.statusText);
-            }
-            const { id, write_token } = await response.json();
-            if (write_token) {
-              localStorage.setItem(id, write_token);
-              const repls = localStorage.getItem('repls');
-              if (repls) {
-                localStorage.setItem('repls', JSON.stringify([...JSON.parse(repls), id]));
-              } else {
-                localStorage.setItem('repls', JSON.stringify([id]));
-              }
-            }
-            mutate(() => ({
-              id,
-              title: newRepl.title,
-              labels: newRepl.labels,
-              files: newRepl.files,
-              version: newRepl.version,
-              public: newRepl.public,
-              size: 0,
-              created_at: '',
-            }));
-            const url = `/${context.user()?.display || 'anonymous'}/${id}`;
-            disableFetch = true;
-            navigate(url);
-            return `${window.location.origin}${url}`;
-          } else {
-            return location.href;
+          const newRepl = {
+            title: 'Anonymous Scratchpad',
+            public: true,
+            labels: [],
+            version: '1.0',
+            files: tabs().map((x) => ({ name: x.name, content: x.source })),
+          };
+          const response = await fetch(`${API}/repl`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(newRepl),
+          });
+          if (response.status >= 400) {
+            throw new Error(response.statusText);
           }
+          const { id } = await response.json();
+          mutate(() => ({
+            id,
+            title: newRepl.title,
+            labels: newRepl.labels,
+            files: newRepl.files,
+            version: newRepl.version,
+            public: newRepl.public,
+            size: 0,
+            created_at: '',
+          }));
+          const url = `/anonymous/${id}`;
+          disableFetch = true;
+          navigate(url);
+          return `${window.location.origin}${url}`;
         }}
-      >
-        {resource()?.title && (
-          <input
-            class="w-96 shrink rounded border border-solid border-transparent bg-transparent px-3 py-1.5 transition focus:border-blue-600 focus:outline-none"
-            value={resource()?.title}
-            onChange={(e) => {
-              mutate((x) => x && { ...x, title: e.currentTarget.value });
-              updateRepl();
-            }}
-          />
-        )}
-      </Header>
+      />
       <Suspense
         fallback={
           <svg
diff --git a/packages/playground/src/pages/home.tsx b/packages/playground/src/pages/home.tsx
diff --git a/packages/playground/src/pages/login.tsx b/packages/playground/src/pages/login.tsx
