fix(docs): escape backticks in type or default value columns (#6025)

Author: brandongregoryscott

src/compiler/docs/readme/markdown-props.ts

@@ -19,8 +19,8 @@ export const propsToMarkdown = (props: d.JsonDocsProp[]) => {
       getPropertyField(prop),
       getAttributeField(prop),
       getDocsField(prop),
-      `\`${prop.type}\``,
-      `\`${prop.default}\``,
+      getTypeField(prop),
+      getDefaultValueField(prop),
     ]);
   });
 
@@ -46,3 +46,11 @@ const getDocsField = (prop: d.JsonDocsProp) => {
       : ''
   }${prop.docs}`;
 };
+
+const getTypeField = (prop: d.JsonDocsProp) => {
+  return prop.type.includes('`') ? `\`\` ${prop.type} \`\`` : `\`${prop.type}\``;
+};
+
+const getDefaultValueField = (prop: d.JsonDocsProp) => {
+  return prop.default?.includes('`') ? `\`\` ${prop.default} \`\`` : `\`${prop.default}\``;
+};

src/compiler/docs/test/markdown-props.spec.ts

@@ -37,6 +37,84 @@ describe('markdown props', () => {
 | \`hello\`  | \`hello\`   | This is a prop | \`boolean \\| string\` | \`false\` |
 | \`hello\`  | --        | This is a prop | \`boolean \\| string\` | \`false\` |
 
+`);
+  });
+
+  it('escapes template literal types', () => {
+    const markdown = propsToMarkdown([
+      {
+        name: 'width',
+        attr: 'width',
+        docs: 'Width of the button',
+        default: 'undefined',
+        type: '`${number}px` | `${number}%`',
+        mutable: false,
+        optional: false,
+        required: false,
+        reflectToAttr: false,
+        docsTags: [],
+        values: [],
+      },
+    ]).join('\n');
+
+    expect(markdown).toEqual(`## Properties
+
+| Property | Attribute | Description         | Type                                | Default     |
+| -------- | --------- | ------------------- | ----------------------------------- | ----------- |
+| \`width\`  | \`width\`   | Width of the button | \`\` \`\${number}px\` \\| \`\${number}%\` \`\` | \`undefined\` |
+
+`);
+  });
+
+  it('escapes backticks in default value', () => {
+    const markdown = propsToMarkdown([
+      {
+        name: 'quote',
+        attr: 'quote',
+        docs: 'Quote character',
+        default: "'`'",
+        type: 'string',
+        mutable: false,
+        optional: false,
+        required: false,
+        reflectToAttr: false,
+        docsTags: [],
+        values: [],
+      },
+    ]).join('\n');
+
+    expect(markdown).toEqual(`## Properties
+
+| Property | Attribute | Description     | Type     | Default   |
+| -------- | --------- | --------------- | -------- | --------- |
+| \`quote\`  | \`quote\`   | Quote character | \`string\` | \`\` '\`' \`\` |
+
+`);
+  });
+
+  it('outputs `undefined` in default column when `prop.default` is undefined', () => {
+    const markdown = propsToMarkdown([
+      {
+        name: 'first',
+        attr: 'first',
+        docs: 'First name',
+        default: undefined,
+        type: 'string',
+        mutable: false,
+        optional: false,
+        required: false,
+        reflectToAttr: false,
+        docsTags: [],
+        values: [],
+      },
+    ]).join('\n');
+
+    expect(markdown).toBe(`## Properties
+
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| \`first\`  | \`first\`   | First name  | \`string\` | \`undefined\` |
+
 `);
   });
 });