Migrate ACE editor, language worker, tailwindcss and vite bundler.

.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

frontend/.prettierignore

@@ -1,2 +1,2 @@
-dist
-node_modules
+node_modules
+dist

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()]
+};

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();

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(),

frontend/src/components/Editor/Buttons/Buttons.tsx → 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";

frontend/src/components/Output/Output.tsx → 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";
 

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;

frontend/tsconfig.json

@@ -1,31 +1,33 @@
 {
   "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,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
+
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

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"]
 }

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";
-        }
-      }
-    }
   }
 });