Skip to content

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.

@layershifter layershifter force-pushed the feat/react-18-support branch from 37438c6 to c0dac7e Compare July 18, 2023 11:24
@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
Contributor

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 force-pushed the feat/react-18-support branch from d12c92d to 8b59d72 Compare July 31, 2023 08:46
@layershifter layershifter merged commit 1d0df06 into microsoft:main Jul 31, 2023
@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