React 18

[jeremywiebe]

Summary:

NOT READY TO MERGE I've got the changes ready, but we need to wait on WB and webapp to be ready before I land this PR and do a release.

This PR moves this repo to use React 18. There were a few changes that needed to be made to be fully compatible with React 18.

• Migrate a few tests from the old ReactDOM.TestUtils renderer to @testing-library.
• Update some snapshots as the snapshot renderer seems to have slightly different whitespace settings.
• Fixes to the ErrorBoundary tests as React's componentDidCatch provides a different stack trace format (which is irrelevat to our code).
• Migrate direct uses of ReactDOM.render() to ReactDOMClient.createRoot() (we hope to move these to use Portals in the future, but I couldn't get them working).

Issue: LEMS-1802

Test plan:

yarn test ✅
yarn tsc ✅
yarn storybook ✅ - I sampled many of the stories. I also checked the stories that were affected by the move from ReactDOM.render() to ReactDOMClient.createRoot()

[github-actions]

Size Change: -132 B (0%)

Total Size: 833 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	267 kB	+8 B (0%)
packages/perseus/dist/es/index.js	398 kB	-140 B (0%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-error/dist/es/index.js	878 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Attention: Patch coverage is 78.26087% with 5 lines in your changes are missing coverage. Please review.

Project coverage is 69.73%. Comparing base (cf1dc61) to head (c894ad7).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1064      +/-   ##
==========================================
+ Coverage   68.64%   69.73%   +1.09%     
==========================================
  Files         470      474       +4     
  Lines      100733   100795      +62     
  Branches     7146    10783    +3637     
==========================================
+ Hits        69148    70291    +1143     
+ Misses      31406    30504     -902     
+ Partials      179        0     -179     

Files	Coverage Δ
packages/perseus/src/components/tex.tsx	100.00% <ø> (ø)
packages/perseus/src/hints-renderer.tsx	85.06% <ø> (-2.70%)	⬇️
packages/perseus/src/util/react-render.tsx	100.00% <100.00%> (ø)
...s/perseus/src/widgets/passage/passage-markdown.tsx	88.49% <100.00%> (+5.68%)	⬆️
.../widgets/interaction-editor/interaction-editor.tsx	8.80% <0.00%> (-0.02%)	⬇️

... and 146 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cf1dc61...c894ad7. Read the comment docs.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to package.json, yarn.lock, .changeset/nervous-ads-check.md, dev/index.tsx, testing/test-dependencies.tsx, packages/math-input/package.json, packages/perseus/package.json, packages/perseus-editor/package.json, packages/simple-markdown/package.json, packages/perseus/src/hints-renderer.tsx, packages/perseus/src/__tests__/error-boundary.test.tsx, packages/perseus/src/__tests__/mock-asset-loading-widget.tsx, packages/perseus/src/__tests__/renderer-api.test.tsx, packages/perseus/src/__tests__/renderer.test.tsx, packages/perseus/src/components/tex.tsx, packages/perseus/src/util/react-render.tsx, packages/simple-markdown/src/__tests__/simple-markdown.test.tsx, packages/perseus/src/components/__tests__/number-input.test.tsx, packages/perseus/src/widgets/passage/passage-markdown.tsx, packages/perseus-editor/src/widgets/__stories__/radio-editor.stories.tsx, packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx, packages/perseus/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap, packages/perseus/src/widgets/passage/__tests__/passage-markdown.test.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (dc8cc5e) and published it to npm. You
can install it using the tag PR1064.

Example:

yarn add @khanacademy/perseus@PR1064

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1064

[jeresig]

Glad you were able to get this working! That's too bad about portals not working - I think if you were able to get portals working then we could ship this change (even with webapp still on v16), I think that's the only actual API incompatibility that I'm aware of! But not worries if not, we can stagger this out, instead.

[jeresig]

Suggested change

	var actualHtml = htmlFromReactMarkdown(source); // ?
	var actualHtml = htmlFromReactMarkdown(source);

[benchristel]

@jeremywiebe is this PR still needed?

[jeremywiebe]

@jeremywiebe is this PR still needed?

@benchristel Yes, but it's waiting on FE Infra work to move WB and Webapp to React 18 before I feel comfortable landing it. Ultimately, webapp (or any host app) defines what version of React Perseus uses so I think we could get into trouble if we move to React 18 and accidentally use some API/feature that is only available in React 18+.