feat: convert package to pure ESM

.gitignore

@@ -30,6 +30,6 @@ Icon
 coverage
 build
 docs
-dist
+lib
 out-tsc
 tmp

README.md

@@ -21,34 +21,31 @@
 
 
 ## Installation
-You can install this package from [NPM](https://www.npmjs.com):
+You can install this package from [NPM](https://www.npmjs.com/package/file-selector):
 ```bash
-npm add file-selector
+npm install file-selector
 ```
 
-Or with [Yarn](https://yarnpkg.com/en):
+Or with [Yarn](https://yarnpkg.com/package/file-selector):
 ```bash
 yarn add file-selector
 ```
 
 ### CDN
-For CDN, you can use [unpkg](https://unpkg.com):
+If you need a CDN, you can use [Skypack](https://www.skypack.dev/view/file-selector):
+```html
+<script type="module">
+  import {fromEvent} from 'https://cdn.skypack.dev/file-selector';
 
-[https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js](https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js)
-
-The global namespace for file-selector is `fileSelector`:
-```js
-const {fromEvent} = fileSelector;
-document.addEventListener('drop', async evt => {
+  document.addEventListener('drop', async evt => {
     const files = await fromEvent(evt);
     console.log(files);
-});
+  });
+</script>
 ```
 
 
 ## Usage
-
-### ES6
 Convert a [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) to File objects:
 ```ts
 import {fromEvent} from 'file-selector';
@@ -80,25 +77,14 @@ console.log(files);
 ```
 **NOTE** The above is experimental and subject to change.
 
-### CommonJS
-Convert a `DragEvent` to File objects:
-```ts
-const {fromEvent} = require('file-selector');
-document.addEventListener('drop', async evt => {
-    const files = await fromEvent(evt);
-    console.log(files);
-});
-```
-
-
 ## Browser Support
 Most browser support basic File selection with drag 'n' drop or file input:
 * [File API](https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility)
 * [Drag Event](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Browser_compatibility)
 * [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#Browser_compatibility)
 * [`<input type="file">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Browser_compatibility)
 
-For folder drop we use the [FileSystem API](https://developer.mozilla.org/en-US/docs/Web/API/FileSystem) which has very limited support:
+For folder drop we use the [FileSystem API](https://developer.mozilla.org/en-US/docs/Web/API/FileSystem):
 * [DataTransferItem.getAsFile()](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFile#Browser_compatibility)
 * [DataTransferItem.webkitGetAsEntry()](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry#Browser_compatibility)
 * [FileSystemEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry#Browser_compatibility)

jest.config.ts

@@ -0,0 +1,21 @@
+import type { InitialOptionsTsJest } from 'ts-jest';
+
+const config: InitialOptionsTsJest = {
+  testEnvironment: 'jsdom',
+  // See: https://kulshekhar.github.io/ts-jest/docs/guides/esm-support
+  preset: 'ts-jest/presets/default-esm',
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1'
+  },
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        useESM: true,
+        tsconfig: 'tsconfig.test.json'
+      }
+    ]
+  }
+};
+
+export default config;

package.json

@@ -2,15 +2,13 @@
   "name": "file-selector",
   "version": "0.0.0-development",
   "description": "Convert DataTransfer object to a list of File objects",
-  "main": "./dist/index.js",
-  "module": "./dist/es5/index.js",
-  "es2015": "./dist/es2015/index.js",
-  "typings": "./dist/index.d.ts",
+  "type": "module",
+  "main": "./lib/index.js",
+  "exports": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "sideEffects": false,
   "files": [
-    "dist/**/*",
-    "src/*",
-    "!*.spec.*",
-    "LICENSE"
+    "lib"
   ],
   "keywords": [
     "drag-and-drop",
@@ -30,43 +28,23 @@
     "url": "https://github.com/react-dropzone/file-selector.git"
   },
   "scripts": {
-    "prebuild": "yarn run clean",
-    "build": "npm-run-all -s compile build:umd",
-    "build:umd": "rollup -c ./rollup.config.js",
-    "compile": "npm-run-all -p compile:es2015 compile:es5 compile:cjs compile:types",
-    "compile:es2015": "tsc -p ./tsconfig.es2015.json",
-    "compile:es5": "tsc -p ./tsconfig.es5.json",
-    "compile:cjs": "tsc -p ./tsconfig.cjs.json",
-    "compile:types": "tsc -p ./tsconfig.types.json",
-    "clean": "rm -rf dist/*",
-    "lint": "tslint -c tslint.json -p ./tsconfig.spec.json -t stylish",
-    "lint:fix": "yarn run lint -- --fix",
-    "pretest:cov": "yarn run lint",
+    "build": "rm -rf lib && tsc -p tsconfig.build.json",
+    "lint": "tslint -c tslint.json -p tsconfig.lint.json -t stylish",
+    "lint:fix": "yarn lint --fix",
     "test:cov": "jest --coverage",
     "test": "jest --watch"
   },
-  "dependencies": {
-    "tslib": "^2.4.0"
+  "engines": {
+    "node": ">=14.16"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.30",
-    "babel-jest": "^28.0.3",
-    "camelcase": "^6.3.0",
-    "jest": "^28.0.3",
-    "jest-environment-jsdom": "^28.0.2",
-    "npm-run-all": "^4.1.5",
-    "rollup": "^2.70.2",
-    "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "next",
+    "@jest/globals": "^29.0.3",
+    "@types/node": "^18.7.16",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "ts-jest": "^29.0.0",
+    "ts-node": "^10.9.1",
     "tslint": "^6.1.3",
-    "typescript": "^4.6.4"
-  },
-  "engines": {
-    "node": ">= 12"
+    "typescript": "^4.8.3"
   }
 }

src/file-selector.spec.ts

@@ -1,6 +1,6 @@
-import {FileWithPath} from './file';
-import {fromEvent} from './file-selector';
-
+import { expect, it } from '@jest/globals';
+import { fromEvent } from './file-selector.js';
+import type { FileWithPath } from './file.js';
 
 it('returns a Promise', async () => {
     const evt = new Event('test');
@@ -228,7 +228,7 @@ it('should throw if reading dir entries fails', done => {
     ]);
 
     fromEvent(evt)
-        .then(() => done.fail('Getting the files should have failed'))
+        .then(() => done('Getting the files should have failed'))
         .catch(() => done());
 });
 
@@ -246,7 +246,7 @@ it('should throw if reading file entry fails', done => {
     ]);
 
     fromEvent(evt)
-        .then(() => done.fail('Getting the files should have failed'))
+        .then(() => done('Getting the files should have failed'))
         .catch(() => done());
 });
 
@@ -255,7 +255,7 @@ it('should throw if DataTransferItem is not a File', done => {
     const evt = dragEvtFromFilesAndItems([], [item]);
 
     fromEvent(evt)
-        .then(() => done.fail('Getting the files should have failed'))
+        .then(() => done('Getting the files should have failed'))
         .catch(() => done());
 });
 

src/file-selector.ts

@@ -1,5 +1,4 @@
-import {FileWithPath, toFileWithPath} from './file';
-
+import {FileWithPath, toFileWithPath} from './file.js';
 
 const FILES_TO_IGNORE = [
     // Thumbnail cache files for macOS and Windows

src/file.spec.ts

@@ -1,5 +1,6 @@
 // tslint:disable: forin
-import {COMMON_MIME_TYPES, toFileWithPath} from './file';
+import { describe, expect, it, test } from '@jest/globals';
+import { COMMON_MIME_TYPES, toFileWithPath } from './file.js';
 
 describe('toFile()', () => {
     it('should be an instance of a File', () => {
@@ -40,7 +41,7 @@ describe('toFile()', () => {
 
         expect(Object.keys(fileWithPath)).toContain('path');
 
-        const keys = [];
+        const keys: string[] = [];
         for (const key in fileWithPath) {
             keys.push(key);
         }
@@ -83,7 +84,7 @@ describe('toFile()', () => {
 
         expect(Object.keys(fileWithPath)).toContain('type');
 
-        const keys = [];
+        const keys: string[] = [];
         for (const key in fileWithPath) {
             keys.push(key);
         }
@@ -117,7 +118,7 @@ describe('toFile()', () => {
                 expect(d).toEqual(data);
                 done();
             } catch (e) {
-                done.fail(e as Error);
+                done(e as Error);
             }
         };
 

src/index.ts

@@ -1,2 +1,2 @@
-export {fromEvent} from './file-selector';
-export {FileWithPath} from './file';
+export {fromEvent} from './file-selector.js';
+export type {FileWithPath} from './file.js';

tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./src"
+  ],
+  "exclude": [
+    "**/*.spec.*",
+  ],
+  "compilerOptions": {
+    "outDir": "./lib",
+    "declaration": true
+  }
+}