Skip to content

Commit 3b31f69

Browse files
jaywcjlovejaywcjlove
committed
chore(deps): update dependencies.
1 parent cb3c591 commit 3b31f69

File tree

16 files changed

+158
-70
lines changed

16 files changed

+158
-70
lines changed

‎.husky/pre-commit

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1 @@
1-
#!/usr/bin/env sh
2-
. "$(dirname "$0")/_/husky.sh"
3-
4-
npx --no-install lint-staged
1+
npx --no-install lint-staged

‎core/README-zh.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import scopePluginOptions from '@kkt/scope-plugin-options';
2727
import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
2828
import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
2929

30-
export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
30+
export default (
31+
conf: WebpackConfiguration,
32+
env: 'development' | 'production',
33+
options: LoaderConfOptions
34+
) => {
3135
// ....
3236
conf = mdCodeModulesLoader(conf);
3337
// ....
@@ -45,7 +49,11 @@ import { Options } from 'markdown-react-code-preview-loader';
4549
* @param {Options} option Loader Options
4650
* @returns {webpack.Configuration}
4751
* **/
48-
export declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;
52+
export declare const mdCodeModulesLoader: (
53+
config: webpack.Configuration,
54+
lang?: string[],
55+
option?: Options
56+
) => webpack.Configuration;
4957
```
5058

5159
**第 ② 种方法，手动添加配置**

‎core/README.md

+24-10
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,15 @@ import scopePluginOptions from '@kkt/scope-plugin-options';
2727
import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
2828
import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
2929

30-
export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
31-
// ....
32-
conf = mdCodeModulesLoader(conf);
33-
// ....
34-
return conf;
30+
export default (
31+
conf: WebpackConfiguration,
32+
env: 'development' | 'production',
33+
options: LoaderConfOptions
34+
) => {
35+
// ....
36+
conf = mdCodeModulesLoader(conf);
37+
// ....
38+
return conf;
3539
};
3640
```
3741

@@ -45,7 +49,11 @@ import { Options } from 'markdown-react-code-preview-loader';
4549
* @param {Options} option Loader Options
4650
* @returns {webpack.Configuration}
4751
* **/
48-
export declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;
52+
export declare const mdCodeModulesLoader: (
53+
config: webpack.Configuration,
54+
lang?: string[],
55+
option?: Options
56+
) => webpack.Configuration;
4957
```
5058

5159
**② 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
111119
```jsx
112120
import mdObj from 'markdown-react-code-preview-loader/README.md';
113121

114-
mdObj.source // => `README.md` raw string text
115-
mdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)
116-
mdObj.data // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)
117-
mdObj.headings // => This is the parsed header data
122+
// `README.md` raw string text
123+
mdObj.source
124+
// The component index object, the React component converted from the markdown indexed example.
125+
// (need to configure meta)
126+
mdObj.components
127+
// The component source code index object, the sample source code indexed from markdown.
128+
// (need to configure meta)
129+
mdObj.data
130+
// This is the parsed header data
131+
mdObj.headings
118132
```
119133

120134
```js

‎core/src/utils/transform.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { transform } from '@babel/standalone';
2-
import { PluginItem } from '@babel/core';
2+
import { type PluginItem } from '@babel/core';
33
import removeImports from 'babel-plugin-transform-remove-imports';
44
import replaceExportDefault from 'babel-plugin-transform-replace-export-default';
5-
import { Options } from '../';
5+
import { type Options } from '../';
66

77
export const getTransformValue = (str: string, filename: string, opts: Options) => {
88
const plugins: PluginItem[] = [...(opts.babelPlugins || [])];

‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"version": "2.1.8",
3-
"packages": ["website", "core"]
3+
"packages": ["website", "core", "pkg-example"]
44
}

‎package.json

