website(deps): update devDependencies kkt & react 18

jaywcjlove · Apr 8, 2022 · 2670a6e · 2670a6e
1 parent eb86f1d
commit 2670a6e
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 56 deletions.
diff --git a/.kktrc.ts b/.kktrc.ts
@@ -4,30 +4,12 @@ import { LoaderConfOptions } from 'kkt';
 import lessModules from '@kkt/less-modules';
 import rawModules from '@kkt/raw-modules';
 import scopePluginOptions from '@kkt/scope-plugin-options';
-import reactLibrary from '@kkt/react-library';
 import pkg from './package.json';
 
 export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
-  conf = rawModules(conf, env, { ...options });
-  conf = scopePluginOptions(conf, env, {
-    ...options,
-    allowedFiles: [path.resolve(process.cwd(), 'README.md'), path.resolve(process.cwd(), 'src')],
-  });
-  conf = lessModules(conf, env, options);
-  // Get the project version.
-  conf.plugins!.push(
-    new webpack.DefinePlugin({
-      VERSION: JSON.stringify(pkg.version),
-    }),
-  );
-  conf = reactLibrary(conf, env, {
-    ...options,
-    ...pkg,
-    name: 'ReactHotkeys',
-    module: 'src/index.tsx',
-    main: 'dist/react-hotkeys.js',
-    // webpack externals options
-    dependencies: {
+  if (options.bundle) {
+    conf.output!.library = 'react-hot-keys';
+    conf.externals = {
       react: {
         root: 'React',
         commonjs2: 'react',
@@ -40,13 +22,49 @@ export default (conf: Configuration, env: 'development' | 'production', options:
         commonjs: 'react-dom',
         amd: 'react-dom',
       },
-    },
-  });
-  if (options.bundle) {
-    conf.plugins!.push(new webpack.BannerPlugin(`react-hotkeys v${pkg.version} \n${pkg.description}\nCopyright (c) ${(new Date()).getFullYear()} ${pkg.author}\nLicensed under the ${pkg.license} license. `))
-  }
-  if (env === 'production') {
-    conf.output = { ...conf.output, publicPath: './' };
+    };
+    conf.plugins!.push(new webpack.BannerPlugin(`react-hotkeys v${pkg.version} \n${pkg.description}\nCopyright (c) ${(new Date()).getFullYear()} ${pkg.author}\nLicensed under the ${pkg.license} license. `));
+  } else {
+    conf = rawModules(conf, env, { ...options });
+    conf = scopePluginOptions(conf, env, {
+      ...options,
+      allowedFiles: [path.resolve(process.cwd(), 'README.md'), path.resolve(process.cwd(), 'src')],
+    });
+    conf = lessModules(conf, env, options);
+    // Get the project version.
+    conf.plugins!.push(
+      new webpack.DefinePlugin({
+        VERSION: JSON.stringify(pkg.version),
+      }),
+    );
+    if (env === 'production') {
+      conf.output = { ...conf.output, publicPath: './' };
+    }
   }
+  // conf = reactLibrary(conf, env, {
+  //   ...options,
+  //   ...pkg,
+  //   name: 'ReactHotkeys',
+  //   module: 'src/index.tsx',
+  //   main: 'dist/react-hotkeys.js',
+  //   // webpack externals options
+  //   dependencies: {
+  //     react: {
+  //       root: 'React',
+  //       commonjs2: 'react',
+  //       commonjs: 'react',
+  //       amd: 'react',
+  //     },
+  //     'react-dom': {
+  //       root: 'ReactDOM',
+  //       commonjs2: 'react-dom',
+  //       commonjs: 'react-dom',
+  //       amd: 'react-dom',
+  //     },
+  //   },
+  // });
+  // if (options.bundle) {
+  //   conf.plugins!.push(new webpack.BannerPlugin(`react-hotkeys v${pkg.version} \n${pkg.description}\nCopyright (c) ${(new Date()).getFullYear()} ${pkg.author}\nLicensed under the ${pkg.license} license. `))
+  // }
   return conf;
 };
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "prepare": "npm run build",
     "watch": "tsbb watch",
     "build": "tsbb build && npm run bundle && npm run bundle:min",
-    "bundle": "kkt build --bundle",
-    "bundle:min": "kkt build --bundle --mini",
+    "bundle": "ncc build src/index.tsx --target web --filename react-hotkeys",
+    "bundle:min": "ncc build src/index.tsx --target web --filename react-hotkeys --minify",
     "coverage": "tsbb test --env=jsdom --coverage",
     "test": "tsbb test --env=jsdom",
     "doc": "kkt build --app-src ./website",
@@ -62,25 +62,26 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@kkt/less-modules": "6.11.0",
-    "@kkt/raw-modules": "6.11.0",
-    "@kkt/react-library": "6.11.0",
-    "@kkt/scope-plugin-options": "6.11.0",
-    "@types/classnames": "2.3.1",
-    "@types/jest": "27.0.1",
-    "@types/react": "17.0.22",
-    "@types/react-dom": "17.0.9",
-    "@types/react-test-renderer": "17.0.1",
-    "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.3.3",
-    "@uiw/react-shields": "1.1.2",
-    "classnames": "2.3.1",
-    "kkt": "6.11.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-test-renderer": "17.0.2",
-    "jest": "27.2.0",
-    "tsbb": "3.2.1"
+    "@kkt/less-modules": "~7.1.1",
+    "@kkt/raw-modules": "~7.1.1",
+    "@kkt/scope-plugin-options": "~7.1.1",
+    "@kkt/ncc": "~1.0.13",
+    "@types/classnames": "~2.3.1",
+    "@types/jest": "~27.4.1",
+    "@types/react": "~18.0.0",
+    "@types/react-dom": "~18.0.0",
+    "@types/react-test-renderer": "~17.0.1",
+    "@uiw/react-github-corners": "~1.5.14",
+    "@uiw/react-markdown-preview": "~4.0.5",
+    "@uiw/react-shields": "~1.1.3",
+    "@wcj/dark-mode": "~1.0.14",
+    "classnames": "~2.3.1",
+    "kkt": "~7.1.5",
+    "react": "~18.0.0",
+    "react-dom": "~18.0.0",
+    "react-test-renderer": "~18.0.0",
+    "jest": "~27.5.1",
+    "tsbb": "~3.7.2"
   },
   "dependencies": {
     "hotkeys-js": "^3.8.1",

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/website/App.less b/website/App.less
@@ -12,12 +12,10 @@ body, html {
 }
 
 kbd {
-  background-color: #fafbfc;
   border: 1px solid #c6cbd1;
   border-bottom-color: #959da5;
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 #959da5;
-  color: #444d56;
   display: inline-block;
   font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
   font-size: 11px;
@@ -56,7 +54,8 @@ kbd {
   font-size: 12px;
   border-radius: 3px;
   padding: 1px 3px;
-  background-color: #e8e8e8;
+  background-color: var(--color-theme-text);
+  color: var(--color-theme-bg);
 }
 
 .App-markdown {

diff --git a/website/App.tsx b/website/App.tsx
@@ -3,6 +3,7 @@ import { HotkeysEvent } from 'hotkeys-js';
 import { Github } from '@uiw/react-shields';
 import GitHubCorners from '@uiw/react-github-corners';
 import MarkdownPreview from '@uiw/react-markdown-preview';
+import '@wcj/dark-mode';
 import Hotkeys from '../';
 import MDStr from '../README.md';
 import './App.less';
@@ -41,6 +42,7 @@ export default class App extends React.PureComponent<AppProps, AppState> {
     const {shortcut, output} = this.state;
     return (
       <div className="warpper">
+        <dark-mode style={{ position: 'fixed', top: 8, left: 10, zIndex: 9999 }}></dark-mode>
         <h1>React Hotkeys</h1>
         <Github user="jaywcjlove" repo="react-hotkeys">
           <Github.Social type="forks" href="https://github.com/jaywcjlove/react-hotkeys/network/members" />

diff --git a/website/index.tsx b/website/index.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);