Upgrade Parcel and other dev dependencies #2701

devongovett · 2021-12-20T21:29:11Z

This updates a number of our dev dependencies, with the goal of improving build performance and fixing bugs.

Parcel, to the latest nightly. This improves build performance significantly, and fixes an issue with the docs examples that we disabled optimizations for last summer by using the new experimental bundler. It also uses the new Rust-based JS compiler rather than Babel.
MDX to v2. This is significantly faster than the old version of MDX since it doesn't rely on Babel anymore.
React to 17 by default. We still build a 16 storybook in CI, but the default version is now 17. This is because MDX v2 requires React 17, and also because, it's time.
TypeScript to 4.x. Also due to MDX.
Node to 14.x in CI due to all of the above.
Replaces Prettier with dprint-node, which is much faster. This was used for auto formatting examples in the docs.

See explanations for additional things inline.

Overall, build performance improved significantly.

In dev, rebuilds went from 10+ seconds to ~4.
In CI, docs builds went from ~244s to ~28s. 🥳

…o parcel-upgrade # Conflicts: # yarn.lock

…grade # Conflicts: # patches/@parcel+transformer-typescript-types+2.0.0-nightly.359.patch # scripts/buildWebsite.js # yarn.lock

adobe-bot · 2021-12-20T21:30:04Z

Build successful! 🎉

…grade # Conflicts: # packages/@react-aria/grid/src/useGrid.ts # yarn.lock

devongovett · 2021-12-20T21:36:45Z

.parcelrc

