feat(ARCH-737/scripts): add jsx file extension support (#5256)

.changeset/fuzzy-seas-stare.md

@@ -0,0 +1,5 @@
+---
+"@talend/scripts-config-react-webpack": minor
+---
+
+feat: add jsx file extension support

package.json

@@ -38,6 +38,7 @@
     "prepare": "husky install"
   },
   "resolutions": {
+    "**/ace-builds": "1.10.1",
     "**/cypress": "^13.6.0",
     "**/@types/react": "^18.2.7",
     "**/@types/react-dom": "^18.2.7",

packages/playground/src/app/components/Dataviz.js → packages/playground/src/app/components/Dataviz.jsx

@@ -1,4 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+import { ErrorBoundary } from '@talend/react-cmf';
+import Layout from '@talend/react-components/lib/Layout';
+import HeaderBar from '@talend/react-containers/lib/HeaderBar';
+import SidePanel from '@talend/react-containers/lib/SidePanel';
 import {
 	GeoChart,
 	getGeoChartConfig,
@@ -7,10 +12,6 @@ import {
 	KeyValueTooltip,
 	ValueType,
 } from '@talend/react-dataviz';
-import { ErrorBoundary } from '@talend/react-cmf';
-import Layout from '@talend/react-components/lib/Layout';
-import SidePanel from '@talend/react-containers/lib/SidePanel';
-import HeaderBar from '@talend/react-containers/lib/HeaderBar';
 
 const data = [
 	{

packages/playground/src/app/components/FacetedSearch.js → packages/playground/src/app/components/FacetedSearch.jsx

@@ -1,9 +1,9 @@
-import FacetedSearch from '@talend/react-faceted-search';
-import Layout from '@talend/react-components/lib/Layout';
-import SidePanel from '@talend/react-containers/lib/SidePanel';
-import HeaderBar from '@talend/react-containers/lib/HeaderBar';
 // eslint-disable-next-line @talend/import-depth
 import * as badges from '@talend/react-faceted-search/stories/badgesDefinitions';
+import Layout from '@talend/react-components/lib/Layout';
+import HeaderBar from '@talend/react-containers/lib/HeaderBar';
+import SidePanel from '@talend/react-containers/lib/SidePanel';
+import FacetedSearch from '@talend/react-faceted-search';
 
 function action(msg) {
 	// eslint-disable-next-line no-console

packages/playground/src/app/components/Icons.js → packages/playground/src/app/components/Icons.jsx

@@ -1,8 +1,8 @@
-import Layout from '@talend/react-components/lib/Layout';
-import SidePanel from '@talend/react-containers/lib/SidePanel';
-import HeaderBar from '@talend/react-containers/lib/HeaderBar';
 // eslint-disable-next-line @talend/import-depth
 import logo from '@talend/icons/src/svg/products/logo.svg';
+import Layout from '@talend/react-components/lib/Layout';
+import HeaderBar from '@talend/react-containers/lib/HeaderBar';
+import SidePanel from '@talend/react-containers/lib/SidePanel';
 
 export function Icons() {
 	return (

packages/playground/src/app/components/List.js → packages/playground/src/app/components/List.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
-
-import { List, Layout, SubHeaderBar } from '@talend/react-components';
-import { SidePanel, HeaderBar } from '@talend/react-containers';
+import { Layout, List, SubHeaderBar } from '@talend/react-components';
+import { HeaderBar, SidePanel } from '@talend/react-containers';
 
 const props = {
 	id: 'talend',

tools/scripts-config-react-webpack/config/webpack.config.common.js

@@ -121,7 +121,7 @@ function getWebpackRules(srcDirectories, useTypescript, devMode) {
 			enforce: 'pre',
 		},
 		{
-			test: /\.(js|ts|tsx)$/,
+			test: /\.(js|jsx|ts|tsx)$/,
 			exclude: /node_modules/,
 			include: srcDirectories,
 			use: getJSAndTSLoader(),

tools/scripts-config-react-webpack/config/webpack.config.js

@@ -281,7 +281,9 @@ module.exports = ({ getUserConfig, mode }) => {
 			},
 			devtool: 'source-map',
 			resolve: {
-				extensions: ['.js', useTypescript && '.ts', useTypescript && '.tsx'].filter(Boolean),
+				extensions: ['.js', '.jsx', useTypescript && '.ts', useTypescript && '.tsx'].filter(
+					Boolean,
+				),
 				fallback: {
 					url: false,
 				},
@@ -295,7 +297,7 @@ module.exports = ({ getUserConfig, mode }) => {
 						enforce: 'pre',
 					},
 					{
-						test: useTypescript ? /\.(js|ts|tsx)$/ : /\.js$/,
+						test: useTypescript ? /\.(js|jsx|ts|tsx)$/ : /\.(js|jsx)$/,
 						exclude: /node_modules/,
 						include: srcDirectories,
 						use: getJSAndTSLoader(),

tools/scripts-config-react-webpack/config/webpack.config.umd.js

@@ -53,7 +53,7 @@ module.exports = options => {
 			module: {
 				rules: [
 					{
-						test: useTypescript ? /\.(js|ts|tsx)$/ : /\.js$/,
+						test: useTypescript ? /\.(js|jsx|ts|tsx)$/ : /\.js$/,
 						exclude: /node_modules/,
 						use: getJSAndTSLoader(),
 					},

yarn.lock

@@ -5509,16 +5509,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-[email protected]:
+[email protected], ace-builds@^1.4.14:
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.10.1.tgz#612b78fabb0f2b6bce2d13ef9e44565d1fe01c6b"
   integrity sha512-w8Xj6lZUtOYAquVYvdpZhb0GxXrZ+qpVfgj5LP2FwUbXE8fPrCmfu86FjwOiSphx/8PMbXXVldFLD2+RIXayyA==
 
-ace-builds@^1.4.14:
-  version "1.32.6"
-  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.32.6.tgz#454ec8bc9235fbb960b8d8b86e698f941c104de2"
-  integrity sha512-dO5BnyDOhCnznhOpILzXq4jqkbhRXxNkf3BuVTmyxGyRLrhddfdyk6xXgy+7A8LENrcYoFi/sIxMuH3qjNUN4w==
-
 acorn-class-fields@^0.3.7:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.3.7.tgz#a35122f3cc6ad2bb33b1857e79215677fcfdd720"
@@ -10722,7 +10717,18 @@ html-tags@^3.1.0, html-tags@^3.3.1:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
-"html-webpack-plugin-5@npm:html-webpack-plugin@^5", html-webpack-plugin@^5.5.0, html-webpack-plugin@^5.6.0:
+"html-webpack-plugin-5@npm:html-webpack-plugin@^5":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz#50a8fa6709245608cb00e811eacecb8e0d7b7ea0"
+  integrity sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==
+  dependencies:
+    "@types/html-minifier-terser" "^6.0.0"
+    html-minifier-terser "^6.0.2"
+    lodash "^4.17.21"
+    pretty-error "^4.0.0"
+    tapable "^2.0.0"
+
+html-webpack-plugin@^5.5.0, html-webpack-plugin@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz#50a8fa6709245608cb00e811eacecb8e0d7b7ea0"
   integrity sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==
@@ -17645,7 +17651,16 @@ string-replace-loader@^2.3.0:
     loader-utils "^1.2.3"
     schema-utils "^2.6.5"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17741,7 +17756,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17755,6 +17770,13 @@ strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -19692,7 +19714,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -19710,6 +19732,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"