fix(esm): specify "exports" in package manifests

refs FOO-1331

the way we can point Node.js versions that support ESM to our different
variants of the source code is through the "exports" directive of
package.json:

    {
      "exports": {
        ".": {                         # <- "this" package; the root
          "require": "./lib/index.js", # <-- CommonJS source code
          "default": "./es/index.js"   # <-- ESM source code
        }
      }
    }

older Nodes that don't understand the "exports" property will pick up
the "main" property and read that file (lib/index.js), newer Nodes will
look to the "exports" property and then decide:

- if the consumer code is using require(), it will read from
  "lib/index.js"
- if the consumer code is using import[()], it will read from
  "./es/index.js"

older bundlers can continue to pick up the ESM variant through the
"module" property, while newer ones will understand the "exports" one

this is how it looks like for everything:

    {
      "main": "./lib/index.js", # old node + require()
      "module": "./es/index.js", # old bundlers + import()
      "exports": { # new node, new bundlers
        ".": {
          "require": "./lib/index.js", # new node & bundlers + require()
          "default": "./es/index.js", # new node & bundlers + import()
        }
      }
    }

the changes were applied with the script in this gist:

    https://gist.github.com/amireh/6e34b13967fe69d50abe0ee929717fe2

== test plan ==
---------------

using node 10, verify you can still require() the commonjs variant:

    node -e 'require("@instructure/debounce")'

using node 14, verify you can still require() the commonjs variant:

    node --input-type=commonjs -e 'require("@instructure/debounce")'

now try to import it in an ESM context:

    node --input-type=module -e 'import "@instructure/debounce"'

although it FAILS, it's ok as that is a different problem that we'll
fix later; what's important here is that node will try to load
./es/index.js

Change-Id: I597504283b4da7e361e20f48d4dfa34e80b4bd43

packages/canvas-high-contrast-theme/package.json

@@ -4,6 +4,12 @@
   "description": "A high contrast theme for Canvas LMS made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/canvas-theme/package.json

@@ -4,6 +4,12 @@
   "description": "A theme for Canvas LMS made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/console/package.json

@@ -4,6 +4,12 @@
   "description": "A babel macro made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/debounce/package.json

@@ -4,6 +4,12 @@
   "description": "A debounce util made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "repository": {

packages/instructure-theme/package.json

@@ -4,6 +4,12 @@
   "description": "A theme for Instructure made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/template-component/template/package.json.ejs

@@ -5,7 +5,13 @@
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
   "module": "./es/index.js",
-  "main": "./es/index.js",
+  "main": "./lib/index.js",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/instructure/instructure-ui.git"

packages/template-package/template/package.json.ejs

@@ -5,8 +5,14 @@
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
   "module": "./es/index.js",
-  "main": "./es/index.js",
+  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/instructure/instructure-ui.git"

packages/ui-a11y-content/package.json

@@ -4,6 +4,12 @@
   "description": "Utility components that enhance the user experience of those that navigate the web with a screen reader or keyboard.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-a11y-utils/package.json

@@ -4,6 +4,12 @@
   "description": "A collection of utilities for managing focus and screen reader behavior",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-alerts/package.json

@@ -4,6 +4,12 @@
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-avatar/package.json

@@ -4,6 +4,12 @@
   "description": "An image or letters that represents a user.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-axe-check/package.json

@@ -4,6 +4,12 @@
   "description": "A UI a11y testing library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "repository": {

packages/ui-badge/package.json

@@ -4,6 +4,12 @@
   "description": "A badge component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-billboard/package.json

@@ -4,6 +4,12 @@
   "description": "A UI component to display empty states, 404 pages, redirects, etc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-breadcrumb/package.json

@@ -4,6 +4,12 @@
   "description": "A breadcrumb component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-buttons/package.json

@@ -4,6 +4,12 @@
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-byline/package.json

@@ -4,6 +4,12 @@
   "description": "A Byline component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-calendar/package.json

@@ -4,6 +4,12 @@
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-checkbox/package.json

@@ -4,6 +4,12 @@
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-code-editor/package.json

@@ -4,6 +4,12 @@
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-color-utils/package.json

@@ -4,6 +4,12 @@
   "description": "A color utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-date-input/package.json

@@ -4,6 +4,12 @@
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-decorator/package.json

@@ -4,6 +4,12 @@
   "description": "A utility to wrap (decorates) a React component class adding functionality.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-dialog/package.json

@@ -4,6 +4,12 @@
   "description": "A utility component for managing keyboard accessibility and screen reader behavior",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-docs-client/package.json

@@ -4,6 +4,12 @@
   "description": "A React application to display documentation made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-dom-utils/package.json

@@ -4,6 +4,12 @@
   "description": "A DOM utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-drawer-layout/package.json

@@ -4,6 +4,12 @@
   "description": "A main-content-plus-tray layout component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-editable/package.json

@@ -4,6 +4,12 @@
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

packages/ui-expandable/package.json

@@ -4,6 +4,12 @@
   "description": "A utility component for show/hide functionality",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "repository": {

packages/ui-file-drop/package.json

@@ -4,6 +4,12 @@
   "description": "A flexible facade for an HTML file input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    }
+  },
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",