site: sync all code type of demos when change one of them (#48436)

* site: sync all code type of demos when change one of them

* site: remove localStorage

---------

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: Peach <scdzwyxst@gmail.com>

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -108,7 +108,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     clientOnly,
     pkgDependencyList,
   } = props;
-  const { showDebug } = useContext(DemoContext);
+  const { showDebug, codeType } = useContext(DemoContext);
 
   const { pkg } = useSiteData();
   const location = useLocation();
@@ -134,7 +134,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const riddleIconRef = useRef<HTMLFormElement>(null);
   const codepenIconRef = useRef<HTMLFormElement>(null);
   const [codeExpand, setCodeExpand] = useState<boolean>(false);
-  const [codeType, setCodeType] = useState<string>('tsx');
   const { theme } = useContext<SiteContextProps>(SiteContext);
 
   const { hash, pathname, search } = location;
@@ -541,7 +540,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
             styleCode={style}
             error={liveDemoError}
             entryName={entryName}
-            onCodeTypeChange={setCodeType}
             onSourceChange={setLiveDemoSource}
           />
           <div

.dumi/theme/common/CodePreview.tsx

@@ -1,11 +1,12 @@
 import type { ComponentProps } from 'react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Button, Tabs, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
 import Prism from 'prismjs';
 
+import DemoContext from '../slots/DemoContext';
 import LiveCode from './LiveCode';
 
 const useStyle = createStyles(({ token, css }) => {
@@ -67,7 +68,6 @@ interface CodePreviewProps
   jsxCode?: string;
   styleCode?: string;
   entryName: string;
-  onCodeTypeChange?: (activeKey: string) => void;
   onSourceChange?: (source: Record<string, string>) => void;
 }
 
@@ -92,7 +92,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   jsxCode = '',
   styleCode = '',
   entryName,
-  onCodeTypeChange,
   onSourceChange,
   error,
 }) => {
@@ -108,6 +107,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
     initialCodes.style = '';
   }
   const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
+  const { codeType, setCodeType } = useContext(DemoContext);
   const sourceCodes = {
     // omit trailing line break
     tsx: sourceCode?.trim(),
@@ -178,7 +178,15 @@ const CodePreview: React.FC<CodePreviewProps> = ({
     );
   }
 
-  return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;
+  return (
+    <Tabs
+      centered
+      className="highlight"
+      activeKey={codeType}
+      onChange={setCodeType}
+      items={items}
+    />
+  );
 };
 
 export default CodePreview;

.dumi/theme/slots/Content/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect, useMemo } from 'react';
+import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { Col, Flex, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
@@ -43,6 +43,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { styles } = useStyle();
 
   const [showDebug, setShowDebug] = useLayoutState(false);
+  const [codeType, setCodeType] = useState('tsx');
   const debugDemos = useMemo(
     () => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [],
     [meta],
@@ -55,8 +56,8 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   }, []);
 
   const contextValue = useMemo<DemoContextProps>(
-    () => ({ showDebug, setShowDebug }),
-    [showDebug, debugDemos],
+    () => ({ showDebug, setShowDebug, codeType, setCodeType }),
+    [showDebug, codeType, debugDemos],
   );
 
   const isRTL = direction === 'rtl';

.dumi/theme/slots/DemoContext.ts

@@ -2,11 +2,14 @@ import { createContext } from 'react';
 
 export type DemoContextProps = {
   showDebug?: boolean;
+  codeType?: string;
 };
 
 const DemoContext = createContext<{
   showDebug?: boolean;
   setShowDebug?: (showDebug: boolean) => void;
+  codeType?: string;
+  setCodeType?: (codeType: string) => void;
 }>({});
 
 export default DemoContext;