feat(example): 支持omi组件格式 (#48)

Author: duenyang

script/plugin-tdoc/demo.js

@@ -25,7 +25,7 @@ export default function renderDemo(md, container) {
         const [, demoPath, componentName = ''] = match;
         const demoPathOnlyLetters = demoPath.replace(/[^a-zA-Z\d]/g, '');
         const demoName = path.basename(demoPath).trim();
-        const demoDefName = `Demo${demoPathOnlyLetters}`;
+        const demoDefName = `Demo${demoPathOnlyLetters}Component`;
         const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
 
         const tpl = `
@@ -34,7 +34,7 @@ export default function renderDemo(md, container) {
 
               </div>
               <div className="tdesign-demo-item__body">
-                <div style={{width: '100%'}}><${demoDefName} /></div>
+                <div style={{width: '100%'}}>{${demoDefName}}</div>
               </div>
             </td-doc-demo>
           `;

script/plugin-tdoc/md-to-wc.mjs

@@ -31,15 +31,16 @@ function getGitTimestamp(file) {
 
 export default async function mdToReact(options) {
   const mdSegment = await customRender(options);
-  const { demoDefsStr, demoCodesDefsStr } = options;
+  const { demoDefsStr, demoCodesDefsStr, components } = options;
 
   const reactSource = `
-    import { h } from 'omi';
+    import { h, define } from 'omi';
     import { signal, effect } from 'reactive-signal'
     import Prismjs from 'prismjs';
     import 'prismjs/components/prism-bash.js';
     ${demoDefsStr}
     ${demoCodesDefsStr}
+    ${components}
 
     export default function TdDoc() {
       const isComponent  = ${mdSegment.isComponent};

script/plugin-tdoc/transforms.js

@@ -44,12 +44,27 @@ export default {
       .map((key) => demoCodesImports[key])
       .join('\n');
 
+    const components = Object.keys(demoImports)
+      .map(
+        (key) => `
+      let ${key}Component = null;
+      if('${key}'.endsWith('omi')){
+        define('t-${key.toLocaleLowerCase()}', ${key});
+        ${key}Component = <t-${key.toLocaleLowerCase()} />;
+      } else {
+        ${key}Component = <${key} />;
+      };
+      `,
+      )
+      .join('\n');
+
     const sfc = mdToWc({
       md,
       file,
       source,
       demoDefsStr,
       demoCodesDefsStr,
+      components,
     });
     return sfc;
   },

src/button/README.md

@@ -8,7 +8,7 @@ spline: base
 
 ### 基础使用
 
-{{ base }}
+{{ base-omi }}
 
 ### 图标按钮
 

src/button/_example/base-omi.tsx

@@ -0,0 +1,24 @@
+import 'tdesign-web-components/button';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <div style={{ gap: 16, display: 'inline-flex' }}>
+        <t-button theme="default" variant="base">
+          填充按钮
+        </t-button>
+        <t-button theme="default" variant="outline">
+          描边按钮
+        </t-button>
+        <t-button theme="default" variant="dashed">
+          虚框按钮
+        </t-button>
+        <t-button theme="default" variant="text">
+          文字按钮
+        </t-button>
+      </div>
+    );
+  }
+}