@@ -1,19 +1,25 @@
 {
  "extends": "@parcel/config-default",
-  "resolvers": ["parcel-resolver-docs", "..."],
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-docs", "..."],
+  "bundler": "@parcel/bundler-experimental",


This fixes the issue with some examples not rendering which we had patched Parcel before, disabling optimization. The new bundler is currently in progress and experimental, but it seems to build our docs correctly.

devongovett · 2021-12-20T21:37:28Z

.parcelrc

  "transformers": {
    "apiCheck:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],
    "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],
    "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],
    "*.{md,mdx}": ["parcel-transformer-mdx-docs"],
    "*.svg": ["@parcel/transformer-svg-react"],
-    "*.css": ["...", "parcel-transformer-css-env"]
+    "*.css": ["...", "parcel-transformer-css-env"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [


This disables Babel from running in Parcel, even though we have a .babelrc. Parcel includes a much faster transpiler now. Eventual goal is to also use it for Jest and Storybook and remove Babel completely.

devongovett · 2021-12-20T21:38:28Z

babel.config.json

-    ],
-    "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-syntax-class-properties",


These are included in @babel/preset-env. No need to duplicate them here.

devongovett · 2021-12-20T21:38:57Z

packages/@react-aria/aria-modal-polyfill/docs/watchModals.mdx

@@ -1,11 +1,11 @@
-<!-- Copyright 2020 Adobe. All rights reserved.
+{/* Copyright 2020 Adobe. All rights reserved.


Comment format changed from HTML style to JSX style in MDX v2.

devongovett · 2021-12-20T21:40:17Z

packages/dev/docs/pages/react-stately/index.mdx

@@ -33,9 +34,9 @@ description: A library of React Hooks that provides cross-platform state managem
 A library of React Hooks that provides cross-platform state management for your design system.

 <p className={clsx(typographyStyles['spectrum-Body2'], styles.homeLinks)}>
-  <a href="getting-started.html">Get started</a>
+  <a href="getting-started.html" className={clsx(linkStyle['spectrum-Link'], styles.link)}>Get started</a>


MDX v2 no longer seems to apply the components mapping to explicit elements like this, only to markdown elements (e.g. [some link](url)).

@devongovett do let mdx folks know if this is weird, or kinda makes sense. I’m not 100% on this change.

@wooorm 👋. I think it kinda makes sense? It seems MDX v2 is moving more toward JSX and away from Markdown/HTML (e.g. comment syntax as well). In JSX the way to solve this is using components, rather than overriding how HTML elements are rendered. It was a convenient feature, but certainly not required.

devongovett · 2021-12-20T21:43:43Z

patches/@parcel+transformer-postcss+2.0.0-nightly.951.patch

@@ -0,0 +1,77 @@
+diff --git a/node_modules/@parcel/transformer-postcss/lib/PostCSSTransformer.js b/node_modules/@parcel/transformer-postcss/lib/PostCSSTransformer.js


This patch is necessary because we currently require a very old version of PostCSS which is no longer supported by Parcel.

adobe-bot · 2021-12-20T22:02:54Z

Build successful! 🎉

snowystinger · 2021-12-20T22:00:58Z

package.json

    "react-axe": "^3.0.2",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1",
+    "react-dom": "^17.0.2",
    "react-overlays": "0.8.3",
    "react-test-renderer": "^16.9.0",


should we update this as well?
i'm not sure why it wasn't included in the install-17 script

Do we even use it? I don't see any references. And the tests seem to pass?

snowystinger · 2021-12-20T22:03:53Z

packages/dev/docs/src/Layout.js

+        pageStyles.spectrum,
+        Object.values(theme.global),


what happened here?

Some of the classes we apply in provider didn't seem to be applied here, which resulted in some broken styles. Honestly not sure how it was working before. 😂

Taking a look at the diffs, <kbd> didn't get the keyboard class:
Old:

New:

packages/dev/parcel-namer-docs/DocsNamer.js

snowystinger · 2021-12-20T22:04:35Z

packages/dev/parcel-namer-docs/package.json

  },
  "dependencies": {
-    "@parcel/plugin": "nightly"
+    "@parcel/plugin": "2.0.0-nightly.951"


what's with the mismatch in nightlies?

🤷 engines has to match the @parcel/core version. Not sure why @parcel/plugin is different. Lerna does weird things.

adobe-bot · 2021-12-21T00:03:09Z

Build successful! 🎉

adobe-bot · 2021-12-21T18:35:37Z

Build successful! 🎉

snowystinger

Thank you!

reidbarber

LGTM, thanks!

ktabors · 2021-12-22T17:57:57Z

packages/@react-aria/color/src/useColorField.ts

@@ -98,6 +98,7 @@ export function useColorField(
    mergeProps(props, {
      id: inputId,
      value: inputValue,
+      defaultValue: undefined,


why do we need this?

the TS upgrade found this

ktabors · 2021-12-22T18:08:07Z

packages/@react-spectrum/icon/docs/workflow-icons.mdx

@@ -97,6 +97,6 @@ import LockClosed from '@spectrum-icons/workflow/LockClosed';
 A [searchable list of workflow icons](https://spectrum.adobe.com/page/icons/) is available on the Spectrum website.
 The name of the icon without any whitespace matches the import in React Spectrum.

-<!-- ```tsx snippet
+{/* ```tsx snippet


Should we delete this?

it's not currently hurting anything, so I'm ok with it staying for the moment

ktabors · 2021-12-22T18:09:17Z

packages/@react-stately/collections/docs/collections.mdx

@@ -296,7 +296,7 @@ function addPerson(name) {
 </ListBox>
 ```

-<!--
+{/*


Why are these commeted out instead of deleted?

it was a comment before, this is just the way that mdx comments need to be now, see #2701 (comment)

ktabors · 2021-12-22T18:16:16Z

packages/dev/docs/src/client.js

@@ -19,7 +19,10 @@ import ShowMenu from '@spectrum-icons/workflow/ShowMenu';
 import {ThemeSwitcher} from './ThemeSwitcher';
 import {watchModals} from '@react-aria/aria-modal-polyfill';

-window.addEventListener('load', () => listen());
+if (process.env.NODE_ENV === 'production') {


This does seem like a feature for production, but wondering if the upgrade caused this or you thought this would be useful while working on parcel upgrade?

Yeah, originally I had enabled Parcel's lazy mode which only builds pages that you actually load in the browser, and the preloading was causing us to build more than necessary. I took out lazy, but this still seems like a production only feature anyway so I left it.

adobe-bot · 2021-12-22T18:39:09Z

Build successful! 🎉

ktabors · 2021-12-22T19:49:03Z

LGTM because: locally I ran storybook, all the default stories worked for all components. Lint and tests "passed" too. Tests had a similar know local fail as before. Build completed, but build:start still doesn't work for me, the error is different so I need to figure that out still.

adobe-bot · 2021-12-22T22:01:01Z

Build successful! 🎉

snowystinger

one of these times :)

devongovett added 22 commits June 8, 2021 12:00

wip: parcel upgrade

5a3a830

Improvements

d5b2b82

Merge branch 'main' of github.com:adobe-private/react-spectrum-v3 int…

edde201

…o parcel-upgrade # Conflicts: # yarn.lock

Merge branch 'main' of github.com:adobe/react-spectrum into parcel-up…

0922260

…grade # Conflicts: # patches/@parcel+transformer-typescript-types+2.0.0-nightly.359.patch # scripts/buildWebsite.js # yarn.lock

Working!

7c96e3e

Fix caching issue

8addd50

Use React 17 by default

0da1a3a

Update MDX to v2

74306cb

Fix mdx comments

3a98c05

Fix examples in MDX

84c2850

Fix build of docs

61c4876

Upgrade node

090e70b

Upgrade types dependencies

bc3f9dd

Upgrade typescript

6d7580f

Fix lint

c9669c6

Disable symbol collection in postcss transformer

59d226b

Node 14.8 has a bug?

325760d

Fix link styles

1af2426

Move test-utils to the dev folder so it doesn't get built

f775508

Use nightly version of Parcel to fix docs bundler issues

9ed41ba

Update dprint-node

bbe87d6

Remove old babel things we don't need anymore

fc2b536

devongovett requested review from dannify and snowystinger as code owners December 20, 2021 21:29

Merge branch 'main' of github.com:adobe/react-spectrum into parcel-up…

7c136b5

…grade # Conflicts: # packages/@react-aria/grid/src/useGrid.ts # yarn.lock

devongovett commented Dec 20, 2021

View reviewed changes

devongovett added 2 commits December 20, 2021 13:52

Fix merge

d5edb07

Remove --lazy for now

1cb77b0

snowystinger reviewed Dec 20, 2021

View reviewed changes

Revert namer changes

7caa267

Use <Keyboard> and <SlotProvider> to get kbd styles

a31337f

snowystinger previously approved these changes Dec 21, 2021

View reviewed changes

reidbarber previously approved these changes Dec 21, 2021

View reviewed changes

ktabors reviewed Dec 22, 2021

View reviewed changes

Fix WRAPPER regex

908b98c

devongovett dismissed stale reviews from reidbarber and snowystinger via 908b98c December 22, 2021 18:33

snowystinger previously approved these changes Dec 22, 2021

View reviewed changes

Fix page description styling

3bcceff

devongovett dismissed snowystinger’s stale review via 3bcceff December 22, 2021 21:53

snowystinger approved these changes Dec 22, 2021

View reviewed changes

dannify approved these changes Dec 22, 2021

View reviewed changes

devongovett merged commit 7a5e585 into main Dec 22, 2021

devongovett deleted the parcel-upgrade branch December 22, 2021 23:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Parcel and other dev dependencies #2701

Upgrade Parcel and other dev dependencies #2701

devongovett commented Dec 20, 2021 •

edited

Loading

adobe-bot commented Dec 20, 2021

devongovett Dec 20, 2021

devongovett Dec 20, 2021

devongovett Dec 20, 2021

devongovett Dec 20, 2021

devongovett Dec 20, 2021

wooorm Dec 21, 2021

devongovett Dec 22, 2021 •

edited

Loading

devongovett Dec 20, 2021

adobe-bot commented Dec 20, 2021

snowystinger Dec 20, 2021

devongovett Dec 20, 2021

snowystinger Dec 20, 2021

devongovett Dec 20, 2021

reidbarber Dec 20, 2021

snowystinger Dec 20, 2021

devongovett Dec 20, 2021

adobe-bot commented Dec 21, 2021

adobe-bot commented Dec 21, 2021

snowystinger left a comment

reidbarber left a comment

ktabors Dec 22, 2021

snowystinger Dec 22, 2021

ktabors Dec 22, 2021

snowystinger Dec 22, 2021

ktabors Dec 22, 2021

snowystinger Dec 22, 2021

ktabors Dec 22, 2021

devongovett Dec 22, 2021

adobe-bot commented Dec 22, 2021

ktabors commented Dec 22, 2021

adobe-bot commented Dec 22, 2021

snowystinger left a comment

		@@ -1,11 +1,11 @@
		<!-- Copyright 2020 Adobe. All rights reserved.
		{/* Copyright 2020 Adobe. All rights reserved.

		@@ -0,0 +1,77 @@
		diff --git a/node_modules/@parcel/transformer-postcss/lib/PostCSSTransformer.js b/node_modules/@parcel/transformer-postcss/lib/PostCSSTransformer.js

Upgrade Parcel and other dev dependencies #2701

Upgrade Parcel and other dev dependencies #2701

Conversation

devongovett commented Dec 20, 2021 • edited Loading

adobe-bot commented Dec 20, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devongovett Dec 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adobe-bot commented Dec 20, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adobe-bot commented Dec 21, 2021

adobe-bot commented Dec 21, 2021

snowystinger left a comment

Choose a reason for hiding this comment

reidbarber left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adobe-bot commented Dec 22, 2021

ktabors commented Dec 22, 2021

adobe-bot commented Dec 22, 2021

snowystinger left a comment

Choose a reason for hiding this comment

devongovett commented Dec 20, 2021 •

edited

Loading

devongovett Dec 22, 2021 •

edited

Loading