From 76be123df7893607c66401cf2537cf3b85670db5 Mon Sep 17 00:00:00 2001 From: Cael Date: Wed, 18 Mar 2026 23:19:40 +0800 Subject: [PATCH] feat: refactor editor and output components, add new styles and functionality --- .gitignore | 32 ++++--------------- frontend/.prettierignore | 4 +-- frontend/postcss.config.js | 6 ---- frontend/postcss.config.ts | 7 ++++ frontend/src/App.tsx | 7 ++-- frontend/src/contexts/AppProvider.tsx | 7 ++-- .../Editor/Buttons/Buttons.tsx | 2 +- .../Editor/Editor.module.css | 0 .../{components => parts}/Editor/Editor.tsx | 0 .../Output/Output.module.css | 0 .../{components => parts}/Output/Output.tsx | 2 +- frontend/tailwind.config.ts | 11 +++---- frontend/tsconfig.json | 20 ++++++------ frontend/tsconfig.node.json | 7 ++-- frontend/vite.config.ts | 13 +------- 15 files changed, 45 insertions(+), 73 deletions(-) delete mode 100644 frontend/postcss.config.js create mode 100644 frontend/postcss.config.ts rename frontend/src/{components => parts}/Editor/Buttons/Buttons.tsx (97%) rename frontend/src/{components => parts}/Editor/Editor.module.css (100%) rename frontend/src/{components => parts}/Editor/Editor.tsx (100%) rename frontend/src/{components => parts}/Output/Output.module.css (100%) rename frontend/src/{components => parts}/Output/Output.tsx (97%) diff --git a/.gitignore b/.gitignore index e0b14e5..316b35f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,29 +1,11 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* +# macOS system files +.DS_Store -pnpm-lock.yaml +# Node.js dependencies node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? +pnpm-lock.yaml -# Rust related -book +# Build outputs target +book +dist diff --git a/frontend/.prettierignore b/frontend/.prettierignore index db4c6d9..76add87 100644 --- a/frontend/.prettierignore +++ b/frontend/.prettierignore @@ -1,2 +1,2 @@ -dist -node_modules \ No newline at end of file +node_modules +dist \ No newline at end of file diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js deleted file mode 100644 index ba80730..0000000 --- a/frontend/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {} - } -}; diff --git a/frontend/postcss.config.ts b/frontend/postcss.config.ts new file mode 100644 index 0000000..0c21c28 --- /dev/null +++ b/frontend/postcss.config.ts @@ -0,0 +1,7 @@ +import tailwindcss from "tailwindcss"; +import autoprefixer from "autoprefixer"; +import tailwindcssNesting from "tailwindcss/nesting"; + +export default { + plugins: [tailwindcssNesting(), tailwindcss(), autoprefixer()] +}; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4d28a99..553f9e6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,8 +1,7 @@ -import { lazy } from "react"; -import { useAppContext } from "@/contexts/AppProvider"; +import Editor from "./parts/Editor/Editor"; +import Output from "./parts/Output/Output"; -const Editor = lazy(() => import("@/components/Editor/Editor")); -const Output = lazy(() => import("@/components/Output/Output")); +import { useAppContext } from "@/contexts/AppProvider"; export default function App() { const { isFullscreen } = useAppContext(); diff --git a/frontend/src/contexts/AppProvider.tsx b/frontend/src/contexts/AppProvider.tsx index 3d30824..d10bb00 100644 --- a/frontend/src/contexts/AppProvider.tsx +++ b/frontend/src/contexts/AppProvider.tsx @@ -1,10 +1,11 @@ -import { Dispatch, SetStateAction, createContext, useContext, useEffect, useState } from "react"; +import type { Dispatch, SetStateAction } from "react"; +import { createContext, useContext, useEffect, useState } from "react"; import useResizeObserver from "@/hooks/useResizeObserver"; import { defaultCodes } from "@/data/app"; -import { Output, OutputsType } from "@/types/output"; -import { Editor, EditorType, Language } from "@/types/editor"; +import { Output, type OutputsType } from "@/types/output"; +import { Editor, type EditorType, Language } from "@/types/editor"; const workers = { python: new URL("../workers/python-worker.js", import.meta.url).toString(), diff --git a/frontend/src/components/Editor/Buttons/Buttons.tsx b/frontend/src/parts/Editor/Buttons/Buttons.tsx similarity index 97% rename from frontend/src/components/Editor/Buttons/Buttons.tsx rename to frontend/src/parts/Editor/Buttons/Buttons.tsx index c872472..5a48399 100644 --- a/frontend/src/components/Editor/Buttons/Buttons.tsx +++ b/frontend/src/parts/Editor/Buttons/Buttons.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { IconType } from "react-icons/lib"; +import type { IconType } from "react-icons/lib"; import { IoCheckmark } from "react-icons/io5"; import { TfiFullscreen } from "react-icons/tfi"; import { VscHistory, VscCopy, VscPlay, VscLoading } from "react-icons/vsc"; diff --git a/frontend/src/components/Editor/Editor.module.css b/frontend/src/parts/Editor/Editor.module.css similarity index 100% rename from frontend/src/components/Editor/Editor.module.css rename to frontend/src/parts/Editor/Editor.module.css diff --git a/frontend/src/components/Editor/Editor.tsx b/frontend/src/parts/Editor/Editor.tsx similarity index 100% rename from frontend/src/components/Editor/Editor.tsx rename to frontend/src/parts/Editor/Editor.tsx diff --git a/frontend/src/components/Output/Output.module.css b/frontend/src/parts/Output/Output.module.css similarity index 100% rename from frontend/src/components/Output/Output.module.css rename to frontend/src/parts/Output/Output.module.css diff --git a/frontend/src/components/Output/Output.tsx b/frontend/src/parts/Output/Output.tsx similarity index 97% rename from frontend/src/components/Output/Output.tsx rename to frontend/src/parts/Output/Output.tsx index 4dd1575..59ba9ce 100644 --- a/frontend/src/components/Output/Output.tsx +++ b/frontend/src/parts/Output/Output.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { GrClear } from "react-icons/gr"; -import { IconType } from "react-icons/lib"; +import type { IconType } from "react-icons/lib"; import { VscCopy } from "react-icons/vsc"; import { IoCheckmark } from "react-icons/io5"; diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 632e90e..98a52d7 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -1,9 +1,6 @@ -/** @type {import('tailwindcss').Config} */ +import type { Config } from "tailwindcss"; + export default { darkMode: "class", - content: ["./src/**/*.{css,tsx}"], - theme: { - extend: {} - }, - plugins: [] -}; + content: ["./src/**/*.{css,tsx}"] +} satisfies Config; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 1f9dea3..90b13b9 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -1,24 +1,25 @@ { "compilerOptions": { "target": "ES2020", - "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, + "moduleResolution": "bundler", + "module": "esnext", /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, + "noEmit": true, + "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, - "noEmit": true, + "verbatimModuleSyntax": true, + "useDefineForClassFields": true, + "allowImportingTsExtensions": true, + "jsx": "react-jsx", + "types": ["vite/client"], /* Custom paths */ "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - }, + "paths": { "@/*": ["./src/*"] }, /* Linting */ "strict": true, @@ -26,6 +27,7 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, + "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json index 97ede7e..2679a21 100644 --- a/frontend/tsconfig.node.json +++ b/frontend/tsconfig.node.json @@ -1,11 +1,12 @@ { "compilerOptions": { + "strict": true, "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true, - "strict": true + "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + + "include": ["vite.config.ts", "tailwind.config.ts"] } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index c487e12..4ff2021 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -12,8 +12,8 @@ function simpleHash(str: string): number { } export default defineConfig({ + base: "./", plugins: [react()], - base: process.env.BASE_URL || "./", resolve: { alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }] }, css: { modules: { @@ -25,16 +25,5 @@ export default defineConfig({ return `_${name}_${hash}_${lineNumber}`; } } - }, - build: { - rollupOptions: { - output: { - manualChunks(id) { - if (id.includes("node_modules/react-ace")) return "react-ace"; - else if (id.includes("node_modules/ace-builds/src-noconflict/mode")) return "ace-modes"; - else if (id.includes("node_modules/ace-builds/src-noconflict/theme")) return "ace-themes"; - } - } - } } });