chore: fix sandbox code type (#2977)

* chore: fix jsx demo sandbox type * chore: fix jsx demo sandbox type
Tencent · Jul 3, 2024 · d7e4ba6 · d7e4ba6
1 parent c7c70ae
commit d7e4ba6
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 14 deletions.
diff --git a/site/src/components/codesandbox/index.jsx b/site/src/components/codesandbox/index.jsx
@@ -5,13 +5,55 @@ import Loading from 'tdesign-react/loading';
 import { mainJsContent, htmlContent, pkgContent, styleContent, tsconfigContent } from './content';
 import '../../styles/Codesandbox.less';
 
+const TypeScriptType = 0;
+
 export default function Codesandbox(props) {
   const [loading, setLoading] = useState(false);
 
   function onRunOnline() {
-    const code = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`)?.currentRenderCode;
-
+    const demoDom = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`);
+    const code = demoDom?.currentRenderCode;
+    const isTypeScriptDemo = demoDom?.currentLangIndex === TypeScriptType;
     setLoading(true);
+    if (isTypeScriptDemo) {
+      fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          files: {
+            'package.json': {
+              content: pkgContent,
+            },
+            'public/index.html': {
+              content: htmlContent,
+            },
+            'src/main.tsx': {
+              content: mainJsContent,
+            },
+            'src/index.css': {
+              content: styleContent,
+            },
+            'src/demo.tsx': {
+              content: code,
+            },
+            'tsconfig.json': {
+              content: tsconfigContent,
+            },
+          },
+        }),
+      })
+        .then((x) => x.json())
+        .then(({ sandbox_id: sandboxId }) => {
+          window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.tsx`);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+      return;
+    }
     fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
       method: 'POST',
       headers: {
@@ -26,24 +68,21 @@ export default function Codesandbox(props) {
           'public/index.html': {
             content: htmlContent,
           },
-          'src/main.tsx': {
+          'src/main.jsx': {
             content: mainJsContent,
           },
           'src/index.css': {
             content: styleContent,
           },
-          'src/demo.tsx': {
+          'src/demo.jsx': {
             content: code,
           },
-          'tsconfig.json': {
-            content: tsconfigContent,
-          },
         },
       }),
     })
       .then((x) => x.json())
       .then(({ sandbox_id: sandboxId }) => {
-        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.tsx`);
+        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.jsx`);
       })
       .finally(() => {
         setLoading(false);

diff --git a/site/src/components/stackblitz/index.jsx b/site/src/components/stackblitz/index.jsx
@@ -1,23 +1,39 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import Tooltip from 'tdesign-react/tooltip';
 
 import { htmlContent, mainJsContent, styleContent, dependenciesContent, tsconfigContent } from './content';
 
+const TypeScriptType = 0;
+
 export default function Stackblitz(props) {
-  const { code } = props;
   const formRef = useRef(null);
-
+  const [isTypeScriptDemo, setIsTypeScriptDemo] = useState(false);
+  const [code, setCurrentCode] = useState('');
   function submit() {
-    formRef.current.submit();
+    const demoDom = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`);
+    const isTypeScriptDemo = demoDom?.currentLangIndex === TypeScriptType;
+
+    setCurrentCode(demoDom?.currentRenderCode);
+    setIsTypeScriptDemo(isTypeScriptDemo);
+
+    setTimeout(() => {
+      formRef.current.submit();
+    });
   }
 
   return (
     <Tooltip content="在 Stackblitz 中打开">
       <form ref={formRef} method="post" action="https://stackblitz.com/run" target="_blank" onClick={submit}>
-        <input type="hidden" name="project[files][src/demo.tsx]" value={code} />
+        {isTypeScriptDemo ? (
+          <>
+            <input type="hidden" name="project[files][src/demo.tsx]" value={code} />
+            <input type="hidden" name="project[tsconfig.json]" value={tsconfigContent} />
+          </>
+        ) : (
+          <input type="hidden" name="project[files][src/demo.jsx]" value={code} />
+        )}
         <input type="hidden" name="project[files][src/index.css]" value={styleContent} />
         <input type="hidden" name="project[files][src/index.js]" value={mainJsContent} />
-        <input type="hidden" name="project[tsconfig.json]" value={tsconfigContent} />
         <input type="hidden" name="project[files][public/index.html]" value={htmlContent} />
         <input type="hidden" name="project[dependencies]" value={dependenciesContent} />
         <input type="hidden" name="project[template]" value="create-react-app" />