Convert to Vite project

src/components/EditorTextArea.tsx

@@ -5,7 +5,14 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  MutableRefObject,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 import themes, { Theme } from '../style/themes';
 
@@ -17,6 +24,34 @@ import { ResetFunction } from './Editor';
 import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+  getWorker(_: string, label: string): Promise<Worker> | Worker {
+    switch (label) {
+      case 'json':
+        return new jsonWorker();
+      case 'css':
+      case 'scss':
+      case 'less':
+        return new cssWorker();
+      case 'html':
+      case 'handlebars':
+      case 'razor':
+        return new htmlWorker();
+      case 'typescript':
+      case 'javascript':
+        return new tsWorker();
+      default:
+        return new editorWorker();
+    }
+  },
+};
+
 loader.config({ monaco });
 
 export interface EditorTextAreaProps {
@@ -27,7 +62,7 @@ export interface EditorTextAreaProps {
   language: string;
   fontSize: number;
   readOnly: boolean;
-  resetFunction: RefObject<ResetFunction | null>;
+  resetFunction: MutableRefObject<ResetFunction | null>;
 }
 
 export default function EditorTextArea({

src/components/MenuButton.tsx

@@ -19,7 +19,7 @@ export default function MenuButton<T extends string>({
 
   // close the menu when a click is made elsewhere
   useEffect(() => {
-    const listener = (e: MouseEvent) => setOpen(false);
+    const listener = () => setOpen(false);
     window.addEventListener('click', listener);
     return () => window.removeEventListener('click', listener);
   }, [setOpen]);

src/hooks/usePreference.ts

@@ -1,4 +1,3 @@
-import { get as lsGet, remove as lsRemove, set as lsSet } from 'local-storage';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 // hook used to load "preference" settings from local storage, or fall back to a default value.
@@ -8,7 +7,8 @@ export default function usePreference<T>(
   valid: (value: T) => boolean
 ): [T, Dispatch<SetStateAction<T>>, (value: T) => boolean] {
   const [value, setValue] = useState<T>(() => {
-    const pref = lsGet(id) as T;
+    const prefRaw = localStorage.getItem(id);
+    const pref = prefRaw !== null ? (JSON.parse(prefRaw) as T) : undefined;
     if (pref && valid(pref)) {
       return pref;
     } else {
@@ -18,9 +18,9 @@ export default function usePreference<T>(
 
   useEffect(() => {
     if (value === defaultValue) {
-      lsRemove(id);
+      localStorage.removeItem(id);
     } else {
-      lsSet(id, value);
+      localStorage.setItem(id, JSON.stringify(value));
     }
   }, [value, id, defaultValue]);
 

src/style/styled.d.ts

@@ -2,5 +2,6 @@ import 'styled-components';
 import { Theme } from './themes';
 
 declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface DefaultTheme extends Theme {}
 }

src/util/constants.ts

@@ -1,4 +1,3 @@
 export const bytebinUrl =
-  process.env.REACT_APP_BYTEBIN_URL || 'https://bytebin.lucko.me/';
-
+  import.meta.env.VITE_BYTEBIN_URL || 'https://bytebin.lucko.me/';
 export const postUrl = bytebinUrl + 'post';

src/util/storage.ts

@@ -31,7 +31,7 @@ export async function loadFromBytebin(id: string): Promise<LoadResult> {
     } else {
       return { ok: false };
     }
-  } catch (e) {
+  } catch {
     return { ok: false };
   }
 }

src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BYTEBIN_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}