From f9c774458e0af70033cac930b9607c3bcd9f601b Mon Sep 17 00:00:00 2001 From: worksapce <289582304@qq.com> Date: Mon, 25 Mar 2024 12:25:54 +0800 Subject: [PATCH 1/5] fix: fixed up ts error on `/website` --- typing.d.ts | 6 ++++++ website/App.tsx | 4 ++-- website/Example.tsx | 2 +- website/index.tsx | 7 ++++++- 4 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 typing.d.ts diff --git a/typing.d.ts b/typing.d.ts new file mode 100644 index 00000000..f1f3b869 --- /dev/null +++ b/typing.d.ts @@ -0,0 +1,6 @@ +/** + * 增加这个文件是为了解决全局的ts 对 `md|less`后缀的文件引用后ts的报错问题 + * @see bugs(https://github.com/uiwjs/react-code-preview/issues/229) + */ +declare module '*.md'; +declare module '*.less'; diff --git a/website/App.tsx b/website/App.tsx index 3d12143b..056da6d0 100644 --- a/website/App.tsx +++ b/website/App.tsx @@ -5,10 +5,10 @@ import '@wcj/dark-mode'; import DocumentStr from '../README.md'; import styles from './App.module.less'; import Example from './Example'; +import pkgJson from '../package.json'; export default function App() { - // @ts-ignore - const version = VERSION; + const version = pkgJson.version; let DocumentStrSource = DocumentStr; if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)/, ''); return ( diff --git a/website/Example.tsx b/website/Example.tsx index b9328a05..d6a757ae 100644 --- a/website/Example.tsx +++ b/website/Example.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState, useEffect } from 'react'; +import React, { Fragment, useState, useEffect } from 'react'; import CodePreview from '../'; import { Switch } from 'uiw'; import * as UIW from 'uiw'; diff --git a/website/index.tsx b/website/index.tsx index 7f8163d8..6237b23d 100644 --- a/website/index.tsx +++ b/website/index.tsx @@ -4,7 +4,12 @@ import ReactDOM from 'react-dom/client'; import '@uiw/reset.css/reset.less'; import App from './App'; -ReactDOM.createRoot(document.getElementById('root')).render( +/** + * 增加一个❕，解决ts报错的问题 + * 因为 `document.getElementById('root')`有可能为null + * @see https://github.com/uiwjs/react-code-preview/issues/229 + */ +ReactDOM.createRoot(document.getElementById('root')!).render( , From 0450d76b3df588e5ec0e396a08fe756c86e51c68 Mon Sep 17 00:00:00 2001 From: worksapce <289582304@qq.com> Date: Mon, 25 Mar 2024 12:39:41 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat(deps):=20=E5=A2=9E=E5=8A=A0@types=20re?= =?UTF-8?q?act|react-dom=20to=20^18.2.0=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 3dd109a9..78cd19b7 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,8 @@ "@kkt/raw-modules": "~7.1.1", "@kkt/scope-plugin-options": "~7.1.1", "@types/babel__standalone": "~7.1.4", - "@types/react": "~18.0.5", - "@types/react-dom": "~18.0.1", + "@types/react": "^18.2.69", + "@types/react-dom": "^18.2.22", "@types/react-test-renderer": "~18.0.0", "@uiw/react-github-corners": "~1.5.14", "@uiw/react-markdown-preview": "~4.0.6", @@ -102,4 +102,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} From 91720df1f5b9c06994f95d603c418c1eb6720263 Mon Sep 17 00:00:00 2001 From: worksapce <289582304@qq.com> Date: Mon, 25 Mar 2024 14:44:59 +0800 Subject: [PATCH 3/5] feat: Add an additional 'sourceState' props attribute to the component. --- src/index.tsx | 4 ++++ src/useCodePreview.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 82482d44..2b7fc5c9 100644 --- a/src/index.tsx +++ b/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 { diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index 06c900cc..8ec4fc7f 100644 --- a/src/useCodePreview.ts +++ b/src/useCodePreview.ts @@ -20,7 +20,7 @@ export function useCodePreview(props: CodePreviewProps) { 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 [showEdit, setShowEdit] = useState(props.sourceState === 'shown'); const [width, setWidth] = useState(1); const [copied, setCopied] = useState(false); const [code, setCode] = useState(props.code || ''); From d0bc09350709e1a0936a30319c7d65de086d4c5b Mon Sep 17 00:00:00 2001 From: worksapce <289582304@qq.com> Date: Mon, 25 Mar 2024 15:20:14 +0800 Subject: [PATCH 4/5] fix: fixed up eslint error --- src/useCodePreview.ts | 5 +++-- test/index.test.tsx | 1 + website/App.tsx | 1 - 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index 8ec4fc7f..418fde4c 100644 --- a/src/useCodePreview.ts +++ b/src/useCodePreview.ts @@ -16,12 +16,13 @@ export const getReactDOMClient = () => { }; export function useCodePreview(props: CodePreviewProps) { + const isShowEdit = props.sourceState === 'shown'; const [demoDom, setDemoDom] = useState(); const playerId = useRef(`${parseInt(String(Math.random() * 1e9), 10).toString(36)}`); const [fullScreen, setFullScreen] = useState(false); const [errorMessage, setErrorMessage] = useState(''); - const [showEdit, setShowEdit] = useState(props.sourceState === 'shown'); - const [width, setWidth] = useState(1); + const [showEdit, setShowEdit] = useState(isShowEdit); + const [width, setWidth] = useState(isShowEdit ? '50%' : 1); const [copied, setCopied] = useState(false); const [code, setCode] = useState(props.code || ''); diff --git a/test/index.test.tsx b/test/index.test.tsx index 85af2d33..a9ee6245 100644 --- a/test/index.test.tsx +++ b/test/index.test.tsx @@ -7,6 +7,7 @@ describe('', () => { const component = TestRenderer.create(); 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({ diff --git a/website/App.tsx b/website/App.tsx index 056da6d0..1495ca13 100644 --- a/website/App.tsx +++ b/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'; From d2930ee8d3989277db4940336847e41c5fc8ade1 Mon Sep 17 00:00:00 2001 From: worksapce <289582304@qq.com> Date: Mon, 25 Mar 2024 15:22:30 +0800 Subject: [PATCH 5/5] fix: Option 'emitDeclarationOnly' cannot be specified with option 'noEmit'. --- tsconfig.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 79da1c40..c1a38a4d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,8 +19,8 @@ "noUnusedLocals": true, "experimentalDecorators": true, "removeComments": false, - "noEmit": true, - "esModuleInterop": true + "esModuleInterop": true, + "emitDeclarationOnly": true }, "include": ["src"] }