solidjs · milomg · May 16, 2022 · May 16, 2022 · May 17, 2022 · May 17, 2022
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+node_modules/
+dist/
+lib/
+src/defaultFiles/
+pnpm-lock.yaml
diff --git a/.prettierrc b/.prettierrc
@@ -1,10 +1,11 @@
 {
   "arrowParens": "always",
   "htmlWhitespaceSensitivity": "ignore",
-  "printWidth": 100,
+  "printWidth": 120,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "useTabs": false
+  "useTabs": false,
+  "quoteProps": "consistent"
 }
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,5 +1,3 @@
 {
-  "recommendations": [
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["esbenp.prettier-vscode"]
 }
diff --git a/index.html b/index.html
@@ -6,14 +6,11 @@
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="shortcut icon" href="./playground/assets/logo.png" type="image/png" />
     <title>Solid Playground</title>
-    <meta
-      name="description"
-      content="Quickly discover what the solid compiler will generate from your JSX template"
-    />
+    <meta name="description" content="Quickly discover what the solid compiler will generate from your JSX template" />
   </head>
   <body>
     <div id="app"></div>
     <div id="update" class="fixed bottom-10 left-10"></div>
-    <script src="./playground/index.ts" type="module"></script>
+    <script src="./playground/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -18,15 +18,16 @@
     "dev": "vite",
     "build": "vite build && workbox generateSW workbox-config.js",
     "build:lib": "jiti rollup.config.js",
-    "format": "prettier -w \"{src,playground}/**/*.{js,json,ts,tsx,html,css}\" \"*.{js,ts}\"",
-    "prepublishOnly": "pnpm build:lib"
+    "format": "prettier -w .",
+    "prepublishOnly": "pnpm build:lib",
+    "tsc": "tsc"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.12",
-    "@babel/plugin-syntax-jsx": "^7.17.12",
-    "@babel/types": "^7.17.12",
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/types": "^7.18.7",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -38,35 +39,49 @@
     "acorn-jsx": "^5.3.2",
     "assert": "^2.0.0",
     "fs-extra": "^10.1.0",
-    "jiti": "^1.13.0",
+    "jiti": "^1.14.0",
     "mime": "^3.0.0",
     "monaco-editor": "~0.33.0",
     "register-service-worker": "^1.7.2",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-import-css": "^3.0.3",
-    "rollup-plugin-windicss": "^1.8.4",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.9",
+    "rollup-plugin-windicss": "^1.8.6",
+    "solid-app-router": "^0.4.1",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.13",
     "vite-plugin-solid": "^2.2.6",
-    "vite-plugin-windicss": "^1.8.4",
-    "windicss": "^3.5.3",
+    "vite-plugin-windicss": "^1.8.6",
+    "windicss": "^3.5.6",
     "workbox-cli": "^6.5.3"
   },
   "dependencies": {
     "@amoutonbrady/lz-string": "^0.0.1",
-    "@babel/preset-typescript": "^7.17.12",
-    "@babel/standalone": "^7.17.12",
-    "babel-preset-solid": "1.4.0",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/standalone": "^7.18.7",
+    "@solid-primitives/media": "^2.0.0",
+    "@solid-primitives/scheduled": "^1.0.0",
+    "babel-preset-solid": "1.4.6",
     "dedent": "^0.7.0",
-    "jszip": "^3.9.1",
-    "mitt": "^3.0.0",
+    "jszip": "^3.10.0",
+    "monaco-editor-auto-typings": "^0.4.2",
     "monaco-editor-textmate": "^3.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
-    "prettier": "^2.6.2",
-    "rollup": "^2.73.0",
+    "path": "^0.12.7",
+    "prettier": "^2.7.1",
+    "rollup": "^2.75.7",
     "solid-dismiss": "^1.2.1",
     "solid-heroicons": "^2.0.3",
-    "solid-js": "1.4.1"
+    "solid-js": "1.4.6",
+    "y-webrtc": "^10.2.3",
+    "yjs": "^13.5.39"
+  },
+  "overrides": {
+    "monaco-editor": "~0.33.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "monaco-editor": "~0.33.0"
+    }
   }
 }
