From fd7939382ddf3e97723ee9f7f16de8aa6152d710 Mon Sep 17 00:00:00 2001
From: Darwish <38754760+LonelyFellas@users.noreply.github.com>
Date: Mon, 25 Mar 2024 13:07:20 +0800
Subject: [PATCH] fix: fixed up ts error on `/website` (#230)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* feat(deps): 增加@types react|react-dom to ^18.2.0 version
---
 package.json        | 6 +++---
 typing.d.ts         | 6 ++++++
 website/App.tsx     | 4 ++--
 website/Example.tsx | 2 +-
 website/index.tsx   | 7 ++++++-
 5 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 typing.d.ts

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
+}
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]*)<!--dividing-->/, '');
   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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,