+9-6
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
},
2424
"workspaces": [
2525
"core",
26+
"pkg-example",
2627
"website"
2728
],
2829
"jest": {
@@ -35,11 +36,13 @@
3536
},
3637
"license": "MIT",
3738
"devDependencies": {
38-
"husky": "~7.0.4",
39-
"lerna": "~4.0.0",
40-
"lint-staged": "~12.3.4",
41-
"prettier": "~2.5.1",
42-
"pretty-quick": "~3.1.3",
43-
"tsbb": "~3.7.0"
39+
"react": "~18.2.0",
40+
"react-dom": "~18.2.0",
41+
"husky": "~9.1.6",
42+
"lerna": "~8.1.8",
43+
"lint-staged": "~15.2.10",
44+
"prettier": "~3.3.3",
45+
"pretty-quick": "~4.0.0",
46+
"tsbb": "^4.4.0"
4447
}
4548
}

‎pkg-example/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Example
2+
===
3+
4+
```jsx mdx:preview
5+
import React from "react";
6+
import Example from 'pkg-example';
7+
8+
export default function App() {
9+
return (
10+
<div className="container">
11+
<Example />
12+
</div>
13+
);
14+
}
15+
```

‎pkg-example/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "pkg-example",
3+
"version": "1.0.0",
4+
"private": true,
5+
"license": "MIT",
6+
"main": "./cjs/index.js",
7+
"module": "./esm/index.js",
8+
"exports": {
9+
".": {
10+
"require": "./cjs/index.js",
11+
"import": "./esm/index.js"
12+
},
13+
"./README.md": "./README.md"
14+
},
15+
"scripts": {
16+
"watch": "tsbb watch src/*.tsx --use-babel",
17+
"build": "tsbb build src/*.tsx --use-babel"
18+
},
19+
"keywords": [],
20+
"author": "jaywcjlove",
21+
"description": ""
22+
}

‎pkg-example/src/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
3+
export default function Test() {
4+
return <div>Test</div>;
5+
}

‎pkg-example/tsconfig.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "../tsconfig",
3+
"include": ["src"],
4+
"compilerOptions": {
5+
"outDir": "./cjs",
6+
"baseUrl": "."
7+
}
8+
}

‎website/.kktrc.ts

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default (conf: WebpackConfiguration, env: 'development' | 'production', o
2121
);
2222
conf = mdCodeModulesLoader(conf);
2323
conf.module!.exprContextCritical = false;
24+
2425
if (process.env.NODE_ENV === 'production') {
2526
conf.output = { ...conf.output, publicPath: './' };
2627
}

‎website/package.json

+14-13
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,35 @@
55
"description": "Simple React package development project example template.",
66
"private": true,
77
"scripts": {
8-
"start": "kkt start",
8+
"start": "kkt start --no-clear-console --no-open-browser",
99
"build": "kkt build"
1010
},
1111
"license": "MIT",
1212
"dependencies": {
13+
"@babel/plugin-transform-modules-commonjs": "^7.24.8",
1314
"@uiw/copy-to-clipboard": "^1.0.12",
1415
"@uiw/react-codepen": "~1.0.2",
1516
"@uiw/react-codesandbox": "~1.1.5",
1617
"@uiw/react-github-corners": "~1.5.3",
1718
"@uiw/react-layout": "~5.0.0-beta.1",
18-
"@uiw/react-markdown-preview": "^4.0.19",
19+
"@uiw/react-markdown-preview": "^5.1.3",
1920
"@uiw/react-stackblitz": "~1.0.5",
2021
"@wcj/dark-mode": "^1.0.14",
21-
"i18next": "~21.7.1",
22-
"react": "18.1.0",
23-
"react-code-preview-layout": "^2.0.6",
24-
"react-dom": "18.1.0",
22+
"i18next": "~23.16.2",
23+
"react": "~18.2.0",
24+
"react-code-preview-layout": "^3.1.4",
25+
"react-dom": "~18.2.0",
2526
"react-i18next": "~11.16.9",
26-
"react-router-dom": "^6.3.0",
27+
"react-router-dom": "^6.20.0",
2728
"uiw": "^4.21.7"
2829
},
2930
"devDependencies": {
30-
"@kkt/less-modules": "~7.1.1",
31-
"@kkt/raw-modules": "~7.1.1",
32-
"@kkt/scope-plugin-options": "~7.1.1",
33-
"@types/react": "18.0.8",
34-
"@types/react-dom": "18.0.3",
35-
"kkt": "~7.4.17",
31+
"@kkt/less-modules": "~7.5.5",
32+
"@kkt/raw-modules": "~7.5.5",
33+
"@kkt/scope-plugin-options": "~7.5.5",
34+
"@types/react": "^18.2.0",
35+
"@types/react-dom": "^18.2.0",
36+
"kkt": "~7.5.5",
3637
"markdown-react-code-preview-loader": "2.1.8"
3738
},
3839
"eslintConfig": {

‎website/src/App.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import { HashRouter, Routes, Route } from 'react-router-dom';
23
import { Layout } from './Layout';
34
import { HomePage } from './pages/docs';

‎website/src/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fragment } from 'react';
1+
import React, { Fragment } from 'react';
22
import { Outlet, NavLink } from 'react-router-dom';
33
import GitHubCorners from '@uiw/react-github-corners';
44
import '@wcj/dark-mode';

