chore(dev environment): bump node to v16 and use pnpm as package mana…

…ger (#252) * chore(package manage): use pnpm lock file instead of yarn lock * chore(dev-deps): add missing dev-deps * chore(package manager): use pnpm instead yarn * chore(node): use v16 instead of v14 * chore(build): use esm build in ci instead * chore(pnpm): make sure browser-test-harness.js works with pnpm * chore(build): change config of plugin-node-resolve to match future default config * ci(circle-ci): change circle-ci to work with node v16 and pnpm * chore(size-snapshot): update * ci(circle-ci): make sure we have enough cpu for jest * chore(dev-deps): bump pnpm.lock
hello-pangea · Mar 18, 2022 · a2eff12 · a2eff12
1 parent 38c1755
commit a2eff12
Show file tree

Hide file tree

Showing 14 changed files with 17,299 additions and 116 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,91 +1,84 @@
-version: 2
+version: 2.1
+
+orbs:
+  browser-tools: circleci/browser-tools@1.2.4
+
+commands:
+  # TODO: Find a better to setup pnpm. We could use
+  #       an image which have pnpm alreay setup on it.
+  #       See: https://github.com/CircleCI-Public/cimg-node/issues/216
+  pnpm:
+    steps:
+      - run:
+          name: Install pnpm
+          command: curl -f https://get.pnpm.io/v6.js | sudo node - add --global pnpm
+
+      - run:
+          name: Setup pnpm store path
+          command: pnpm config set store-dir ~/repo/.pnpm-store
+
 jobs:
   install:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
     environment:
       - CYPRESS_CACHE_FOLDER: '~/repo/node_modules/.cache/Cypress'
     steps:
       # Fetch Code
       - checkout
+      - pnpm
 
       - restore_cache:
           keys:
             # Restore cached node_modules
-            - v15-dependencies-{{ checksum "yarn.lock" }}
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
             # fallback to using the latest cache if no exact match is found
-            - v15-dependencies-
-
-      - run:
-          name: Add CI global modules
-          command: yarn global add greenkeeper-lockfile@1
+            - v16-dependencies-
 
       - run:
           name: Install Dependencies
-          command: yarn
-
-      - run:
-          name: Update Lockfile
-          command: $(yarn global bin)/greenkeeper-lockfile-update
-
-      - run:
-          name: Upload Lockfile
-          command: $(yarn global bin)/greenkeeper-lockfile-upload
-
-      - run:
-          name: Validate Yarn Lock File
-          command: |
-            if [[ "$(git status -s)" != "" ]] && [[ "$CIRCLE_BRANCH" != greenkeeper/* ]]; then
-              echo "Your yarn.lock was modified during install, please check in any changes to the yarn.lock file"
-              exit 1
-            fi
+          command: pnpm install --frozen-lockfile
 
       # Save the node_modules cache
       - save_cache:
           paths:
+            - .pnpm-store
             - node_modules
-          key: v15-dependencies-{{ checksum "yarn.lock" }}
+          key: v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
   validate:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
     steps:
       - checkout
+      - pnpm
 
       - restore_cache:
           keys:
-            - v15-dependencies-{{ checksum "yarn.lock" }}
-
-      - run:
-          # PR's from forks cannot use the dependency cache for performance reasons
-          name: 'Forked PR dependency install'
-          command: yarn
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
       - run:
           name: Lint + Typecheck
-          command: yarn validate
+          command: pnpm validate
 
   test-unit:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
+    resource_class: medium+
     steps:
       - checkout
+      - pnpm
 
       - restore_cache:
           keys:
-            - v15-dependencies-{{ checksum "yarn.lock" }}
-
-      - run:
-          # PR's from forks cannot use the dependency cache for performance reasons
-          name: 'Forked PR dependency install'
-          command: yarn
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
       - run:
           name: Jest Suite
-          command: yarn test
+          command: pnpm test
           environment:
             JEST_JUNIT_OUTPUT: 'test-reports/junit/js-test-results.xml'
 
@@ -94,38 +87,35 @@ jobs:
 
   test-bundle:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
     steps:
       - checkout
+      - pnpm
 
       - restore_cache:
           keys:
-            - v15-dependencies-{{ checksum "yarn.lock" }}
-
-      # PR's from forks cannot use the dependency cache for performance reasons
-      - run:
-          name: 'Forked PR dependency install'
-          command: yarn
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
       - run:
           name: Check Bundle Size
-          command: yarn run bundle-size:check
+          command: pnpm run bundle-size:check
 
   build:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
     steps:
       - checkout
+      - pnpm
 
       - restore_cache:
           keys:
-            - v15-dependencies-{{ checksum "yarn.lock" }}
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
       - run:
           name: Build asset
-          command: yarn build
+          command: pnpm build
 
       - persist_to_workspace:
           root: dist
@@ -134,28 +124,26 @@ jobs:
 
   test-browser:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
     environment:
       - CYPRESS_CACHE_FOLDER: '~/repo/node_modules/.cache/Cypress'
     steps:
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
       - checkout
+      - pnpm
 
       - attach_workspace:
           at: ~/repo/dist
 
       - restore_cache:
           keys:
-            - v15-dependencies-{{ checksum "yarn.lock" }}
-
-      # PR's from forks cannot use the dependency cache for performance reasons
-      - run:
-          name: 'Forked PR dependency install'
-          command: yarn
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
       - run:
           name: 'Run cypress'
-          command: node browser-test-harness.js yarn test:browser:ci
+          command: node browser-test-harness.js pnpm test:browser:ci
 
       # store videos and screenshots (if any) as CI artifacts
       - store_artifacts:
@@ -165,26 +153,24 @@ jobs:
 
   test-a11y:
     docker:
-      - image: circleci/node:14.18.2-browsers
+      - image: cimg/node:16.14.0-browsers
     working_directory: ~/repo
     steps:
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
       - checkout
+      - pnpm
 
       - attach_workspace:
           at: ~/repo/dist
 
       - restore_cache:
           keys:
-            - v15-dependencies-{{ checksum "yarn.lock" }}
-
-      # PR's from forks cannot use the dependency cache for performance reasons
-      - run:
-          name: 'Forked PR dependency install'
-          command: yarn
+            - v16-dependencies-{{ checksum "pnpm-lock.yaml" }}
 
       - run:
           name: Accessibility Audit
-          command: node browser-test-harness.js yarn test:accessibility
+          command: node browser-test-harness.js pnpm test:accessibility
 
       - store_artifacts:
           path: test-reports/lighthouse

diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn commitlint --edit $1
+pnpm commitlint --edit $1
diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
@@ -6,4 +6,4 @@ if [ "$SKIP_PREPARE_COMMIT_MSG" = "true" ]; then
   exit 0
 fi
 
-exec < /dev/tty && yarn cz --hook || true
+exec < /dev/tty && pnpm cz --hook || true
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+16.14.0
diff --git a/.nvmrc b/.nvmrc
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dnd.js": {
-    "bundled": 375170,
-    "minified": 135792,
-    "gzipped": 40506
+    "bundled": 375284,
+    "minified": 135837,
+    "gzipped": 40524
   },
   "dnd.min.js": {
-    "bundled": 306745,
-    "minified": 108423,
-    "gzipped": 31332
+    "bundled": 306859,
+    "minified": 108429,
+    "gzipped": 31342
   },
   "dnd.esm.js": {
     "bundled": 242252,

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -36,7 +36,7 @@ The online courses listed are no free - feel free to seek out alternatives if yo
 We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, we use the git commit messages to **generate the change log**. This project adheres to [Semantic Versioning 2.0](http://semver.org/).
 
 The commit message formatting can be added using a typical git workflow or through the use of a CLI
-wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn cz` or `git commit` in your terminal after staging your changes in git.
+wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `pnpm cz` or `git commit` in your terminal after staging your changes in git.
 
 The format of each commit must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/).
 

diff --git a/babel.config.js b/babel.config.js
@@ -20,17 +20,17 @@ module.exports = (api) => {
           alias: {
             '@react-forked/dnd':
               process.env.USE_PRODUCTION_BUILD === 'true'
-                ? path.resolve(__dirname, './dist/dnd')
+                ? path.resolve(__dirname, './dist/dnd.esm')
                 : path.resolve(__dirname, './src/index.ts'),
           },
         },
       ],
-      '@babel/transform-object-assign',
-      ['@babel/proposal-class-properties', { loose: true }],
+      '@babel/plugin-transform-object-assign',
+      ['@babel/plugin-proposal-class-properties', { loose: true }],
       ['@babel/plugin-proposal-private-methods', { loose: true }],
       ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
       // used for stripping out the `invariant` messages in production builds
-      isProduction ? 'dev-expression' : false,
+      isProduction ? 'babel-plugin-dev-expression' : false,
     ].filter(Boolean),
     comments: false,
   };

diff --git a/browser-test-harness.js b/browser-test-harness.js
@@ -4,7 +4,7 @@ const waitOn = require('wait-on');
 const ports = require('./server-ports');
 
 const storybook = childProcess.spawn(process.execPath, [
-  path.join('node_modules', '.bin', 'cross-env-shell'),
+  path.join('node_modules', 'cross-env', 'src', 'bin', 'cross-env-shell.js'),
   'DISABLE_HMR=true',
   'USE_PRODUCTION_BUILD=true',
   path.join('node_modules', '.bin', 'start-storybook'),
@@ -14,7 +14,7 @@ const storybook = childProcess.spawn(process.execPath, [
 ]);
 
 const cspServer = childProcess.spawn(process.execPath, [
-  path.join('node_modules', '.bin', 'cross-env-shell'),
+  path.join('node_modules', 'cross-env', 'src', 'bin', 'cross-env-shell.js'),
   'USE_PRODUCTION_BUILD=true',
   path.join('csp-server', 'start.sh'),
   `${ports.cspServer}`,
@@ -25,16 +25,13 @@ process.on('exit', () => {
   cspServer.kill();
 });
 
-Promise.all([
-  waitOn({
-    resources: [`http://localhost:${ports.storybook}/`],
-    timeout: 60000,
-  }),
-  waitOn({
-    resources: [`http://localhost:${ports.cspServer}/`],
-    timeout: 60000,
-  }),
-])
+waitOn({
+  resources: [
+    `http://localhost:${ports.storybook}`,
+    `http://localhost:${ports.cspServer}`,
+  ],
+  timeout: 60000,
+})
   .then(() => {
     if (!process.argv[2]) {
       // eslint-disable-next-line no-restricted-syntax

diff --git a/docs/about/installation.md b/docs/about/installation.md
@@ -7,11 +7,14 @@
 1. Add the `@react-forked/dnd` package
 
 ```bash
-# yarn
-yarn add @react-forked/dnd
-
 # npm
 npm install @react-forked/dnd --save
+
+# pnpm
+pnpm add @react-forked/dnd
+
+# yarn
+yarn add @react-forked/dnd
 ```
 
 2. Use the package
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ if [ "$SKIP_PREPARE_COMMIT_MSG" = "true" ]; then @@
       exit 0
     fi
-    exec < /dev/tty && yarn cz --hook || true
+    exec < /dev/tty && pnpm cz --hook || true