Node 16 upgrade and peer dependency cleanup (#250)

* feat: drop support for Node 12 and add support for Node 16

BREAKING CHANGE: The Open edX platform is collectively moving towards Node 16. By doing so in this repository, we can now use NPM workspaces in place of Lerna in many places. Lerna is still used for publishing to NPM, updating CHANGELOGs and package.json files upon released. But NPM workspace commands can now be used instead of Lerna commands for the developer experience, which is more performant, easier to reason about, and natively supported by NPM.

Author: adamstankiewicz

.github/workflows/bump-all-major.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       # lerna expects to be authenticated for publishing to NPM. This step will fail CI if NPM is not authenticated
       - name: Check NPM authentication
         run: |
@@ -35,7 +35,7 @@ jobs:
         run: npm run test
       - name: Coverage Report
         uses: codecov/codecov-action@v1
-      - name: 
+      - name: Force publish major versions
         run: lerna version major --force-publish --yes
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -1,46 +1,44 @@
 name: CI
 
-on: [push]
+on: [pull_request]
 
 jobs:
-  build:
+  tests:
     name: Build
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          # pulls all commits (needed for lerna / semantic release to correctly version)
-          fetch-depth: 0
-      # pulls all tags (needed for lerna / semantic release to correctly version)
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - name: Setup Nodejs
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      # lerna expects to be authenticated for publishing to NPM. This step will fail CI if NPM is not
-      # authenticated, even though this build does _not_ attempt to publish, as an extra check before merge
-      # that Lerna is set to publish.
-      - name: Check NPM authentication
-        run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}" >> .npmrc
-          npm whoami
-      - name: Install and Setup Dependencies
-        run: |
-          npm install
-          lerna bootstrap --include-dependencies --include-dependents --since origin/master
-      # build must come before running linting and tests for the `dist` directory to exist.
-      - name: Build
-        run: lerna run build --include-dependencies --include-dependents --since origin/master --parallel
-      - name: Lint
-        run: lerna run lint --include-dependencies --include-dependents --since origin/master --parallel
-      - name: Test
-        run: lerna run test --include-dependencies --include-dependents --since origin/master --parallel
-      - name: Coverage Report
-        uses: codecov/codecov-action@v1
-      - name: Extract branch name
-        shell: bash
-        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
-        id: extract_branch
-      - name: Preview Updated Versions (dry run)
-        run: lerna version --allow-branch ${{ steps.extract_branch.outputs.branch }} --no-git-tag-version --no-changelog --no-push --yes
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        # pulls all commits (needed for lerna / semantic release to correctly version)
+        fetch-depth: 0
+    # pulls all tags (needed for lerna / semantic release to correctly version)
+    - name: Pull all tags
+      run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+    - name: Setup Nodejs
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    # lerna expects to be authenticated for publishing to NPM. This step will fail CI if NPM is not
+    # authenticated, even though this build does _not_ attempt to publish, as an extra check before merge
+    # that Lerna is set to publish.
+    - name: Check NPM authentication
+      run: |
+        echo "//registry.npmjs.org/:_authToken=${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}" >> .npmrc
+        npm whoami
+    - name: Install and Setup Dependencies
+      run: npm run setup
+    # build must come before running linting and tests for the `dist` directory to exist.
+    - name: Build
+      run: npm run build
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test
+    - name: Coverage Report
+      uses: codecov/codecov-action@v2
+    - name: Preview Updated Versions (dry run)
+      # switch from detatched head to a real branch so we can pass it to `--allow-branch`
+      run: |
+        git switch -c "actual-branch-not-detached-head"
+        lerna version --allow-branch actual-branch-not-detached-head --no-git-tag-version --no-changelog --no-push --yes

.github/workflows/publish-from-package.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       # lerna expects to be authenticated for publishing to NPM. This step will fail CI if NPM is not authenticated
       - name: Check NPM authentication
         run: |

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       # lerna expects to be authenticated for publishing to NPM. This step will fail CI if NPM is not authenticated
       - name: Check NPM authentication
         run: |

.nvmrc

@@ -1 +1 @@
-12
+16

README.rst

@@ -19,11 +19,8 @@ To get started with ``frontend-enterprise`` local development, clone the repo an
 ::
 
   npm run setup
-  npm run dev
 
