chore: add Prettier to format code

Signed-off-by: Jon Koops <[email protected]>

Author: jonkoops

.editorconfig

@@ -14,10 +14,10 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     permissions:
-      contents: write      # to be able to publish a GitHub release
-      issues: write        # to be able to comment on released issues
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
       pull-requests: write # to be able to comment on released pull requests
-      id-token: write      # to enable use of OIDC for npm provenance
+      id-token: write # to enable use of OIDC for npm provenance
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/release.yml

@@ -11,14 +11,13 @@
 
 # Table of Contents
 
-* [Installation](#installation)
-* [Usage](#usage)
-* [Browser Support](#browser-support)
-* [Contribute](#contribute)
-* [Credits](#credits)
-* [Support](#support)
-* [License](#license)
-
+- [Installation](#installation)
+- [Usage](#usage)
+- [Browser Support](#browser-support)
+- [Contribute](#contribute)
+- [Credits](#credits)
+- [Support](#support)
+- [License](#license)
 
 ## Installation
 
@@ -33,7 +32,7 @@ npm add file-selector
 If you are using a bundler such as [Vite](https://vite.dev/) or [Webpack](https://webpack.js.org/) you can import the package directly:
 
 ```js
-import {fromEvent} from 'file-selector';
+import { fromEvent } from "file-selector";
 ```
 
 ### Browser
@@ -46,7 +45,7 @@ If you want to use a CDN, you can use [Skypack](https://www.skypack.dev/), or an
 
 ```html
 <script type="module">
-    import {fromEvent} from 'https://cdn.skypack.dev/file-selector@^1.0.0';
+  import { fromEvent } from "https://cdn.skypack.dev/file-selector@^1.0.0";
 </script>
 ```
 
@@ -56,7 +55,7 @@ Self hosting is also possible, make sure to copy or link the contents of the NPM
 
 ```html
 <script type="module">
-    import {fromEvent} from './path/to/file-selector.js';
+  import { fromEvent } from "./path/to/file-selector.js";
 </script>
 ```
 
@@ -66,17 +65,17 @@ To avoid repeating the import path and get an experience similar to a bundler yo
 
 ```html
 <script type="importmap">
-    {
-        "imports": {
-            // Using the CDN
-            "file-selector": "https://cdn.skypack.dev/file-selector@^1.0.0"
-            // Or a path to your own self-hosted version.
-            "file-selector": "./path/to/file-selector.js"
-        }
+  {
+    "imports": {
+      // Using the CDN
+      "file-selector": "https://cdn.skypack.dev/file-selector@^1.0.0"
+      // Or a path to your own self-hosted version.
+      "file-selector": "./path/to/file-selector.js"
     }
+  }
 </script>
 <script type="module">
-    import {fromEvent} from 'file-selector';
+  import { fromEvent } from "file-selector";
 </script>
 ```
 
@@ -85,64 +84,69 @@ To avoid repeating the import path and get an experience similar to a bundler yo
 Convert a [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) to File objects:
 
 ```js
-import {fromEvent} from 'file-selector';
+import { fromEvent } from "file-selector";
 
-document.addEventListener('drop', async (event) => {
-    const files = await fromEvent(event);
-    console.log(files);
+document.addEventListener("drop", async (event) => {
+  const files = await fromEvent(event);
+  console.log(files);
 });
 ```
 
 Convert a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) for an input type file to File objects:
 
 ```js
-import {fromEvent} from 'file-selector';
+import { fromEvent } from "file-selector";
 
-const input = document.getElementById('myInput');
-input.addEventListener('change', async (event) => {
-    const files = await fromEvent(event);
-    console.log(files);
+const input = document.getElementById("myInput");
+input.addEventListener("change", async (event) => {
+  const files = await fromEvent(event);
+  console.log(files);
 });
 ```
 
 Convert [FileSystemFileHandle](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle) items to File objects:
 
 ```js
-import {fromEvent} from 'file-selector';
+import { fromEvent } from "file-selector";
 
-const handles = await window.showOpenFilePicker({multiple: true});
+const handles = await window.showOpenFilePicker({ multiple: true });
 const files = await fromEvent(handles);
 console.log(files);
 ```
 
-> [!NOTE] 
+> [!NOTE]
 > The above is experimental and subject to change.
 
 ## 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)
+
+- [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:
-* [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)
-* [FileSystemFileEntry.file()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry/file#Browser_compatibility)
-* [FileSystemDirectoryEntry.createReader()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader#Browser_compatibility)
-* [FileSystemDirectoryReader.readEntries()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Browser_compatibility)
 
+- [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)
+- [FileSystemFileEntry.file()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry/file#Browser_compatibility)
+- [FileSystemDirectoryEntry.createReader()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader#Browser_compatibility)
+- [FileSystemDirectoryReader.readEntries()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Browser_compatibility)
 
 ## Contribute
+
 Checkout the organization [CONTRIBUTING.md](https://github.com/react-dropzone/.github/blob/main/CONTRIBUTING.md).
 
 ## Credits
-* [html5-file-selector](https://github.com/quarklemotion/html5-file-selector)
+
+- [html5-file-selector](https://github.com/quarklemotion/html5-file-selector)
 
 ## Support
 
 ### Backers
+
 Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-dropzone#backer)]
 
 <a href="https://opencollective.com/react-dropzone/backer/0/website" target="_blank"><img src="https://opencollective.com/react-dropzone/backer/0/avatar.svg"></a>
@@ -158,6 +162,7 @@ Support us with a monthly donation and help us continue our activities. [[Become
 <a href="https://opencollective.com/react-dropzone/backer/10/website" target="_blank"><img src="https://opencollective.com/react-dropzone/backer/10/avatar.svg"></a>
 
 ### Sponsors
+
 Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-dropzone#sponsor)]
 
 <a href="https://opencollective.com/react-dropzone/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-dropzone/sponsor/0/avatar.svg"></a>
@@ -173,4 +178,5 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 <a href="https://opencollective.com/react-dropzone/sponsor/10/website" target="_blank"><img src="https://opencollective.com/react-dropzone/sponsor/10/avatar.svg"></a>
 
 ## License
+
 MIT

.github/workflows/stale.yml

@@ -1,14 +1,16 @@
-import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
 
 export default tseslint.config(
-    eslint.configs.recommended,
-    ...tseslint.configs.recommended,
-    {
-        rules: {
-            // TODO: Fix these rule and remove their overrides.
-            '@typescript-eslint/no-empty-object-type': 'off',
-            '@typescript-eslint/no-explicit-any': 'off',
-        }
-    }
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      // TODO: Fix these rule and remove their overrides.
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+  eslintConfigPrettier,
 );

README.md

@@ -1,15 +1,15 @@
-import { createDefaultEsmPreset } from 'ts-jest'
+import { createDefaultEsmPreset } from "ts-jest";
 
-const defaultPreset = createDefaultEsmPreset()
+const defaultPreset = createDefaultEsmPreset();
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 const jestConfig = {
-    ...defaultPreset,
-    testEnvironment: 'jsdom',
-    // Convert `.js` imports to one without an extension to support 'NodeNext' module resolution.
-    moduleNameMapper: {
-        '^(\\.{1,2}/.*)\\.js$': '$1'
-    }
-}
+  ...defaultPreset,
+  testEnvironment: "jsdom",
+  // Convert `.js` imports to one without an extension to support 'NodeNext' module resolution.
+  moduleNameMapper: {
+    "^(\\.{1,2}/.*)\\.js$": "$1",
+  },
+};
 
-export default jestConfig
+export default jestConfig;

eslint.config.js

@@ -36,7 +36,8 @@
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
-    "lint": "eslint .",
+    "lint": "prettier . --check && eslint .",
+    "lint:fix": "prettier --write . && eslint . --fix",
     "test": "jest"
   },
   "devDependencies": {
@@ -45,8 +46,10 @@
     "@types/jest": "^29.5.13",
     "@types/node": "^22.7.5",
     "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.3.3",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.12.2"