refactor: matching jsx component logic in string fragments

examples/normal/.dumi/theme/builtins/Identity.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface IdentityProps {
+  [key: string]: React.ReactNode;
+}
+
+function Identity(props: React.PropsWithChildren<IdentityProps>) {
+  const { children, ...restProps } = props;
+  return (
+    <ul>
+      {Object.entries(restProps).map(([key, value]) => (
+        <li key={key}>{value}</li>
+      ))}
+      {children && <li>{children}</li>}
+    </ul>
+  );
+}
+
+export default Identity;

examples/normal/docs/hello/index.md

@@ -6,3 +6,53 @@ group: 测试分组
 ## This is hello/index.md
 
 约定式导航、分组测试
+
+## Issue 1836
+
+> debug https://github.com/umijs/dumi/issues/1836
+
+### case 01
+
+<Identity>Hello Dumi!</Identity>
+
+```tsx | pure
+<Identity>Hello Dumi!</Identity>
+```
+
+### case 02
+
+<Identity name="Awesome"></Identity>
+
+```tsx | pure
+<Identity name="Awesome"></Identity>
+```
+
+### case 03
+
+<Identity name="Required<Props>"></Identity>
+
+```tsx | pure
+<Identity name="Required<Props>"></Identity>
+```
+
+### case 04
+
+<Identity>
+  Hello Dumi!
+  <Identity name="Awesome"></Identity>
+  <Identity name="Required<Props>"></Identity>
+  <Identity name="Required<Props>">
+    <Identity name="Awesome">Awesome Children</Identity>
+  </Identity>
+</Identity>
+
+```tsx | pure
+<Identity>
+  Hello Dumi!
+  <Identity name="Awesome"></Identity>
+  <Identity name="Required<Props>"></Identity>
+  <Identity name="Required<Props>">
+    <Identity name="Awesome">Awesome Children</Identity>
+  </Identity>
+</Identity>
+```

src/loaders/markdown/transformer/__snapshots__/rehypeRaw.test.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`rehypeRaw > addCustomPropsToMatchingJSX > should match nested jsx components 1`] = `
+"<Foo $tag-name=\\"Foo\\" props=\\"123\\" />
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\" />
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\"></Foo>
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\">bar</Foo>
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\"><Foo $tag-name=\\"Foo\\" props=\\"123\\" />
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\" />
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\"></Foo>
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\">bar</Foo>
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\"><Foo $tag-name=\\"Foo\\" props=\\"123\\" />
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\" />
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\"></Foo>
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\">bar</Foo>
+<Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\">bar</Foo></Foo></Foo>"
+`;

src/loaders/markdown/transformer/rehypeRaw.test.ts

@@ -0,0 +1,69 @@
+import { __private__ } from './rehypeRaw';
+
+const { addCustomPropsToMatchingJSX } = __private__;
+
+describe('rehypeRaw', () => {
+  describe('addCustomPropsToMatchingJSX', () => {
+    it('should return the original string when there are no jsx fragments to match', () => {
+      const input = 'foo bar';
+      expect(addCustomPropsToMatchingJSX(input)).toBe(input);
+    });
+
+    it('should match jsx fragments without children', () => {
+      const input = '<Foo />';
+      expect(addCustomPropsToMatchingJSX(input)).toMatchInlineSnapshot(
+        '"<Foo $tag-name=\\"Foo\\" />"',
+      );
+    });
+
+    it('should match jsx fragments that contain children', () => {
+      const input = '<Foo>bar</Foo>';
+      expect(addCustomPropsToMatchingJSX(input)).toMatchInlineSnapshot(
+        '"<Foo $tag-name=\\"Foo\\" >bar</Foo>"',
+      );
+    });
+
+    it('should match multiple jsx fragments', () => {
+      const input = `
+<Foo>bar</Foo>
+<Bar>foo</Bar>
+<Footer />
+      `.trim();
+      expect(addCustomPropsToMatchingJSX(input)).toMatchInlineSnapshot(`
+        "<Foo $tag-name=\\"Foo\\" >bar</Foo>
+        <Bar $tag-name=\\"Bar\\" >foo</Bar>
+        <Footer $tag-name=\\"Footer\\" />"
+      `);
+    });
+
+    it('should match jsx fragments containing props', () => {
+      const input = `
+<Foo props="123" />
+<Foo props="ReutersType<Props>" />
+<Foo props="ReutersType<Props>"></Foo>
+<Foo props="ReutersType<Props>">bar</Foo>
+`.trim();
+      expect(addCustomPropsToMatchingJSX(input)).toMatchInlineSnapshot(`
+        "<Foo $tag-name=\\"Foo\\" props=\\"123\\" />
+        <Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\" />
+        <Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\"></Foo>
+        <Foo $tag-name=\\"Foo\\" props=\\"ReutersType<Props>\\">bar</Foo>"
+      `);
+    });
+
+    it('should match nested jsx components', () => {
+      const createInput = (childrenStr: string) =>
+        `
+<Foo props="123" />
+<Foo props="ReutersType<Props>" />
+<Foo props="ReutersType<Props>"></Foo>
+<Foo props="ReutersType<Props>">bar</Foo>
+<Foo props="ReutersType<Props>">${childrenStr}</Foo>
+`.trim();
+
+      // nested
+      const input = createInput(createInput(createInput('bar')));
+      expect(addCustomPropsToMatchingJSX(input)).toMatchSnapshot();
+    });
+  });
+});

