chore: migrate to vite & add eslint

ByteWither · Aug 17, 2024 · f750d3c · f750d3c
1 parent b0c1395
commit f750d3c
Show file tree

Hide file tree

Showing 21 changed files with 2,913 additions and 10,312 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": false,
+    "trailingComma": "all",
+    "htmlWhitespaceSensitivity": "ignore"
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # Minesweeper
-The Minesswipper game is developed with React & TypeScript. The project uses React Hooks and React Memo. Webpack and Component Approach were also used.
+
+The Minesswipper game is developed with React & TypeScript
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,25 @@
+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/src/App/index.html → index.html b/src/App/index.html → index.html
@@ -2,11 +2,11 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Document</title>
+        <title>Minesweeper</title>
     </head>
     <body>
         <div id="root"></div>
+        <script type="module" src="/src/App/index.tsx"></script>
     </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,42 +1,34 @@
 {
     "name": "minesweeper",
     "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
+    "description": "The Minesswipper game",
+    "type": "module",
     "scripts": {
-        "build": "webpack --mode production",
-        "watch": "webpack serve --mode development",
-        "test": "exit 0"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Moloko20/minesweeper.git"
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
     },
     "author": "",
     "license": "ISC",
-    "bugs": {
-        "url": "https://github.com/Moloko20/minesweeper/issues"
-    },
-    "homepage": "https://github.com/Moloko20/minesweeper#readme",
     "devDependencies": {
-        "@types/lodash": "^4.14.172",
-        "@types/react": "^17.0.20",
-        "@types/react-dom": "^17.0.9",
-        "css-loader": "^6.2.0",
-        "html-webpack-plugin": "^5.3.2",
-        "node-sass": "^7.0.0",
-        "react-dom": "^17.0.2",
-        "sass-loader": "^12.1.0",
-        "style-loader": "^3.2.1",
-        "ts-loader": "^9.2.5",
-        "tsconfig-paths-webpack-plugin": "^3.5.1",
-        "typescript": "^4.4.2",
-        "webpack": "^5.52.0",
-        "webpack-cli": "^4.8.0",
-        "webpack-dev-server": "^4.1.0"
+        "@types/node": "^22.4.0",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc-1eaccd82-20240816",
+        "eslint-plugin-react-refresh": "^0.4.9",
+        "globals": "^15.9.0",
+        "prettier": "^3.3.3",
+        "sass-embedded": "^1.77.8",
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.1.0",
+        "vite": "^5.4.1"
     },
     "dependencies": {
         "lodash.clonedeep": "^4.5.0",
-        "react": "^17.0.2"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     }
 }
