chore: update tooling (replace webpack by vite) (#442)

* chore: update tooling (replace webpack by vite) * fix: build * chore: update auto * remove circleci
ValentinH · Feb 11, 2023 · 85a97a8 · 85a97a8
1 parent 80606e3
commit 85a97a8
Show file tree

Hide file tree

Showing 18 changed files with 4,396 additions and 7,517 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,8 +3,6 @@
     "plugin:@typescript-eslint/recommended",
     "react-app",
     "prettier",
-    "prettier/@typescript-eslint",
-    "prettier/react",
     "plugin:cypress/recommended"
   ],
   "plugins": ["@typescript-eslint/eslint-plugin", "cypress"],

diff --git a/.github/workflows/quality-gate.yml b/.github/workflows/quality-gate.yml
@@ -1,6 +1,11 @@
 name: Quality Gate
 
-on: [push, pull_request, workflow_dispatch]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
 
 jobs:
   quality-gate:
@@ -38,3 +43,11 @@ jobs:
 
       - name: Run unit tests
         run: yarn unit
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v5.0.5
+        with:
+          start: yarn start:ci
+          record: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
diff --git a/auto.config.ts → auto.config.js b/auto.config.ts → auto.config.js
@@ -1,12 +1,10 @@
-import { AutoRc } from 'auto'
+// not using TS anymore due to https://github.com/intuit/auto/issues/2248
 
-import { INpmConfig } from '@auto-it/npm'
-
-const npmOptions: INpmConfig = {
+const npmOptions = {
   publishFolder: './dist',
 }
 
-export default function rc(): AutoRc {
+module.exports = function rc() {
   return {
     shipit: {
       noChangelog: true,

diff --git a/examples/src/images/1000x600.jpeg → examples/images/1000x600.jpeg b/examples/src/images/1000x600.jpeg → examples/images/1000x600.jpeg
diff --git a/examples/src/images/2000x1200.jpeg → examples/images/2000x1200.jpeg b/examples/src/images/2000x1200.jpeg → examples/images/2000x1200.jpeg
diff --git a/examples/src/images/cat.jpeg → examples/images/cat.jpeg b/examples/src/images/cat.jpeg → examples/images/cat.jpeg
diff --git a/examples/src/images/dog.jpeg → examples/images/dog.jpeg b/examples/src/images/dog.jpeg → examples/images/dog.jpeg
diff --git a/examples/src/images/flower.jpeg → examples/images/flower.jpeg b/examples/src/images/flower.jpeg → examples/images/flower.jpeg
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <title>react-easy-crop demo</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/src/index.html b/examples/src/index.html
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -7,12 +7,12 @@ import './styles.css'
 import Iframe from './iframe'
 
 const TEST_IMAGES = {
-  '/images/dog.jpeg': 'Landscape',
-  '/images/flower.jpeg': 'Portrait',
-  '/images/cat.jpeg': 'Small portrait',
+  './images/dog.jpeg': 'Landscape',
+  './images/flower.jpeg': 'Portrait',
+  './images/cat.jpeg': 'Small portrait',
 
   // Photos used in tests, used to verify values:
-  '/images/2000x1200.jpeg': '2000x1200',
+  './images/2000x1200.jpeg': '2000x1200',
 }
 
 const urlArgs = queryString.parse(window.location.search)

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
-    "start": "webpack-dev-server --mode development",
+    "start": "vite ./examples --port 3001 --clearScreen false",
     "auto": "auto",
     "postversion": "yarn build",
     "build": "yarn-or-npm bili && yarn-or-npm build:copy-files",
@@ -29,15 +29,16 @@
     "test": "yarn-or-npm unit && yarn-or-npm e2e && yarn-or-npm lint",
     "unit": "jest src",
     "unit:watch": "jest --watchAll src",
-    "start:ci": "webpack-dev-server --mode production",
+    "start:ci": "vite ./examples --port 3001 --mode production",
     "e2e": "start-server-and-test start http://localhost:3001 cy:run",
     "e2e:ci": "start-server-and-test start:ci http://localhost:3001 cy:ci",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "cy:ci": "percy exec -- cypress run --record",
     "lint": "eslint --ext .ts,.tsx ./examples ./src",
+    "type-check": "tsc --noEmit",
     "prebuild": "rimraf dist",
-    "build:copy-files": "babel-node ./scripts/copy-build-files.js",
+    "build:copy-files": "node ./scripts/copy-build-files.js",
     "precommit": "lint-staged",
     "format": "prettier --write src/**/*.ts* docs/src/**/*.{js,css}"
   },
@@ -50,61 +51,47 @@
     "tslib": "2.0.1"
   },
   "devDependencies": {
-    "@auto-it/all-contributors": "^10.34.0",
-    "@auto-it/first-time-contributor": "^10.34.0",
-    "@auto-it/released": "^10.34.0",
-    "@babel/core": "^7.3.4",
-    "@babel/node": "^7.7.7",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
+    "@auto-it/all-contributors": "^10.42.0",
+    "@auto-it/first-time-contributor": "^10.42.0",
+    "@auto-it/released": "^10.42.0",
     "@percy/cli": "^1.0.0-beta.71",
     "@percy/cypress": "^3.1.1",
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^29.4.0",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "18.0.6",
-    "@typescript-eslint/eslint-plugin": "4.2.0",
-    "@typescript-eslint/parser": "4.2.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
     "all-contributors-cli": "^6.4.0",
-    "auto": "^10.34.0",
-    "babel-eslint": "10.x",
-    "babel-loader": "^8.0.5",
+    "auto": "^10.42.0",
     "bili": "^5.0.5",
-    "copy-webpack-plugin": "^6.1.1",
-    "css-loader": "^4.3.0",
     "cypress": "^5.2.0",
-    "eslint": "7.9.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-config-react-app": "^5.1.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "5.2.0",
-    "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "4.1.2",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^4.5.0",
     "husky": "^4.3.0",
-    "jest": "26.4.2",
+    "jest": "^29.4.2",
     "lint-staged": "^10.4.0",
     "lodash.debounce": "^4.0.8",
     "np": "^6.5.0",
     "prettier": "^2.1.2",
     "query-string": "^6.1.0",
-    "raw-loader": "^4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
     "rollup-plugin-typescript2": "^0.27.1",
-    "start-server-and-test": "^1.4.1",
-    "style-loader": "^1.2.1",
-    "ts-jest": "^26.4.0",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.0.3",
-    "webpack": "^4.41.4",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.11.0",
+    "start-server-and-test": "^1.15.3",
+    "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1",
     "yarn-or-npm": "^3.0.1"
   },
   "lint-staged": {
@@ -114,6 +101,10 @@
     ]
   },
   "jest": {
-    "preset": "ts-jest"
+    "preset": "ts-jest",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ]
   }
 }
