What should the arguments of a custom component be?

[re-taro]

I'm try to use rehype-react's Override default elements option.

But I can't understand to override it.

I want to override each element to these custom Chakra components

  p: props => {
    const { children } = props
    return <Text mb={2}>{children}</Text>
  },
  em: props => {
    const { children } = props
    return <Text as="em">{children}</Text>
  },
  blockquote: props => {
    const { children } = props
    return (
      <Code as="blockquote" p={2}>
        {children}
      </Code>
    )
  },
  code: props => {
    const { inline, children, className } = props
    if (inline) {
      return <Code p={2}>{children}</Code>
    }
    return (
      <Code className={className} whiteSpace="break-spaces" d="block" w="full" p={2}>
        {children}
      </Code>
    )
  },
  del: props => {
    const { children } = props
    return <Text as="del">{children}</Text>
  },
  hr: _props => {
    return <Divider />
  },
  a: Link,
  img: props => {
    const { src, alt } = props
    return <Image borderRadius="lg" w="full" src={src as string} alt={alt} mb={4} />
  },
  text: props => {
    const { children } = props
    return <Text as="span">{children}</Text>
  },
  ul: props => {
    const { ordered, children, depth } = props
    const attrs = getCoreProps(props)
    let Element = UnorderedList
    let styleType = 'disc'
    if (ordered) {
      Element = OrderedList
      styleType = 'decimal'
    }
    if (depth === 1) styleType = 'circle'
    return (
      <Element spacing={2} as={ordered ? 'ol' : 'ul'} styleType={styleType} pl={4} {...attrs}>
        {children}
      </Element>
    )
  },
  ol: props => {
    const { ordered, children, depth } = props
    const attrs = getCoreProps(props)
    let Element = UnorderedList
    let styleType = 'disc'
    if (ordered) {
      Element = OrderedList
      styleType = 'decimal'
    }
    if (depth === 1) styleType = 'circle'
    return (
      <Element spacing={2} as={ordered ? 'ol' : 'ul'} styleType={styleType} pl={4} {...attrs}>
        {children}
      </Element>
    )
  },
  li: props => {
    const { children, checked } = props
    let checkbox = null
    if (checked !== null && checked !== undefined) {
      checkbox = (
        <Checkbox isChecked={checked} isReadOnly>
          {children}
        </Checkbox>
      )
    }
    return (
      <ListItem {...getCoreProps(props)} listStyleType={checked !== null ? 'none' : 'inherit'}>
        {checkbox || children}
      </ListItem>
    )
  },
  heading: props => {
    const { level, children } = props
    const sizes = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    return (
      <Heading my={4} as={`h${level}`} size={sizes[level - 1]} {...getCoreProps(props)}>
        {children}
      </Heading>
    )
  },
  pre: props => {
    const { children } = props
    return <chakra.pre {...getCoreProps(props)}>{children}</chakra.pre>
  },
  table: Table,
  thead: Thead,
  tbody: Tbody,
  tr: props => <Tr>{props.children}</Tr>,
  td: props => <Td>{props.children}</Td>,
  th: props => <Th>{props.children}</Th>

Actually I'm using TypeScript so I need to add type annotation but also I can't know the optimal solution.

[ChristianMurphy]

@re-taro could you share an example of what type of error you are seeing?
Trying out minimal example rehype-react with <p> replaced by Chakra's <Text> element appears to work in both JS and TS as expected.
https://codesandbox.io/s/rehype-react-with-chakra-hswxdo?file=/src/index.tsx

code example

import React, {
  createElement,
  ReactElement,
  Fragment,
  useEffect,
  useState
} from "react";
import { render } from "react-dom";
import { unified } from "unified";
import rehypeParse from "rehype-parse";
import rehypeReact from "rehype-react";
import { ChakraProvider, Text } from "@chakra-ui/react";

const text = `<h2>Hello, world!</h2>
<p>Welcome to my page 👀</p>`;

function useProcessor(text) {
  const [Content, setContent] = useState<ReactElement>(<div>loading</div>);

  useEffect(() => {
    unified()
      .use(rehypeParse, { fragment: true })
      .use(rehypeReact, {
        createElement,
        Fragment,
        components: {
          p: ({ children }) => {
            return <Text mb={2}>{children}</Text>;
          }
        }
      })
      .process(text)
      .then((file) => {
        setContent(file.result);
      });
  }, [text]);

  return Content;
}

