Fix typescript output, make build and dev faster by using esbuild/vitest

.eslintrc.json

@@ -11,7 +11,7 @@
     },
     "ecmaVersion": 12,
     "sourceType": "module",
-    "project": "./tsconfig.eslint.json"
+    "project": "./tests/tsconfig.json"
   },
   "plugins": ["prettier"],
   "rules": {

.gitignore

@@ -23,4 +23,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-report*
+report*
+.idea

build.mjs

@@ -0,0 +1,33 @@
+import esbuild from 'esbuild';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import pkg from './package.json' assert { type: 'json' };
+import browserslist from 'browserslist';
+import glob from 'glob';
+import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const target = resolveToEsbuildTarget(
+  browserslist(pkg.browserslist.production),
+  {
+    printUnknownTargets: false
+  }
+);
+const options = {
+  entryPoints: glob.sync(path.join(__dirname, './src/**/*.*')),
+  target: target,
+  outdir: path.parse(path.join(__dirname, pkg.module)).dir,
+  watch: process.env.BUILD_WATCH === 'true',
+  format: 'esm',
+  sourcemap: 'linked',
+  color: true,
+  logLevel: 'debug'
+};
+await esbuild.build(options);
+await esbuild.build({
+  ...options,
+  outdir: path.parse(path.join(__dirname, pkg.main)).dir,
+  format: 'cjs'
+});

package.json

@@ -5,20 +5,20 @@
   "author": "Karim <karimmokhtar28@gmail.com>",
   "license": "MIT",
   "private": false,
-  "main": "dist/react-drag-drop-files.cjs.js",
-  "module": "dist/react-drag-drop-files.esm.js",
-  "types": "dist/react-drag-drop-files.d.ts",
-  "source": "src/react-drag-drop-files.ts",
+  "main": "dist/react-drag-drop-files.cjs.js/react-drag-drop-files.js",
+  "module": "dist/react-drag-drop-files.esm.js/react-drag-drop-files.js",
+  "types": "dist/src/react-drag-drop-files.d.ts",
+  "source": "dist/src/react-drag-drop-files.ts",
   "scripts": {
-    "build": "rollup -c",
-    "build-watch": "rollup -c -w",
+    "build": "node build.mjs && yarn tsc",
+    "build-watch": "BUILD_WATCH=true node build.mjs",
     "start-playground": "cd playground && npm run start",
     "install-all": "yarn install && cd playground && npm i",
     "dev": "npm-run-all --parallel build-watch start-playground",
     "deploy:npm": "yarn run build && npm publish",
     "lint:check": "eslint --ext .ts --ext .tsx .",
     "lint:fix": "eslint --fix --ext .ts --ext .tsx .",
-    "test": "jest"
+    "test": "vitest"
   },
   "eslintConfig": {
     "extends": [
@@ -61,46 +61,42 @@
     ]
   },
   "dependencies": {
-    "prop-types": "^15.7.2",
-    "styled-components": "^5.3.0"
+    "browserslist": "^4.21.4",
+    "esbuild": "^0.15.15",
+    "esbuild-plugin-browserslist": "^0.5.2",
+    "prop-types": "^15.8.1",
+    "styled-components": "^5.3.6",
+    "vite": "^3.2.4",
+    "vitest": "^0.25.3"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@svgr/rollup": "^5.5.0",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^15.12.4",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@types/styled-components": "^5.1.10",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "glob": "^8.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "react-scripts": "4.0.3",
-    "rollup": "2.0.1",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "^4.3.4",
-    "web-vitals": "^1.1.2"
+    "prettier": "^2.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.3",
+    "web-vitals": "^3.1.0"
   },
   "volta": {
     "node": "14.17.6",

playground/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+dist
+yarn.lock

playground/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      content="width=device-width,initial-scale=1,maximum-scale=10,minimum-scale=.25,user-scalable=yes"
+      name="viewport"
+    />
+    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
+  </head>
+  <body>
+    <div id="root" style="height: 100%; width: 100%"><!--app-html--></div>
+    <script type="module" src="src/index.jsx"></script>
+  </body>
+</html>

playground/package.json

@@ -3,20 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2",
-    "react-drag-drop-files": "../"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-drag-drop-files": "../",
+    "web-vitals": "^3.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite dev",
+    "build": "vite build"
   },
   "eslintConfig": {
     "extends": [

playground/src/App.jsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { FileUploader } from '../../';
+import './App.css';
+const fileTypes = ['JPG', 'PNG', 'GIF', 'JPEG'];
+
+function App() {
+  const [fileOrFiles, setFile] = useState(null);
+  const handleChange = (fileOrFiles) => {
+    setFile(fileOrFiles);
+    console.log('changes', fileOrFiles);
+  };
+  const onDrop = (fileOrFiles) => {
+    console.log('drop', fileOrFiles);
+  };
+  const onSelect = (fileOrFiles) => {
+    console.log('test', fileOrFiles);
+  };
+
+  const onTypeError = (err = 1) => console.log(err);
+  const onSizeError = (err = 1) => console.log(err);
+  console.log(fileOrFiles);
+  return (
+    <div className="App">
+      <FileUploader
+        classes="sample-class"
+        fileOrFiles={fileOrFiles}
+        onTypeError={onTypeError}
+        handleChange={handleChange}
+        name="image"
+        types={fileTypes}
+        onSizeError={onSizeError}
+        onDrop={onDrop}
+        onSelect={onSelect}
+        label="Upload file here"
+        dropMessageStyle={{backgroundColor: 'red'}}
+        multiple
+      />
+      <br />
+      <button onClick={() => setFile(null)}>Clear File</button>
+    </div>
+  );
+}
+
+export default App;

playground/src/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

playground/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 3000 },
+  build: {
+    minify: false
+  },
+  root: '',
+  test: {
+    globals: true,
+    watch: false,
+    threads: false,
+    reporters: 'verbose',
+    setupFiles: ['tests/setup.ts'],
+    environment: 'jsdom'
+  }
+});