From 24b9af8641d7094feb45318d8c24ed12fc5cd138 Mon Sep 17 00:00:00 2001 From: Ahmad Amireh Date: Tue, 15 Dec 2020 13:09:19 -0700 Subject: [PATCH] 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 --- packages/console/src/index.js | 16 ++++++++-------- packages/ui-babel-preset/lib/index.js | 3 ++- packages/ui-babel-preset/package.json | 1 + packages/ui-i18n/src/Decimal.js | 2 +- packages/ui-stylesheet/src/StyleSheet.js | 2 +- yarn.lock | 12 ++++++++++++ 6 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/console/src/index.js b/packages/console/src/index.js index e8a5fbfa05..d3fcd579ed 100644 --- a/packages/console/src/index.js +++ b/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 @@ -61,13 +61,13 @@ 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 */ diff --git a/packages/ui-babel-preset/lib/index.js b/packages/ui-babel-preset/lib/index.js index 4fda5e3271..cfc6cc36bc 100644 --- a/packages/ui-babel-preset/lib/index.js +++ b/packages/ui-babel-preset/lib/index.js @@ -97,7 +97,8 @@ module.exports = function (context, opts = { useESModules: opts.esModules }], 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') { diff --git a/packages/ui-babel-preset/package.json b/packages/ui-babel-preset/package.json index 0c4db5a92d..62521c5350 100644 --- a/packages/ui-babel-preset/package.json +++ b/packages/ui-babel-preset/package.json @@ -37,6 +37,7 @@ "@instructure/config-loader": "^7.2.0", "@instructure/ui-postcss-config": "^7.2.0", "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", diff --git a/packages/ui-i18n/src/Decimal.js b/packages/ui-i18n/src/Decimal.js index b9e6b114f8..e8cdb7ec80 100644 --- a/packages/ui-i18n/src/Decimal.js +++ b/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' /** * --- diff --git a/packages/ui-stylesheet/src/StyleSheet.js b/packages/ui-stylesheet/src/StyleSheet.js index 2669d131e5..7605cef2e5 100644 --- a/packages/ui-stylesheet/src/StyleSheet.js +++ b/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' diff --git a/yarn.lock b/yarn.lock index 985ded5b69..dba7d5699b 100644 --- a/yarn.lock +++ b/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"