-The above commands will install package dependencies, symlinking local packages rather than installing from NPM directly. However, since (most of) the packages in this monorepo contain a build step for Babel transpilation, it necessary to watch changes in the ``src`` directories of each package to re-run the relevant build script(s) as needed (``npm run dev``).
-
-Each package is configured to only publish the contents of the generated ``dist`` directory to NPM; this behavior gets replicated in the local symlinking of packages as well, which is why it is necessary to watch the source files for changes and re-build the ``dist`` directory when they do change. This ensures the symlinked packages will always contain the correct packages. It is recommended to run ``npm run dev`` in a separate terminal tab or window so you may run other commands as needed while source files are still being watched/transpiled.
+The above command will install package dependencies using NPM workspaces, hoisting all packages to `node_modules` at the root of the repository for performance reasons (e.g., there will only be one copy of React). By using NPM workspaces, `npm install` knows that when importing a package that is part of this monorepo (e.g., `@edx/frontend-enterprise-utils`), it should look at the local package folder and creates symlinks accordingly.
 
 Other useful commands for linting and testing may include:
 
@@ -32,20 +29,18 @@ Other useful commands for linting and testing may include:
   npm run lint
   npm run test
 
-The above NPM scripts are running Lerna commands behind-the-scenes. By default, it will run the associated NPM command in each package in the monorepo. However, Lerna provides a mechanism to only run tests for a specific package(s), for example:
+The above NPM scripts are run via NPM workspaces behind-the-scenes. By default, it will run the associated NPM command in each package in the monorepo. However, NPM workspaces does provide a mechanism to only run tests for a specific package, for example:
 
 ::
 
-  lerna run test --scope=@edx/frontend-enterprise-catalog-search
+  npm run test -w @edx/frontend-enterprise-catalog-search
 
 To clean your local monorepo of any installed ``node_modules`` and symlinked packages to start fresh, you may run:
 
 ::
 
   npm run clean
 
-See https://github.com/lerna/lerna for full documentation of Lerna commands.
-
 Installing local monorepo package(s) from an edX micro-frontend
 -----
 
@@ -83,9 +78,7 @@ Each package in the monorepo contains its own package.json file and unique set o
 
 To get around this issue of common/shared dependencies, we can rely on how NPM finds installed packages. If a package does not exist in ``node_modules`` for an individual package, NPM will look in ``node_modules`` further up the directory tree until it finds the package, or gets to the root of the repository. 
 
-By installing these common dependencies at the root package.json file, they will be accessible to any package in the monorepo to ensure there is only one copy of them used throughout. These dependencies are still noted in each individual package.json file as a peer dependency but not as a dev dependency since they are already installed in ``node_modules`` at the root of the repository.
-
-As such, we should pay extra attention to managing dependencies in each packages, making informed decisions about whether a dependency should be included in an individual package's package.json file or the package.json file at the root of the repository.
+NPM workspaces helps with this by hoisting installed packages to the root `node_modules` folder where they will be accessible to any package in the monorepo to ensure there is only one copy used throughout. These dependencies are still noted in each individual package.json file as both a peer dependency and a dev dependency.
 
 Writing a commit
 -----
@@ -96,6 +89,8 @@ There is a precommit plugin (commitlint) which requires commit messages formatte
 
 where type must be one of ``[build, ci, docs, feat, fix, perf, refactor, revert, style, test]``
 
+Note: only `fix`, `feat`, and `perf` will trigger a new NPM release, as this is the default behavior for semantic-release.
+
 Versioning and releases
 *****
 
@@ -108,7 +103,7 @@ To publish the packages that had their versions incremented, you must manually t
 Preview changed packages in CI with Github Actions
 -----
 
-As a convenience, the ``lerna changed`` command is run for each push to determine which packages in the monorepo will be published should a PR get merged.
+As a convenience, a dry run of the ``lerna version`` command is run for each push to determine which packages in the monorepo will be published should a PR get merged.
 
 .. |Build Status| image:: https://github.com/edx/frontend-enterprise/actions/workflows/release.yml/badge.svg
    :target: https://github.com/edx/frontend-enterprise/actions

common/extendESLintConfig.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+const extendESLintConfig = (config) => {
+  const importNoUnresolved = config.rules['import/no-unresolved'];
+  if (importNoUnresolved ) {
+    const originalIgnore = importNoUnresolved[1].ignore;
+    if (!originalIgnore.includes('@edx/frontend-enterprise-*')) {
+      importNoUnresolved[1].ignore = [...originalIgnore, '@edx/frontend-enterprise-*'];
+    }
+  }
+};
+
+module.exports =  extendESLintConfig;

common/extendJestConfig.js

@@ -0,0 +1,10 @@
+const extendJestConfig = (config) => {
+  const modulePathsToIgnore = ['<rootDir>/dist'];
+  config.modulePathIgnorePatterns = config.modulePathIgnorePatterns ? [...config.modulePathIgnorePatterns, ...modulePathsToIgnore] : modulePathsToIgnore;
+  config.moduleNameMapper = {
+    ...config.moduleNameMapper,
+    '@edx/frontend-enterprise-(.*)': '<rootDir>/../$1/src',
+  };
+};
+
+module.exports =  extendJestConfig;