fix: default props deprecation (#829)

.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

packages/core/src/react/blocks/YoutubeLiteBlock.tsx

@@ -69,12 +69,4 @@ export function YoutubeLiteBlock({ domNode }: Omit<IYoutubeLiteBlock, 'component
 	return <lite-youtube videoid={videoId} videotitle={title} />;
 }
 
-/**
- * @internal
- */
-// eslint-disable-next-line no-redeclare
-export namespace YoutubeLiteBlock {
-	export const defaultProps = {
-		test: (node) => isYoutubeEmbed(node),
-	};
-}
+YoutubeLiteBlock.test = (node) => isYoutubeEmbed(node);

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<BlockProps>(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') {

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({
 		</MenuWrapper>
 	);
 }
-
-/**
- * @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,
-	};
-}

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 <p className={block?.className}>{JSON.stringify(block)}</p>;
 		};
 
+		DivToP.test = (node) => isBlockByName(node, '10up/custom-block');
+
 		const { container } = render(
 			<BlocksRenderer
 				html={`<div class="my-class" data-wp-block-name='10up/custom-block' data-wp-block='${JSON.stringify({ blockAttribute: 'this is a block attribute' })}'></div>`}
 				forwardBlockAttributes
 			>
-				<DivToP test={(node) => isBlockByName(node, '10up/custom-block')} />
+				<DivToP />
 			</BlocksRenderer>,
 		);
 

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`] = `
 <div>
   <p
     class="my-class"

packages/next/src/blocks/LinkBlock.tsx

@@ -50,12 +50,4 @@ export function LinkBlock({ domNode, children }: Omit<IBlock<LinkBlockProps>, '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);

packages/next/src/blocks/TwitterBlock.tsx

@@ -32,12 +32,4 @@ export function TwitterBlock({ children }: Omit<IBlock<IBlockAttributes>, 'compo
 	);
 }
 
-/**
- * @internal
- */
-// eslint-disable-next-line no-redeclare
-export namespace TwitterBlock {
-	export const defaultProps = {
-		test: (node) => isTwitterEmbed(node),
-	};
-}
+TwitterBlock.test = (node) => isTwitterEmbed(node);