mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

chore: stackblitz change tsx (#38039)

Browse Source 
* feat: stackblitz change tsx

* feat: open

* feat: type

* feat: code
This commit is contained in:
叶枫 2022-10-17 16:39:30 +08:00 committed by GitHub
parent a2de8f7b2e
commit e72675da27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
site/theme/template/Content/Demo/index.jsx
View File

@ -48,12 +48,13 @@ class Demo extends React.Component {
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
const { codeExpand, copied, copyTooltipOpen } = this.state; const { codeExpand, copied, copyTooltipOpen, codeType } = this.state;
const { expand, theme, showRiddleButton } = this.props; const { expand, theme, showRiddleButton } = this.props;
return ( return (
(codeExpand || expand) !== (nextState.codeExpand || nextProps.expand) || (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand) ||
copied !== nextState.copied || copied !== nextState.copied ||
copyTooltipOpen !== nextState.copyTooltipOpen || copyTooltipOpen !== nextState.copyTooltipOpen ||
codeType !== nextState.copyTooltipOpen ||
nextProps.theme !== theme || nextProps.theme !== theme ||
nextProps.showRiddleButton !== showRiddleButton nextProps.showRiddleButton !== showRiddleButton
); );
@ -141,7 +142,7 @@ class Demo extends React.Component {
theme, theme,
showRiddleButton, showRiddleButton,
} = props; } = props;
const { copied, copyTooltipOpen } = state; const { copied, copyTooltipOpen, codeType } = state;
if (!this.liveDemo) { if (!this.liveDemo) {
this.liveDemo = meta.iframe ? ( this.liveDemo = meta.iframe ? (
<BrowserFrame> <BrowserFrame>
@ -188,7 +189,18 @@ class Demo extends React.Component {
</body> </body>
</html>`; </html>`;
const tsconfig = `{
"compilerOptions": {
"jsx": "react-jsx",
"target": "esnext",
"module": "esnext",
"esModuleInterop": true,
"moduleResolution": "node",
}
}`;
const [sourceCode, sourceCodeTyped] = this.getSourceCode(); const [sourceCode, sourceCodeTyped] = this.getSourceCode();
const suffix = codeType === 'tsx' ? 'tsx' : 'js';
const dependencies = sourceCode.split('\n').reduce( const dependencies = sourceCode.split('\n').reduce(
(acc, line) => { (acc, line) => {
@ -208,6 +220,10 @@ class Demo extends React.Component {
); );
dependencies['@ant-design/icons'] = 'latest'; dependencies['@ant-design/icons'] = 'latest';
if (suffix === 'tsx') {
dependencies['@types/react'] = '^18.0.0';
dependencies['@types/react-dom'] = '^18.0.0';
}
dependencies.react = '^18.0.0'; dependencies.react = '^18.0.0';
dependencies['react-dom'] = '^18.0.0'; dependencies['react-dom'] = '^18.0.0';
@ -269,7 +285,7 @@ class Demo extends React.Component {
}; };
// Reorder source code // Reorder source code
let parsedSourceCode = sourceCode; let parsedSourceCode = suffix === 'tsx' ? sourceCodeTyped : sourceCode;
let importReactContent = "import React from 'react';"; let importReactContent = "import React from 'react';";
const importReactReg = /import React(\D*)from 'react';/; const importReactReg = /import React(\D*)from 'react';/;
@ -323,8 +339,8 @@ createRoot(document.getElementById('container')).render(<Demo />);
files: { files: {
'package.json': { content: codesandboxPackage }, 'package.json': { content: codesandboxPackage },
'index.css': { content: indexCssContent }, 'index.css': { content: indexCssContent },
'index.js': { content: indexJsContent }, [`index.${suffix}`]: { content: indexJsContent },
'demo.js': { content: demoJsContent }, [`demo.${suffix}`]: { content: demoJsContent },
'index.html': { 'index.html': {
content: html, content: html,
}, },
@ -336,11 +352,14 @@ createRoot(document.getElementById('container')).render(<Demo />);
dependencies, dependencies,
files: { files: {
'index.css': indexCssContent, 'index.css': indexCssContent,
'index.js': indexJsContent, [`index.${suffix}`]: indexJsContent,
'demo.js': demoJsContent, [`demo.${suffix}`]: demoJsContent,
'index.html': html, 'index.html': html,
}, },
}; };
if (suffix === 'tsx') {
stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
}
let codeBox = ( let codeBox = (
<section className={codeBoxClass} id={meta.id}> <section className={codeBoxClass} id={meta.id}>
@ -426,7 +445,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
className="code-box-code-action" className="code-box-code-action"
onClick={() => { onClick={() => {
this.track({ type: 'stackblitz', demo: meta.id }); this.track({ type: 'stackblitz', demo: meta.id });
stackblitzSdk.openProject(stackblitzPrefillConfig); stackblitzSdk.openProject(stackblitzPrefillConfig, {
openFile: [`demo.${suffix}`],
});
}} }}
> >
<ThunderboltOutlined className="code-box-stackblitz" /> <ThunderboltOutlined className="code-box-stackblitz" />