Migrated to vite from create-react-app

LarsBergqvist · Jun 6, 2024 · 2bbf379 · 2bbf379
1 parent 9d7994d
commit 2bbf379
Show file tree

Hide file tree

Showing 23 changed files with 1,562 additions and 6,125 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+dist/**
+node_modules/**
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,5 @@
+{
+    "extends": [
+      "react-app"
+    ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -10,7 +10,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '20'
       - name: Install packages
         run: yarn install
       - name: Run tests

diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,16 @@
+.DS_Store
+build
+
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
@@ -16,11 +23,12 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+*.lcov
 
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)
@@ -29,22 +37,31 @@ bower_components
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
+# Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 
 # Dependency directories
 node_modules/
 jspm_packages/
 
-# Typescript v1 declaration files
+# TypeScript v1 declaration files
 typings/
 
+# TypeScript cache
+*.tsbuildinfo
+
 # Optional npm cache directory
 .npm
 
 # Optional eslint cache
 .eslintcache
 
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
 # Optional REPL history
 .node_repl_history
 
@@ -55,9 +72,35 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+.env.local
 
-*.DS_Store
+# parcel-bundler cache (https://parceljs.org/)
+.cache
 
-build
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
 
+# TernJS port file
+.tern-port
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,6 +4,6 @@
   "eslint.alwaysShowStatus": true,
   "eslint.validate": ["javascript", "typescript"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
     git clone https://github.com/LarsBergqvist/react-redux-memory-game
     cd react-redux-memory-game
     yarn install
-    yarn start
+    yarn run dev
 ```
 <p>Try it out live here: https://larsbergqvist.github.io/react-redux-memory-game/
 

diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Memory Game</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,44 +1,42 @@
 {
-  "name": "react-redux-memory-game",
-  "version": "0.3.0",
-  "private": true,
-  "homepage": "https://larsbergqvist.github.io/react-redux-memory-game/",
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "prop-types": "^15.7.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-redux": "^7.2.4",
-    "react-scripts": "5.0.1",
-    "redux": "^4.1.0",
-    "redux-thunk": "^2.3.0",
-    "shuffle-array": "^1.0.1",
-    "web-vitals": "^0.2.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "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"
-    ]
-  }
+    "name": "sliding-image-puzzle",
+    "version": "1.2.0",
+    "private": true,
+    "homepage": "https://larsbergqvist.github.io/react-redux-memory-game/",
+    "type": "module",
+    "license": "MIT",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext .js --ext .jsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview",
+        "test": "vitest"
+    },
+    "dependencies": {
+        "@reduxjs/toolkit": "^2.2.5",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-redux": "^9.1.2",
+        "shuffle-array": "^1.0.1"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@types/shuffle-array": "^1.0.2",
+        "@types/uuid": "^9.0.8",
+        "@typescript-eslint/eslint-plugin": "^7.2.0",
+        "@typescript-eslint/parser": "^7.2.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "deep-freeze": "^0.0.1",
+        "eslint": "^8.57.0",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.6",
+        "prop-types": "^15.7.2",
+        "typescript": "^5.2.2",
+        "uuid": "^9.0.1",
+        "vite": "^5.2.0",
+        "vitest": "^1.6.0"
+    }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/CardView.js → src/CardView.jsx b/src/CardView.js → src/CardView.jsx
diff --git a/src/GameStatusView.js → src/GameStatusView.jsx b/src/GameStatusView.js → src/GameStatusView.jsx
diff --git a/src/GameView.js → src/GameView.jsx b/src/GameView.js → src/GameView.jsx
diff --git a/src/NumCardsSelectionView.js → src/NumCardsSelectionView.jsx b/src/NumCardsSelectionView.js → src/NumCardsSelectionView.jsx
diff --git a/src/Store.test.js b/src/Store.test.js
@@ -2,6 +2,7 @@ import { createStore } from 'redux'
 import memoryGame from './reducers'
 import { checkMatchedPair, flipUpCard, generatePairs, initGame, showNumCardsSelection } from './actions';
 import { MAX_PAIRS, getCard } from './cardFunctions';
+import { expect, test } from 'vitest'
 
 //
 // These tests uses the initial, un-shuffled state

diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
@@ -4,14 +4,12 @@ import memoryGame from './reducers';
 import { initGame } from './actions';
 import { Provider } from 'react-redux';
 import { MAX_PAIRS } from './cardFunctions';
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
+import { createStore, compose } from 'redux';
 import GameView from './GameView';
 import { createRoot } from 'react-dom/client';
 // For integration with Redux DevTools in browser
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const store = createStore(memoryGame, composeEnhancers(
-    applyMiddleware(thunk)
 ));
 store.dispatch(initGame(MAX_PAIRS));
 

diff --git a/src/setupTests.js b/src/setupTests.js