diff --git a/prettier.config.js b/prettier.config.js
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -1,9 +1,10 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import { Board } from "Components/Board"
-import { Face, FaceTypes } from "Components/Face"
-import { Select } from "Components/Select"
-import { Timer } from "Components/Timer"
+import { StrictMode, useCallback, useRef, useState } from "react"
+import { createRoot } from "react-dom/client"
+import { Board } from "@/Components/Board"
+import { Face, FaceTypes } from "@/Components/Face"
+import { Select } from "@/Components/Select"
+import { Timer } from "@/Components/Timer"
+import "./index.sass"
 
 const DIFFICULTIES: Select = [
     { value: "easy", title: "Easy" },
@@ -12,28 +13,26 @@ const DIFFICULTIES: Select = [
 ]
 
 function App() {
-    const [diff, setDiff] = React.useState<string>("easy")
-    const [gameState, setGameState] = React.useState<FaceTypes>("start")
-    const gameResetFn = React.useRef<() => void>()
+    const [diff, setDiff] = useState<string>("easy")
+    const [gameState, setGameState] = useState<FaceTypes>("start")
+    const gameResetFn = useRef<() => void>()
 
-    const changeDifficulty = React.useCallback((value: string) => {
+    const changeDifficulty = useCallback((value: string) => {
         setDiff(value)
     }, [])
 
-    const changeEmoji = React.useCallback((value: FaceTypes) => {
+    const changeEmoji = useCallback((value: FaceTypes) => {
         setGameState(value)
     }, [])
 
-    const gameResetter = React.useCallback((resetter) => {
+    const gameResetter = useCallback((resetter) => {
         gameResetFn.current = resetter
     }, [])
 
     const resetHandler = () => {
         gameResetFn.current()
     }
 
-    require("./index.sass")
-
     return (
         <>
             <div className="menu">
@@ -46,9 +45,8 @@ function App() {
     )
 }
 
-ReactDOM.render(
-    <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+    <StrictMode>
         <App />
-    </React.StrictMode>,
-    document.getElementById("root"),
+    </StrictMode>,
 )
diff --git a/src/App/vite-env.d.ts b/src/App/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/Components/Board/index.tsx b/src/Components/Board/index.tsx
@@ -1,6 +1,6 @@
-import React from "react"
-import { Field, States } from "Components/Field"
-import { cloneDeep } from "lodash"
+import { memo, useCallback, useEffect, useRef, useState } from "react"
+import { Field, States } from "@/Components/Field"
+import "./index.sass"
 
 type boardItem = {
     isMine: boolean
@@ -97,14 +97,14 @@ type boardProps = {
 }
 
 function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps) {
-    const firstStep = React.useRef<boolean>(true)
-    const [userBoard, setUserBoard] = React.useState<board>([])
+    const firstStep = useRef<boolean>(true)
+    const [userBoard, setUserBoard] = useState<board>([])
 
-    const rows = React.useRef<number>(9)
-    const cells = React.useRef<number>(9)
-    const minesCount = React.useRef<number>(10)
+    const rows = useRef<number>(9)
+    const cells = useRef<number>(9)
+    const minesCount = useRef<number>(10)
 
-    const countOpenCells = React.useRef(rows.current * cells.current - minesCount.current)
+    const countOpenCells = useRef(rows.current * cells.current - minesCount.current)
 
     const boardFill = () => {
         clearBoard()
@@ -125,7 +125,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         setUserBoard(board)
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         switch (difficulty) {
             case "easy":
                 rows.current = 9
@@ -147,7 +147,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         boardFill()
     }, [difficulty])
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (userBoard.length) {
             if (userBoard.some((row) => row.some((cell) => cell.isMine && cell.opened))) {
                 onGameState("lose")
@@ -166,7 +166,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         onGameState("start")
 
         setUserBoard((prevState) => {
-            const mutateBoard = cloneDeep(prevState)
+            const mutateBoard = structuredClone(prevState)
 
             mutateBoard.map((item) => {
                 item.map((cell) => {
@@ -181,7 +181,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         })
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (getReset) getReset(clearBoard)
     }, [getReset])
 
@@ -208,7 +208,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         minesCount.current = countMines
 
         setUserBoard((prevState) => {
-            const mutateBoard = cloneDeep(prevState)
+            const mutateBoard = structuredClone(prevState)
 
             minesData.forEach(([mineX, mineY]) => {
                 mutateBoard[mineX][mineY].isMine = true
@@ -223,7 +223,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         })
     }
 
-    const leftHandle = React.useCallback((x: number, y: number) => {
+    const leftHandle = useCallback((x: number, y: number) => {
         if (firstStep.current) {
             setMines(x, y)
             onGameState("game")
@@ -232,7 +232,7 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
 
         setUserBoard((prevState) => {
             if (!prevState[x][y].opened && !prevState[x][y].flagged) {
-                const mutateBoard = cloneDeep(prevState)
+                const mutateBoard = structuredClone(prevState)
                 mutateBoard[x][y].opened = true
 
                 if (mutateBoard[x][y].isMine) {
@@ -248,10 +248,10 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         })
     }, [])
 
-    const rightHandle = React.useCallback((x: number, y: number) => {
+    const rightHandle = useCallback((x: number, y: number) => {
         setUserBoard((prevState) => {
             if (!prevState[x][y].opened) {
-                const mutateBoard = cloneDeep(prevState)
+                const mutateBoard = structuredClone(prevState)
 
                 mutateBoard[x][y].flagged = !mutateBoard[x][y].flagged
 
@@ -284,8 +284,6 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
         return null
     }
 
-    require("./index.sass")
-
     return (
         <div className="board">
             {userBoard.map((cells, rowIndex) => (
@@ -308,4 +306,4 @@ function BoardComponent({ difficulty, onGameState, getReset = null }: boardProps
     )
 }
 
-export const Board = React.memo(BoardComponent)
+export const Board = memo(BoardComponent)
diff --git a/src/Components/Face/index.tsx b/src/Components/Face/index.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import "./index.sass"
 
 export type FaceTypes = "lose" | "win" | "game" | "start"
 
@@ -19,8 +19,6 @@ type faceProps = {
 }
 
 export function Face({ state, onResetGame }: faceProps) {
-    require("./index.sass")
-
     const onClick = () => {
         onResetGame()
     }

diff --git a/src/Components/Field/index.sass b/src/Components/Field/index.sass
@@ -1,3 +1,5 @@
+@import ./../../Shared/Styles/_vars
+
 .field
     background-color: $field-bg-blue
     border: 1px solid #696969

diff --git a/src/Components/Field/index.tsx b/src/Components/Field/index.tsx
@@ -1,4 +1,5 @@
-import React from "react"
+import { memo } from "react"
+import "./index.sass"
 
 export type States = "flag" | "opened" | "bomb"
 type FieldProps = {
@@ -45,13 +46,11 @@ function FieldComponent({
     if (state === "bomb") className += " field--bomb"
     if (state === "opened") className += " field--opened"
 
-    require("./index.sass")
-
     return (
         <button className={className} onClick={leftClickHandle} onContextMenu={rightClickHandle}>
             {getState()}
         </button>
     )
 }
 
-export const Field = React.memo(FieldComponent)
+export const Field = memo(FieldComponent)
diff --git a/src/Components/Select/index.tsx b/src/Components/Select/index.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import "./index.sass"
 
 type value = string
 
@@ -13,13 +13,11 @@ type selectProps = {
     onChange?: (value: value) => void
 }
 
-function SelectComponent({ value = null, options = [], onChange = null }: selectProps) {
+export function Select({ value = null, options = [], onChange = null }: selectProps) {
     const changeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
         if (onChange) onChange(e.target.value)
     }
 
-    require("./index.sass")
-
     return (
         <div className="select">
             <select value={value} onChange={changeHandler}>
@@ -34,5 +32,3 @@ function SelectComponent({ value = null, options = [], onChange = null }: select
         </div>
     )
 }
-
-export const Select = React.memo(SelectComponent)
diff --git a/src/Components/Timer/index.sass b/src/Components/Timer/index.sass