chore(deps): update dependencies.

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged
+npx --no-install lint-staged

core/README-zh.md

@@ -27,7 +27,11 @@ import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 
-export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
+export default (
+  conf: WebpackConfiguration, 
+  env: 'development' | 'production', 
+  options: LoaderConfOptions
+) => {
   // ....
   conf = mdCodeModulesLoader(conf);
   // ....
@@ -45,7 +49,11 @@ import { Options } from 'markdown-react-code-preview-loader';
  * @param {Options} option Loader Options
  * @returns {webpack.Configuration}
  * **/
-export declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;
+export declare const mdCodeModulesLoader: (
+  config: webpack.Configuration, 
+  lang?: string[], 
+  option?: Options
+) => webpack.Configuration;
 ```
 
 **第 ② 种方法，手动添加配置**

core/README.md

@@ -27,11 +27,15 @@ import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 
-export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
-  // ....
-  conf = mdCodeModulesLoader(conf);
-  // ....
-  return conf;
+export default (
+    conf: WebpackConfiguration,
+    env: 'development' | 'production',
+    options: LoaderConfOptions
+) => {
+    // ....
+    conf = mdCodeModulesLoader(conf);
+    // ....
+    return conf;
 };
 ```
 
@@ -45,7 +49,11 @@ import { Options } from 'markdown-react-code-preview-loader';
  * @param {Options} option Loader Options
  * @returns {webpack.Configuration}
  * **/
-export declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;
+export declare const mdCodeModulesLoader: (
+  config: webpack.Configuration, 
+  lang?: string[], 
+  option?: Options
+) => webpack.Configuration;
 ```
 
 **② The second method is to manually add the configuration**
@@ -111,10 +119,16 @@ After adding `loader`, use the method to load `markdown` text in the project pro
 ```jsx
 import mdObj from 'markdown-react-code-preview-loader/README.md';
 
-mdObj.source     // => `README.md` raw string text
-mdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)
-mdObj.data       // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)
-mdObj.headings       // => This is the parsed header data
+// `README.md` raw string text
+mdObj.source
+// The component index object, the React component converted from the markdown indexed example.
+// (need to configure meta)
+mdObj.components
+// The component source code index object, the sample source code indexed from markdown.
+// (need to configure meta)
+mdObj.data
+// This is the parsed header data
+mdObj.headings
 ```
 
 ```js

core/src/utils/transform.ts

@@ -1,8 +1,8 @@
 import { transform } from '@babel/standalone';
-import { PluginItem } from '@babel/core';
+import { type PluginItem } from '@babel/core';
 import removeImports from 'babel-plugin-transform-remove-imports';
 import replaceExportDefault from 'babel-plugin-transform-replace-export-default';
-import { Options } from '../';
+import { type Options } from '../';
 
 export const getTransformValue = (str: string, filename: string, opts: Options) => {
   const plugins: PluginItem[] = [...(opts.babelPlugins || [])];

lerna.json

@@ -1,4 +1,4 @@
 {
   "version": "2.1.8",
-  "packages": ["website", "core"]
+  "packages": ["website", "core", "pkg-example"]
 }

package.json

@@ -23,6 +23,7 @@
   },
   "workspaces": [
     "core",
+    "pkg-example",
     "website"
   ],
   "jest": {
@@ -35,11 +36,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "husky": "~7.0.4",
-    "lerna": "~4.0.0",
-    "lint-staged": "~12.3.4",
-    "prettier": "~2.5.1",
-    "pretty-quick": "~3.1.3",
-    "tsbb": "~3.7.0"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "husky": "~9.1.6",
+    "lerna": "~8.1.8",
+    "lint-staged": "~15.2.10",
+    "prettier": "~3.3.3",
+    "pretty-quick": "~4.0.0",
+    "tsbb": "^4.4.0"
   }
 }

pkg-example/README.md

@@ -0,0 +1,15 @@
+Example
+===
+
+```jsx mdx:preview
+import React from "react";
+import Example from 'pkg-example';
+
+export default function App() {
+  return (
+    <div className="container">
+      <Example />
+    </div>
+  );
+}
+```

pkg-example/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "pkg-example",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js"
+    },
+    "./README.md": "./README.md"
+  },
+  "scripts": {
+    "watch": "tsbb watch src/*.tsx --use-babel",
+    "build": "tsbb build src/*.tsx --use-babel"
+  },
+  "keywords": [],
+  "author": "jaywcjlove",
+  "description": ""
+}

pkg-example/src/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Test() {
+  return <div>Test</div>;
+}

pkg-example/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "baseUrl": "."
+  }
+}

