Make library build work with Parcel 2.12 (#1045)

**Related Ticket:**  (Not a ticket) #1029 

### Context
To use the USWDS Design System, we had to update Parcel to 2.12.
(Because of invalid CSS selectors that Parcel will complain about.
@dzole0311 described the problem very well here:
#1029 (comment))

While trying to build the library with Parcel 2.12, I faced the problem
of Parcel failing to build the library with an error like `add
'$components' as a dependency`. This error made me think that something
related to aliases is not working for library build with the new version
of Parcel.

We are bumping quite a number for Parcel (from 2.7 to 2.12), so I
gradually bumped up the minor version of Parcel and its related packages
to see where this error was introduced. The problem appeared in Parcel
2.9.0 when Parcel rewrote its resolvers
extensively.https://parceljs.org/blog/v2-9-0/ There seem to be other
people who are facing alias-related problems with targeting Node:
parcel-bundler/parcel#9519

**In short, Parcel 2.12 seems to have a problem building a library with
aliases. (Or at least our set up doesn't seem to work for library
build)**

### What this PR does

Parcel offers the api for custom Resolver :
https://parceljs.org/plugin-system/resolver/
From what I understand, I can make my own translation of dependency such
as `import x from ...` through Resolver. Using this Resolver api, I
added an alias-resolver, which basically just swaps the file name to its
full name when the file name includes one of aliases.

I also separated Parcel configuration that should be used for library
build from the application build. So we can scope down the impact only
to library build. Currently, the library build configuration extends the
application configuration, and adds alias resolver on top of it.

In addition to these changes, the library build command is included in
the `stage` command. When the library build fails, the preview build
will also fail.

### Things I wish I could figure out better
#### Resolver chain?
I want alias resolver to resolves only the alias, and leave the other
stuffs (absolute path or module name resolution) to Parcel default
resolver. For example, let's say a syntax like below was used

```
import Panel from '$components/Panel'
```
I want alias-resolver to translate this into 

```
import Panel from '/app/scripts/components/Panel'
```
and leave it up to further translating this syntax into either
```
import Panel from '/app/scripts/components/Panel.tsx'
```

or 
```
import Panel from '/app/scripts/components/Panel/index.tsx'
```
(There can be even more variety such as
'./app/scripts/components/Panel/index.jsx',
'./app/scripts/components/Panel/index.ts' ...) However, it seems like
Resolver has to return the absolute path for the file or null to pass it
to the next resolver
(https://parceljs.org/plugin-system/resolver/#relevant-api). So I
included a logic to tell if imported file is module or file in
alias-resolver.

#### Update other Parcel-related packages

I tried, but I also faced bunch of other problems that I feel like I
would need another day to figure out. So here, I only ditched parecel's
experimental bundler, which seems to be included in the higher version
by default. The context for experimental bundler is in this PR:
#306


### We need to check

I only checked the library suceeds at being built. We need to check if
the built assets from this branch are the same from the ones of main
branch.

.parcelrc

@@ -1,6 +1,5 @@
 {
   "extends": ["@parcel/config-default"],
-  "bundler": "@parcel/bundler-experimental",
   "reporters": ["...", "@parcel/reporter-bundle-analyzer"],
   "resolvers": ["parcel-resolver-ignore", "parcel-resolver-veda", "@parcel/resolver-glob", "..."],
   "transformers": {

.parcelrc-lib

@@ -0,0 +1,4 @@
+{
+  "extends": ["./.parcelrc"],
+  "resolvers": ["parcel-resolver-alias", "..."]
+}

package.json

@@ -19,8 +19,8 @@
   "scripts": {
     "serve": "NODE_ENV=development gulp serve",
     "build": "NODE_ENV=production gulp",
-    "buildlib": "gulp clean && parcel build 'app/scripts/index.ts' --dist-dir='lib'",
-    "stage": "NODE_ENV=staging gulp",
+    "buildlib": "gulp clean && parcel build 'app/scripts/index.ts' --dist-dir='lib' --config '.parcelrc-lib'",
+    "stage": "yarn buildlib && NODE_ENV=staging gulp",
     "clean": "gulp clean",
     "lint": "yarn lint:scripts && yarn lint:css",
     "lint:scripts": "eslint app/scripts/",
@@ -45,15 +45,14 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.18.6",
     "@mdx-js/mdx": "^2.0.0",
-    "@parcel/bundler-experimental": "^2.7.0",
     "@parcel/packager-raw-url": "2.7.0",
-    "@parcel/packager-ts": "2.7.0",
+    "@parcel/packager-ts": "2.12.0",
     "@parcel/reporter-bundle-analyzer": "^2.0.0",
     "@parcel/reporter-bundle-buddy": "^2.0.0",
     "@parcel/resolver-glob": "^2.0.1",
     "@parcel/transformer-mdx": "^2.0.1",
     "@parcel/transformer-sass": "2.7.0",
-    "@parcel/transformer-typescript-types": "2.7.0",
+    "@parcel/transformer-typescript-types": "2.12.0",
     "@parcel/transformer-webmanifest": "2.7.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
@@ -88,6 +87,7 @@
     "lint-staged": "14.0.1",
     "parcel": "^2.12.0",
     "parcel-resolver-ignore": "^2.1.3",
+    "parcel-resolver-alias": "link:./parcel-resolver-alias",
     "parcel-resolver-veda": "link:./parcel-resolver-veda",
     "parcel-transformer-mdx": "link:./parcel-transformer-mdx",
     "parcel-transformer-mdx-frontmatter": "link:./parcel-transformer-mdx-frontmatter",

parcel-resolver-alias/index.js

@@ -0,0 +1,60 @@
+// Resolver for resolving aliases in library building
+// Related issue in Parcel repo: https://github.com/parcel-bundler/parcel/issues/9519
+
+const path = require('path');
+const fs = require('fs-extra');
+const { Resolver } = require('@parcel/plugin');
+const { alias } = require('../package.json');
+
+const aliases = Object.keys(alias).reduce((acc, key) => {
+  const value = alias[key].replace('~', '');
+  acc[`${key}`] = `${value}`;
+  return acc;
+}, {});
+
+// Files with redundant extensions ex. $components/panel (components/panel.d.ts.ts)
+const fileExtensions = ['.js', '.ts', '.jsx', '.tsx'];
+// Index files with a trailing slash ex. $components/panel/ (components/panel/index.jsx)
+const indexFileExtensions = fileExtensions.map((e) => `index${e}`);
+// Index files without a trailing slash ex. $components/panel (components/panel/index.jsx)
+const pathIndexExtensions = fileExtensions.map((e) => `/index${e}`);
+
+function findMatchingFile(filePath) {
+  const filePathParts = filePath.split('/');
+  const fileName = filePathParts[filePathParts.length - 1];
+  // Files ex. $components/panel.jsx or $components/panel.css
+  if (fileName.includes('.')) {
+    if (fs.existsSync(filePath)) return filePath;
+  }
+
+  for (const extension of [
+    ...fileExtensions,
+    ...indexFileExtensions,
+    ...pathIndexExtensions
+  ]) {
+    if (fs.existsSync(`${filePath}${extension}`))
+      return `${filePath}${extension}`;
+  }
+
+  return null;
+}
+
+module.exports = new Resolver({
+  async resolve({ specifier }) {
+    let toReturn;
+    for (let aliasKey in aliases) {
+      if (specifier.startsWith(aliasKey)) {
+        const replaced = specifier.replace(aliasKey, aliases[aliasKey]);
+        const rPath = path.join(__dirname, '..', replaced);
+        const fileP = findMatchingFile(rPath);
+        toReturn = {
+          filePath: fileP
+        };
+        break;
+      }
+    }
+    if (toReturn) return toReturn;
+    // Let the next resolver in the pipeline handle this dependency
+    else return null;
+  }
+});

yarn.lock

@@ -2952,12 +2952,12 @@
     "@parcel/utils" "2.12.0"
     posthtml "^0.16.4"
 
-"@parcel/packager-ts@2.7.0":
-  version "2.7.0"
-  resolved "http://verdaccio.ds.io:4873/@parcel%2fpackager-ts/-/packager-ts-2.7.0.tgz#631c3918fe475a1f69fc82628bebe99d73bae921"
-  integrity sha512-XT46njOHQCYmubQRbtjQOLT9RbXgxQ8aTxCOeO9jEay6snDnY6k+HdMXHAD6qZNyVgm85HJzjmDFDUeJQt9LKw==
+"@parcel/packager-ts@2.12.0":
+  version "2.12.0"
+  resolved "http://verdaccio.ds.io:4873/@parcel%2fpackager-ts/-/packager-ts-2.12.0.tgz#7422c07ff3a327fdb592f6d707d31bc146590a17"
+  integrity sha512-8wR0BNN2NBD+IIU0tjioK+lRD4p2Qi/fKxDH5ixEW912tRV+Vd4kE8k++U6YQIpSlK4FRnjFod5zYYhNSLuiXg==
   dependencies:
-    "@parcel/plugin" "2.7.0"
+    "@parcel/plugin" "2.12.0"
 
 "@parcel/[email protected]":
   version "2.12.0"
@@ -3274,16 +3274,16 @@
     posthtml-render "^3.0.0"
     semver "^7.5.2"
 
-"@parcel/transformer-typescript-types@2.7.0":
-  version "2.7.0"
-  resolved "http://verdaccio.ds.io:4873/@parcel%2ftransformer-typescript-types/-/transformer-typescript-types-2.7.0.tgz#a3e35c1f5030ce772d82d6ae18311dfab36d96b4"
-  integrity sha512-7eZFJH+0ZOZoh+4ZUKVnP79LI8h45hGAAqCI1UG8l7ZEf6q9yy8lwF9cREu4dUih70TDUHnHkxoNHfZWOjkDSg==
+"@parcel/transformer-typescript-types@2.12.0":
+  version "2.12.0"
+  resolved "http://verdaccio.ds.io:4873/@parcel%2ftransformer-typescript-types/-/transformer-typescript-types-2.12.0.tgz#63e3fc4d1c5d61e1d3a2d56ff58454cf58b514ca"
+  integrity sha512-uxF4UBMYvbjiV3zHTWMrZX8cFD92VUvD3ArcGi5WEtuVROUm9Sc47o0mOzxKfMFlJu2KOfZVHYlzK9f/UKA2kQ==
   dependencies:
-    "@parcel/diagnostic" "2.7.0"
-    "@parcel/plugin" "2.7.0"
-    "@parcel/source-map" "^2.0.0"
-    "@parcel/ts-utils" "2.7.0"
-    "@parcel/utils" "2.7.0"
+    "@parcel/diagnostic" "2.12.0"
+    "@parcel/plugin" "2.12.0"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/ts-utils" "2.12.0"
+    "@parcel/utils" "2.12.0"
     nullthrows "^1.1.1"
 
 "@parcel/[email protected]":
@@ -3296,10 +3296,10 @@
     "@parcel/plugin" "2.7.0"
     "@parcel/utils" "2.7.0"
 
-"@parcel/ts-utils@2.7.0":
-  version "2.7.0"
-  resolved "http://verdaccio.ds.io:4873/@parcel%2fts-utils/-/ts-utils-2.7.0.tgz#b5abe7eb5f977c238e11178bbf9a481481d60d1e"
-  integrity sha512-hxgWu9p9+zo9OvllYy12DRrAEyAGGLQysI6PyNvYvsZSmb7sQg9YQ7spD1QmWIQUC1H6BkyzQsowpK0hvPK1xg==
+"@parcel/ts-utils@2.12.0":
+  version "2.12.0"
+  resolved "http://verdaccio.ds.io:4873/@parcel%2fts-utils/-/ts-utils-2.12.0.tgz#47878a6f3baff77d2fa6f9878fe235c9c5d75da8"
+  integrity sha512-zou+W6dcqnXXUOfN5zGM+ePIWbYOhGp8bVB2jICoNkoKmNAHd4l4zeHl5yQXnbZfynVw88cZVqxtXS8tYebelg==
   dependencies:
     nullthrows "^1.1.1"
 
@@ -11776,6 +11776,10 @@ papaparse@^5.3.2:
   resolved "http://verdaccio.ds.io:4873/papaparse/-/papaparse-5.3.2.tgz#d1abed498a0ee299f103130a6109720404fbd467"
   integrity sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==
 
+"parcel-resolver-alias@link:./parcel-resolver-alias":
+  version "0.0.0"
+  uid ""
+
 parcel-resolver-ignore@^2.1.3:
   version "2.1.3"
   resolved "http://verdaccio.ds.io:4873/parcel-resolver-ignore/-/parcel-resolver-ignore-2.1.3.tgz#869673c40ccab1985af74020cd28b360b149155f"