feross · nichoth · Nov 4, 2024 · Nov 4, 2024 · Nov 4, 2024 · Nov 4, 2024
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+dist/*
+public/*
+test/*.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,46 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["lib.es5.d.ts"],
+  "parserOptions": {
+    "requireConfigFile": false
+  },
+  "extends": [
+    "standard",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "operator-linebreak": ["off"],
+    "multiline-ternary": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports"
+      }
+    ],
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 1,
+        "maxEOF": 1
+      }
+    ],
+    "indent": ["error", 4, {
+      "SwitchCase": 1,
+      "ignoredNodes": ["TemplateLiteral *"]
+    }],
+    "comma-dangle": "off",
+    "no-multi-spaces": ["error", { "ignoreEOLComments": true }]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,8 @@
-example/drag-drop.js
+node_modules
+bundle.js
+.DS_Store
+.env
+*.js
+dist
+public
+
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,4 @@
 .github/
 example/
 test/
+.env
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/README.md b/README.md
@@ -9,31 +9,59 @@
 [standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
 [standard-url]: https://standardjs.com
 
-### HTML5 drag & drop for humans
+<details><summary><h2>Contents</h2></summary>
+
+<!-- toc -->
+
+- [fork](#fork)
+  * [HTML5 drag & drop for humans](#html5-drag--drop-for-humans)
+  * [live demo](#live-demo)
+  * [features](#features)
+  * [install](#install)
+  * [usage](#usage)
+  * [complete example](#complete-example)
+  * [get files as buffers](#get-files-as-buffers)
+  * [detect drag-and-dropped text](#detect-drag-and-dropped-text)
+  * [detect `dragenter`, `dragover` and `dragleave` events](#detect-dragenter-dragover-and-dragleave-events)
+  * [remove listeners](#remove-listeners)
+  * [support pasting files from the clipboard](#support-pasting-files-from-the-clipboard)
+  * [a note about `file://` urls](#a-note-about-file-urls)
+  * [license](#license)
+
+<!-- tocstop -->
+
+</details>
+
+## fork
+This is a fork of [feross/drag-drop](https://github.com/feross/drag-drop).
+
+## HTML5 drag & drop for humans
 
 In case you didn't know, the
 [HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
 is a
 [total disaster](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html)!
 This is an attempt to make the API usable by mere mortals.
 
-### live demo
+## install
+
+```sh
+npm i -S drag-drop
+```
+
+## live demo
 
 See [https://instant.io](https://instant.io).
 
-### features
+## features
 
 - simple API
 - supports files and directories
 - excellent browser support (Chrome, Firefox, Safari, Edge)
 - adds a `drag` class to the drop target on hover, for easy styling!
 - optionally, get the file(s) as a Buffer (see [buffer](https://github.com/feross/buffer))
 
-### install
-
-```
-npm install drag-drop
-```
+This package works in the browser via [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) + the [exports field](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#exports) in `package.json`.
 
 This package works in the browser with [browserify](https://browserify.org). If you do not use a bundler, you can use the [standalone script](https://bundle.run/drag-drop) directly in a `<script>` tag.
 

diff --git a/buffer.js b/buffer.js
diff --git a/example/index.html b/example/index.html
@@ -12,22 +12,26 @@
   </head>
   <body>
     <h1>Drag something onto this page</h1>
-    <script src="drag-drop.js"></script>
-    <script>
+
+    <script type="module">
+      import { dragDrop as DragDrop } from '../src/index.ts'
+      import Debug from '@bicycle-codes/debug'
+      const debug = Debug()
+
       window.remove = DragDrop('body', {
         onDrop: function (files, pos, fileList, directories) {
           window.files = files
-          console.log('onDrop: ' + files.length + ' files at ' + pos.x + ', ' + pos.y)
+          debug('onDrop: ' + files.length + ' files at ' + pos.x + ', ' + pos.y)
           files.forEach(function (file) {
             console.log('- ' + file.name + ' (' + file.size + ') (' + file.type + ')')
           })
-          console.log('files array', files)
-          console.log('FileList object', fileList)
-          console.log('directories array', directories)
+          debug('files array', files)
+          debug('FileList object', fileList)
+          debug('directories array', directories)
         },
         onDropText: function (text, pos) {
           window.text = text
-          console.log('onDropText: ' + text + ' at ' + pos.x + ', ' + pos.y)
+          debug('onDropText: ' + text + ' at ' + pos.x + ', ' + pos.y)
         }
       })
     </script>