From 8ab4cf5be5c2e912a3d08c19e014c04587be4141 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sun, 3 Mar 2024 16:03:42 +0530 Subject: [PATCH 1/5] add TS support for `PostTitle` component --- components/post-title/{index.js => index.tsx} | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) rename components/post-title/{index.js => index.tsx} (53%) diff --git a/components/post-title/index.js b/components/post-title/index.tsx similarity index 53% rename from components/post-title/index.js rename to components/post-title/index.tsx index 3db54ad6..37b324c9 100644 --- a/components/post-title/index.js +++ b/components/post-title/index.tsx @@ -1,11 +1,20 @@ import { useEntityProp } from '@wordpress/core-data'; import { RichText, store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import PropTypes from 'prop-types'; import { usePost } from '../../hooks'; -export const PostTitle = (props) => { - const { tagName: TagName = 'h1', ...rest } = props; +/** + * Defines an object type with property `tagName` with type E. + * `tagName` is the HTML tag name (e.g., "h1", "a") that can be used in JSX. + */ +type PolymorphicTagNameProp = { + tagName?: E; +}; + +type PolymorphicProps = React.PropsWithChildren & PolymorphicTagNameProp>; + +const defaultElement = 'h1'; +export function PostTitle( { tagName, ...rest }: PolymorphicProps ) { const { postId, postType, isEditable } = usePost(); const [rawTitle = '', setTitle, fullTitle] = useEntityProp( @@ -20,6 +29,8 @@ export const PostTitle = (props) => { [], ); + const TagName = tagName ?? defaultElement; + if (!isEditable) { // eslint-disable-next-line react/no-danger return ; @@ -37,10 +48,17 @@ export const PostTitle = (props) => { ); }; -PostTitle.propTypes = { - tagName: PropTypes.string, -}; - PostTitle.defaultProps = { tagName: 'h1', }; + +function LOL() { + return ( + <> + + + + + + ); +} From dbca01753330c6c8a1dec629d5675286a45fcf2c Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Mon, 4 Mar 2024 11:23:56 +0530 Subject: [PATCH 2/5] use alt approach --- components/post-title/index.tsx | 31 +++++++++---------------------- 1 file changed, 9 insertions(+), 22 deletions(-) diff --git a/components/post-title/index.tsx b/components/post-title/index.tsx index 37b324c9..5c43d64b 100644 --- a/components/post-title/index.tsx +++ b/components/post-title/index.tsx @@ -3,18 +3,16 @@ import { RichText, store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { usePost } from '../../hooks'; -/** - * Defines an object type with property `tagName` with type E. - * `tagName` is the HTML tag name (e.g., "h1", "a") that can be used in JSX. - */ -type PolymorphicTagNameProp = { - tagName?: E; -}; +interface PostTitleProps { + tagName?: T; +} -type PolymorphicProps = React.PropsWithChildren & PolymorphicTagNameProp>; +type PostTitlePropsWithOmit = PostTitleProps & Omit, keyof PostTitleProps>; -const defaultElement = 'h1'; -export function PostTitle( { tagName, ...rest }: PolymorphicProps ) { +export const PostTitle = ({ + tagName, + ...rest +}: PostTitlePropsWithOmit ) => { const { postId, postType, isEditable } = usePost(); const [rawTitle = '', setTitle, fullTitle] = useEntityProp( @@ -29,7 +27,7 @@ export function PostTitle( [], ); - const TagName = tagName ?? defaultElement; + const TagName = tagName ?? 'h1'; if (!isEditable) { // eslint-disable-next-line react/no-danger @@ -51,14 +49,3 @@ export function PostTitle( PostTitle.defaultProps = { tagName: 'h1', }; - -function LOL() { - return ( - <> - - - - - - ); -} From 24ac36ad7f9fca747efcffd12582ac52963d0d58 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Mon, 11 Mar 2024 16:55:12 +0530 Subject: [PATCH 3/5] add verbosity --- components/post-title/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/post-title/index.tsx b/components/post-title/index.tsx index 5c43d64b..6318b280 100644 --- a/components/post-title/index.tsx +++ b/components/post-title/index.tsx @@ -3,16 +3,16 @@ import { RichText, store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { usePost } from '../../hooks'; -interface PostTitleProps { - tagName?: T; +interface PostTitleProps { + tagName?: TElementType; } -type PostTitlePropsWithOmit = PostTitleProps & Omit, keyof PostTitleProps>; +type PostTitlePropsWithOmit = PostTitleProps & Omit, keyof PostTitleProps>; -export const PostTitle = ({ +export const PostTitle = ({ tagName, ...rest -}: PostTitlePropsWithOmit ) => { +}: PostTitlePropsWithOmit ) => { const { postId, postType, isEditable } = usePost(); const [rawTitle = '', setTitle, fullTitle] = useEntityProp( From 045956e9a7c1e19c3b58cb9b1008bd75dd83236b Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Mon, 1 Apr 2024 23:35:36 +0530 Subject: [PATCH 4/5] assign default tagName value --- components/post-title/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/post-title/index.tsx b/components/post-title/index.tsx index 6318b280..df7c814c 100644 --- a/components/post-title/index.tsx +++ b/components/post-title/index.tsx @@ -4,13 +4,13 @@ import { useSelect } from '@wordpress/data'; import { usePost } from '../../hooks'; interface PostTitleProps { - tagName?: TElementType; + tagName?: TElementType | keyof JSX.IntrinsicElements; } type PostTitlePropsWithOmit = PostTitleProps & Omit, keyof PostTitleProps>; export const PostTitle = ({ - tagName, + tagName = 'h1', ...rest }: PostTitlePropsWithOmit ) => { const { postId, postType, isEditable } = usePost(); @@ -27,7 +27,7 @@ export const PostTitle = ({ [], ); - const TagName = tagName ?? 'h1'; + const TagName = tagName; if (!isEditable) { // eslint-disable-next-line react/no-danger From 54f3f98ee588e205bbf04a38f55ca7528537b046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Fri, 3 May 2024 10:56:25 +0200 Subject: [PATCH 5/5] fix remove default props --- components/post-title/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/components/post-title/index.tsx b/components/post-title/index.tsx index df7c814c..f764eeb4 100644 --- a/components/post-title/index.tsx +++ b/components/post-title/index.tsx @@ -10,7 +10,7 @@ interface PostTitleProps { type PostTitlePropsWithOmit = PostTitleProps & Omit, keyof PostTitleProps>; export const PostTitle = ({ - tagName = 'h1', + tagName: TagName = 'h1', ...rest }: PostTitlePropsWithOmit ) => { const { postId, postType, isEditable } = usePost(); @@ -27,8 +27,6 @@ export const PostTitle = ({ [], ); - const TagName = tagName; - if (!isEditable) { // eslint-disable-next-line react/no-danger return ; @@ -45,7 +43,3 @@ export const PostTitle = ({ /> ); }; - -PostTitle.defaultProps = { - tagName: 'h1', -};