src/loaders/markdown/transformer/rehypeRaw.ts

@@ -5,8 +5,7 @@ import type { IMdTransformerOptions } from '.';
 
 let raw: typeof import('hast-util-raw').raw;
 let visit: typeof import('unist-util-visit').visit;
-const COMPONENT_NAME_REGEX = /<[A-Z][a-zA-Z\d]*/g;
-const COMPONENT_PROP_REGEX = /\s[a-z][a-z\d]*[A-Z]+[a-zA-Z\d]*(=|\s|>)/g;
+const JSX_PATTERN = /<([A-Z][A-Za-z0-9]*)\s*([^>]*)\/?>/g;
 const COMPONENT_STUB_ATTR = '$tag-name';
 const PROP_STUB_ATTR = '-$u';
 const PROP_STUB_ATTR_REGEX = new RegExp(
@@ -21,27 +20,17 @@ const CODE_META_STUB_ATTR = '$code-meta';
   ({ raw } = await import('hast-util-raw'));
 })();
 
+const addCustomPropsToMatchingJSX = (jsxStr: string) => {
+  return jsxStr.replace(JSX_PATTERN, `<$1 ${COMPONENT_STUB_ATTR}="$1" $2>`);
+};
+
 type IRehypeRawOptions = Pick<IMdTransformerOptions, 'fileAbsPath'>;
 
 export default function rehypeRaw(opts: IRehypeRawOptions): Transformer<Root> {
   return (tree, vFile) => {
     visit<Root>(tree, (node) => {
-      if (node.type === 'raw' && COMPONENT_NAME_REGEX.test(node.value)) {
-        // mark tagName for all custom react component
-        // because the parse5 within hast-util-raw will lowercase all tag names
-        node.value = node.value.replace(COMPONENT_NAME_REGEX, (str) => {
-          const tagName = str.slice(1);
-
-          return `${str} ${COMPONENT_STUB_ATTR}="${tagName}"`;
-        });
-        // mark all camelCase props for all custom react component
-        // because the parse5 within hast-util-raw will lowercase all attr names
-        node.value = node.value.replace(COMPONENT_PROP_REGEX, (str) => {
-          return str.replace(
-            /[A-Z]/g,
-            (s) => `${PROP_STUB_ATTR}${s.toLowerCase()}`,
-          );
-        });
+      if (node.type === 'raw' && JSX_PATTERN.exec(node.value)) {
+        node.value = addCustomPropsToMatchingJSX(node.value);
       } else if (node.type === 'element' && node.data?.meta) {
         // save code meta to properties to avoid lost
         // ref: https://github.com/syntax-tree/hast-util-raw/issues/13#issuecomment-912451531
@@ -86,3 +75,10 @@ File: ${opts.fileAbsPath}`);
     return newTree;
   };
 }
+
+/**
+ * @internal **仅用于测试用例使用。**
+ */
+export const __private__ = {
+  addCustomPropsToMatchingJSX,
+};