fix: fixed up ts error on /website (#230)

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

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

Author: LonelyFellas

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"
     ]
   }
-}
+}

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';

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]*)<!--dividing-->/, '');
   return (

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';

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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,