‎website/src/index.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
2+
import { createRoot } from 'react-dom/client';
33
import App from './App';
44
import './language/i18n';
55

6-
ReactDOM.createRoot(document.getElementById('root')!).render(
7-
<React.StrictMode>
8-
<App />
9-
</React.StrictMode>,
10-
);
6+
const container = document.getElementById('root');
7+
const root = createRoot(container!);
8+
root.render(<App />);

‎website/src/pages/example/index.tsx

+40-25
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,48 @@
1+
import React from 'react';
2+
import { FC, PropsWithChildren, useRef } from 'react';
13
import MarkdownPreview from '@uiw/react-markdown-preview';
2-
import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
4+
import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
5+
36
import { Root, Element, RootContent } from 'hast';
47
import { Loader } from 'uiw';
58
import CodeLayout from 'react-code-preview-layout';
69
import useMdData from '../../components/useMdData';
710

11+
const Preview = CodeLayout.Preview;
12+
const Code = CodeLayout.Code;
13+
const Toolbar = CodeLayout.Toolbar;
14+
15+
interface CodePreviewProps {
16+
mdData?: CodeBlockData;
17+
'data-meta'?: string;
18+
}
19+
20+
const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = (props) => {
21+
const $dom = useRef<HTMLDivElement>(null);
22+
// @ts-ignore
23+
const { mdData, node, 'data-meta': meta, ...rest } = props;
24+
// @ts-ignore
25+
const line = node?.position?.start.line;
26+
const metaId = getMetaId(meta) || String(line);
27+
const Child = mdData?.components[`${metaId}`];
28+
if (metaId && typeof Child === 'function') {
29+
const code = mdData?.data[metaId].value || '';
30+
const param = getURLParameters(meta || '');
31+
return (
32+
<CodeLayout ref={$dom}>
33+
<Preview>
34+
<Child />
35+
</Preview>
36+
<Toolbar text={code}>{param.title || 'Example'}</Toolbar>
37+
<Code>
38+
<pre {...rest} />
39+
</Code>
40+
</CodeLayout>
41+
);
42+
}
43+
return <code {...rest} />;
44+
};
45+
846
export function ExamplePage() {
947
const { mdData, loading } = useMdData((path) => import(`./App${path}.md`));
1048
return (
@@ -22,30 +60,7 @@ export function ExamplePage() {
2260
}
2361
}}
2462
components={{
25-
code: ({ inline, node, ...props }) => {
26-
const { 'data-meta': meta, ...rest } = props as any;
27-
if (inline || !isMeta(meta)) {
28-
return <code {...props} />;
29-
}
30-
const line = node.position?.start.line;
31-
const metaId = getMetaId(meta) || String(line);
32-
const Child = mdData.components[`${metaId}`];
33-
if (metaId && typeof Child === 'function') {
34-
const code = mdData.data[metaId].value || '';
35-
const param = getURLParameters(meta);
36-
return (
37-
<CodeLayout
38-
disableCheckered
39-
toolbar={param.title || 'Example Preview'}
40-
code={<code {...rest} />}
41-
text={code}
42-
>
43-
<Child />
44-
</CodeLayout>
45-
);
46-
}
47-
return <code {...rest} />;
48-
},
63+
code: (props) => <CodePreview {...props} mdData={mdData} />,
4964
}}
5065
/>
5166
</Loader>

0 commit comments

Comments
 (0)