chore: bump loaders and optimize webpack configuration

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-07-25-23
+08-10-23

.circleci/workflows.yml

@@ -31,7 +31,7 @@ mainBuildFilters: &mainBuildFilters
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
         - 'chore/update_webpack_deps_to_latest_webpack4_compat'
-        - 'chore/update_to_webpack5_minimum_lift'
+        - 'chore/bump_loaders_and_optimize_webpack'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -44,7 +44,7 @@ macWorkflowFilters: &darwin-workflow-filters
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
     - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_to_webpack5_minimum_lift', << pipeline.git.branch >> ]
+    - equal: [ 'chore/bump_loaders_and_optimize_webpack', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -56,7 +56,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
     - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_to_webpack5_minimum_lift', << pipeline.git.branch >> ]
+    - equal: [ 'chore/bump_loaders_and_optimize_webpack', << pipeline.git.branch >> ]
     - equal: [ 'publish-binary', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
@@ -78,7 +78,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
     - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_to_webpack5_minimum_lift', << pipeline.git.branch >> ]
+    - equal: [ 'chore/bump_loaders_and_optimize_webpack', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -148,7 +148,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "chore/update_to_webpack5_minimum_lift" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "chore/bump_loaders_and_optimize_webpack" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command
@@ -2251,7 +2251,7 @@ jobs:
     <<: *defaults
     resource_class: small
     docker:
-      - image: cypress/base:12.0.0-libgbm
+      - image: cypress/base:16.16.0
     steps:
       - restore_workspace_binaries
       - run: mkdir test-binary

npm/react/babel.config.js

@@ -8,7 +8,7 @@ module.exports = {
     // allow lazy loaded components with dynamic "import(...)"
     // https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/
     '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-class-properties',
     // https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
     // loose ES6 modules allow us to dynamically mock imports during tests
     [

npm/webpack-batteries-included-preprocessor/index.js

@@ -108,8 +108,8 @@ const getDefaultWebpackOptions = () => {
             plugins: [
               ...[
                 'babel-plugin-add-module-exports',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-proposal-object-rest-spread',
+                '@babel/plugin-transform-class-properties',
+                '@babel/plugin-transform-object-rest-spread',
               ].map(require.resolve),
               [require.resolve('@babel/plugin-transform-runtime'), {
                 absoluteRuntime: path.dirname(require.resolve('@babel/runtime/package')),

npm/webpack-batteries-included-preprocessor/package.json

@@ -8,20 +8,20 @@
     "lint": "eslint --ext .js,.ts,.json, ."
   },
   "dependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/runtime": "^7.11.2",
+    "@babel/core": "^7.22.9",
+    "@babel/plugin-transform-class-properties": "^7.22.5",
+    "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/runtime": "^7.22.6",
     "assert": "^2.0.0",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.1.3",
     "babel-plugin-add-module-exports": "^1.0.2",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
-    "coffee-loader": "^1.0.1",
-    "coffeescript": "^1.12.7",
+    "coffee-loader": "^4.0.0",
+    "coffeescript": "2.6.0",
     "constants-browserify": "^1.0.0",
     "crypto-browserify": "^3.12.0",
     "domain-browser": "^4.22.0",
@@ -36,7 +36,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
-    "ts-loader": "8.4.0",
+    "ts-loader": "9.4.4",
     "tsconfig-package": "npm:tsconfig@^7.0.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "tty-browserify": "^0.0.1",

npm/webpack-preprocessor/package.json

@@ -25,11 +25,11 @@
     "lodash": "^4.17.20"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.1",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
     "@types/mocha": "9.0.0",
     "@types/webpack": "^4.41.12",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.1.3",
     "chai": "4.1.2",
     "chalk": "3.0.0",
     "chokidar-cli": "2.1.0",

packages/config/package.json

@@ -17,12 +17,12 @@
     "lint": "eslint --ext .js,.ts,.json, ."
   },
   "dependencies": {
-    "@babel/core": "^7",
-    "@babel/parser": "^7",
-    "@babel/plugin-syntax-typescript": "^7",
-    "@babel/plugin-transform-typescript": "^7",
-    "@babel/traverse": "7.15.4",
-    "@babel/types": "^7",
+    "@babel/core": "^7.22.9",
+    "@babel/parser": "^7.22.7",
+    "@babel/plugin-syntax-typescript": "^7.22.5",
+    "@babel/plugin-transform-typescript": "^7.22.9",
+    "@babel/traverse": "^7.22.8",
+    "@babel/types": "^7.22.5",
     "check-more-types": "2.24.0",
     "common-tags": "1.8.0",
     "debug": "^4.3.4",

packages/config/src/ast-utils/astConfigHelpers.ts

@@ -69,11 +69,11 @@ function extractProperty (str: string) {
     visitObjectExpression (path) {
       if (complete) return false
 
-      if (path.node.properties.length > 1 || !t.isObjectProperty(path.node.properties[0])) {
+      if (path.node.properties.length > 1 || !t.isObjectProperty(path.node.properties[0] as t.ObjectProperty)) {
         throw new Error(`Can only parse an expression with a single property`)
       }
 
-      toAdd = path.node.properties[0]
+      toAdd = path.node.properties[0] as t.ObjectProperty
       complete = true
 
       return false

packages/config/src/validation.ts

@@ -1,4 +1,3 @@
-import { URL } from 'url'
 import path from 'path'
 import * as _ from 'lodash'
 import * as is from 'check-more-types'

packages/extension/package.json

@@ -31,7 +31,7 @@
     "mock-require": "3.0.3",
     "sinon": "7.3.2",
     "sinon-chai": "3.3.0",
-    "ts-loader": "8.4.0",
+    "ts-loader": "9.4.4",
     "webextension-polyfill": "0.4.0",
     "webpack": "^5.88.2"
   },

packages/reporter/cypress.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'cypress'
 import webpackConfig from './webpack.config'
+import WP from '../../npm/webpack-preprocessor'
 
 export default defineConfig({
   projectId: 'ypt4pf',
@@ -19,11 +20,15 @@ export default defineConfig({
   e2e: {
     experimentalStudio: true,
     baseUrl: 'http://localhost:5006',
-    setupNodeEvents (_on, config) {
+    setupNodeEvents (on, config) {
       const express = require('express')
 
       express().use(express.static('dist')).listen(5006)
 
+      on('file:preprocessor', WP({
+        webpackOptions: webpackConfig,
+      }))
+
       return config
     },
     viewportHeight: 660,

packages/reporter/package.json

@@ -33,7 +33,6 @@
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-svg-loader": "3.0.3",
     "sinon": "7.5.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"

packages/reporter/src/attempts/attempts.tsx

@@ -12,8 +12,8 @@ import TestModel from '../test/test-model'
 import AttemptModel from './attempt-model'
 import Sessions from '../sessions/sessions'
 
-import CollapseIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/collapse_x16.svg'
-import ExpandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/expand_x16.svg'
+import CollapseIcon from '@packages/frontend-shared/src/assets/icons/collapse_x16.svg'
+import ExpandIcon from '@packages/frontend-shared/src/assets/icons/expand_x16.svg'
 import StateIcon from '../lib/state-icon'
 
 const NoCommands = () => (

packages/reporter/src/collapsible/collapsible.tsx

@@ -3,7 +3,7 @@ import React, { Component, CSSProperties, MouseEvent, ReactNode, RefObject } fro
 
 import { onEnterOrSpace } from '../lib/util'
 
-import ChevronIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
+import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
 
 interface Props {
   isOpen?: boolean

packages/reporter/src/commands/command.tsx

@@ -19,10 +19,10 @@ import { determineTagType } from '../sessions/utils'
 import CommandModel, { RenderProps } from './command-model'
 import TestError from '../errors/test-error'
 
-import ChevronIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
-import HiddenIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/general-eye-closed_x16.svg'
-import PinIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-pin_x16.svg'
-import RunningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-running_x16.svg'
+import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
+import HiddenIcon from '@packages/frontend-shared/src/assets/icons/general-eye-closed_x16.svg'
+import PinIcon from '@packages/frontend-shared/src/assets/icons/object-pin_x16.svg'
+import RunningIcon from '@packages/frontend-shared/src/assets/icons/status-running_x16.svg'
 
 const md = new Markdown({ breaks: true })
 

packages/reporter/src/components/LaunchStudioIcon.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent } from 'react'
 
 // @ts-ignore
 import Tooltip from '@cypress/react-tooltip'
-import WandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
+import WandIcon from '@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
 
 interface LaunchStudioIconProps {
   title: string

packages/reporter/src/errors/test-error.tsx

@@ -14,8 +14,8 @@ import { onEnterOrSpace } from '../lib/util'
 import Err from './err-model'
 import { formattedMessage } from '../commands/command'
 
-import WarningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/warning_x8.svg'
-import TerminalIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-terminal_x16.svg'
+import WarningIcon from '@packages/frontend-shared/src/assets/icons/warning_x8.svg'
+import TerminalIcon from '@packages/frontend-shared/src/assets/icons/technology-terminal_x16.svg'
 
 interface DocsUrlProps {
   url: string | string[]

packages/reporter/src/header/DebugDismiss.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import DebuggerIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/debugger_x16.svg'
-import DeleteIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
+import DebuggerIcon from '@packages/frontend-shared/src/assets/icons/debugger_x16.svg'
+import DeleteIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import events from '../lib/events'
 
 export const DebugDismiss = (props: { matched: number, total: number }) => {

packages/reporter/src/header/controls.tsx

@@ -8,12 +8,12 @@ import Tooltip from '@cypress/react-tooltip'
 import defaultEvents, { Events } from '../lib/events'
 import { AppState } from '../lib/app-state'
 
-import ChevronDownIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/chevron-down-small_x16.svg'
-import ChevronUpIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/chevron-up-small_x16.svg'
-import NextIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/action-next_x16.svg'
-import PlayIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/action-play_x16.svg'
-import RestartIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/action-restart_x16.svg'
-import StopIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/action-stop_x16.svg'
+import ChevronDownIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x16.svg'
+import ChevronUpIcon from '@packages/frontend-shared/src/assets/icons/chevron-up-small_x16.svg'
+import NextIcon from '@packages/frontend-shared/src/assets/icons/action-next_x16.svg'
+import PlayIcon from '@packages/frontend-shared/src/assets/icons/action-play_x16.svg'
+import RestartIcon from '@packages/frontend-shared/src/assets/icons/action-restart_x16.svg'
+import StopIcon from '@packages/frontend-shared/src/assets/icons/action-stop_x16.svg'
 
 const ifThen = (condition: boolean, component: React.ReactNode) => (
   condition ? component : null

packages/reporter/src/header/header.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 // @ts-ignore
 import Tooltip from '@cypress/react-tooltip'
 
-import MenuExpandRightIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/menu-expand-right_x16.svg'
+import MenuExpandRightIcon from '@packages/frontend-shared/src/assets/icons/menu-expand-right_x16.svg'
 
 import defaultEvents, { Events } from '../lib/events'
 import { AppState } from '../lib/app-state'

packages/reporter/src/header/stats.tsx

@@ -4,9 +4,9 @@ import React from 'react'
 
 import { StatsStore } from './stats-store'
 
-import FailedIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
-import PassedIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
-import PendingIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
+import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
+import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
+import PendingIcon from '@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
 
 const count = (num: number) => num > 0 ? num : '--'
 

packages/reporter/src/hooks/hooks.tsx

@@ -9,8 +9,8 @@ import Command from '../commands/command'
 import Collapsible from '../collapsible/collapsible'
 import HookModel, { HookName } from './hook-model'
 
-import ArrowRightIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/arrow-right_x16.svg'
-import OpenIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-code-editor_x16.svg'
+import ArrowRightIcon from '@packages/frontend-shared/src/assets/icons/arrow-right_x16.svg'
+import OpenIcon from '@packages/frontend-shared/src/assets/icons/technology-code-editor_x16.svg'
 import OpenFileInIDE from '../lib/open-file-in-ide'
 
 export interface HookHeaderProps {

packages/reporter/src/lib/file-name-opener.tsx

@@ -4,7 +4,7 @@ import { FileDetails } from '@packages/types'
 // @ts-ignore
 import Tooltip from '@cypress/react-tooltip'
 
-import TextIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/document-text_x16.svg'
+import TextIcon from '@packages/frontend-shared/src/assets/icons/document-text_x16.svg'
 import OpenFileInIDE from './open-file-in-ide'
 
 interface Props {

packages/reporter/src/lib/fonts.scss

@@ -1,11 +1,11 @@
-@import "~@fortawesome/fontawesome-free/scss/regular.scss";
-@import "~@fortawesome/fontawesome-free/scss/solid.scss";
-@import "~@fortawesome/fontawesome-free/scss/brands.scss";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/regular.scss";
+@import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import "@fortawesome/fontawesome-free/scss/brands.scss";
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
 
-@import "~@fontsource/open-sans/latin.css";
-@import "~@fontsource/open-sans/latin-400-italic.css";
+@import "@fontsource/open-sans/latin.css";
+@import "@fontsource/open-sans/latin-400-italic.css";
 
-@import "~@fontsource/mulish/latin.css";
-@import "~@fontsource/mulish/latin-300-italic.css";
-@import "~@fontsource/mulish/latin-400-italic.css";
+@import "@fontsource/mulish/latin.css";
+@import "@fontsource/mulish/latin-300-italic.css";
+@import "@fontsource/mulish/latin-400-italic.css";

packages/reporter/src/lib/state-icon.tsx

@@ -3,12 +3,12 @@ import { observer } from 'mobx-react'
 import React from 'react'
 
 import { TestState } from '@packages/types'
-import FailedIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
-import PassedIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
-import PendingIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
-import ProcessingIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-processing_x12.svg'
-import RunningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-running_x12.svg'
-import WandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
+import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
+import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
+import PendingIcon from '@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
+import ProcessingIcon from '@packages/frontend-shared/src/assets/icons/status-processing_x12.svg'
+import RunningIcon from '@packages/frontend-shared/src/assets/icons/status-running_x12.svg'
+import WandIcon from '@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
 
 interface Props extends React.HTMLProps<HTMLDivElement> {
   state: TestState

packages/reporter/src/main-runner.scss

@@ -6,7 +6,7 @@
 @import 'lib/switch';
 @import 'lib/tag';
 @import 'lib/tooltip';
-@import '~@reach/dialog/styles.css';
+@import '@reach/dialog/styles.css';
 // import all other scss files in src except if they are in lib
 // or their file name is `selector-playground` or `main`
 // NOTE: no need to import scss files in their components

packages/reporter/src/main.scss

@@ -7,7 +7,7 @@
 @import 'lib/switch';
 @import 'lib/tag';
 @import 'lib/tooltip';
-@import '~@reach/dialog/styles.css';
+@import '@reach/dialog/styles.css';
 // import all other scss files in src except if they are in lib
 // or their file name is `selecor-playground` or `main`
 // NOTA: no need to import scss files in their components