feat: ESBuild for builds (#1084)

* chore: checkpoint

* chore: all paste-core

* chore: use ESBuild for icons package

* chore: finish migration to esbuild

* chore: remove pre-build ts references step

* fix(combobox): add missing "type" in import

* chore: update snapshot tests

* fix: cjs builds should point to cjs externals

* fix: add missing type keyword in import

* chore(codemods): improve package mapping script for safety

* test: minor fixes

* fix: type fixes

* chore: fix esbuild target for node12

* fix(website): ssr build issue

* chore: add comments

* fix: esbuild config improvements

.gitignore

@@ -74,6 +74,7 @@ packages/paste-website/public
 packages/**/docs
 **/paste-icons/cjs/*
 **/paste-icons/esm/*
+**/paste-icons/types/*
 *.tsbuildinfo
 package-lock.json
 tools/.cache/packages.json

.jest/resolver.js

@@ -46,7 +46,7 @@ const keyedPackages = cachedPackages.reduce((acc, currentPackage) => {
 
 // Given "@twilio-paste/design-tokens/dist/themes/index.js"
 // Returns ["@twilio-paste", "design-tokens", "dist/themes.index.js"]
-const getPackageParts = package => {
+const getPackageParts = (package) => {
   const [packageScope, packageName, ...packagePath] = package.split('/');
   return [packageScope, packageName, packagePath.join('/')];
 };

package.json

@@ -22,7 +22,7 @@
     "watch:icons": "yarn workspace @twilio-paste/icons watch",
     "prebuild": "node ./tools/build/pre-build.js && yarn packages:check",
     "build": "lerna run build --ignore @twilio-paste/website --ignore @twilio-paste/theme-designer",
-    "build:dev": "yarn prebuild && lerna run build:dev --since HEAD --ignore @twilio-paste/website",
+    "build:js": "yarn prebuild && lerna run build:js --since HEAD --ignore @twilio-paste/website --ignore @twilio-paste/theme-designer",
     "build:tokens": "yarn workspace @twilio-paste/design-tokens tokens",
     "build:icons": "yarn workspace @twilio-paste/icons build",
     "build:storybook": "build-storybook -c .storybook -o ./docs",
@@ -120,6 +120,7 @@
     "emotion": "10.0.27",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
+    "esbuild": "^0.8.30",
     "eslint": "^7.11.0",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^6.0.0",

packages/paste-codemods/package.json

@@ -10,8 +10,7 @@
   },
   "bin": "./bin/paste-codemod.js",
   "scripts": {
-    "build": "node ./tools/create-package-mappings.js",
-    "test": "jest"
+    "build": "node ./tools/create-package-mappings.js"
   },
   "dependencies": {
     "chalk": "^2.4.2",

packages/paste-codemods/__tests__/tools.spec.tsx → packages/paste-codemods/tools/__tests__/tools.spec.js

@@ -1,7 +1,7 @@
-const {generatePackageExportsMap} = require('../tools/generatePackageExportsMap');
+const {generatePackageExportsMap} = require('../generatePackageExportsMap');
 
 // This is a simplified mock of paste packages
-const mockGetPastePackages = (): Array<unknown> => [
+const mockGetPastePackages = () => [
   {
     name: '@twilio-paste/stack',
     version: '0.1.49',

packages/paste-codemods/tools/generatePackageExportsMap.js

@@ -1,5 +1,6 @@
 const {getRepoPackages} = require('../../../tools/utils/getRepoPackages');
 
+// We don't want to use the 'form' or 'typography' packages because they are deprecated
 const DEPRECATED_PACKAGES = ['@twilio-paste/typography', '@twilio-paste/form'];
 
 async function generatePackageExportsMap(getPackages = getRepoPackages) {
@@ -9,24 +10,31 @@ async function generatePackageExportsMap(getPackages = getRepoPackages) {
   // Get all Paste packages
   const allPastePackages = await getPackages();
 
-  // For each package in Paste:
-  allPastePackages.forEach(({name, location}) => {
-    // We don't want to use the 'form' or 'typography' packages because they are deprecated
-    // Skip them for now
-    if (DEPRECATED_PACKAGES.includes(name)) return;
-
-    // Only include core packages but not the core-bundle package
-    if (!location.includes('/paste-core/') || location.includes('/paste-core/core-bundle')) return;
+  // Remove irrelevant packages
+  const filteredPastePackages = allPastePackages.filter((pkg) => {
+    if (pkg.private) return false;
+    if (DEPRECATED_PACKAGES.includes(pkg.name)) return false;
+    // Only include Paste core packages (except core-bundle!)
+    if (!pkg.location.includes('/paste-core/') || pkg.location.includes('/paste-core/core-bundle')) return false;
+    return true;
+  });
 
+  filteredPastePackages.forEach(({name}) => {
     // convert package name to core name
     const corePackageName = `@twilio-paste/core/${name.split('/')[1]}`;
 
     // Get the package's exported values to be mapped
-    // eslint-disable-next-line global-require, import/no-dynamic-require
-    const packageExports = require(name);
+    let packageExports = {};
+    try {
+      // eslint-disable-next-line global-require, import/no-dynamic-require
+      packageExports = require(name);
+    } catch (err) {
+      console.log(`Failed to dynamically require package: ${name}`, err);
+      throw err;
+    }
 
     // Now we create a mapping for every export to the core-bundle unbarreled package
-    Object.keys(packageExports).forEach(packageExportName => {
+    Object.keys(packageExports).forEach((packageExportName) => {
       mapping[packageExportName] = corePackageName;
     });
   });

packages/paste-core/components/alert/__tests__/__snapshots__/index.spec.tsx.snap

@@ -3,9 +3,6 @@
 exports[`Alert Variant error Should render an error alert 1`] = `
 .emotion-3 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -24,9 +21,6 @@ exports[`Alert Variant error Should render an error alert 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -118,9 +112,6 @@ exports[`Alert Variant error Should render an error alert 1`] = `
 exports[`Alert Variant error Should render an error alert with dismiss button 1`] = `
 .emotion-7 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -130,9 +121,6 @@ exports[`Alert Variant error Should render an error alert with dismiss button 1`
 
 .emotion-4 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
@@ -154,9 +142,6 @@ exports[`Alert Variant error Should render an error alert with dismiss button 1`
 
 .emotion-1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -174,9 +159,6 @@ exports[`Alert Variant error Should render an error alert with dismiss button 1`
 
 .emotion-6 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -370,9 +352,6 @@ exports[`Alert Variant error Should render an error alert with dismiss button 1`
 exports[`Alert Variant neutral Should render a neutral alert 1`] = `
 .emotion-3 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -403,9 +382,6 @@ exports[`Alert Variant neutral Should render a neutral alert 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -485,9 +461,6 @@ exports[`Alert Variant neutral Should render a neutral alert 1`] = `
 exports[`Alert Variant neutral Should render a neutral alert with dismiss button 1`] = `
 .emotion-7 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -497,9 +470,6 @@ exports[`Alert Variant neutral Should render a neutral alert with dismiss button
 
 .emotion-4 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
@@ -533,9 +503,6 @@ exports[`Alert Variant neutral Should render a neutral alert with dismiss button
 
 .emotion-1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -562,9 +529,6 @@ exports[`Alert Variant neutral Should render a neutral alert with dismiss button
 
 .emotion-6 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -737,9 +701,6 @@ exports[`Alert Variant neutral Should render a neutral alert with dismiss button
 exports[`Alert Variant warning Should render an warning alert 1`] = `
 .emotion-3 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -758,9 +719,6 @@ exports[`Alert Variant warning Should render an warning alert 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -852,9 +810,6 @@ exports[`Alert Variant warning Should render an warning alert 1`] = `
 exports[`Alert Variant warning Should render an warning alert with dismiss button 1`] = `
 .emotion-7 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -864,9 +819,6 @@ exports[`Alert Variant warning Should render an warning alert with dismiss butto
 
 .emotion-4 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
@@ -888,9 +840,6 @@ exports[`Alert Variant warning Should render an warning alert with dismiss butto
 
 .emotion-1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -908,9 +857,6 @@ exports[`Alert Variant warning Should render an warning alert with dismiss butto
 
 .emotion-6 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;

packages/paste-core/components/alert/build.js

@@ -0,0 +1,3 @@
+const {build} = require('../../../../tools/build/esbuild');
+
+build(require('./package.json'));

packages/paste-core/components/alert/package.json

@@ -18,12 +18,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn clean && yarn compile",
-    "build:dev": "yarn clean && yarn compile:dev",
+    "build": "yarn clean && NODE_ENV=production node build.js && tsc",
+    "build:js": "NODE_ENV=development node build.js",
     "build:props": "typedoc --tsconfig ./tsconfig.json --json ./dist/prop-types.json",
-    "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache",
-    "compile": "rollup -c --environment NODE_ENV:production",
-    "compile:dev": "rollup -c --environment NODE_ENV:development"
+    "clean": "rm -rf ./dist",
+    "tsc": "tsc"
   },
   "peerDependencies": {
     "@twilio-paste/box": "^2.12.3",

packages/paste-core/components/alert/src/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import {ValueOf} from '@twilio-paste/types';
+import type {ValueOf} from '@twilio-paste/types';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 import {Button} from '@twilio-paste/button';
@@ -9,6 +9,8 @@ import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon';
 import {NeutralIcon} from '@twilio-paste/icons/esm/NeutralIcon';
 import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon';
 
+type AlertVariantKeys = 'ERROR' | 'NEUTRAL' | 'WARNING';
+
 export const AlertRoles = {
   ERROR: 'alert',
   NEUTRAL: 'status',
@@ -64,16 +66,16 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(({children, onDismiss
   return (
     <Box
       {...safelySpreadBoxProps(props)}
-      backgroundColor={AlertBackgroundColors[variant.toUpperCase()]}
-      borderColor={AlertBorderColors[variant.toUpperCase()]}
+      backgroundColor={AlertBackgroundColors[variant.toUpperCase() as AlertVariantKeys]}
+      borderColor={AlertBorderColors[variant.toUpperCase() as AlertVariantKeys]}
       borderBottomWidth="borderWidth20"
       borderBottomStyle="solid"
       paddingLeft="space60"
       paddingRight="space60"
       paddingTop="space50"
       paddingBottom="space50"
       ref={ref}
-      role={role != null ? role : AlertRoles[variant.toUpperCase()]}
+      role={role != null ? role : AlertRoles[variant.toUpperCase() as AlertVariantKeys]}
     >
       <MediaObject as="div">
         <MediaFigure as="div" spacing="space30">
@@ -98,7 +100,7 @@ if (process.env.NODE_ENV === 'development') {
     children: PropTypes.node.isRequired,
     onDismiss: PropTypes.func,
     role: PropTypes.string,
-    variant: PropTypes.oneOf(Object.keys(AlertVariants).map((variant) => AlertVariants[variant])).isRequired,
+    variant: PropTypes.oneOf(Object.values(AlertVariants)).isRequired,
   };
 }
 export {Alert};