fetch repl

Author: milomg

package.json

@@ -30,6 +30,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
+    "@solid-primitives/debounce": "^1.3.0",
     "@types/babel__standalone": "^7.1.4",
     "@types/dedent": "^0.7.0",
     "@types/fs-extra": "^9.0.13",
@@ -57,10 +58,10 @@
     "@amoutonbrady/lz-string": "^0.0.1",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/standalone": "^7.18.1",
+    "@solid-primitives/throttle": "^1.2.0",
     "babel-preset-solid": "1.4.2",
     "dedent": "^0.7.0",
     "jszip": "^3.10.0",
-    "mitt": "^3.0.0",
     "monaco-editor-textmate": "^3.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",

playground/app.tsx

@@ -1,6 +1,6 @@
-import { Show, onCleanup, createEffect, createSignal, JSX } from 'solid-js';
-import { Routes, Route } from 'solid-app-router';
-import { eventBus } from './utils/eventBus';
+import { Show, createEffect, createSignal, JSX, on } from 'solid-js';
+import { Routes, Route, useSearchParams } from 'solid-app-router';
+import { eventBus } from './utils/serviceWorker';
 import { Update } from './components/update';
 import { Header } from './components/header';
 import { useZoom } from '../src/hooks/useZoom';
@@ -9,19 +9,15 @@ import { Edit } from './pages/edit';
 import { Home } from './pages/home';
 import { Login } from './pages/login';
 
-let swUpdatedBeforeRender = false;
-eventBus.on('sw-update', () => (swUpdatedBeforeRender = true));
-
 export const App = (): JSX.Element => {
   /**
    * Those next three lines are useful to display a popup
    * if the client code has been updated. This trigger a signal
    * via an EventBus initiated in the service worker and
    * the couple line above.
    */
-  const [newUpdate, setNewUpdate] = createSignal(swUpdatedBeforeRender);
-  eventBus.on('sw-update', () => setNewUpdate(true));
-  onCleanup(() => eventBus.all.clear());
+  const [newUpdate, setNewUpdate] = createSignal(eventBus() != undefined);
+  on(eventBus, () => setNewUpdate(true));
 
   const [dark, setDark] = createSignal(isDarkTheme());
   createEffect(() => document.body.classList.toggle('dark', dark()));
@@ -40,6 +36,8 @@ export const App = (): JSX.Element => {
     }
   });
 
