Convert to Vite project
This commit is contained in:
39
.gitignore
vendored
39
.gitignore
vendored
@@ -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*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
@@ -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
|
||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
@@ -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 },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
@@ -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>
|
||||
62
package.json
62
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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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]);
|
||||
|
||||
@@ -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]);
|
||||
|
||||
|
||||
1
src/style/styled.d.ts
vendored
1
src/style/styled.d.ts
vendored
@@ -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 {}
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -31,7 +31,7 @@ export async function loadFromBytebin(id: string): Promise<LoadResult> {
|
||||
} else {
|
||||
return { ok: false };
|
||||
}
|
||||
} catch (e) {
|
||||
} catch {
|
||||
return { ok: false };
|
||||
}
|
||||
}
|
||||
|
||||
9
src/vite-env.d.ts
vendored
Normal file
9
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_BYTEBIN_URL?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
26
tsconfig.app.json
Normal file
26
tsconfig.app.json
Normal file
@@ -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"]
|
||||
}
|
||||
@@ -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" }
|
||||
]
|
||||
}
|
||||
|
||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import react from '@vitejs/plugin-react-swc';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
Reference in New Issue
Block a user