fix(esm): improve esm support

refs FOO-1331

- all imports must specify the extension (and can't import directories),
  which is handled by the newly added babel plugin
- console ported to ESM so that it can be imported by ESM dependents

== test plan ==

using node 14, you can now import some of the packages (ones that don't
rely on babel / react)

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

Change-Id: I1b677307c38fe12c2e25a2a3f72775e537eb0306

Author: amireh

packages/console/src/index.js

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const React = require('react')
+import React from 'react'
 
 let loggedInitialDeprecationWarning = false
 
@@ -65,12 +65,12 @@ function logDeprecated(condition, message, ...args) {
   }
 }
 
-exports.error = (...args) => logMessage('error', true, ...args)
-exports.warn = (...args) => logMessage('warn', true, ...args)
-exports.warnDeprecated = (...args) => logDeprecated(...args)
-exports.info = (...args) => console.info(...args)
-exports.assert = (...args) => console.assert(...args)
-exports.debug = (...args) => console.debug(...args)
-exports.log = (...args) => console.log(...args)
+export const error = (...args) => logMessage('error', true, ...args)
+export const warn = (...args) => logMessage('warn', true, ...args)
+export const warnDeprecated = (...args) => logDeprecated(...args)
+export const info = (...args) => console.info(...args)
+export const assert = (...args) => console.assert(...args)
+export const debug = (...args) => console.debug(...args)
+export const log = (...args) => console.log(...args)
 
 /* eslint-enable no-console */

packages/ui-babel-preset/lib/index.js

@@ -112,7 +112,8 @@ module.exports = function (
       }
     ],
     require('@babel/plugin-syntax-dynamic-import').default,
-    require('babel-plugin-transform-undefined-to-void')
+    require('babel-plugin-transform-undefined-to-void'),
+    require('babel-plugin-add-import-extension'),
   ])
 
   if (process.env.NODE_ENV === 'production') {

packages/ui-babel-preset/package.json

@@ -37,6 +37,7 @@
     "@instructure/config-loader": "^7.3.2",
     "@instructure/ui-postcss-config": "^7.3.2",
     "babel-loader": "^8.1.0",
+    "babel-plugin-add-import-extension": "^1.4.3",
     "babel-plugin-dynamic-import-node": "^2.3.0",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-macros": "^2.8.0",

packages/ui-i18n/src/Decimal.js

@@ -23,7 +23,7 @@
  */
 
 import { Locale } from './Locale'
-import BaseDecimal from 'decimal.js/decimal'
+import BaseDecimal from 'decimal.js/decimal.mjs'
 
 /**
  * ---

packages/ui-stylesheet/src/StyleSheet.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { StyleSheet as GlamorStyleSheet } from 'glamor/lib/sheet'
+import { StyleSheet as GlamorStyleSheet } from 'glamor/lib/sheet.js'
 
 const ENV = process.env.NODE_ENV || 'production'
 const DEBUG = process.env.DEBUG || ENV === 'development'

yarn.lock

@@ -216,6 +216,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
@@ -4409,6 +4414,13 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-add-import-extension@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/babel-plugin-add-import-extension/-/babel-plugin-add-import-extension-1.4.3.tgz#9a153095f3c8bb820abbf168bbc71aba837e4e4a"
+  integrity sha512-NiKs80ucIlktWtQ6VGovyVprpgaDxqlo3fT2e2vIyF6k3+02YMmQt+QrBDOq/YImkK/pIXb/SKaO+FxKsfvNlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 babel-plugin-add-react-displayname@^0.0.5:
   version "0.0.5"
   resolved "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"