Adopt type=module (#80)

* Adopt type=module

follow changes in d3-format:
* type=module
* add exports
* remove zip
* license: ISC
* update dependencies

* browser rather than no-undef

* use the "falls through" comment to make eslint's "no-fallthrough" rule happy

* add eslint.json

* remove Sublime project

* related d3/d3#3502; extract copyrights from license

* update dependencies

* update homepage

* stricter eslint

* fix #78; non-passive event listeners

* push on prepublishOnly

Co-authored-by: Mike Bostock <mbostock@gmail.com>

.eslintrc.json

@@ -5,12 +5,10 @@
     "ecmaVersion": 8
   },
   "env": {
-    "es6": true,
-    "node": true,
-    "browser": true
+    "browser": true,
+    "node": true
   },
   "rules": {
-    "no-cond-assign": 0,
-    "no-fallthrough": 0
+    "no-cond-assign": 0
   }
 }

.github/eslint.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "eslint-compact",
+      "pattern": [
+        {
+          "regexp": "^(.+):\\sline\\s(\\d+),\\scol\\s(\\d+),\\s(Error|Warning|Info)\\s-\\s(.+)\\s\\((.+)\\)$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "severity": 4,
+          "message": 5,
+          "code": 6
+        }
+      ]
+    }
+  ]
+}

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn --frozen-lockfile
+    - run: |
+        echo ::add-matcher::.github/eslint.json
+        yarn run eslint src test --format=compact
+    - run: yarn test

LICENSE

@@ -1,27 +1,13 @@
-Copyright 2010-2016 Mike Bostock
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice,
-  this list of conditions and the following disclaimer in the documentation
-  and/or other materials provided with the distribution.
-
-* Neither the name of the author nor the names of contributors may be used to
-  endorse or promote products derived from this software without specific prior
-  written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Copyright 2010-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

README.md

@@ -20,15 +20,27 @@ Best of all, the drag behavior automatically unifies mouse and touch input, and
 
 ## Installing
 
