Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: improve React 18 support #72

Merged
merged 2 commits into from Jul 31, 2023

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Mar 10, 2022

Fixes #40.

This PR improves compatibility of @griffel/react by using a custom insertion factory that uses useInsertionEffect when it's available.

import * as React from 'react';

// @ts-expect-error
export const useInsertionEffect = React['useInsertion' + 'Effect']
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this string concat is done to prevent issues with transpiling/bundling. Would be nice to have a comment explaining this, it wasn't obvious to me until I read this emotion PR.

@github-actions
Copy link

github-actions bot commented Jul 18, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
__styles
3.508 kB
1.595 kB
3.768 kB
1.666 kB
260 B
71 B
react
makeResetStyles (runtime)
18.892 kB
7.296 kB
19.159 kB
7.362 kB
267 B
66 B
react
makeStaticStyles (runtime)
8.854 kB
3.92 kB
9.121 kB
3.991 kB
267 B
71 B
react
makeStyles (runtime)
23.323 kB
8.857 kB
23.59 kB
8.929 kB
267 B
72 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
__css
1.645 kB
767 B
shadow-dom
createShadowDOMRenderer
3.236 kB
1.408 kB
🤖 This report was generated against c33da85cf8d176e47fd07012c41574a735753528

@layershifter layershifter force-pushed the feat/react-18-support branch 3 times, most recently from f97f479 to dd1d4e7 Compare July 18, 2023 14:13
renderer.insertCSSRules(cssRules!);
insertionCache[rendererId] = true;
}
insertStyles(renderer, dir, cssRules!);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: maybe at this point the computeClasses function name above was never quite clear. This step does not only compute the classes but also inserts them to DOM

@layershifter layershifter force-pushed the feat/react-18-support branch 2 times, most recently from ab3c8ed to d12c92d Compare July 25, 2023 13:40
@layershifter layershifter changed the title wip: improve React 18 support chore: improve React 18 support Jul 25, 2023
@layershifter layershifter marked this pull request as ready for review July 25, 2023 13:52
@layershifter layershifter requested a review from a team as a code owner July 25, 2023 13:52
@layershifter layershifter merged commit 1d0df06 into microsoft:main Jul 31, 2023
4 checks passed
@layershifter layershifter deleted the feat/react-18-support branch July 31, 2023 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

react: Better support for React 18
3 participants