From 14c398dd815789b9239b58453b79442688b714e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=ADcholas=20Andr=C3=A9?= Date: Sat, 27 Jul 2024 15:02:09 -0300 Subject: [PATCH] fix: default props deprecation (#829) --- .changeset/large-spies-give.md | 6 ++++++ .../core/src/react/blocks/YoutubeLiteBlock.tsx | 10 +--------- .../src/react/components/BaseBlocksRenderer.tsx | 16 +++++++++++++--- packages/core/src/react/components/Menu.tsx | 17 +---------------- .../components/__tests__/BlocksRenderer.tsx | 6 ++++-- .../__snapshots__/BlocksRenderer.tsx.snap | 2 +- packages/next/src/blocks/LinkBlock.tsx | 10 +--------- packages/next/src/blocks/TwitterBlock.tsx | 10 +--------- 8 files changed, 28 insertions(+), 49 deletions(-) create mode 100644 .changeset/large-spies-give.md diff --git a/.changeset/large-spies-give.md b/.changeset/large-spies-give.md new file mode 100644 index 000000000..09d90ae72 --- /dev/null +++ b/.changeset/large-spies-give.md @@ -0,0 +1,6 @@ +--- +"@headstartwp/core": patch +"@headstartwp/next": patch +--- + +remove usage of defaultProps and intropduce the ability to attach a default test function directly to the component diff --git a/packages/core/src/react/blocks/YoutubeLiteBlock.tsx b/packages/core/src/react/blocks/YoutubeLiteBlock.tsx index 17a5b0f7b..2c053ec58 100644 --- a/packages/core/src/react/blocks/YoutubeLiteBlock.tsx +++ b/packages/core/src/react/blocks/YoutubeLiteBlock.tsx @@ -69,12 +69,4 @@ export function YoutubeLiteBlock({ domNode }: Omit; } -/** - * @internal - */ -// eslint-disable-next-line no-redeclare -export namespace YoutubeLiteBlock { - export const defaultProps = { - test: (node) => isYoutubeEmbed(node), - }; -} +YoutubeLiteBlock.test = (node) => isYoutubeEmbed(node); diff --git a/packages/core/src/react/components/BaseBlocksRenderer.tsx b/packages/core/src/react/components/BaseBlocksRenderer.tsx index 4f714e4c5..f28e8e7a8 100644 --- a/packages/core/src/react/components/BaseBlocksRenderer.tsx +++ b/packages/core/src/react/components/BaseBlocksRenderer.tsx @@ -146,12 +146,18 @@ const shouldReplaceWithBlock = (block: ReactNode, domNode: Element, site?: Headl } const { test: testFn, tagName, classList } = block.props; - const hasTestFunction = typeof testFn === 'function'; + const hasTestFunctionProp = typeof testFn === 'function' && block; - if (hasTestFunction) { + if (hasTestFunctionProp) { return testFn(domNode, site); } + // @ts-expect-error + if (typeof block?.type?.test === 'function') { + // @ts-expect-error + return block.type.test(domNode, site); + } + if (typeof tagName === 'string' && typeof classList !== 'undefined') { return isBlock(domNode, { tagName, className: classList }); } @@ -171,7 +177,6 @@ export function BaseBlocksRenderer({ const blocks: ReactNode[] = React.Children.toArray(children); // Check if components[] has a non-ReactNode type Element - // const hasInvalidComponent: boolean = blocks.findIndex((block) => !isValidElement(block)) !== -1; const hasInvalidComponent: boolean = blocks.findIndex((block) => { if (!isValidElement(block)) { @@ -186,6 +191,11 @@ export function BaseBlocksRenderer({ return false; } + // @ts-expect-error + if (typeof block?.type?.test === 'function') { + return false; + } + // if does not have a test function it must have tagName and classList // if it does then it is not invalid if (typeof tagName !== 'undefined' && typeof classList !== 'undefined') { diff --git a/packages/core/src/react/components/Menu.tsx b/packages/core/src/react/components/Menu.tsx index 5aa8aef2c..540bad023 100644 --- a/packages/core/src/react/components/Menu.tsx +++ b/packages/core/src/react/components/Menu.tsx @@ -110,7 +110,7 @@ type MenuProps = { export function Menu({ items, - className, + className = 'menu-container', depth = 0, topLevelItemsClickable = false, itemWrapper = DefaultItemWrapper, @@ -132,18 +132,3 @@ export function Menu({ ); } - -/** - * @internal - */ -// eslint-disable-next-line no-redeclare -export namespace Menu { - export const defaultProps = { - className: 'menu-container', - topLevelItemsClickable: false, - depth: 0, - itemWrapper: DefaultItemWrapper, - menuWrapper: DefaultMenuWrapper, - linkWrapper: DefaultLinkWrapper, - }; -} diff --git a/packages/core/src/react/components/__tests__/BlocksRenderer.tsx b/packages/core/src/react/components/__tests__/BlocksRenderer.tsx index 242f4e953..cec4388e9 100644 --- a/packages/core/src/react/components/__tests__/BlocksRenderer.tsx +++ b/packages/core/src/react/components/__tests__/BlocksRenderer.tsx @@ -223,17 +223,19 @@ describe('BlocksRenderer', () => { expect(container).toMatchSnapshot(); }); - it('forward blockProps to the component', () => { + it('forward blockProps to the component and support attaching test function directly to component', () => { const DivToP = ({ block }: BlockProps<{ blockAttribute: string }>) => { return

{JSON.stringify(block)}

; }; + DivToP.test = (node) => isBlockByName(node, '10up/custom-block'); + const { container } = render( `} forwardBlockAttributes > - isBlockByName(node, '10up/custom-block')} /> + , ); diff --git a/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap b/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap index ea45e262a..548076689 100644 --- a/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap +++ b/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BlocksRenderer forward blockProps to the component 1`] = ` +exports[`BlocksRenderer forward blockProps to the component and support attaching test function directly to component 1`] = `

, 'c ); } -/** - * @internal - */ -// eslint-disable-next-line no-redeclare -export namespace LinkBlock { - export const defaultProps = { - test: (node, site) => isAnchorTag(node, { isInternalLink: true }, site), - }; -} +LinkBlock.test = (node, site) => isAnchorTag(node, { isInternalLink: true }, site); diff --git a/packages/next/src/blocks/TwitterBlock.tsx b/packages/next/src/blocks/TwitterBlock.tsx index 01c2c3465..8fd331dd9 100644 --- a/packages/next/src/blocks/TwitterBlock.tsx +++ b/packages/next/src/blocks/TwitterBlock.tsx @@ -32,12 +32,4 @@ export function TwitterBlock({ children }: Omit, 'compo ); } -/** - * @internal - */ -// eslint-disable-next-line no-redeclare -export namespace TwitterBlock { - export const defaultProps = { - test: (node) => isTwitterEmbed(node), - }; -} +TwitterBlock.test = (node) => isTwitterEmbed(node);