+  const [searchParams] = useSearchParams();
+
   return (
     <div class="relative flex bg-white dark:bg-solid-darkbg dark:text-white text-black h-screen overflow-hidden text-slate-900 dark:text-slate-50 font-sans flex-col">
       <Header
@@ -53,7 +51,10 @@ export const App = (): JSX.Element => {
       />
 
       <Routes>
-        <Route path="/:user/:repl" element={<Edit dark={dark()} />} />
+        <Route
+          path="/:user/:repl"
+          element={<Edit dark={dark()} horizontal={searchParams.isHorizontal != undefined} />}
+        />
         <Route path="/:user" element={<Home />} />
         <Route path="/" element={<Home />} />
         <Route path="/login" element={<Login />} />

playground/context.tsx

@@ -2,7 +2,7 @@ import { createContext, createResource, createSignal, ParentComponent, Resource,
 
 interface AppContextType {
   token: string;
-  user: Resource<{ display: any; avatar: any } | undefined>;
+  user: Resource<{ display: string; avatar: string } | undefined>;
 }
 
 const AppContext = createContext<AppContextType>();

playground/pages/edit.tsx

@@ -1,13 +1,14 @@
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import { parseHash } from '../utils/parseHash';
-import { isValidUrl } from '../utils/isValidUrl';
-
 import CompilerWorker from '../../src/workers/compiler?worker';
 import FormatterWorker from '../../src/workers/formatter?worker';
-import { createTabList, defaultTabs, processImport, Tab } from '../../src';
-import { createSignal, lazy, Suspense } from 'solid-js';
+import { createTabList } from '../../src';
+import { createEffect, createResource, createSignal, lazy, Suspense } from 'solid-js';
+import { useParams } from 'solid-app-router';
+import { API, useAppContext } from '../context';
+import createDebounce from '@solid-primitives/debounce';
+import type { APIRepl } from './home';
 
 const Repl = lazy(() => import('../../src/components/repl'));
 
@@ -25,26 +26,54 @@ const Repl = lazy(() => import('../../src/components/repl'));
   },
 };
 
-export const Edit = (props: { dark: boolean }) => {
+export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
   const compiler = new CompilerWorker();
   const formatter = new FormatterWorker();
 
-  const url = new URL(location.href);
-  const initialTabs = parseHash<Tab[]>(url.hash && url.hash.slice(1)) || defaultTabs;
-
-  const [tabs, setTabs] = createTabList(initialTabs);
-  const [current, setCurrent] = createSignal('main.tsx');
-
-  const params = Object.fromEntries(url.searchParams.entries());
+  const params = useParams();
+  const context = useAppContext()!;
+  const [fetchedTabs] = createResource<APIRepl, string>(params.repl, (repl) =>
+    fetch(`${API}/repl/${repl}`).then((r) => r.json()),
+  );
 
-  if (params.data && isValidUrl(params.data)) {
-    fetch(params.data)
-      .then((r) => r.json())
-      .then((data) => setTabs(processImport(data)))
-      .catch((e) => console.error('Failed to import browser data', e));
-  }
+  const [tabs, setTabs] = createTabList([]);
+  const [current, setCurrent] = createSignal<string>();
+  createEffect(() => {
+    const myRepl = fetchedTabs();
+    if (!myRepl) return;
+    setTabs(
+      myRepl.files.map((x) => {
+        let dot = x.name.lastIndexOf('.');
+        return { name: x.name.slice(0, dot), type: x.name.slice(dot + 1), source: x.content.join('\n') };
+      }),
+    );
+    setCurrent(myRepl.files[0].name);
+  });
 
-  const isHorizontal = 'isHorizontal' in params;
+  const tabMapper = () => tabs().map((x) => ({ name: `${x.name}.${x.type}`, content: x.source.split('\n') }));
+  const updateRepl = createDebounce(() => {
+    const repl = fetchedTabs();
+    const tabs = tabMapper();
+    if (!repl || !tabs.length) return;
+    fetch(`${API}/repl/${repl.id}`, {
+      method: 'PUT',
+      headers: {
+        authorization: `Bearer ${context.token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        title: repl.title,
+        version: repl.version,
+        public: repl.public,
+        labels: repl.labels,
+        files: tabs,
+      }),
+    });
+  }, 1000);
+  createEffect(() => {
+    tabMapper();
+    updateRepl();
+  });
 
   return (
     <Suspense
@@ -67,7 +96,7 @@ export const Edit = (props: { dark: boolean }) => {
       <Repl
         compiler={compiler}
         formatter={formatter}
-        isHorizontal={isHorizontal}
+        isHorizontal={props.horizontal}
         dark={props.dark}
         tabs={tabs()}
         setTabs={setTabs}

playground/pages/home.tsx

@@ -5,19 +5,24 @@ import { createResource, For, Suspense } from 'solid-js';
 import { defaultTabs } from '../../src';
 import { API, useAppContext } from '../context';
 
+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;
+}
 interface Repls {
   total: number;
-  list: {
-    id: string;
-    title: string;
-    labels: string[];
-    files: unknown;
-    version: string;
-    public: boolean;
-    size: number;
-    created_at: string;
-    updated_at?: string;
-  }[];
+  list: APIRepl[];
 }
 
 export const Home = () => {
@@ -26,10 +31,9 @@ export const Home = () => {
   const navigate = useNavigate();
   const user = () => params.user || context.user()?.display;
 
-  const [repls] = createResource(user, async (user) => {
+  const [repls] = createResource<Repls, string>(user, async (user) => {
     if (!user) return { total: 0, list: [] };
-    const result = await fetch(`${API}/repl/${user}/list`);
-    return (await result.json()) as Repls;
+    return await fetch(`${API}/repl/${user}/list`).then((r) => r.json());
   });
 
   return (

playground/utils/eventBus.ts

@@ -1,14 +1,18 @@
 import { register } from 'register-service-worker';
-import { eventBus } from './eventBus';
+import { createSignal } from 'solid-js';
 
-export function registerServiceWorker(): void {
+const [eventBus, setEventBus] = createSignal();
+
+function registerServiceWorker(): void {
   if ('serviceWorker' in navigator && import.meta.env.PROD) {
     window.addEventListener('load', () => {
       register('/sw.js', {
         updated(registration) {
-          eventBus.emit('sw-update', registration);
+          setEventBus(registration);
         },
       });
     });
   }
 }
+
+export { eventBus, registerServiceWorker };

playground/utils/parseHash.ts

@@ -1,3 +1,5 @@
+import { decompressFromURL as decompress } from '@amoutonbrady/lz-string';
+
 /**
  * Validate that a string is a valid URL
  *
@@ -11,3 +13,11 @@ export function isValidUrl(url: string): boolean {
     return false;
   }
 }
+
+export function parseHash<T>(hash: string): T | undefined {
+  try {
+    return JSON.parse(decompress(hash)!);
+  } catch {
+    return;
+  }
+}