From 40e10b6add193ccb37a06399e8f6172c4cdee94c Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Thu, 17 Nov 2022 09:59:27 +0000 Subject: [PATCH] fix: workaround for infinite global decorators (#398) --- .../scripts/__snapshots__/loader.test.js.snap | 42 +++++++++++++++---- app/react-native/scripts/loader.js | 15 ++++++- examples/native/.storybook/preview.js | 2 +- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/app/react-native/scripts/__snapshots__/loader.test.js.snap b/app/react-native/scripts/__snapshots__/loader.test.js.snap index 56e69f0ec0..74b48590fd 100644 --- a/app/react-native/scripts/__snapshots__/loader.test.js.snap +++ b/app/react-native/scripts/__snapshots__/loader.test.js.snap @@ -4,7 +4,7 @@ exports[`loader writeRequires when there are different file extensions writes th " /* do not change this file, it is auto generated by storybook. */ - import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; + import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native'; import \\"@storybook/addon-ondevice-notes/register\\"; import \\"@storybook/addon-ondevice-controls/register\\"; @@ -17,6 +17,14 @@ import \\"@storybook/addon-ondevice-actions/register\\"; import { decorators, parameters } from './preview'; if (decorators) { + if(__DEV__){ + // stops the warning from showing on every HMR + require('react-native').LogBox.ignoreLogs([ + '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0', + ]); + } + // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 + clearDecorators(); decorators.forEach((decorator) => addDecorator(decorator)); } @@ -25,7 +33,7 @@ import \\"@storybook/addon-ondevice-actions/register\\"; } - // temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated + try { argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)); } catch{} @@ -43,7 +51,7 @@ exports[`loader writeRequires when there is a story glob and exclude paths globs " /* do not change this file, it is auto generated by storybook. */ - import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; + import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native'; import \\"@storybook/addon-ondevice-notes/register\\"; import \\"@storybook/addon-ondevice-controls/register\\"; @@ -56,6 +64,14 @@ import \\"@storybook/addon-ondevice-actions/register\\"; import { decorators, parameters } from './preview'; if (decorators) { + if(__DEV__){ + // stops the warning from showing on every HMR + require('react-native').LogBox.ignoreLogs([ + '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0', + ]); + } + // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 + clearDecorators(); decorators.forEach((decorator) => addDecorator(decorator)); } @@ -64,7 +80,7 @@ import \\"@storybook/addon-ondevice-actions/register\\"; } - // temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated + try { argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)); } catch{} @@ -82,7 +98,7 @@ exports[`loader writeRequires when there is a story glob writes the story import " /* do not change this file, it is auto generated by storybook. */ - import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; + import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native'; import \\"@storybook/addon-ondevice-notes/register\\"; import \\"@storybook/addon-ondevice-controls/register\\"; @@ -95,6 +111,14 @@ import \\"@storybook/addon-ondevice-actions/register\\"; import { decorators, parameters } from './preview'; if (decorators) { + if(__DEV__){ + // stops the warning from showing on every HMR + require('react-native').LogBox.ignoreLogs([ + '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0', + ]); + } + // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 + clearDecorators(); decorators.forEach((decorator) => addDecorator(decorator)); } @@ -103,7 +127,7 @@ import \\"@storybook/addon-ondevice-actions/register\\"; } - // temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated + try { argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)); } catch{} @@ -121,7 +145,7 @@ exports[`loader writeRequires when there is no preview does not add preview rela " /* do not change this file, it is auto generated by storybook. */ - import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; + import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native'; import \\"@storybook/addon-ondevice-notes/register\\"; import \\"@storybook/addon-ondevice-controls/register\\"; @@ -132,7 +156,7 @@ import \\"@storybook/addon-ondevice-actions/register\\"; - // temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated + try { argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)); } catch{} @@ -150,7 +174,7 @@ exports[`loader writeRequires when there is no story glob or addons writes no st " /* do not change this file, it is auto generated by storybook. */ - import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; + import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native'; diff --git a/app/react-native/scripts/loader.js b/app/react-native/scripts/loader.js index 144bcd41a4..5d03842e68 100644 --- a/app/react-native/scripts/loader.js +++ b/app/react-native/scripts/loader.js @@ -6,10 +6,19 @@ const prettier = require('prettier'); const cwd = process.cwd(); const supportedExtensions = ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs']; +// we clear decorators as a workaround for global decorators getting infinitely applied on HMR const previewImports = ` import { decorators, parameters } from './preview'; if (decorators) { + if(__DEV__){ + // stops the warning from showing on every HMR + require('react-native').LogBox.ignoreLogs([ + '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0', + ]); + } + // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 + clearDecorators(); decorators.forEach((decorator) => addDecorator(decorator)); } @@ -98,7 +107,9 @@ function writeRequires({ configPath, absolute = false }) { if (main.addons.includes('@storybook/addon-ondevice-actions')) { enhancersImport = 'import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"'; - enhancers = `// temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated + + // try/catch is a temporary fix for https://github.com/storybookjs/react-native/issues/327 until a fix is found + enhancers = ` try { argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)); } catch{} @@ -108,7 +119,7 @@ function writeRequires({ configPath, absolute = false }) { const fileContent = ` /* do not change this file, it is auto generated by storybook. */ - import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; + import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native'; ${registerAddons} diff --git a/examples/native/.storybook/preview.js b/examples/native/.storybook/preview.js index c620b4121a..b3c1f00b73 100644 --- a/examples/native/.storybook/preview.js +++ b/examples/native/.storybook/preview.js @@ -28,5 +28,5 @@ export const parameters = { }; const styles = StyleSheet.create({ - container: { /* padding: 8, */ flex: 1 }, + container: { padding: 8, flex: 1 }, });