Merge pull request #1002 from Financial-Times/webpack-5

CPP-2230: upgrade to Webpack 5

Author: apaleslimghost

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/[email protected]
+  node: circleci/[email protected]
 
 executors:
   node:
@@ -13,18 +13,16 @@ executors:
     docker:
       - image: cimg/node:20.18-browsers
         environment:
-          NODE_OPTIONS: "--openssl-legacy-provider"
+          NODE_OPTIONS: '--openssl-legacy-provider'
   node18:
     docker:
       - image: cimg/node:18.20-browsers
 
 references:
-
   #
   # Workspace
   #
-  container_config_node:
-    &container_config_node
+  container_config_node: &container_config_node
     working_directory: ~/project/build
     parameters:
       executor:
@@ -34,84 +32,64 @@ references:
 
   workspace_root: &workspace_root ~/project
 
-  attach_workspace:
-    &attach_workspace
+  attach_workspace: &attach_workspace
     attach_workspace:
       at: *workspace_root
 
-  # Cache creation
-  #
-  create_cache:
-    &create_cache
-    save_cache:
-      key: cache-v1-{{ .Branch }}-{{ checksum "./package.json" }}
-      paths:
-        - ./node_modules/
-
-  # Cache restoration
-  #
-  restore_cache:
-    &restore_cache
-    restore_cache:
-      keys:
-        - cache-v1-{{ .Branch }}-{{ checksum "./package.json" }}
-
   # Filters
   #
-  filters_only_main:
-    &filters_only_main
+  filters_only_main: &filters_only_main
     branches:
       only:
         - main
 
-  filters_only_renovate_nori:
-    &filters_only_renovate_nori
-    branches:
-      only: /(^renovate-.*|^nori\/.*)/
-
-  filters_ignore_tags_renovate_nori_build:
-    &filters_ignore_tags_renovate_nori_build
-    tags:
-      ignore: /.*/
-    branches:
-      ignore: /(^renovate-.*|^nori\/.*|^gh-pages)/
-
-  filters_main_branch:
-    &filters_main_branch
+  filters_main_branch: &filters_main_branch
     branches:
       only:
         - main
 
-  filters_release_build:
-    &filters_release_build
+  filters_release_build: &filters_release_build
     tags:
       only:
         - /^v\d+\.\d+\.\d+$/
     branches:
       ignore: /.*/
 
-  filters_prerelease_build:
-    &filters_prerelease_build
+  filters_prerelease_build: &filters_prerelease_build
     tags:
       only:
         - /^v\d+\.\d+\.\d+(?:-\w+\.\d+)$/
     branches:
       ignore: /.*/
 
 jobs:
-
-  build:
+  checkout:
     <<: *container_config_node
     steps:
       - checkout
-      - *restore_cache
-      - run:
-          name: Install project dependencies
-          command: npm install
+      - persist_to_workspace:
+          root: *workspace_root
+          paths:
+            - build
+  setup:
+    <<: *container_config_node
+    steps:
+      - *attach_workspace
+      - node/install-packages
+      - persist_to_workspace:
+          root: *workspace_root
+          paths:
+            - build
+  build:
+    <<: *container_config_node
+    steps:
+      - *attach_workspace
       - run:
           name: Run build
           command: npm run build
-      - *create_cache
+      - run:
+          name: Run build in examples/
+          command: npm run build:examples
       - persist_to_workspace:
           root: *workspace_root
           paths:
@@ -121,19 +99,18 @@ jobs:
     <<: *container_config_node
     steps:
       - *attach_workspace
-      - browser-tools/install-chrome
+      - run:
+          name: Install Chrome
+          command: npx puppeteer browsers install chrome
       - run:
           name: Check code style
           command: npm run prettier -- --list-different
       - run:
           name: Run package tests
-          command: npm run test:ci -- --runInBand
+          command: npm run test:ci
       - run:
           name: Run example app integration tests
-          command: npm run test:examples
-      - run:
-          name: Run storybook
-          command: npm run storybook:ci
+          command: npm run test:examples-ci
 
   publish:
     <<: *container_config_node
@@ -165,56 +142,26 @@ jobs:
           name: NPM publish
           command: npm publish --workspace=packages/ --access=public --tag=pre-release
 
-  deploy:
-    <<: *container_config_node
-    steps:
-      - *attach_workspace
-      - run:
-          name: Deploy Storybook
-          command: npm run deploy-storybook:ci
-
 workflows:
-
   version: 2
 
   build-test:
     jobs:
-      - build:
-          filters:
-            <<: *filters_ignore_tags_renovate_nori_build
-          name: build-<< matrix.executor >>
-          matrix:
-            parameters:
-              executor:
-                - node
-                - node20
-                - node18
-      - test:
+      - checkout
+      - setup:
+          name: setup-<< matrix.executor >>
           requires:
-            - build-<< matrix.executor >>
-          name: test-<< matrix.executor >>
+            - checkout
           matrix:
             parameters:
               executor:
                 - node
                 - node20
                 - node18
-      - deploy:
-          filters:
-            <<: *filters_only_main
-          requires:
-            - test-node
-
-  renovate-nori-build-test:
-    jobs:
-      - waiting-for-approval:
-          type: approval
-          filters:
-            <<: *filters_only_renovate_nori
       - build:
-          requires:
-            - waiting-for-approval
           name: build-<< matrix.executor >>
+          requires:
+            - setup-<< matrix.executor >>
           matrix:
             parameters:
               executor:
@@ -234,10 +181,27 @@ workflows:
 
   build-test-publish:
     jobs:
+      - checkout:
+          filters:
+            <<: *filters_release_build
+      - setup:
+          filters:
+            <<: *filters_release_build
+          name: setup-<< matrix.executor >>
+          requires:
+            - checkout
+          matrix:
+            parameters:
+              executor:
+                - node
+                - node20
+                - node18
       - build:
           filters:
             <<: *filters_release_build
           name: build-<< matrix.executor >>
+          requires:
+            - setup-<< matrix.executor >>
           matrix:
             parameters:
               executor:
@@ -265,10 +229,27 @@ workflows:
 
   build-test-prepublish:
     jobs:
+      - checkout:
+          filters:
+            <<: *filters_prerelease_build
+      - setup:
+          filters:
+            <<: *filters_prerelease_build
+          name: setup-<< matrix.executor >>
+          requires:
+            - checkout
+          matrix:
+            parameters:
+              executor:
+                - node
+                - node20
+                - node18
       - build:
           filters:
             <<: *filters_prerelease_build
           name: build-<< matrix.executor >>
+          requires:
+            - setup-<< matrix.executor >>
           matrix:
             parameters:
               executor:

.eslintrc.js

@@ -23,18 +23,6 @@ module.exports = {
     'import/resolver': {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts', '.mjs']
-      },
-      webpack: {
-        // Because we configure Storybook in "full control" mode we have to manually extend a
-        // configuration object. Rather than mock all that here I've chosen to copy the resolve
-        // rules so that the two files do not need to know about one other and their structure.
-        config: {
-          resolve: {
-            modules: ['node_modules'],
-            descriptionFiles: ['package.json'],
-            mainFiles: ['index', 'main']
-          }
-        }
       }
     }
   },