feat: Add an additional 'sourceState' props attribute to the component (

#236)

* fix: fixed up ts error on `/website`

* feat(deps): 增加@types react|react-dom to ^18.2.0 version

* feat: Add an additional 'sourceState' props attribute to the component.

* fix: fixed up eslint error

* fix: Option 'emitDeclarationOnly' cannot be specified with option 'noEmit'.

src/index.tsx

@@ -71,6 +71,10 @@ export interface CodePreviewProps extends SplitProps {
    * @default light
    */
   theme?: ReactCodeMirrorProps['theme'];
+  /**
+   * Specifies the initial state of the source panel.
+   */
+  sourceState?: 'hidden' | 'shown';
 }
 
 export interface CodePreviewState {

src/useCodePreview.ts

@@ -16,12 +16,13 @@ export const getReactDOMClient = () => {
 };
 
 export function useCodePreview(props: CodePreviewProps) {
+  const isShowEdit = props.sourceState === 'shown';
   const [demoDom, setDemoDom] = useState<HTMLDivElement>();
   const playerId = useRef(`${parseInt(String(Math.random() * 1e9), 10).toString(36)}`);
   const [fullScreen, setFullScreen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [showEdit, setShowEdit] = useState(false);
-  const [width, setWidth] = useState<number | string>(1);
+  const [showEdit, setShowEdit] = useState(isShowEdit);
+  const [width, setWidth] = useState<number | string>(isShowEdit ? '50%' : 1);
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');
 

test/index.test.tsx

@@ -7,6 +7,7 @@ describe('<CodePreview />', () => {
     const component = TestRenderer.create(<CodePreview />);
     let tree = component.toJSON();
     if (tree && !Array.isArray(tree)) {
+      /* eslint-disable jest/no-conditional-expect */
       expect(tree.type).toEqual('div');
       expect(tree.props.className).toEqual('w-split w-code-preview w-code-preview-bordered w-split-horizontal');
       expect(tree.props.style).toEqual({

tsconfig.json

@@ -19,8 +19,8 @@
     "noUnusedLocals": true,
     "experimentalDecorators": true,
     "removeComments": false,
-    "noEmit": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "emitDeclarationOnly": true
   },
   "include": ["src"]
 }

website/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
 import Markdown from '@uiw/react-markdown-preview';
 import '@wcj/dark-mode';