Switch to a View Engine based build (#209)

# Pull Request

## 🤨 Rationale

The change covers [TASK 1741883](https://ni.visualstudio.com/DevCentral/_workitems/edit/1741883) which is to switch nimble-angular to be a View Engine based build as discussed in the [ensuring library version compatibility topic](https://v12.angular.io/guide/creating-libraries#ensuring-library-version-compatibility).

This PR also addresses the feedback given in #207.

## 👩‍💻 Implementation

- Change `angular-workspace/projects/ni/nimble-angular/tsconfig.lib.prod.json` to `"enableIvy": false`.
- Modify the publish step to rebuild the package before publish.
  - During the full build angular runs ngcc in the built library package mutating the contents. The library must be rebuilt to a clean state before publish.

## 🧪 Testing

Relies on existing test infrastructure.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or determined no changes are needed. Updated beachball workflow discussion.

.github/workflows/main.yml

@@ -14,7 +14,7 @@ env:
 jobs:
   build:
     runs-on: ubuntu-18.04
-    if: "!contains(github.event.head_commit.message, '[package-publish]')"
+    if: "!contains(github.event.head_commit.message, '[bump-versions]')"
     steps:
       - uses: actions/checkout@v2
         with:
@@ -102,6 +102,6 @@ jobs:
         run: dpl --provider=pages --repo=ni/nimble --local_dir=packages/site/dist --skip_cleanup --name="${{ env.GITHUB_SERVICE_USER }}" --email="${{ env.GITHUB_SERVICE_EMAIL }}" --github-token=${{ secrets.GITHUBPAGESDEPLOYTOKEN }}
 
       # Update package versions and tag but not publish to npm (only from main)
-      - name: Beachball publish
+      - name: Beachball bump versions
         if: startsWith(github.ref, 'refs/heads/main')
-        run: npm run publish-ci
+        run: npm run bump-versions

.github/workflows/publish.yml

@@ -42,21 +42,18 @@ jobs:
       # Publish
       - name: Publish @ni/nimble-tokens
         if: startsWith(github.ref, 'refs/tags/@ni/nimble-tokens_v')
-        run: npm publish
-        working-directory: ./packages/nimble-tokens
+        run: npm run publish -w @ni/nimble-tokens
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish @ni/nimble-components
         if: startsWith(github.ref, 'refs/tags/@ni/nimble-components_v')
-        run: npm publish
-        working-directory: ./packages/nimble-components
+        run: npm run publish -w @ni/nimble-components
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish @ni/nimble-angular
         if: startsWith(github.ref, 'refs/tags/@ni/nimble-angular_v')
-        run: npm publish
-        working-directory: ./angular-workspace/dist/ni/nimble-angular
+        run: npm run publish -w angular-workspace
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CONTRIBUTING.md

@@ -54,7 +54,8 @@ From the `nimble` directory:
 This repository uses [beachball](https://microsoft.github.io/beachball/) to automate publishing its packages to NPM. The basic workflow is as follows:
 
 1. Every pull request that affects a published package must contain a "change file" which specifies how it affects the versions of each package and includes a description of the change. Developers generate this change file by running `npm run change` before creating the pull request.
-2. After the pull request completes, a CI pipeline will inspect the change files to generate changelogs, bump versions in package.json, and publish the newly built packages to NPM.
+2. After the pull request completes, a CI pipeline will inspect the change files to generate changelogs, bump versions in package.json files, and create git tags for the updated package versions.
+3. A pipeline will run for each newly created git tag and invoke the `npm run publish` command for the associated package.
 
 ### Chromatic visual component tests
 

angular-workspace/package.json

@@ -4,10 +4,13 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build @ni/nimble-angular && ng build example-client-app",
-    "pack": "npm run pack-nimble-angular && npm run pack-example-client-app",
-    "pack-nimble-angular": "cd dist/ni/nimble-angular && npm pack",
-    "pack-example-client-app": "cd dist/example-client-app && npm pack",
+    "build": "npm run build:library && npm run build:application",
+    "build:library": "ng build @ni/nimble-angular",
+    "build:application": "ng build example-client-app",
+    "pack": "npm run pack:library && npm run pack:application",
+    "pack:library": "npm run build:library && cd dist/ni/nimble-angular && npm pack",
+    "pack:application": "cd dist/example-client-app && npm pack",
+    "publish": "npm run build:library && cd dist/ni/nimble-angular && npm publish",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --watch=false",
     "lint": "ng lint",

angular-workspace/projects/ni/nimble-angular/tsconfig.lib.prod.json

@@ -5,6 +5,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "compilationMode": "partial"
+    "enableIvy": false
   }
 }

beachball.config.js

@@ -2,9 +2,16 @@ const path = require('path');
 const fs = require('fs');
 const os = require('os');
 
+// Workaround for the following issues:
 // Beachball issue: https://github.com/microsoft/beachball/issues/525
 // NPM issue 1: https://github.com/npm/cli/issues/3756
 // NPM issue 2: https://github.com/npm/cli/issues/3757
+
+/**
+ * Returns a beachball postbump hook implementation that bumps package
+ * references specified in the root package-lock.json file during
+ * beachball package version bumps.
+ */
 const postbump = (_packagePath, packageName, packageVersion) => {
     console.log(`Updating lockfile for package ${packageName} to version ${packageVersion}`);
     const lockPath = path.resolve(__dirname, './package-lock.json');

change/@ni-nimble-angular-53733d19-71c2-484f-a144-1e321b8c14d1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Switch to a View Engine based build",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@ni-nimble-components-7c1228f4-2e40-4f15-9a78-445c96bb6e35.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Switch to a View Engine based build",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@ni-nimble-tokens-dc89363e-878c-498d-8acf-98818b5b6583.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Switch to a View Engine based build",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -11,8 +11,7 @@
     "pack": "npm run pack --workspaces --if-present",
     "change": "beachball change",
     "check": "beachball check --changehint \"Run 'npm run change' to generate a change file\"",
-    "publish": "beachball publish --message \"applying package updates [skip ci]\"",
-    "publish-ci": "beachball publish --no-publish --yes --access public --message \"applying package updates [package-publish]\"",
+    "bump-versions": "beachball publish --no-publish --yes --access public --message \"applying package updates [bump-versions]\"",
     "validate": "npm run build && npm run lint && npm run test",
     "performance": "lhci autorun"
   },

packages/nimble-components/package.json

@@ -11,6 +11,7 @@
     "prettier": "prettier-eslint \"**/*.*\" --list-different --prettier-ignore",
     "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
     "pack": "npm pack",
+    "publish": "npm publish",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o dist/storybook",
     "build-components": "tsc -p ./tsconfig.json",

packages/nimble-tokens/package.json

@@ -7,7 +7,9 @@
     "build:svg-to-ts": "svg-to-ts --config source/build/svg-to-ts-config.js",
     "build:ts": "tsc -p ./tsconfig.json",
     "build:ts:watch": "tsc -p ./tsconfig.json -w",
+    "pack": "npm pack",
     "pack:nuget": "cross-env-shell dotnet pack ./source/NimbleTokens --configuration Release -p:PackageVersion=$npm_package_version",
+    "publish": "npm publish",
     "lint": "eslint ."
   },
   "repository": {