chore(deps): update dependency tsbb to v4 & react to v18

Author: jaywcjlove

package.json

@@ -9,8 +9,8 @@
     "prepare": "husky install && npm run build",
     "doc": "kkt build --app-src ./website",
     "start": "kkt start --app-src ./website",
-    "watch": "tsbb watch",
-    "build": "tsbb build",
+    "watch": "tsbb watch src/*.tsx --use-babel",
+    "build": "tsbb build src/*.tsx --use-babel",
     "bundle": "ncc build src/index.tsx --target web --filename run-web",
     "bundle:min": "ncc build src/index.tsx --target web --filename run-web --minify",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
@@ -52,26 +52,27 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/ncc": "~1.0.8",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
-    "@types/react": "~17.0.39",
-    "@types/react-dom": "~17.0.11",
-    "@types/react-test-renderer": "~17.0.1",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "~3.5.0",
-    "@uiw/react-split": "~5.8.7",
-    "@uiw/react-textarea-code-editor": "~1.6.0",
-    "husky": "~7.0.4",
-    "kkt": "~7.1.5",
-    "lint-staged": "~12.3.4",
-    "prettier": "~2.5.1",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
-    "react-router-dom": "~6.2.1",
-    "react-test-renderer": "~17.0.2",
-    "tsbb": "~3.7.0"
+    "@kkt/less-modules": "^7.4.9",
+    "@kkt/ncc": "^1.0.15",
+    "@kkt/raw-modules": "^7.4.9",
+    "@kkt/scope-plugin-options": "^7.4.9",
+    "@types/react": "^18.0.34",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-test-renderer": "^18.0.0",
+    "@wcj/dark-mode": "^1.0.15",
+    "@uiw/react-github-corners": "^1.5.15",
+    "@uiw/react-markdown-preview": "^4.1.10",
+    "@uiw/react-split": "^5.8.10",
+    "@uiw/react-textarea-code-editor": "^2.1.1",
+    "husky": "^8.0.3",
+    "kkt": "^7.4.9",
+    "lint-staged": "^13.2.1",
+    "prettier": "^2.8.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "react-test-renderer": "^18.2.0",
+    "tsbb": "^4.1.5"
   },
   "eslintConfig": {
     "extends": [

public/index.html

@@ -25,7 +25,7 @@
   <noscript>
     You need to enable JavaScript to run this app.
   </noscript>
-  <div id="root"></div>
+  <div id="root" class="w-tc-editor-var"></div>
   <!--
     This HTML file is a template.
     If you open it directly in the browser, you will see an empty page.

tsconfig.json

@@ -1,21 +1,22 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "module": "esnext",
+    "moduleResolution": "node",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "declaration": true,
     "jsx": "react-jsx",
+    "outDir": "cjs",
     "noFallthroughCasesInSwitch": true,
     "noEmit": true
   },
-  "include": ["website", ".kktrc.ts"]
+  "include": ["src"]
 }

website/App.less

@@ -13,3 +13,13 @@ body {
 :before {
   box-sizing: inherit;
 }
+
+[data-color-mode*='dark'] .w-tc-editor-var,
+body[data-color-mode*='dark'] {
+  --color-header-border: #353535;
+}
+
+[data-color-mode*='light'] .w-tc-editor-var,
+body[data-color-mode*='light'] {
+  --color-header-border: #d5d5d5;
+}

website/index.tsx

@@ -1,4 +1,6 @@
-import ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = ReactDOMClient.createRoot(container!);
+root.render(<App />);

website/pages/run/index.module.less

@@ -1,13 +1,13 @@
 .header {
   height: 38px;
-  border-bottom: 1px solid #d5d5d5;
+  border-bottom: 1px solid var(--color-header-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 15px;
   padding-right: 15px;
   font-weight: bold;
-  background-color: #f7f7f7;
+  background-color: var(--color-canvas-subtle);
 }
 
 .menu {
@@ -22,6 +22,9 @@
   > a + a {
     margin-left: 10px;
   }
+  dark-mode {
+    margin-left: 10px;
+  }
 }
 
 .editor {
@@ -37,3 +40,8 @@
   height: 100%;
   overflow: auto;
 }
+
+:global(.w-split-vertical) > :global(.w-split-line-bar) div::after,
+:global(.w-split-horizontal) > :global(.w-split-line-bar) div::after {
+  background-color: var(--color-header-border);
+}

website/pages/run/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useLocation, useNavigate, Link } from 'react-router-dom';
 import Split from '@uiw/react-split';
 import CodeEditor from '@uiw/react-textarea-code-editor';
+import '@wcj/dark-mode';
 import Tag from './Tag';
 import RunWeb from '../../../';
 import styles from './index.module.less';
@@ -67,6 +68,7 @@ export default function Run() {
           <Link to="/docs" state={query.toString() || ''}>
             Docs
           </Link>
+          <dark-mode permanent />
         </div>
       </div>
       <Split style={{ width: '100%', height: 'calc(100vh - 39px)' }}>

website/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig",
+  "include": ["../website", "../src"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "emitDeclarationOnly": true,
+    "noEmit": false
+  }
+}