From 4e9fb21666a3d2fc18a503b53d9da3cdeee7d54c Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 6 Sep 2022 15:27:14 +0200 Subject: [PATCH 1/3] feat: add makeResetStyles to @griffel/react --- ...-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json | 7 +++++ ...-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json | 7 +++++ .../makeResetStyles-runtime.fixture.js | 7 +++++ .../bundle-size/makeStylesRuntime.fixture.js | 6 ++-- .../makeResetStyles-runtime.fixture.js | 7 +++++ packages/react/src/index.ts | 1 + packages/react/src/makeResetStyles.ts | 28 +++++++++++++++++++ packages/react/src/makeStyles.ts | 23 +-------------- packages/react/src/utils/isInsideComponent.ts | 22 +++++++++++++++ 9 files changed, 83 insertions(+), 25 deletions(-) create mode 100644 change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json create mode 100644 change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json create mode 100644 packages/core/bundle-size/makeResetStyles-runtime.fixture.js create mode 100644 packages/react/bundle-size/makeResetStyles-runtime.fixture.js create mode 100644 packages/react/src/makeResetStyles.ts create mode 100644 packages/react/src/utils/isInsideComponent.ts diff --git a/change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json b/change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json new file mode 100644 index 0000000000..7a21998777 --- /dev/null +++ b/change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: add bundle size fixtures", + "packageName": "@griffel/core", + "email": "olfedias@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json b/change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json new file mode 100644 index 0000000000..3f619b14db --- /dev/null +++ b/change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add makeResetStyles to @griffel/react", + "packageName": "@griffel/react", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/core/bundle-size/makeResetStyles-runtime.fixture.js b/packages/core/bundle-size/makeResetStyles-runtime.fixture.js new file mode 100644 index 0000000000..28c3c53b05 --- /dev/null +++ b/packages/core/bundle-size/makeResetStyles-runtime.fixture.js @@ -0,0 +1,7 @@ +import { __styles, mergeClasses } from '@griffel/core'; + +console.log(__styles, mergeClasses); + +export default { + name: 'makeStyles + mergeClasses (build time)', +}; diff --git a/packages/core/bundle-size/makeStylesRuntime.fixture.js b/packages/core/bundle-size/makeStylesRuntime.fixture.js index 4cf0104a8f..9eb758e902 100644 --- a/packages/core/bundle-size/makeStylesRuntime.fixture.js +++ b/packages/core/bundle-size/makeStylesRuntime.fixture.js @@ -1,7 +1,7 @@ -import { makeStyles, mergeClasses } from '@griffel/core'; +import { makeResetStyles } from '@griffel/core'; -console.log(makeStyles, mergeClasses); +console.log(makeResetStyles); export default { - name: 'makeStyles + mergeClasses (runtime)', + name: 'makeResetStyles (runtime)', }; diff --git a/packages/react/bundle-size/makeResetStyles-runtime.fixture.js b/packages/react/bundle-size/makeResetStyles-runtime.fixture.js new file mode 100644 index 0000000000..63ec7d5785 --- /dev/null +++ b/packages/react/bundle-size/makeResetStyles-runtime.fixture.js @@ -0,0 +1,7 @@ +import { makeResetStyles } from '@griffel/react'; + +console.log(makeResetStyles); + +export default { + name: 'makeResetStyles (runtime)', +}; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index b75982c966..555214edff 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -2,6 +2,7 @@ export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core'; export type { GriffelStyle, CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core'; export { makeStyles } from './makeStyles'; +export { makeResetStyles } from './makeResetStyles'; export { makeStaticStyles } from './makeStaticStyles'; export { renderToStyleElements } from './renderToStyleElements'; diff --git a/packages/react/src/makeResetStyles.ts b/packages/react/src/makeResetStyles.ts new file mode 100644 index 0000000000..a42b980144 --- /dev/null +++ b/packages/react/src/makeResetStyles.ts @@ -0,0 +1,28 @@ +import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core'; +import type { GriffelResetStyle } from '@griffel/core'; + +import { isInsideComponent } from './utils/isInsideComponent'; +import { useRenderer } from './RendererContext'; +import { useTextDirection } from './TextDirectionContext'; + +export function makeResetStyles(styles: GriffelResetStyle) { + const getStyles = vanillaMakeResetStyles(styles); + + if (process.env.NODE_ENV !== 'production') { + if (isInsideComponent()) { + throw new Error( + [ + "makeResetStyles(): this function cannot be called in component's scope.", + 'All makeResetStyles() calls should be top level i.e. in a root scope of a file.', + ].join(' '), + ); + } + } + + return function useClassName(): string { + const dir = useTextDirection(); + const renderer = useRenderer(); + + return getStyles({ dir, renderer }); + }; +} diff --git a/packages/react/src/makeStyles.ts b/packages/react/src/makeStyles.ts index fe0ededf77..f999675adc 100644 --- a/packages/react/src/makeStyles.ts +++ b/packages/react/src/makeStyles.ts @@ -1,31 +1,10 @@ import { makeStyles as vanillaMakeStyles } from '@griffel/core'; -import * as React from 'react'; import type { GriffelStyle } from '@griffel/core'; +import { isInsideComponent } from './utils/isInsideComponent'; import { useRenderer } from './RendererContext'; import { useTextDirection } from './TextDirectionContext'; -function isInsideComponent() { - // React 18 always logs errors if a dispatcher is not present: - // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36 - try { - // @ts-expect-error "SECRET_INTERNALS" are not typed - const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; - - // Before any React component was rendered "dispatcher" will be "null" - if (dispatcher === null || dispatcher === undefined) { - return false; - } - - // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but - // a call on the dispatcher don't - dispatcher.useContext({}); - return true; - } catch (e) { - return false; - } -} - export function makeStyles(stylesBySlots: Record) { const getStyles = vanillaMakeStyles(stylesBySlots); diff --git a/packages/react/src/utils/isInsideComponent.ts b/packages/react/src/utils/isInsideComponent.ts new file mode 100644 index 0000000000..5f3bbcd822 --- /dev/null +++ b/packages/react/src/utils/isInsideComponent.ts @@ -0,0 +1,22 @@ +import * as React from 'react'; + +export function isInsideComponent() { + // React 18 always logs errors if a dispatcher is not present: + // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36 + try { + // @ts-expect-error "SECRET_INTERNALS" are not typed + const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; + + // Before any React component was rendered "dispatcher" will be "null" + if (dispatcher === null || dispatcher === undefined) { + return false; + } + + // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but + // a call on the dispatcher don't + dispatcher.useContext({}); + return true; + } catch (e) { + return false; + } +} From cc153f674fc910d9763c99c857cedd9e78190942 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 4 Oct 2022 19:40:15 +0200 Subject: [PATCH 2/3] Update packages/react/src/utils/isInsideComponent.ts Co-authored-by: Bernardo Sunderhus --- packages/react/src/utils/isInsideComponent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/utils/isInsideComponent.ts b/packages/react/src/utils/isInsideComponent.ts index 5f3bbcd822..2b1f928509 100644 --- a/packages/react/src/utils/isInsideComponent.ts +++ b/packages/react/src/utils/isInsideComponent.ts @@ -13,7 +13,7 @@ export function isInsideComponent() { } // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but - // a call on the dispatcher don't + // a call on the dispatcher wont dispatcher.useContext({}); return true; } catch (e) { From 346deb11591d10a0aec64af6940a602063eaa4e3 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 4 Oct 2022 19:43:40 +0200 Subject: [PATCH 3/3] fix bundle size fixtures --- .../core/bundle-size/makeResetStyles-runtime.fixture.js | 6 +++--- packages/core/bundle-size/makeStylesRuntime.fixture.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/bundle-size/makeResetStyles-runtime.fixture.js b/packages/core/bundle-size/makeResetStyles-runtime.fixture.js index 28c3c53b05..9eb758e902 100644 --- a/packages/core/bundle-size/makeResetStyles-runtime.fixture.js +++ b/packages/core/bundle-size/makeResetStyles-runtime.fixture.js @@ -1,7 +1,7 @@ -import { __styles, mergeClasses } from '@griffel/core'; +import { makeResetStyles } from '@griffel/core'; -console.log(__styles, mergeClasses); +console.log(makeResetStyles); export default { - name: 'makeStyles + mergeClasses (build time)', + name: 'makeResetStyles (runtime)', }; diff --git a/packages/core/bundle-size/makeStylesRuntime.fixture.js b/packages/core/bundle-size/makeStylesRuntime.fixture.js index 9eb758e902..4cf0104a8f 100644 --- a/packages/core/bundle-size/makeStylesRuntime.fixture.js +++ b/packages/core/bundle-size/makeStylesRuntime.fixture.js @@ -1,7 +1,7 @@ -import { makeResetStyles } from '@griffel/core'; +import { makeStyles, mergeClasses } from '@griffel/core'; -console.log(makeResetStyles); +console.log(makeStyles, mergeClasses); export default { - name: 'makeResetStyles (runtime)', + name: 'makeStyles + mergeClasses (runtime)', };