chore: codesandbox preview

Tencent · Jun 24, 2024 · d74670d · d74670d
1 parent de1fd10
commit d74670d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/site/plugin-tdoc/demo.js b/site/plugin-tdoc/demo.js
@@ -32,8 +32,8 @@ export default function renderDemo(md, container) {
         const tpl = `
             <td-doc-demo component-name="${componentName.trim()}" demo-name="${demoName}" languages="TypeScript,JavaScript" data-JavaScript={${demoJsxCodeDefName}} data-TypeScript={${demoCodeDefName}}>
               <div slot="action">
-                <Stackblitz code={${demoCodeDefName}} />
-                <Codesandbox code={${demoCodeDefName}} />
+                <Stackblitz code={${demoCodeDefName}} demoName="${demoName}"/>
+                <Codesandbox code={${demoCodeDefName}} demoName="${demoName}"/>
               </div>
               <div className="tdesign-demo-item__body">
                 <div style={{width: '100%'}}><${demoDefName} /></div>

diff --git a/site/src/components/codesandbox/index.jsx b/site/src/components/codesandbox/index.jsx
@@ -6,10 +6,11 @@ import { mainJsContent, htmlContent, pkgContent, styleContent } from './content'
 import '../../styles/Codesandbox.less';
 
 export default function Codesandbox(props) {
-  const { code } = props;
   const [loading, setLoading] = useState(false);
 
   function onRunOnline() {
+    const code = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`)?.currentRenderCode;
+
     setLoading(true);
     fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
       method: 'POST',
@@ -25,21 +26,21 @@ export default function Codesandbox(props) {
           'public/index.html': {
             content: htmlContent,
           },
-          'src/main.jsx': {
+          'src/main.tsx': {
             content: mainJsContent,
           },
           'src/index.css': {
             content: styleContent,
           },
-          'src/demo.jsx': {
+          'src/demo.tsx': {
             content: code,
           },
         },
       }),
     })
       .then((x) => x.json())
       .then(({ sandbox_id: sandboxId }) => {
-        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.jsx`);
+        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.tsx`);
       })
       .finally(() => {
         setLoading(false);