babel independence: canvas-rce
refs FOO-2697 flag = none remove the reliance on @instructure/ui-babel-preset and instead define babel config for the 3 targets we need: 1. ESM, used while working on the RCE or on canvas (webpack) -- get this by running "npm run build:es" 2. optimized ESM, used when we deploy, get it by running "NODE_ENV=production npm run build:es" 3. CJS, used in Canvas's jest build since we cannot use ESM there yet changes: - babel, mocha and jest configs were ported - testcafe/demo webpack builds are not reconfigured for babel as they aren't working currently, team is aware - mocha common options are now in a config file - stopped staging files in a canvas/ directory as it isn't used by canvas today (lib/ and es/ are) test plan: look at the delta for the optimized ESM target provided in the initial patchset and verify the changes look ok Change-Id: Iafb89b70431b970774b1a4250588115799f5d230 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/283996 Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com> Reviewed-by: Weston Dransfield <wdransfield@instructure.com> QA-Review: Weston Dransfield <wdransfield@instructure.com> Product-Review: Ahmad Amireh <ahmad@instructure.com>
This commit is contained in:
Ahmad Amireh
parent
5581047a71
commit
bd648c6835
|
|
@ -5,5 +5,4 @@ coverage
|
|||
npm-debug*
|
||||
doc/*.js
|
||||
github-pages/dist
|
||||
canvas
|
||||
testcafe/build
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
* Copyright (C) 2022 - present Instructure, Inc.
|
||||
*
|
||||
* This file is part of Canvas.
|
||||
*
|
||||
* Canvas is free software: you can redistribute it and/or modify it under
|
||||
* the terms of the GNU Affero General Public License as published by the Free
|
||||
* Software Foundation, version 3 of the License.
|
||||
*
|
||||
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
* details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License along
|
||||
* with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
module.exports = {
|
||||
require: [
|
||||
'@instructure/canvas-theme',
|
||||
'jsdom-global/register',
|
||||
require.resolve('./babel-register.js')
|
||||
]
|
||||
}
|
||||
|
|
@ -18,7 +18,21 @@
|
|||
const path = require('path')
|
||||
|
||||
require('@babel/register')({
|
||||
...require('./babel.config.js'),
|
||||
configFile: false,
|
||||
presets: [
|
||||
['@babel/preset-env'],
|
||||
['@babel/preset-react', {}],
|
||||
],
|
||||
plugins: [
|
||||
['@babel/plugin-proposal-decorators', {legacy: true}],
|
||||
['@instructure/babel-plugin-themeable-styles', {
|
||||
postcssrc: require('@instructure/ui-postcss-config')()(),
|
||||
themeablerc: {},
|
||||
}]
|
||||
],
|
||||
targets: {
|
||||
node: 'current'
|
||||
},
|
||||
only: [
|
||||
path.resolve(__dirname, 'src'),
|
||||
path.resolve(__dirname, 'test'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
* Copyright (C) 2022 - present Instructure, Inc.
|
||||
*
|
||||
* This file is part of Canvas.
|
||||
*
|
||||
* Canvas is free software: you can redistribute it and/or modify it under
|
||||
* the terms of the GNU Affero General Public License as published by the Free
|
||||
* Software Foundation, version 3 of the License.
|
||||
*
|
||||
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
* details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License along
|
||||
* with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
module.exports = {
|
||||
assumptions: {
|
||||
setPublicClassFields: true
|
||||
},
|
||||
presets: [
|
||||
['@babel/preset-env', { modules: 'commonjs' }],
|
||||
['@babel/preset-react', { useBuiltIns: true }],
|
||||
['@instructure/babel-preset-pretranslated-translations-package-format-message', {
|
||||
translationsDir: 'lib/canvas-rce',
|
||||
extractDefaultTranslations: false
|
||||
}]
|
||||
],
|
||||
plugins: [
|
||||
['transform-inline-environment-variables', {
|
||||
include: ['BUILD_LOCALE']
|
||||
}],
|
||||
['@babel/plugin-proposal-decorators', {legacy: true}],
|
||||
['@instructure/babel-plugin-themeable-styles', {
|
||||
postcssrc: require('@instructure/ui-postcss-config')()(),
|
||||
themeablerc: {},
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2019 - present Instructure, Inc.
|
||||
* Copyright (C) 2022 - present Instructure, Inc.
|
||||
*
|
||||
* This file is part of Canvas.
|
||||
*
|
||||
|
|
@ -16,43 +16,59 @@
|
|||
* with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
module.exports = {
|
||||
assumptions: {
|
||||
setPublicClassFields: true
|
||||
},
|
||||
|
||||
env: {
|
||||
production: {
|
||||
plugins: [
|
||||
'@babel/plugin-transform-react-constant-elements',
|
||||
'@babel/plugin-transform-react-inline-elements',
|
||||
'minify-constant-folding',
|
||||
'minify-dead-code-elimination',
|
||||
'minify-guarded-expressions',
|
||||
'transform-react-remove-prop-types',
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
presets: [
|
||||
[
|
||||
'@instructure/ui-babel-preset',
|
||||
{
|
||||
coverage: process.env.BABEL_ENV === 'test-node',
|
||||
transformImports: false,
|
||||
node: ['test-node', 'test'].includes(process.env.BABEL_ENV) || process.env.JEST_WORKER_ID,
|
||||
esModules: !(
|
||||
['test-node', 'test'].includes(process.env.BABEL_ENV) || process.env.JEST_WORKER_ID
|
||||
)
|
||||
}
|
||||
],
|
||||
[
|
||||
'@instructure/babel-preset-pretranslated-translations-package-format-message',
|
||||
{
|
||||
translationsDir: 'lib/canvas-rce',
|
||||
extractDefaultTranslations: false
|
||||
}
|
||||
]
|
||||
['@babel/preset-env', {
|
||||
useBuiltIns: 'entry',
|
||||
corejs: '3.20',
|
||||
modules: false,
|
||||
}],
|
||||
['@babel/preset-react', { useBuiltIns: true }],
|
||||
['@instructure/babel-preset-pretranslated-translations-package-format-message', {
|
||||
translationsDir: 'lib/canvas-rce',
|
||||
extractDefaultTranslations: false
|
||||
}]
|
||||
],
|
||||
|
||||
plugins: [
|
||||
[
|
||||
'transform-inline-environment-variables',
|
||||
{
|
||||
include: ['BUILD_LOCALE']
|
||||
}
|
||||
],
|
||||
'minify-constant-folding',
|
||||
'minify-guarded-expressions',
|
||||
'minify-dead-code-elimination',
|
||||
// something changed in @instructure/ui-babel-preset that necessitated
|
||||
// @babel/plugin-proposal-private-methods, {loose: true}
|
||||
// to stop the build from flooding the console output with warnings.
|
||||
// then that broke decorators, which RCEWrapper uses. The other
|
||||
// 2 plugin-proposal-* plugins fix that and get rid of the wornings
|
||||
['transform-inline-environment-variables', {
|
||||
include: ['BUILD_LOCALE']
|
||||
}],
|
||||
|
||||
['@babel/plugin-transform-runtime', {
|
||||
corejs: 3,
|
||||
helpers: true,
|
||||
useESModules: true,
|
||||
regenerator: true
|
||||
}],
|
||||
|
||||
['@babel/plugin-proposal-decorators', {legacy: true}],
|
||||
['@babel/plugin-proposal-class-properties', {loose: true}],
|
||||
['@babel/plugin-proposal-private-methods', {loose: true}]
|
||||
]
|
||||
|
||||
['@instructure/babel-plugin-themeable-styles', {
|
||||
ignore: () => false,
|
||||
postcssrc: require('@instructure/ui-postcss-config')()(),
|
||||
themeablerc: {},
|
||||
}]
|
||||
],
|
||||
|
||||
targets: {
|
||||
browsers: 'last 2 versions',
|
||||
esmodules: true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2019 - present Instructure, Inc.
|
||||
* Copyright (C) 2022 - present Instructure, Inc.
|
||||
*
|
||||
* This file is part of Canvas.
|
||||
*
|
||||
|
|
@ -39,5 +39,22 @@ module.exports = {
|
|||
'@instructure/ui-icons/es/svg': '<rootDir>/src/rce/__tests__/_mockIcons.js',
|
||||
// mock the tinymce-react Editor component
|
||||
'@tinymce/tinymce-react': '<rootDir>/src/rce/__mocks__/tinymceReact.js'
|
||||
},
|
||||
|
||||
transform: {
|
||||
'\\.jsx?$': ['babel-jest', {
|
||||
configFile: false,
|
||||
presets: [
|
||||
['@babel/preset-env'],
|
||||
['@babel/preset-react', {}],
|
||||
],
|
||||
plugins: [
|
||||
['@babel/plugin-proposal-decorators', {legacy: true}],
|
||||
['@instructure/babel-plugin-themeable-styles', {
|
||||
postcssrc: require('@instructure/ui-postcss-config')()(),
|
||||
themeablerc: {},
|
||||
}]
|
||||
],
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
"lint:fix": "eslint --fix \"src/**/*.js\" \"test/**/*.js\"",
|
||||
"_test": "Test cafe will be added back to test as part of CORE-2995",
|
||||
"test": "yarn test:mocha && yarn test:jest",
|
||||
"test:mocha": "BABEL_ENV=test-node mocha 'test/**/*.test.js' --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
|
||||
"test:mocha:one": "BABEL_ENV=test-node mocha --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
|
||||
"test:mocha:debug": "BABEL_ENV=test-node mocha --inspect-brk --require @instructure/canvas-theme --require jsdom-global/register --require ./babel-register.js --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
|
||||
"test:mocha": "mocha 'test/**/*.test.js' --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
|
||||
"test:mocha:one": "mocha --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
|
||||
"test:mocha:debug": "mocha --inspect-brk --timeout 5000 --reporter mocha-multi-reporters --reporter-options configFile=mocha-reporter-config.js",
|
||||
"test:jest": "jest --color --runInBand",
|
||||
"test:cafe": "yarn build:cafe && yarn test:cafe:only",
|
||||
"test:cafe:only": "testcafe chrome testcafe/**/*.test.js",
|
||||
"test:cafe:one": "testcafe chrome testcafe/**/*.test.js --test ",
|
||||
"test:cafe:all": "yarn build:cafe && testcafe chrome,firefox,safari testcafe/**/*.test.js",
|
||||
"test:cafe:debug": "testcafe --inspect-brk chrome testcafe/**/*.test.js",
|
||||
"test:watch": "BABEL_ENV=test-node mocha 'test/**/*.test.js' --require @instructure/canvas-theme --require ./babel-register.js --watch",
|
||||
"test:coverage": "cross-env BABEL_ENV=test-node nyc -r html -r json node_modules/.bin/mocha -r jsdom-global/register 'test/**/*.test.js'",
|
||||
"test:watch": "mocha 'test/**/*.test.js' --watch",
|
||||
"test:coverage": "cross-env nyc -r html -r json node_modules/.bin/mocha 'test/**/*.test.js'",
|
||||
"test:jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
|
||||
"debug": "BABEL_ENV=test-node inspect _mocha --no-timeouts --debug-brk 'test/**/*.test.js' --require @instructure/canvas-theme --require ./babel-register.js",
|
||||
"debug": "inspect _mocha --no-timeouts --debug-brk 'test/**/*.test.js'",
|
||||
"demo": "scripts/demo.sh",
|
||||
"demo:clean": "rm -f github-pages/dist/*",
|
||||
"demo:build": "webpack -c ./webpack.demo.config.js",
|
||||
|
|
@ -31,8 +31,10 @@
|
|||
"installTranslations": "scripts/installTranslations.js",
|
||||
"commitTranslations": "scripts/commitTranslations.sh",
|
||||
"build:all": "scripts/build.js",
|
||||
"build:es": "babel --out-dir es src --ignore '**/__tests__,**/__mocks__'",
|
||||
"build:cjs": "babel --out-dir lib src --ignore '**/__tests__,**/__mocks__' --config-file=./babel.config.cjs.js",
|
||||
"build:canvas": "scripts/build-canvas",
|
||||
"build:watch": "rm -rf es && ./node_modules/.bin/babel --out-dir es src --watch --verbose",
|
||||
"build:watch": "rm -rf es && babel --out-dir es src --watch --verbose",
|
||||
"build:cafe": "webpack --config webpack.testcafe.config.js",
|
||||
"prepublishOnly": "yarn build:all && yarn test",
|
||||
"fmt:check": "prettier -l '**/*.js'",
|
||||
|
|
@ -143,7 +145,6 @@
|
|||
"@babel/register": "7",
|
||||
"@instructure/browserslist-config-canvas-lms": ">=2",
|
||||
"@instructure/translations": ">=1",
|
||||
"@instructure/ui-babel-preset": "7",
|
||||
"@testing-library/dom": "^7",
|
||||
"@testing-library/jest-dom": "^5",
|
||||
"@testing-library/react": "^11",
|
||||
|
|
|
|||
|
|
@ -6,16 +6,12 @@ set -e
|
|||
# from failing
|
||||
mkdir -p lib
|
||||
mkdir -p es
|
||||
mkdir -p canvas
|
||||
|
||||
# We can't delete the directories themselves when inside docker because they are the volume mount points, so instead we
|
||||
# delete everything in them.
|
||||
rm -rf lib/*
|
||||
rm -rf es/*
|
||||
rm -rf canvas/*
|
||||
|
||||
yarn installTranslations
|
||||
|
||||
JEST_WORKER_ID=true ./node_modules/.bin/babel --out-dir lib src --ignore '**/__tests__,**/__mocks__'
|
||||
./node_modules/.bin/babel --out-dir es src --ignore '**/__tests__,**/__mocks__'
|
||||
cp -r lib locales README.md package.json canvas
|
||||
yarn build:cjs
|
||||
yarn build:es
|
||||
|
|
|
|||
|
|
@ -17,14 +17,25 @@
|
|||
*/
|
||||
|
||||
const webpack = require('webpack')
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
// this has been broken for a while and babel needs to be reconfigured for
|
||||
// it without depending on @instructure/ui-babel-preset
|
||||
{
|
||||
test: /\.js?$/,
|
||||
use: ['babel-loader'],
|
||||
exclude: /node_modules/
|
||||
test: /\.jsx?$/,
|
||||
use: [{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
configFile: false,
|
||||
}
|
||||
}],
|
||||
include: [
|
||||
path.resolve(__dirname, 'src'),
|
||||
path.resolve(__dirname, 'demo'),
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
|
|
|
|||
51
yarn.lock
51
yarn.lock
|
|
@ -1465,7 +1465,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
|
||||
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
|
||||
|
||||
"@instructure/babel-plugin-themeable-styles@7", "@instructure/babel-plugin-themeable-styles@^7.7.1":
|
||||
"@instructure/babel-plugin-themeable-styles@7":
|
||||
version "7.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@instructure/babel-plugin-themeable-styles/-/babel-plugin-themeable-styles-7.7.1.tgz#54b64939e0674f1d2306de213fa4e2205744435f"
|
||||
integrity sha512-G12DlgkZ3Up1HjeahxlNI+8B/SrZIZw+6/hwm+40pZmlc4jBaGWRiJVE4WGcy2Ed1g1WGNoqLxACLDC+JwUSnQ==
|
||||
|
|
@ -1504,13 +1504,6 @@
|
|||
dependencies:
|
||||
globby "^10.0.1"
|
||||
|
||||
"@instructure/babel-plugin-transform-imports@^7.7.1":
|
||||
version "7.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@instructure/babel-plugin-transform-imports/-/babel-plugin-transform-imports-7.7.1.tgz#3b85872e8d3f8f4abd92ba4f2cb5bd2c2fa69d97"
|
||||
integrity sha512-UjQ4EixzkXOa/IlfKtHDpB4ugIw5qOMIi+KFNXRL3hrs3n5oQChrkZrryVS3C7w3D2qXwmfC8HYof/5VFMtn2g==
|
||||
dependencies:
|
||||
globby "^10.0.1"
|
||||
|
||||
"@instructure/brandable_css@^3":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@instructure/brandable_css/-/brandable_css-3.0.1.tgz#029ff3cfa0b65887746c2d4fe6053d078b2ba8ef"
|
||||
|
|
@ -1907,41 +1900,6 @@
|
|||
"@babel/runtime" "^7.9.2"
|
||||
axe-core "^3.3.2"
|
||||
|
||||
"@instructure/ui-babel-preset@7":
|
||||
version "7.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@instructure/ui-babel-preset/-/ui-babel-preset-7.7.1.tgz#619ce4c8025d65d86a2bf53e9d0bbeaa8287c5bd"
|
||||
integrity sha512-K5XQtTYwVEW1Ckmuli3gIATU6oKIiku37yo8Hbs2IPu6miHZ7ba48Nu84z/SW05C0W2hk9pzGdKQO5heqybYXg==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/plugin-proposal-class-properties" "^7.8.3"
|
||||
"@babel/plugin-proposal-decorators" "^7.8.3"
|
||||
"@babel/plugin-proposal-export-default-from" "^7.8.3"
|
||||
"@babel/plugin-proposal-object-rest-spread" "^7.9.5"
|
||||
"@babel/plugin-proposal-optional-chaining" "^7"
|
||||
"@babel/plugin-syntax-dynamic-import" "^7.8.3"
|
||||
"@babel/plugin-transform-classes" "^7.9.5"
|
||||
"@babel/plugin-transform-destructuring" "^7.9.5"
|
||||
"@babel/plugin-transform-react-constant-elements" "^7.9.0"
|
||||
"@babel/plugin-transform-react-display-name" "^7.8.3"
|
||||
"@babel/plugin-transform-runtime" "^7.9.0"
|
||||
"@babel/preset-env" "^7.9.5"
|
||||
"@babel/preset-react" "^7.9.4"
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@instructure/babel-plugin-themeable-styles" "^7.7.1"
|
||||
"@instructure/babel-plugin-transform-imports" "^7.7.1"
|
||||
"@instructure/browserslist-config-instui" "^7.7.1"
|
||||
"@instructure/config-loader" "^7.7.1"
|
||||
"@instructure/ui-postcss-config" "^7.7.1"
|
||||
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"
|
||||
babel-plugin-transform-ensure-ignore "^0.1.0"
|
||||
babel-plugin-transform-remove-console "^6.9.4"
|
||||
babel-plugin-transform-undefined-to-void "^6.9.4"
|
||||
core-js "^3.2.1"
|
||||
|
||||
"@instructure/ui-babel-preset@^6":
|
||||
version "6.27.1"
|
||||
resolved "https://registry.yarnpkg.com/@instructure/ui-babel-preset/-/ui-babel-preset-6.27.1.tgz#9e0e5666b8b9b165bdfb90d54fd837d63f0ab941"
|
||||
|
|
@ -7322,13 +7280,6 @@ babel-messages@^6.23.0:
|
|||
dependencies:
|
||||
babel-runtime "^6.22.0"
|
||||
|
||||
babel-plugin-add-import-extension@^1.4.3:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-add-import-extension/-/babel-plugin-add-import-extension-1.5.1.tgz#bd32f1107fa297386d7a34bffe84c97a6879166f"
|
||||
integrity sha512-/aEHejW3v0HqUDasz5fCmCwU6P2r9fyzyZfXzvTbU0bLqtC7yVKMWpK4bNDW+OZ24XR6N/tap0pqfRB0PZ7xrA==
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "^7.13.0"
|
||||
|
||||
babel-plugin-add-react-displayname@^0.0.5:
|
||||
version "0.0.5"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
|
||||
|
|
|
|||
Loading…
Reference in New Issue