[CORL-2451]: Update to React 18 #4056
Conversation
✅ Deploy Preview for gallant-galileo-14878c canceled.
|
| const d3Pkgs = [ | ||
| "d3", | ||
| "d3-array", | ||
| "d3-axis", | ||
| "d3-brush", | ||
| "d3-chord", | ||
| "d3-color", | ||
| "d3-contour", | ||
| "d3-delaunay", | ||
| "d3-dispatch", | ||
| "d3-drag", | ||
| "d3-dsv", | ||
| "d3-ease", | ||
| "d3-fetch", | ||
| "d3-force", | ||
| "d3-format", | ||
| "d3-geo", | ||
| "d3-hierarchy", | ||
| "d3-interpolate", | ||
| "d3-path", | ||
| "d3-polygon", | ||
| "d3-quadtree", | ||
| "d3-random", | ||
| "d3-scale", | ||
| "d3-scale-chromatic", | ||
| "d3-selection", | ||
| "d3-shape", | ||
| "d3-time", | ||
| "d3-time-format", | ||
| "d3-timer", | ||
| "d3-transition", | ||
| "d3-zoom", | ||
| ]; |
There was a problem hiding this comment.
this is cool, didn't know we were using d3 in places! 👍
| // eslint-disable-next-line | ||
| const supportedBrowsersRegExp = ${regexp}; |
There was a problem hiding this comment.
Did it get mad about dumping a regexp into a formatted string?
There was a problem hiding this comment.
With the updates to prettier/linting, without this, it will get stuck in a loop when trying to commit of needing to regenerate this, but if it's generated, then the linting complains. So, I disabled the linting just for this line to break it out of this loop.
| const CoralContainer: FunctionComponent = ({ children }) => ( | ||
| <CoralWindowContainer>{children}</CoralWindowContainer> | ||
| ); | ||
| const CoralContainer: FunctionComponent<CoralContainerProps> = ({ |
There was a problem hiding this comment.
ah, the "you have children is not assumed by default in the types" begins... (lol)
| @@ -81,7 +81,7 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({ | |||
| </Localized> | |||
| <Localized | |||
| id="resetPassword-passwordDescription" | |||
| $minLength={8} | |||
| vars={{ minLength: 8 }} | |||
There was a problem hiding this comment.
well this is a pleasant improvement syntax wise, I didn't really like specifying by $<varname>... felt too much like PHP haha
| const [{ moderationQueueSort }] = | ||
| useLocal<ModerateCardContainerLocal>(graphql` | ||
| fragment ModerateCardContainerLocal on Local { | ||
| moderationQueueSort | ||
| } | ||
| `); |
There was a problem hiding this comment.
looks like the new "recommended" typescript lint formatting has improved, I like the layout of this better. That or auto-formatting just wasn't run on this file in a while.
| @@ -27,7 +27,10 @@ async function main() { | |||
| ); | |||
|
|
|||
| // eslint-disable-next-line no-restricted-globals | |||
| ReactDOM.render(<Index />, document.getElementById("app")); | |||
| const container = document.getElementById("app"); | |||
| const root = createRoot(container!); | |||
There was a problem hiding this comment.
Hah, this makes the 4th time they've changed the default "start doing React" part of React lol
tessalt
added
the
🚀 merge it!
This reverts commit 9e0c2b0. # Conflicts: # src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.tsx # src/core/client/stream/test/comments/stream/liveCommentReplies-rtl.spec.tsx # src/core/client/stream/test/comments/stream/showConversation.spec.tsx # src/core/client/stream/test/fixtures.ts
What does this PR do?
These changes update Coral to use React 18. To achieve this, the following changes were required:
package updates
Localizedprops. Vars are now all included in avarsprop and elements are now always included in anelemsprop, instead of all separate props for each var/elem before.A few other packages had to be updated, but these are the main ones that required significant changes along with their upgrades.
React updates
childrenhas to be explicitly included in a component's props nowcreateRootinstead ofReactDOM.rendertest updates
Note that unfortunately we cannot yet use
createRootfor the stream. This is due to this issue in Virtuoso. So, the stream will useReactDOM.renderfor now and be on React 17. Once this issue is resolved, we should be able to switch it over too.What changes to the GraphQL/Database Schema does this PR introduce?
none
Does this PR introduce any new environment variables or feature flags?
no
If any indexes were added, were they added to
INDEXES.md?n/a
How do I test this PR?
You can test this by clicking around and seeing that everything still looks and works as expected in the stream/admin.
How do we deploy this PR?