website/.kktrc.ts

@@ -21,6 +21,7 @@ export default (conf: WebpackConfiguration, env: 'development' | 'production', o
   );
   conf = mdCodeModulesLoader(conf);
   conf.module!.exprContextCritical = false;
+
   if (process.env.NODE_ENV === 'production') {
     conf.output = { ...conf.output, publicPath: './' };
   }

website/package.json

@@ -5,34 +5,35 @@
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
-    "start": "kkt start",
+    "start": "kkt start --no-clear-console --no-open-browser",
     "build": "kkt build"
   },
   "license": "MIT",
   "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.24.8",
     "@uiw/copy-to-clipboard": "^1.0.12",
     "@uiw/react-codepen": "~1.0.2",
     "@uiw/react-codesandbox": "~1.1.5",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/react-layout": "~5.0.0-beta.1",
-    "@uiw/react-markdown-preview": "^4.0.19",
+    "@uiw/react-markdown-preview": "^5.1.3",
     "@uiw/react-stackblitz": "~1.0.5",
     "@wcj/dark-mode": "^1.0.14",
-    "i18next": "~21.7.1",
-    "react": "18.1.0",
-    "react-code-preview-layout": "^2.0.6",
-    "react-dom": "18.1.0",
+    "i18next": "~23.16.2",
+    "react": "~18.2.0",
+    "react-code-preview-layout": "^3.1.4",
+    "react-dom": "~18.2.0",
     "react-i18next": "~11.16.9",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.20.0",
     "uiw": "^4.21.7"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
-    "@types/react": "18.0.8",
-    "@types/react-dom": "18.0.3",
-    "kkt": "~7.4.17",
+    "@kkt/less-modules": "~7.5.5",
+    "@kkt/raw-modules": "~7.5.5",
+    "@kkt/scope-plugin-options": "~7.5.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "kkt": "~7.5.5",
     "markdown-react-code-preview-loader": "2.1.8"
   },
   "eslintConfig": {

website/src/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 import { Layout } from './Layout';
 import { HomePage } from './pages/docs';

website/src/Layout.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { Outlet, NavLink } from 'react-router-dom';
 import GitHubCorners from '@uiw/react-github-corners';
 import '@wcj/dark-mode';

website/src/index.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import './language/i18n';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);

website/src/pages/example/index.tsx

@@ -1,10 +1,48 @@
+import React from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
+import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+
 import { Root, Element, RootContent } from 'hast';
 import { Loader } from 'uiw';
 import CodeLayout from 'react-code-preview-layout';
 import useMdData from '../../components/useMdData';
 
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
+interface CodePreviewProps {
+  mdData?: CodeBlockData;
+  'data-meta'?: string;
+}
+
+const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = (props) => {
+  const $dom = useRef<HTMLDivElement>(null);
+  // @ts-ignore
+  const { mdData, node, 'data-meta': meta, ...rest } = props;
+  // @ts-ignore
+  const line = node?.position?.start.line;
+  const metaId = getMetaId(meta) || String(line);
+  const Child = mdData?.components[`${metaId}`];
+  if (metaId && typeof Child === 'function') {
+    const code = mdData?.data[metaId].value || '';
+    const param = getURLParameters(meta || '');
+    return (
+      <CodeLayout ref={$dom}>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar text={code}>{param.title || 'Example'}</Toolbar>
+        <Code>
+          <pre {...rest} />
+        </Code>
+      </CodeLayout>
+    );
+  }
+  return <code {...rest} />;
+};
+
 export function ExamplePage() {
   const { mdData, loading } = useMdData((path) => import(`./App${path}.md`));
   return (
@@ -22,30 +60,7 @@ export function ExamplePage() {
           }
         }}
         components={{
-          code: ({ inline, node, ...props }) => {
-            const { 'data-meta': meta, ...rest } = props as any;
-            if (inline || !isMeta(meta)) {
-              return <code {...props} />;
-            }
-            const line = node.position?.start.line;
-            const metaId = getMetaId(meta) || String(line);
-            const Child = mdData.components[`${metaId}`];
-            if (metaId && typeof Child === 'function') {
-              const code = mdData.data[metaId].value || '';
-              const param = getURLParameters(meta);
-              return (
-                <CodeLayout
-                  disableCheckered
-                  toolbar={param.title || 'Example Preview'}
-                  code={<code {...rest} />}
-                  text={code}
-                >
-                  <Child />
-                </CodeLayout>
-              );
-            }
-            return <code {...rest} />;
-          },
+          code: (props) => <CodePreview {...props} mdData={mdData} />,
         }}
       />
     </Loader>