From 3b14503f391f4d28ce753fbde382f4074bbf7dfb Mon Sep 17 00:00:00 2001 From: Mikyung Kim Date: Mon, 1 Feb 2021 17:11:45 +0900 Subject: [PATCH 1/4] PLAT-121645: Add support for new JSX Transform Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com) --- config/babel.config.js | 2 +- config/webpack.config.js | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/config/babel.config.js b/config/babel.config.js index 021863dd..a4bd156a 100644 --- a/config/babel.config.js +++ b/config/babel.config.js @@ -47,7 +47,7 @@ module.exports = function (api) { development: env !== 'production' && !es5Standalone, // Will use the native built-in instead of trying to polyfill // behavior for any plugins that require one. - useBuiltIns: true + ...(process.env.DISABLE_NEW_JSX_TRANSFORM ? { useBuiltIns: true } : { runtime: 'automatic' }), } ], ['@babel/preset-typescript'] diff --git a/config/webpack.config.js b/config/webpack.config.js index 5aa5f68a..aad707b7 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -463,7 +463,13 @@ module.exports = function (env) { resolvePluginsRelativeTo: __dirname, // @remove-on-eject-begin baseConfig: { - extends: [require.resolve('eslint-config-enact')] + extends: [require.resolve('eslint-config-enact')], + rules: { + ...(process.env.DISABLE_NEW_JSX_TRANSFORM && { + 'react/jsx-uses-react': 'warn', + 'react/react-in-jsx-scope': 'warn' + }) + } }, useEslintrc: false, // @remove-on-eject-end From 7ec8fa0c1a3d2ef02e38fbd408d126e958705c41 Mon Sep 17 00:00:00 2001 From: Mikyung Kim Date: Mon, 1 Feb 2021 17:23:43 +0900 Subject: [PATCH 2/4] fix lint error Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com) --- config/babel.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/babel.config.js b/config/babel.config.js index a4bd156a..eed75ffd 100644 --- a/config/babel.config.js +++ b/config/babel.config.js @@ -47,7 +47,7 @@ module.exports = function (api) { development: env !== 'production' && !es5Standalone, // Will use the native built-in instead of trying to polyfill // behavior for any plugins that require one. - ...(process.env.DISABLE_NEW_JSX_TRANSFORM ? { useBuiltIns: true } : { runtime: 'automatic' }), + ...(process.env.DISABLE_NEW_JSX_TRANSFORM ? {useBuiltIns: true} : {runtime: 'automatic'}), } ], ['@babel/preset-typescript'] From 2a751f4ee0dad0593fb6f3a573c3e01621c71524 Mon Sep 17 00:00:00 2001 From: Mikyung Kim Date: Mon, 1 Feb 2021 17:31:56 +0900 Subject: [PATCH 3/4] fix lint Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com) --- config/babel.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/babel.config.js b/config/babel.config.js index eed75ffd..f67460e4 100644 --- a/config/babel.config.js +++ b/config/babel.config.js @@ -47,7 +47,7 @@ module.exports = function (api) { development: env !== 'production' && !es5Standalone, // Will use the native built-in instead of trying to polyfill // behavior for any plugins that require one. - ...(process.env.DISABLE_NEW_JSX_TRANSFORM ? {useBuiltIns: true} : {runtime: 'automatic'}), + ...(process.env.DISABLE_NEW_JSX_TRANSFORM ? {useBuiltIns: true} : {runtime: 'automatic'}) } ], ['@babel/preset-typescript'] From b6c41d2d72d5a2ddbddb97c6b81742f539231a8a Mon Sep 17 00:00:00 2001 From: Mikyung Kim Date: Tue, 2 Feb 2021 09:37:20 +0900 Subject: [PATCH 4/4] Added a guard Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com) --- config/babel.config.js | 16 +++++++++++++++- config/webpack.config.js | 16 +++++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/config/babel.config.js b/config/babel.config.js index f67460e4..82993ecc 100644 --- a/config/babel.config.js +++ b/config/babel.config.js @@ -6,6 +6,20 @@ */ const path = require('path'); +// Check if JSX transform is able +const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } +})(); + module.exports = function (api) { const env = process.env.BABEL_ENV || process.env.NODE_ENV; const es5Standalone = process.env.ES5 && process.env.ES5 !== 'false'; @@ -47,7 +61,7 @@ module.exports = function (api) { development: env !== 'production' && !es5Standalone, // Will use the native built-in instead of trying to polyfill // behavior for any plugins that require one. - ...(process.env.DISABLE_NEW_JSX_TRANSFORM ? {useBuiltIns: true} : {runtime: 'automatic'}) + ...(!hasJsxRuntime ? {useBuiltIns: true} : {runtime: 'automatic'}) } ], ['@babel/preset-typescript'] diff --git a/config/webpack.config.js b/config/webpack.config.js index aad707b7..01bf7fb6 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -47,6 +47,20 @@ module.exports = function (env) { // Sets the browserslist default fallback set of browsers to the Enact default browser support list. app.setEnactTargetsAsDefault(); + // Check if JSX transform is able + const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } + })(); + // Check if TypeScript is setup const useTypeScript = fs.existsSync('tsconfig.json'); @@ -465,7 +479,7 @@ module.exports = function (env) { baseConfig: { extends: [require.resolve('eslint-config-enact')], rules: { - ...(process.env.DISABLE_NEW_JSX_TRANSFORM && { + ...(!hasJsxRuntime && { 'react/jsx-uses-react': 'warn', 'react/react-in-jsx-scope': 'warn' })