-If you use NPM, `npm install d3-drag`. Otherwise, download the [latest release](https://github.com/d3/d3-drag/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-drag.v2.min.js) or as part of [D3](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
+If you use npm, `npm install d3-drag`. You can also download the [latest release on GitHub](https://github.com/d3/d3-drag/releases/latest). For vanilla HTML in modern browsers, import d3-drag from Skypack:
 
 ```html
-<script src="https://d3js.org/d3-dispatch.v2.min.js"></script>
-<script src="https://d3js.org/d3-selection.v2.min.js"></script>
-<script src="https://d3js.org/d3-drag.v2.min.js"></script>
+<script type="module">
+
+import {drag} from "https://cdn.skypack.dev/d3-drag@3";
+
+const handler = drag();
+
+</script>
+```
+
+For legacy environments, you can load d3-drag’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-drag@3"></script>
 <script>
 
-var drag = d3.drag();
+const handler = d3.drag();
 
 </script>
 ```
@@ -143,7 +155,7 @@ The default subject is the [datum](https://github.com/d3/d3-selection#selection_
 
 ```js
 function subject(event) {
-  var n = circles.length,
+  let n = circles.length,
       i,
       dx,
       dy,
@@ -221,7 +233,7 @@ Equivalent to [*drag*.on](#drag_on), but only applies to the current drag gestur
 
 ```js
 function started(event) {
-  var circle = d3.select(this).classed("dragging", true);
+  const circle = d3.select(this).classed("dragging", true);
 
   event.on("drag", dragged).on("end", ended);
 

package.json

@@ -2,46 +2,53 @@
   "name": "d3-drag",
   "version": "2.0.0",
   "description": "Drag and drop SVG, HTML or Canvas using mouse or touch input.",
+  "homepage": "https://d3js.org/d3-drag/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/d3/d3-drag.git"
+  },
   "keywords": [
     "d3",
     "d3-module",
     "drag",
     "behavior",
     "interaction"
   ],
-  "homepage": "https://d3js.org/d3-drag/",
-  "license": "BSD-3-Clause",
+  "license": "ISC",
   "author": {
     "name": "Mike Bostock",
-    "url": "http://bost.ocks.org/mike"
-  },
-  "main": "dist/d3-drag.js",
-  "unpkg": "dist/d3-drag.min.js",
-  "jsdelivr": "dist/d3-drag.min.js",
-  "module": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/d3/d3-drag.git"
+    "url": "https://bost.ocks.org/mike"
   },
+  "type": "module",
   "files": [
     "dist/**/*.js",
     "src/**/*.js"
   ],
-  "scripts": {
-    "pretest": "rollup -c",
-    "test": "tape 'test/**/*-test.js' && eslint src",
-    "prepublishOnly": "rm -rf dist && yarn test",
-    "postpublish": "git push && git push --tags && cd ../d3.github.com && git pull && cp ../${npm_package_name}/dist/${npm_package_name}.js ${npm_package_name}.v${npm_package_version%%.*}.js && cp ../${npm_package_name}/dist/${npm_package_name}.min.js ${npm_package_name}.v${npm_package_version%%.*}.min.js && git add ${npm_package_name}.v${npm_package_version%%.*}.js ${npm_package_name}.v${npm_package_version%%.*}.min.js && git commit -m \"${npm_package_name} ${npm_package_version}\" && git push && cd - && zip -j dist/${npm_package_name}.zip -- LICENSE README.md dist/${npm_package_name}.js dist/${npm_package_name}.min.js"
+  "module": "src/index.js",
+  "main": "src/index.js",
+  "jsdelivr": "dist/d3-drag.min.js",
+  "unpkg": "dist/d3-drag.min.js",
+  "exports": {
+    "umd": "./dist/d3-drag.min.js",
+    "default": "./src/index.js"
   },
+  "sideEffects": false,
   "dependencies": {
-    "d3-dispatch": "1 - 2",
-    "d3-selection": "2"
+    "d3-dispatch": "1 - 3",
+    "d3-selection": "3"
   },
-  "sideEffects": false,
   "devDependencies": {
-    "eslint": "6",
-    "rollup": "1",
-    "rollup-plugin-terser": "5",
-    "tape": "4"
+    "eslint": "7",
+    "mocha": "9",
+    "rollup": "2",
+    "rollup-plugin-terser": "7"
+  },
+  "scripts": {
+    "test": "mocha 'test/**/*-test.js' && eslint src test",
+    "prepublishOnly": "rm -rf dist && yarn test && rollup -c && git push",
+    "postpublish": "git push --tags && cd ../d3.github.com && git pull && cp ../${npm_package_name}/dist/${npm_package_name}.js ${npm_package_name}.v${npm_package_version%%.*}.js && cp ../${npm_package_name}/dist/${npm_package_name}.min.js ${npm_package_name}.v${npm_package_version%%.*}.min.js && git add ${npm_package_name}.v${npm_package_version%%.*}.js ${npm_package_name}.v${npm_package_version%%.*}.min.js && git commit -m \"${npm_package_name} ${npm_package_version}\" && git push && cd -"
+  },
+  "engines": {
+    "node": ">=12"
   }
 }

rollup.config.js

@@ -1,6 +1,14 @@
+import {readFileSync} from "fs";
 import {terser} from "rollup-plugin-terser";
 import * as meta from "./package.json";
 
+// Extract copyrights from the LICENSE.
+const copyright = readFileSync("./LICENSE", "utf-8")
+  .split(/\n/g)
+  .filter(line => /^Copyright\s+/.test(line))
+  .map(line => line.replace(/^Copyright\s+/, ""))
+  .join(", ");
+
 const config = {
   input: "src/index.js",
   external: Object.keys(meta.dependencies || {}).filter(key => /^d3-/.test(key)),
@@ -10,7 +18,7 @@ const config = {
     format: "umd",
     indent: false,
     extend: true,
-    banner: `// ${meta.homepage} v${meta.version} Copyright ${(new Date).getFullYear()} ${meta.author.name}`,
+    banner: `// ${meta.homepage} v${meta.version} Copyright ${copyright}`,
     globals: Object.assign({}, ...Object.keys(meta.dependencies || {}).filter(key => /^d3-/.test(key)).map(key => ({[key]: "d3"})))
   },
   plugins: []

src/drag.js

@@ -1,7 +1,7 @@
 import {dispatch} from "d3-dispatch";
 import {select, pointer} from "d3-selection";
 import nodrag, {yesdrag} from "./nodrag.js";
-import noevent, {nopropagation} from "./noevent.js";
+import noevent, {nonpassive, nonpassivecapture, nopropagation} from "./noevent.js";
 import constant from "./constant.js";
 import DragEvent from "./event.js";
 
@@ -41,7 +41,7 @@ export default function() {
         .on("mousedown.drag", mousedowned)
       .filter(touchable)
         .on("touchstart.drag", touchstarted)
-        .on("touchmove.drag", touchmoved)
+        .on("touchmove.drag", touchmoved, nonpassive)
         .on("touchend.drag touchcancel.drag", touchended)
         .style("touch-action", "none")
         .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
@@ -51,7 +51,9 @@ export default function() {
     if (touchending || !filter.call(this, event, d)) return;
     var gesture = beforestart(this, container.call(this, event, d), event, d, "mouse");
     if (!gesture) return;
-    select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
+    select(event.view)
+      .on("mousemove.drag", mousemoved, nonpassivecapture)
+      .on("mouseup.drag", mouseupped, nonpassivecapture);
     nodrag(event.view);
     nopropagation(event);
     mousemoving = false;
@@ -140,7 +142,7 @@ export default function() {
       var p0 = p, n;
       switch (type) {
         case "start": gestures[identifier] = gesture, n = active++; break;
-        case "end": delete gestures[identifier], --active; // nobreak
+        case "end": delete gestures[identifier], --active; // falls through
         case "drag": p = pointer(touch || event, container), n = active; break;
       }
       dispatch.call(

src/nodrag.js

@@ -1,11 +1,11 @@
 import {select} from "d3-selection";
-import noevent from "./noevent.js";
+import noevent, {nonpassivecapture} from "./noevent.js";
 
 export default function(view) {
   var root = view.document.documentElement,
-      selection = select(view).on("dragstart.drag", noevent, true);
+      selection = select(view).on("dragstart.drag", noevent, nonpassivecapture);
   if ("onselectstart" in root) {
-    selection.on("selectstart.drag", noevent, true);
+    selection.on("selectstart.drag", noevent, nonpassivecapture);
   } else {
     root.__noselect = root.style.MozUserSelect;
     root.style.MozUserSelect = "none";
@@ -16,7 +16,7 @@ export function yesdrag(view, noclick) {
   var root = view.document.documentElement,
       selection = select(view).on("dragstart.drag", null);
   if (noclick) {
-    selection.on("click.drag", noevent, true);
+    selection.on("click.drag", noevent, nonpassivecapture);
     setTimeout(function() { selection.on("click.drag", null); }, 0);
   }
   if ("onselectstart" in root) {

src/noevent.js

@@ -1,3 +1,8 @@
+// These are typically used in conjunction with noevent to ensure that we can
+// preventDefault on the event.
+export const nonpassive = {passive: false};
+export const nonpassivecapture = {capture: true, passive: false};
+
 export function nopropagation(event) {
   event.stopImmediatePropagation();
 }

test/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 8
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true
+  }
+}

test/export-test.js

@@ -0,0 +1,8 @@
+import assert from "assert";
+import * as d3 from "../src/index.js";
+
+it("drag methods", () => {
+  assert.deepStrictEqual(Object.keys(d3), [
+    "drag", "dragDisable", "dragEnable"
+  ]);
+});