From 9e388c20ce6659d11f43b3c659a6b59eb21ef583 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Mon, 25 Nov 2024 20:08:05 +0530 Subject: [PATCH] add: aliases for imports and fix exports --- .eslintrc | 15 ++- modules/settings/assets/js/admin.js | 2 +- modules/settings/assets/js/app.js | 4 +- .../js/components/connect-modal/index.js | 2 +- .../assets/js/components/icon-select/index.js | 27 +++-- .../assets/js/components/icon-size/index.js | 2 +- .../js/components/my-account-menu/index.js | 6 +- .../js/components/notifications/index.js | 2 +- .../js/components/sidebar-app-bar/index.js | 7 +- .../js/components/sidebar-menu/index.js | 2 +- .../assets/js/components/sidebar-menu/menu.js | 2 +- .../assets/js/layouts/icon-design-settings.js | 2 +- .../js/layouts/position-settings-desktop.js | 2 +- .../assets/js/layouts/position-settings.js | 2 +- modules/settings/assets/js/layouts/sidebar.js | 4 +- .../js/pages/accessibility-statement.js | 4 +- .../settings/assets/js/pages/icon-settings.js | 4 +- modules/settings/assets/js/pages/index.js | 6 +- modules/settings/assets/js/pages/menu.js | 4 +- package-lock.json | 111 +++++++++++++++++- package.json | 5 +- webpack.config.js | 10 ++ 22 files changed, 187 insertions(+), 38 deletions(-) diff --git a/.eslintrc b/.eslintrc index 0ad9518b..a71f5481 100644 --- a/.eslintrc +++ b/.eslintrc @@ -9,6 +9,16 @@ "babel", "react" ], + "settings": { + "import/resolver": { + "node": { + "paths": ["node_modules"] + }, + "webpack": { + "config": "webpack.config.js" + } + } + }, "env": { "browser": true, "node": true, @@ -47,7 +57,10 @@ "caseInsensitive": false } } - ] + ], + "import/newline-after-import": ["error", { + "count": 1 + }] }, "parser": "@babel/eslint-parser" } diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js index 811e9775..c3b25101 100644 --- a/modules/settings/assets/js/admin.js +++ b/modules/settings/assets/js/admin.js @@ -1,7 +1,7 @@ +import { SettingsProvider, NotificationsProvider } from '@ea11y/hooks'; import { StrictMode, Fragment, createRoot } from '@wordpress/element'; import App from './app'; import { PluginSettingsProvider } from './contexts/plugin-settings'; -import { SettingsProvider, NotificationsProvider } from './hooks'; const rootNode = document.getElementById( 'ea11y-app' ); diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js index 54d46489..b7942970 100644 --- a/modules/settings/assets/js/app.js +++ b/modules/settings/assets/js/app.js @@ -3,9 +3,9 @@ import Box from '@elementor/ui/Box'; import DirectionProvider from '@elementor/ui/DirectionProvider'; import Grid from '@elementor/ui/Grid'; import { ThemeProvider } from '@elementor/ui/styles'; -import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from './components'; +import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from '@ea11y/components'; +import { useNotificationSettings, useSettings } from '@ea11y/hooks'; import { usePluginSettingsContext } from './contexts/plugin-settings'; -import { useNotificationSettings, useSettings } from './hooks'; import { Sidebar } from './layouts/sidebar'; const App = () => { diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js index 8ea7f9c3..1179e4d4 100644 --- a/modules/settings/assets/js/components/connect-modal/index.js +++ b/modules/settings/assets/js/components/connect-modal/index.js @@ -3,8 +3,8 @@ import Button from '@elementor/ui/Button'; import Grid from '@elementor/ui/Grid'; import Modal from '@elementor/ui/Modal'; import Typography from '@elementor/ui/Typography'; +import { useAuth, useModal } from '@ea11y/hooks'; import { __ } from '@wordpress/i18n'; -import { useAuth, useModal } from '../../hooks'; function ConnectModal() { const { isOpen } = useModal(); diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js index e5d1efd2..cd6bd41c 100644 --- a/modules/settings/assets/js/components/icon-select/index.js +++ b/modules/settings/assets/js/components/icon-select/index.js @@ -4,19 +4,29 @@ import Paper from '@elementor/ui/Paper'; import Radio from '@elementor/ui/Radio'; import RadioGroup from '@elementor/ui/RadioGroup'; import Typography from '@elementor/ui/Typography'; +import { AccessibilityControlsIcon, AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '@ea11y/icons'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { AccessibilityControlsIcon, AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '../../icons'; const IconSelect = ( props ) => { const [ selectedValue, setSelectedValue ] = useState( 'person' ); - const optionStyle = { color: 'info.main', fontSize: 44 }; + const optionStyle = { + color: 'info.main', fontSize: 44, + }; const options = [ - { value: 'person', icon: , label: __( 'Accessibility Person Icon', 'pojo-accessibility' ) }, - { value: 'eye', icon: , label: __( 'Accessibility Eye Icon', 'pojo-accessibility' ) }, - { value: 'text', icon: , label: __( 'Accessibility Text Badge Icon', 'pojo-accessibility' ) }, - { value: 'controls', icon: , label: __( 'Accessibility Controls Slider Icon', 'pojo-accessibility' ) }, + { + value: 'person', icon: , label: __( 'Accessibility Person Icon', 'pojo-accessibility' ), + }, + { + value: 'eye', icon: , label: __( 'Accessibility Eye Icon', 'pojo-accessibility' ), + }, + { + value: 'text', icon: , label: __( 'Accessibility Text Badge Icon', 'pojo-accessibility' ), + }, + { + value: 'controls', icon: , label: __( 'Accessibility Controls Slider Icon', 'pojo-accessibility' ), + }, ]; return ( @@ -59,7 +69,10 @@ const IconSelect = ( props ) => { cursor: 'pointer', } } >{ option.icon } - + ) ) } diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js index f8114d59..7f041a8f 100644 --- a/modules/settings/assets/js/components/icon-size/index.js +++ b/modules/settings/assets/js/components/icon-size/index.js @@ -4,9 +4,9 @@ import Paper from '@elementor/ui/Paper'; import Radio from '@elementor/ui/Radio'; import RadioGroup from '@elementor/ui/RadioGroup'; import Typography from '@elementor/ui/Typography'; +import { AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '@ea11y/icons'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '../../icons'; const IconSize = ( props ) => { const [ selectedValue, setSelectedValue ] = useState( 'medium' ); diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js index 2ec1de28..8e39d5df 100644 --- a/modules/settings/assets/js/components/my-account-menu/index.js +++ b/modules/settings/assets/js/components/my-account-menu/index.js @@ -9,12 +9,12 @@ import Menu from '@elementor/ui/Menu'; import MenuItem from '@elementor/ui/MenuItem'; import Typography from '@elementor/ui/Typography'; import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui/usePopupState'; -import { __ } from '@wordpress/i18n'; -import { useSettings } from '../../hooks'; +import { useSettings } from '@ea11y/hooks'; import { CreditCardIcon, UserArrowIcon, -} from '../../icons'; +} from '@ea11y/icons'; +import { __ } from '@wordpress/i18n'; const MyAccountMenu = () => { const { openSidebar } = useSettings(); diff --git a/modules/settings/assets/js/components/notifications/index.js b/modules/settings/assets/js/components/notifications/index.js index 367ee784..69394753 100644 --- a/modules/settings/assets/js/components/notifications/index.js +++ b/modules/settings/assets/js/components/notifications/index.js @@ -1,6 +1,6 @@ import Alert from '@elementor/ui/Alert'; import Snackbar from '@elementor/ui/Snackbar'; -import { useNotificationSettings } from '../../hooks'; +import { useNotificationSettings } from '@ea11y/hooks'; const Notifications = ( { type, message } ) => { const { diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js index b7cecede..516ebb26 100644 --- a/modules/settings/assets/js/components/sidebar-app-bar/index.js +++ b/modules/settings/assets/js/components/sidebar-app-bar/index.js @@ -3,12 +3,9 @@ import Box from '@elementor/ui/Box'; import IconButton from '@elementor/ui/IconButton'; import Toolbar from '@elementor/ui/Toolbar'; import Typography from '@elementor/ui/Typography'; +import { useSettings } from '@ea11y/hooks'; +import { ElementorLogo, SquareRoundedChevronsLeft } from '@ea11y/icons'; import { __ } from '@wordpress/i18n'; -import { useSettings } from '../../hooks'; -import { - ElementorLogo, - SquareRoundedChevronsLeft, -} from '../../icons'; const SidebarAppBar = () => { const { openSidebar, setOpenSidebar } = useSettings(); diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js index 52d2442d..5c9eb017 100644 --- a/modules/settings/assets/js/components/sidebar-menu/index.js +++ b/modules/settings/assets/js/components/sidebar-menu/index.js @@ -4,8 +4,8 @@ import ListItem from '@elementor/ui/ListItem'; import ListItemButton from '@elementor/ui/ListItemButton'; import ListItemIcon from '@elementor/ui/ListItemIcon'; import ListItemText from '@elementor/ui/ListItemText'; +import { useSettings } from '@ea11y/hooks'; import { useState } from '@wordpress/element'; -import { useSettings } from '../../hooks'; import { MenuItems } from './menu'; const SidebarMenu = () => { diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js index 81a8f079..9f82b18f 100644 --- a/modules/settings/assets/js/components/sidebar-menu/menu.js +++ b/modules/settings/assets/js/components/sidebar-menu/menu.js @@ -1,6 +1,6 @@ import { PagesIcon } from '@elementor/icons'; +import { WidgetIcon } from '@ea11y/icons'; import { __ } from '@wordpress/i18n'; -import { WidgetIcon } from '../../icons'; import { AccessibilityStatement, Menu, IconSettings } from '../../pages'; export const MenuItems = { diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js index d0be5427..3390d1de 100644 --- a/modules/settings/assets/js/layouts/icon-design-settings.js +++ b/modules/settings/assets/js/layouts/icon-design-settings.js @@ -1,8 +1,8 @@ import Box from '@elementor/ui/Box'; import Grid from '@elementor/ui/Grid'; import Typography from '@elementor/ui/Typography'; +import { ColorPicker, IconSelect, IconSize } from '@ea11y/components'; import { __ } from '@wordpress/i18n'; -import { ColorPicker, IconSelect, IconSize } from '../components'; const IconDesignSettings = () => { return ( diff --git a/modules/settings/assets/js/layouts/position-settings-desktop.js b/modules/settings/assets/js/layouts/position-settings-desktop.js index ab129bae..52ef005e 100644 --- a/modules/settings/assets/js/layouts/position-settings-desktop.js +++ b/modules/settings/assets/js/layouts/position-settings-desktop.js @@ -2,9 +2,9 @@ import Box from '@elementor/ui/Box'; import FormControlLabel from '@elementor/ui/FormControlLabel'; import Switch from '@elementor/ui/Switch'; import Typography from '@elementor/ui/Typography'; +import { AlignmentMatrixControl, PositionControl } from '@ea11y/components'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { AlignmentMatrixControl, PositionControl } from '../components'; const PositionSettingsDesktop = () => { const [ hiddenOnDesktop, setHiddenOnDesktop ] = useState( false ); diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js index 8574cbe1..56f5292a 100644 --- a/modules/settings/assets/js/layouts/position-settings.js +++ b/modules/settings/assets/js/layouts/position-settings.js @@ -6,9 +6,9 @@ import TabPanel from '@elementor/ui/TabPanel'; import Tabs from '@elementor/ui/Tabs'; import Typography from '@elementor/ui/Typography'; import useTabs from '@elementor/ui/useTabs'; +import { PositionSettingsDesktop } from '@ea11y/layouts'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { PositionSettingsDesktop } from '../layouts'; const TABS = { one: 'one', diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js index aaf462a3..1f81610e 100644 --- a/modules/settings/assets/js/layouts/sidebar.js +++ b/modules/settings/assets/js/layouts/sidebar.js @@ -1,7 +1,7 @@ import Box from '@elementor/ui/Box'; import Drawer from '@elementor/ui/Drawer'; -import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '../components'; -import { useSettings } from '../hooks'; +import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '@ea11y/components'; +import { useSettings } from '@ea11y/hooks'; export const Sidebar = () => { const { openSidebar } = useSettings(); diff --git a/modules/settings/assets/js/pages/accessibility-statement.js b/modules/settings/assets/js/pages/accessibility-statement.js index 1146e3ca..c4a0c857 100644 --- a/modules/settings/assets/js/pages/accessibility-statement.js +++ b/modules/settings/assets/js/pages/accessibility-statement.js @@ -1,3 +1,5 @@ -export const AccessibilityStatement = () => { +const AccessibilityStatement = () => { return (

AccessibilityStatement

); }; + +export default AccessibilityStatement; diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js index bfb55564..bb8bb85f 100644 --- a/modules/settings/assets/js/pages/icon-settings.js +++ b/modules/settings/assets/js/pages/icon-settings.js @@ -1,3 +1,5 @@ -export const IconSettings = () => { +const IconSettings = () => { return (

IconSettings

); }; + +export default IconSettings; diff --git a/modules/settings/assets/js/pages/index.js b/modules/settings/assets/js/pages/index.js index 142329d7..e2531a2a 100644 --- a/modules/settings/assets/js/pages/index.js +++ b/modules/settings/assets/js/pages/index.js @@ -1,3 +1,3 @@ -export { AccessibilityStatement } from './accessibility-statement'; -export { IconSettings } from './icon-settings'; -export { Menu } from './menu'; +export { default as AccessibilityStatement } from './accessibility-statement'; +export { default as IconSettings } from './icon-settings'; +export { default as Menu } from './menu'; diff --git a/modules/settings/assets/js/pages/menu.js b/modules/settings/assets/js/pages/menu.js index f4bbf45e..2b618ce1 100644 --- a/modules/settings/assets/js/pages/menu.js +++ b/modules/settings/assets/js/pages/menu.js @@ -1,3 +1,5 @@ -export const Menu = () => { +const Menu = () => { return (

Menu

); }; + +export default Menu; diff --git a/package-lock.json b/package-lock.json index 6f980a24..aee17755 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,10 @@ "@wordpress/date": "^5.10.0", "@wordpress/element": "^6.10.0", "@wordpress/i18n": "^5.10.0", - "@wordpress/url": "^4.10.0" + "@wordpress/url": "^4.10.0", + "husky": "^9.1.6", + "prop-types": "^15.8.1", + "react-colorful": "^5.6.1" }, "devDependencies": { "@eslint/js": "^9.13.0", @@ -25,6 +28,7 @@ "@wordpress/eslint-plugin": "^21.3.0", "@wordpress/scripts": "^30.3.0", "eslint": "^8.57.1", + "eslint-import-resolver-webpack": "^0.13.9", "eslint-plugin-babel": "^5.3.1", "eslint-plugin-import": "^2.31.0", "eslint-plugin-jsx-a11y": "^6.10.1", @@ -10782,6 +10786,104 @@ "ms": "^2.1.1" } }, + "node_modules/eslint-import-resolver-webpack": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.9.tgz", + "integrity": "sha512-yGngeefNiHXau2yzKKs2BNON4HLpxBabY40BGL/vUSKZtqzjlVsTTZm57jhHULhm+mJEwKsEIIN3NXup5AiiBQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^3.2.7", + "enhanced-resolve": "^0.9.1", + "find-root": "^1.1.0", + "hasown": "^2.0.0", + "interpret": "^1.4.0", + "is-core-module": "^2.13.1", + "is-regex": "^1.1.4", + "lodash": "^4.17.21", + "resolve": "^2.0.0-next.5", + "semver": "^5.7.2" + }, + "engines": { + "node": ">= 6" + }, + "peerDependencies": { + "eslint-plugin-import": ">=1.4.0", + "webpack": ">=1.11.0" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/enhanced-resolve": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz", + "integrity": "sha512-kxpoMgrdtkXZ5h0SeraBS1iRntpTpQ3R8ussdb38+UAFnMGX5DDyJXePm+OCHOcoXvHDw7mc2erbJBpDnl7TPw==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.2", + "memory-fs": "^0.2.0", + "tapable": "^0.1.8" + }, + "engines": { + "node": ">=0.6" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/resolve": { + "version": "2.0.0-next.5", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", + "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/tapable": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz", + "integrity": "sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.6" + } + }, "node_modules/eslint-module-utils": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz", @@ -15812,6 +15914,13 @@ "resolved": "https://registry.npmjs.org/memize/-/memize-2.1.0.tgz", "integrity": "sha512-yywVJy8ctVlN5lNPxsep5urnZ6TTclwPEyigM9M3Bi8vseJBOfqNrGWN/r8NzuIt3PovM323W04blJfGQfQSVg==" }, + "node_modules/memory-fs": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz", + "integrity": "sha512-+y4mDxU4rvXXu5UDSGCGNiesFmwCHuefGMoPCO1WYucNYj7DsLqrFaa2fXVI0H+NNiPTwwzKwspn9yTZqUGqng==", + "dev": true, + "license": "MIT" + }, "node_modules/meow": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz", diff --git a/package.json b/package.json index 5d8b204e..e8767b27 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@wordpress/eslint-plugin": "^21.3.0", "@wordpress/scripts": "^30.3.0", "eslint": "^8.57.1", + "eslint-import-resolver-webpack": "^0.13.9", "eslint-plugin-babel": "^5.3.1", "eslint-plugin-import": "^2.31.0", "eslint-plugin-jsx-a11y": "^6.10.1", @@ -42,7 +43,7 @@ "@wordpress/i18n": "^5.10.0", "@wordpress/url": "^4.10.0", "husky": "^9.1.6", - "react-colorful": "^5.6.1", - "prop-types": "^15.8.1" + "prop-types": "^15.8.1", + "react-colorful": "^5.6.1" } } diff --git a/webpack.config.js b/webpack.config.js index b40d4aae..ae6ffc06 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,4 +17,14 @@ module.exports = { ...defaultConfig.output, path: path.resolve( process.cwd(), 'assets/build' ), }, + resolve: { + alias: { + '@ea11y/hooks': path.resolve( __dirname, 'modules/settings/assets/js/hooks/' ), + '@ea11y/components': path.resolve( __dirname, 'modules/settings/assets/js/components/' ), + '@ea11y/icons': path.resolve( __dirname, 'modules/settings/assets/js/icons/' ), + '@ea11y/layouts': path.resolve( __dirname, 'modules/settings/assets/js/layouts/' ), + '@ea11y/pages': path.resolve( __dirname, 'modules/settings/assets/js/pages/' ), + }, + extensions: [ '.js', '.jsx' ], + }, };