diff --git a/playground/app.tsx b/playground/app.tsx
@@ -1,40 +1,11 @@
-import { Show, onCleanup, createEffect, createSignal, JSX } from 'solid-js';
-
-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 type { editor as mEditor } from 'monaco-editor';
-
-import pkg from '../package.json';
-import { eventBus } from './utils/eventBus';
-import { createTabList, defaultTabs, processImport, Repl } from '../src';
+import { Show, 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 { parseHash } from './utils/parseHash';
-import { isValidUrl } from './utils/isValidUrl';
-
-import CompilerWorker from '../src/workers/compiler?worker';
-import FormatterWorker from '../src/workers/formatter?worker';
-import useZoom from '../src/hooks/useZoom';
-import { isDarkTheme } from './utils/isDarkTheme';
-import { exportToJSON } from './utils/exportFiles';
-
-(window as any).MonacoEnvironment = {
-  getWorker(_moduleId: unknown, label: string) {
-    switch (label) {
-      case 'css':
-        return new cssWorker();
-      case 'typescript':
-      case 'javascript':
-        return new tsWorker();
-      default:
-        return new editorWorker();
-    }
-  },
-};
-
-let swUpdatedBeforeRender = false;
-eventBus.on('sw-update', () => (swUpdatedBeforeRender = true));
+import { useZoom } from '../src/hooks/useZoom';
+import { Edit } from './pages/edit';
+import { Home } from './pages/home';
+import { Login } from './pages/login';
 
 export const App = (): JSX.Element => {
   /**
@@ -43,123 +14,36 @@ export const App = (): JSX.Element => {
    * 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 compiler = new CompilerWorker();
-  const formatter = new FormatterWorker();
-
-  const url = new URL(location.href);
-  const initialTabs = parseHash(url.hash && url.hash.slice(1), defaultTabs) || defaultTabs;
-  const [tabs, setTabs] = createTabList(initialTabs);
-  const [current, setCurrent] = createSignal('main.tsx');
-
-  const params = Object.fromEntries(url.searchParams.entries());
-  const [version, setVersion] = createSignal(params.version || pkg.dependencies['solid-js']);
-
-  const [format, setFormat] = createSignal(false);
-  let editor: mEditor.IStandaloneCodeEditor | undefined;
-
-  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 [noHeader, noInteractive, isHorizontal, noEditableTabs] = [
-    'noHeader',
-    'noInteractive',
-    'isHorizontal',
-    'noEditableTabs',
-  ].map((key) => key in params);
-
-  if (params.format === 'json') {
-    exportToJSON(tabs());
-  }
-
-  const [dark, setDark] = createSignal(isDarkTheme());
-
-  createEffect(() => {
-    const action = dark() ? 'add' : 'remove';
-    document.body.classList[action]('dark');
-  });
-
-  const header = !noHeader;
-  const interactive = !noInteractive;
-  const editableTabs = !noEditableTabs;
-
-  const { zoomState, updateZoomScale } = useZoom();
+  const [newUpdate, setNewUpdate] = createSignal(eventBus() != undefined);
+  on(eventBus, () => setNewUpdate(true));
 
+  const { zoomState, updateZoom } = useZoom();
   document.addEventListener('keydown', (e) => {
-    const key = e.key;
-
     if (!zoomState.overrideNative) return;
-
-    if (!((e.ctrlKey || e.metaKey) && (key === '=' || key === '-'))) {
-      return;
-    }
-
-    e.preventDefault();
-
-    if (key === '=') {
-      updateZoomScale('increase');
-    } else {
-      updateZoomScale('decrease');
+    if (!(e.ctrlKey || e.metaKey)) return;
+
+    if (e.key === '=') {
+      updateZoom('increase');
+      e.preventDefault();
+    } else if (e.key == '-') {
+      updateZoom('decrease');
+      e.preventDefault();
     }
   });
 
-  return (
-    <div class="relative flex bg-solid-medium h-screen overflow-hidden text-slate-900 dark:text-slate-50 font-sans flex-col">
-      <Show
-        when={header}
-        children={
-          <Header
-            dark={dark()}
-            toggleDark={() => {
-              const toggledValue = !dark();
-              setDark(toggledValue);
-              localStorage.setItem('dark', String(toggledValue));
-            }}
-            formatCode={() => {
-              if (!format()) {
-                editor?.getAction('editor.action.formatDocument').run();
-                editor?.focus();
-              }
-              setFormat(true);
-              setTimeout(setFormat, 750, false);
-            }}
-            isHorizontal={isHorizontal}
-            tabs={tabs()}
-            setTabs={setTabs}
-            setCurrent={setCurrent}
-            onVersionChange={setVersion}
-            version={version()}
-          />
-        }
-        fallback={<div classList={{ 'md:col-span-2': !isHorizontal }}></div>}
-      />
+  const [searchParams] = useSearchParams();
 
-      <Repl
-        compiler={compiler}
-        formatter={formatter}
-        isHorizontal={isHorizontal}
-        interactive={interactive}
-        editableTabs={editableTabs}
-        dark={dark()}
-        tabs={tabs()}
-        setTabs={setTabs}
-        current={current()}
-        setCurrent={setCurrent}
-        version={version()}
-        id="repl"
-        onEditorReady={(_editor) => {
-          editor = _editor;
-        }}
-      />
+  return (
+    <div class="relative flex bg-white dark:bg-solid-darkbg dark:text-white text-black h-screen text-slate-900 dark:text-slate-50 font-sans flex-col overflow-auto">
+      <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>
 
       <Show when={newUpdate()} children={<Update onDismiss={() => setNewUpdate(false)} />} />
     </div>