export default function App() {
  return useProcessor(text);
}

render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById("main")
);

What should the arguments of a custom component be

The properties/arguments of built in elements match their intrinsic element.
For example on a paragraph attributes like id (<p id="example">) can be accessed with and replaced with Text from Chakra by doing ({id, children}) => (<Text id={id}>{children}</Text>)
And TypeScript will verify that the attributes line up with what is supported/expected for the given HTML tag.

[re-taro]

I wrote like this

import React from 'react'
import { unified } from 'unified'
import mdparser from 'remark-parse'
import remarkGfm from 'remark-gfm'
import emoji from 'remark-emoji'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import * as shiki from 'shiki'
import rehypeShiki from '@leafac/rehype-shiki'
import mdast2hast from 'remark-rehype'
import rehypeReact from 'rehype-react'
import { Text } from '@chakra-ui/react'

const parser = async(md: string) => {
  const result = unified()
    .use(mdparser)
    .use(remarkGfm)
    .use(emoji)
    .use(remarkMath)
    .use(mdast2hast)
    .use(rehypeKatex)
    .use(rehypeShiki, {
      highlighter: await shiki.getHighlighter({ theme: 'nord'})
    })
    .use(rehypeReact, {
      createElement: React.createElement,
      Fragment: React.Fragment,
      components: {
        p: ({ children }) => {
          return <Text mb={2}>{children}</Text>
        }
      }
    })
}

And the error is like this

Argument of type '[{ createElement: { (type: "input", props?: (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null | undefined, ...children: ReactNode[]): DetailedReactHTMLElement<...>; <P extends HTMLAttributes<...>, T extends HTMLElement>(type: keyof ReactHTML, props?: (ClassAttributes<...> & P) | ... ...' is not assignable to parameter of type '[boolean] | [Options]'.
  Type '[{ createElement: { (type: "input", props?: (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null | undefined, ...children: ReactNode[]): DetailedReactHTMLElement<...>; <P extends HTMLAttributes<...>, T extends HTMLElement>(type: keyof ReactHTML, props?: (ClassAttributes<...> & P) | ... ...' is not assignable to type '[boolean]'.
    Type '{ createElement: { (type: "input", props?: (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null | undefined, ...children: ReactNode[]): DetailedReactHTMLElement<...>; <P extends HTMLAttributes<...>, T extends HTMLElement>(type: keyof ReactHTML, props?: (ClassAttributes<...> & P) | ... 1...' is not assignable to type 'boolean'.ts(2345)

[re-taro]

Oh I found it in tsconfig.json change compiler option strict: true to strict: false the errors had disappeared.

Is there something wrong with the type definition of rehype-react?

[ChristianMurphy]

Strict mode appears to be pushing TypeScript past it's limits of inference.
In that case the CompontentType<IntrinsicElements<'tag-name-goes-here'>> can be used directly.
For example https://codesandbox.io/s/rehype-react-with-chakra-strict-mode-w1h45c?file=/src/index.tsx

source from sandbox

import React, { ComponentType } from "react";
import { unified } from "unified";
import mdparser from "remark-parse";
import remarkGfm from "remark-gfm";
import emoji from "remark-emoji";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
// @ts-ignore this package does not have typings
// import * as shiki from "shiki";
// @ts-ignore this package does not have typings
// import rehypeShiki from "@leafac/rehype-shiki";
import mdast2hast from "remark-rehype";
import rehypeReact from "rehype-react";
import { Text } from "@chakra-ui/react";

const p: ComponentType<JSX.IntrinsicElements["p"]> = ({ children }) => {
  return <Text mb={2}>{children}</Text>;
};

const parser = async (md: string) => {
  const result = unified()
    .use(mdparser)
    .use(remarkGfm)
    .use(emoji)
    .use(remarkMath)
    .use(mdast2hast)
    .use(rehypeKatex)
    // .use(rehypeShiki, {
    //   highlighter: await shiki.getHighlighter({ theme: "nord" })
    // })
    .use(rehypeReact, {
      createElement: React.createElement,
      Fragment: React.Fragment,
      components: {
        p
      }
    });
};

[wooorm]

Also: perhaps rehypeShiki can be typed? Doesn’t that solve it as well?

[re-taro]

Thanks to @ChristianMurphy !
Now I can launch my blog :)