Convert to Vite project

lucko · Jan 5, 2025 · 5b2ca9b · 5b2ca9b
1 parent b31aea5
commit 5b2ca9b
Show file tree

Hide file tree

Showing 18 changed files with 1,179 additions and 9,646 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,25 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-.idea
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Dockerfile b/Dockerfile
@@ -1,8 +1,8 @@
 # Build stage
-FROM node:lts as build
+FROM node:lts AS build
 
 ARG BYTEBIN_URL="data/"
-ENV REACT_APP_BYTEBIN_URL="${BYTEBIN_URL}"
+ENV VITE_BYTEBIN_URL="${BYTEBIN_URL}"
 
 WORKDIR /app
 COPY package.json yarn.lock ./
@@ -13,6 +13,6 @@ RUN yarn build
 # Run stage
 FROM nginx:alpine
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html
 CMD ["nginx", "-g", "daemon off;"]
-EXPOSE 80/tcp
+EXPOSE 80/tcp
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -11,20 +11,21 @@
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:title" content="pastes" />
     <meta name="twitter:description" content="a simple pastebin." />
-    <meta name="twitter:image" content="%PUBLIC_URL%/assets/logo256.png" />
+    <meta name="twitter:image" content="https://pastes.dev/assets/logo256.png" />
 
     <meta property="og:title" content="pastes" />
     <meta property="og:description" content="a simple pastebin." />
     <meta property="og:type" content="product" />
-    <meta property="og:image" content="%PUBLIC_URL%/assets/logo256.png" />
-    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:image" content="https://pastes.dev/assets/logo256.png" />
+    <meta property="og:url" content="https://pastes.dev" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link href="%PUBLIC_URL%/assets/logo512.png" rel="shortcut icon" sizes="512x512" type="image/png">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/logo256.png" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="shortcut icon" href="/assets/logo512.png" sizes="512x512" type="image/png">
+    <link rel="apple-touch-icon" href="/assets/logo256.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,61 +2,43 @@
   "name": "paste",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'"
+  },
   "dependencies": {
-    "@catppuccin/palette": "^1.7.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "@monaco-editor/react": "^4.6.0",
+    "@catppuccin/palette": "^1.7.1",
     "copy-to-clipboard": "^3.3.3",
     "history": "^5.3.0",
-    "local-storage": "^2.0.0",
     "monaco-editor": "^0.52.0",
     "monaco-themes": "^0.4.4",
     "pako": "^2.1.0",
-    "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^19.0.0",
-    "react-scripts": "^5.0.1",
     "styled-components": "^6.1.13",
-    "typescript": "^5.7.2",
     "whatwg-mimetype": "^3.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^18.11.9",
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/pako": "^2.0.3",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
     "@types/whatwg-mimetype": "^3.0.2",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5",
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "CI=false react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'",
-    "compile": "tsc"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }
diff --git a/src/components/EditorTextArea.tsx b/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({

diff --git a/src/components/MenuButton.tsx b/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]);

diff --git a/src/hooks/usePreference.ts b/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]);
 

diff --git a/src/index.tsx → src/main.tsx b/src/index.tsx → src/main.tsx
diff --git a/src/style/styled.d.ts b/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 {}
 }
diff --git a/src/util/constants.ts b/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';
diff --git a/src/util/storage.ts b/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 };
   }
 }

diff --git a/src/vite-env.d.ts b/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;
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,27 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src/*.ts",
-    "src/*.tsx"
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
   ]
 }