Rename JSX files with proper `.jsx` extension (#23733)

.eslintrc.js

@@ -43,7 +43,7 @@ module.exports = {
       version: 'detect',
     },
     'import/extensions': [
-      '.js',
+      '.js', '.jsx',
     ],
     'import/ignore': [
       'node_modules',
@@ -52,6 +52,7 @@ module.exports = {
     'import/resolver': {
       node: {
         paths: ['app/javascript'],
+        extensions: ['.js', '.jsx'],
       },
     },
   },
@@ -111,6 +112,7 @@ module.exports = {
     semi: 'error',
     'valid-typeof': 'error',
 
+    'react/jsx-filename-extension': ['error', { 'allow': 'as-needed' }],
     'react/jsx-boolean-value': 'error',
     'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
     'react/jsx-curly-spacing': 'error',
@@ -185,6 +187,7 @@ module.exports = {
       'always',
       {
         js: 'never',
+        jsx: 'never',
       },
     ],
     'import/newline-after-import': 'error',

.github/workflows/lint-js.yml

@@ -10,6 +10,7 @@ on:
       - '.prettier*'
       - '.eslint*'
       - '**/*.js'
+      - '**/*.jsx'
       - '.github/workflows/lint-js.yml'
 
   pull_request:
@@ -20,6 +21,7 @@ on:
       - '.prettier*'
       - '.eslint*'
       - '**/*.js'
+      - '**/*.jsx'
       - '.github/workflows/lint-js.yml'
 
 jobs:

.github/workflows/test-js.yml

@@ -8,6 +8,7 @@ on:
       - 'yarn.lock'
       - '.nvmrc'
       - '**/*.js'
+      - '**/*.jsx'
       - '**/*.snap'
       - '.github/workflows/test-js.yml'
 
@@ -17,6 +18,7 @@ on:
       - 'yarn.lock'
       - '.nvmrc'
       - '**/*.js'
+      - '**/*.jsx'
       - '**/*.snap'
       - '.github/workflows/test-js.yml'
 

config/webpacker.yml

@@ -35,6 +35,7 @@ default: &default
   extensions:
     - .mjs
     - .js
+    - .jsx
     - .sass
     - .scss
     - .css

package.json

@@ -12,7 +12,7 @@
     "start": "node ./streaming/index.js",
     "test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest",
     "test:lint": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:lint:sass",
-    "test:lint:js": "eslint --ext=js . --cache --report-unused-disable-directives",
+    "test:lint:js": "eslint --ext=.js,.jsx . --cache --report-unused-disable-directives",
     "test:lint:sass": "stylelint \"**/*.{css,scss}\" && prettier --check \"**/*.{css,scss}\"",
     "test:jest": "cross-env NODE_ENV=test jest",
     "format": "prettier --write .",