diff --git a/scripts/copy-build-files.js b/scripts/copy-build-files.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-console, import/no-extraneous-dependencies */
-import path from 'path'
-import fse from 'fs-extra'
+const path = require('path')
+const fse = require('fs-extra')
 
 async function copyFile(file) {
   const buildPath = path.resolve(__dirname, '../dist/', path.basename(file.to || file.from))
@@ -32,8 +32,8 @@ async function createPackageFile() {
       },
       './react-easy-crop.css': {
         import: './react-easy-crop.css',
-        require: './react-easy-crop.css'
-      }
+        require: './react-easy-crop.css',
+      },
     },
   }
   const buildPath = path.resolve(__dirname, '../dist/package.json')

diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,11 @@
 import Cropper, { CropperProps } from './Cropper'
-import { getInitialCropFromCroppedAreaPixels, getInitialCropFromCroppedAreaPercentages } from './helpers'
+import {
+  getInitialCropFromCroppedAreaPixels,
+  getInitialCropFromCroppedAreaPercentages,
+} from './helpers'
 
 export * from './types'
 
-export { CropperProps, getInitialCropFromCroppedAreaPixels, getInitialCropFromCroppedAreaPercentages }
-
+export { getInitialCropFromCroppedAreaPixels, getInitialCropFromCroppedAreaPercentages }
+export type { CropperProps }
 export default Cropper
diff --git a/webpack.config.js b/webpack.config.js