Skip to content

Commit 59eab07

Browse files
jaywcjlovejaywcjlove
committed
refactor: refactor transform code & api.
1 parent 46bf9cf commit 59eab07

File tree

8 files changed

+166
-150
lines changed

8 files changed

+166
-150
lines changed

‎core/README-zh.md

+41-15
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default (conf: Configuration, env: 'development' | 'production', options:
8484

8585
```ts
8686
import { PluginItem } from '@babel/core';
87-
import { Options as RIOptions } from 'babel-plugin-transform-remove-imports'
87+
import { Options as RemoveImportsOptions } from 'babel-plugin-transform-remove-imports'
8888
export type Options = {
8989
/**
9090
* 需要解析代码块的语言，默认: `["jsx","tsx"]`
@@ -95,7 +95,7 @@ export type Options = {
9595
* babel (babel-plugin-transform-remove-imports) 包的 option 设置
9696
* https://github.com/uiwjs/babel-plugin-transform-remove-imports
9797
*/
98-
removeImports?: RIOptions;
98+
removeImports?: RemoveImportsOptions;
9999
/**
100100
* 添加 babel 插件。
101101
*/
@@ -110,30 +110,54 @@ export type Options = {
110110
```jsx
111111
import mdObj from 'markdown-react-code-preview-loader/README.md';
112112

113-
mdObj.source // => `README.md` 原始字符串文本
114-
mdObj.components // => 组件索引对象，从 markdown 索引到的示例转换成的 React 组件。(需要配置 meta)
115-
mdObj.codeBlock // => 组件源码索引对象，从 markdown 索引到的示例源码。(需要配置 meta)
113+
mdObj.source // => `README.md` 原始字符串文本
114+
mdObj.components // => 组件索引对象，从 markdown 索引到的示例转换成的 React 组件。(可能需要配置 meta)
115+
mdObj.data // => 组件源码索引对象，从 markdown 索引到的示例源码。(可能需要配置 meta)
116116
```
117117

118118
```js
119119
{
120-
codeBlock: {
121-
17: 'import React from ...',
122-
77: 'import React from ...',
123-
demo12: 'import React from ...'
120+
data: {
121+
17: {
122+
code: "\"use strict\";\n\nfunction ......"
123+
language: "jsx"
124+
name: 17,
125+
value: "impo....."
126+
},
127+
77: {
128+
code: "\"use strict\";\n\nfunction ......"
129+
language: "jsx"
130+
name: 17,
131+
value: "impo....."
132+
},
133+
demo12: {
134+
code: "\"use strict\";\n\nfunction ......"
135+
language: "jsx"
136+
name: 17,
137+
value: "impo....."
138+
}
124139
},
125140
components: { 17: ƒ, 77: ƒ, demo12: ƒ },
126-
languages: { 17: 'jsx', 77: 'jsx', demo12: 'jsx'},
127141
source: "# Alert 确认对话框...."
128142
}
129143
```
130144

131145
```ts
146+
export type CodeBlockItem = {
147+
/** 源码转换后的代码。 **/
148+
code?: string;
149+
/** 原始代码块 **/
150+
value?: string;
151+
/** 代码块编程语言 **/
152+
language?: string;
153+
/** 索引名称可以自定义，可以是行号。 */
154+
name?: string | number;
155+
};
156+
132157
export type CodeBlockData = {
133158
source: string;
134-
components: Record<string | number, React.FC>;
135-
codeBlock: Record<string | number, string>;
136-
languages: Record<string | number, string>;
159+
components: Record<CodeBlockItem['name'], React.FC>;
160+
data: Record<CodeBlockItem['name'], CodeBlockItem>;
137161
};
138162
```
139163

@@ -156,9 +180,11 @@ getMetaId('mdx:preview') // => ''
156180
getMetaId('mdx:preview:demo12') // => 'demo12'
157181
```
158182

159-
## getCodeBlockString
183+
## getCodeBlock
160184

161-
传递 `markdown` 文件内容字符串，返回转换好的需要预览的代码块解析数据。
185+
```ts
186+
const getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];
187+
```
162188

163189
## 配置 meta 标识
164190

‎core/README.md

+41-15
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default (conf: Configuration, env: 'development' | 'production', options:
8484

8585
```ts
8686
import { PluginItem } from '@babel/core';
87-
import { Options as RIOptions } from 'babel-plugin-transform-remove-imports'
87+
import { Options as RemoveImportsOptions } from 'babel-plugin-transform-remove-imports'
8888
export type Options = {
8989
/**
9090
* Language to parse code blocks, default: `["jsx","tsx"]`
@@ -94,7 +94,7 @@ export type Options = {
9494
* Option settings for the babel (babel-plugin-transform-remove-imports) package
9595
* https://github.com/uiwjs/babel-plugin-transform-remove-imports
9696
*/
97-
removeImports?: RIOptions;
97+
removeImports?: RemoveImportsOptions;
9898
/**
9999
* Add babel plugins.
100100
*/
@@ -109,30 +109,54 @@ After adding `loader`, use the method to load `markdown` text in the project pro
109109
```jsx
110110
import mdObj from 'markdown-react-code-preview-loader/README.md';
111111

112-
mdObj.source // => `README.md` raw string text
113-
mdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)
114-
mdObj.codeBlock // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)
112+
mdObj.source // => `README.md` raw string text
113+
mdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)
114+
mdObj.data // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)
115115
```
116116

117117
```js
118118
{
119-
codeBlock: {
120-
17: 'import React from ...',
121-
77: 'import React from ...',
122-
demo12: 'import React from ...'
119+
data: {
120+
17: {
121+
code: "\"use strict\";\n\nfunction ......"
122+
language: "jsx"
123+
name: 17,
124+
value: "impo....."
125+
},
126+
77: {
127+
code: "\"use strict\";\n\nfunction ......"
128+
language: "jsx"
129+
name: 17,
130+
value: "impo....."
131+
},
132+
demo12: {
133+
code: "\"use strict\";\n\nfunction ......"
134+
language: "jsx"
135+
name: 17,
136+
value: "impo....."
137+
}
123138
},
124139
components: { 17: ƒ, 77: ƒ, demo12: ƒ },
125-
languages: { 17: 'jsx', 77: 'jsx', demo12: 'jsx'},
126140
source: "# Alert 确认对话框...."
127141
}
128142
```
129143

130144
```ts
145+
export type CodeBlockItem = {
146+
/** The code after the source code conversion. **/
147+
code?: string;
148+
/** original code block **/
149+
value?: string;
150+
/** code block programming language **/
151+
language?: string;
152+
/** The index name, which can be customized, can be a row number. */
153+
name?: string | number;
154+
};
155+
131156
export type CodeBlockData = {
132157
source: string;
133-
components: Record<string | number, React.FC>;
134-
codeBlock: Record<string | number, string>;
135-
languages: Record<string | number, string>;
158+
components: Record<CodeBlockItem['name'], React.FC>;
159+
data: Record<CodeBlockItem['name'], CodeBlockItem>;
136160
};
137161
```
138162

@@ -155,9 +179,11 @@ getMetaId('mdx:preview') // => ''
155179
getMetaId('mdx:preview:demo12') // => 'demo12'
156180
```
157181

158-
## getCodeBlockString
182+
## getCodeBlock
159183

160-
Pass the `markdown` file content string, and return the converted code block parsing data that needs to be previewed.
184+
```ts
185+
const getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];
186+
```
161187

162188
## Configure meta ID
163189

‎core/src/index.ts

+27-14
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
11
import React from 'react';
22
import { PluginItem } from '@babel/core';
33
import { Options as RIOptions } from 'babel-plugin-transform-remove-imports';
4-
import { getCodeBlockString } from './utils';
4+
import { getProcessor, getCodeBlock } from './utils';
55
export * from './utils';
66

7+
export type CodeBlockItem = {
8+
/** The code after the source code conversion. **/
9+
code?: string;
10+
/** original code block **/
11+
value?: string;
12+
/** code block programming language **/
13+
language?: string;
14+
/** The index name, which can be customized, can be a row number. */
15+
name?: string | number;
16+
};
17+
718
export type CodeBlockData = {
819
source: string;
9-
components: Record<string | number, React.FC>;
10-
codeBlock: Record<string | number, string>;
11-
languages: Record<string | number, string>;
20+
components: Record<CodeBlockItem['name'], React.FC>;
21+
data: Record<CodeBlockItem['name'], CodeBlockItem>;
1222
};
1323

24+
export const FUNNAME_PREFIX = '__BaseCode__';
25+
1426
export type Options = {
1527
/**
1628
* Language to parse code blocks, default: `["jsx","tsx"]`
@@ -29,15 +41,16 @@ export type Options = {
2941

3042
export default function (source: string) {
3143
const options: Options = this.getOptions();
32-
const result = getCodeBlockString(source, options);
3344

34-
return `
35-
${result}
36-
export default {
37-
source:${JSON.stringify(source)},
38-
components,
39-
codeBlock,
40-
languages
41-
}
42-
`;
45+
const codeBlock = getCodeBlock(getProcessor(source), options);
46+
let components = '';
47+
Object.keys(codeBlock).forEach((key) => {
48+
components += `${key}: (function() { ${codeBlock[key].code} })(),`;
49+
});
50+
51+
return `\nexport default {
52+
components: { ${components} },
53+
data: ${JSON.stringify(codeBlock, null, 2)},
54+
source: ${JSON.stringify(source)}
55+
}`;
4356
}

‎core/src/utils/index.ts

+19-44
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
/*
2-
* @Description: markdown 转化
3-
*/
4-
import { MarkDownTreeType, CodeBlockItemType } from './interface';
1+
import { Parent, Node } from 'unist';
52
import { getTransformValue } from './transform';
63
import webpack from 'webpack';
74
import remark from 'remark';
8-
export * from './interface';
9-
import { Options } from '../';
5+
import { Options, FUNNAME_PREFIX, CodeBlockItem, CodeBlockData } from '../';
6+
7+
export interface MarkdownDataChild extends Node {
8+
lang: string;
9+
meta: string;
10+
value: string;
11+
}
12+
13+
export interface MarkdownParseData extends Parent<MarkdownDataChild> {}
1014

1115
/** 转换 代码*/
12-
const getProcessor = (scope: string) => {
16+
export const getProcessor = (source: string) => {
1317
try {
14-
const child = remark.parse(scope) as MarkDownTreeType;
18+
const child = remark.parse(source) as MarkdownParseData;
1519
return child.children;
1620
} catch (err) {
1721
console.warn(err);
@@ -43,22 +47,22 @@ export const getMetaId = (meta: string = '') => {
4347
export const isMeta = (meta: string = '') => meta && meta.includes('mdx:preview');
4448

4549
/** 获取需要渲染的代码块 **/
46-
const getCodeBlock = (child: MarkDownTreeType['children'], opts: Options = {}) => {
50+
export const getCodeBlock = (child: MarkdownParseData['children'], opts: Options = {}): CodeBlockData['data'] => {
4751
const { lang = ['jsx', 'tsx'] } = opts;
4852
// 获取渲染部分
49-
const codeBlock: Record<string | number, CodeBlockItemType> = {};
53+
const codeBlock: Record<string | number, CodeBlockItem> = {};
5054
try {
5155
child.forEach((item) => {
5256
if (item && item.type === 'code' && lang.includes(item.lang)) {
5357
const line = item.position.start.line;
5458
const metaId = getMetaId(item.meta);
5559
if (isMeta(item.meta)) {
56-
let name = typeof metaId === 'string' ? metaId : line;
57-
const funName = `BaseCode${line}`;
58-
const returnCode = getTransformValue(item.value, `${funName}.${lang}`, funName, opts);
59-
codeBlock[line] = {
60-
code: returnCode,
60+
let name = metaId || line;
61+
const funName = `${FUNNAME_PREFIX}${name}`;
62+
const returnCode = getTransformValue(item.value, `${funName}.${lang}`, opts);
63+
codeBlock[name] = {
6164
name,
65+
code: returnCode,
6266
language: item.lang,
6367
value: item.value,
6468
};
@@ -71,35 +75,6 @@ const getCodeBlock = (child: MarkDownTreeType['children'], opts: Options = {}) =
7175
return codeBlock;
7276
};
7377

74-
const createStr = (codeBlock: Record<string | number, CodeBlockItemType>) => {
75-
let baseCodeStr = ``;
76-
let baseCodeObjStr = ``;
77-
let codeBlockValue = ``;
78-
let languageStr = ``;
79-
80-
try {
81-
Object.entries(codeBlock).forEach(([key, item]) => {
82-
const { code, value, language, name } = item;
83-
baseCodeStr += `${code};\n`;
84-
baseCodeObjStr += `${name}:BaseCode${key},\n`;
85-
codeBlockValue += `${name}:${JSON.stringify(value)},\n`;
86-
languageStr += `${name}:\`${language}\`,\n`;
87-
});
88-
} catch (err) {
89-
console.warn(err);
90-
}
91-
92-
let indexStr = `${baseCodeStr} const languages={${languageStr}};\n const codeBlock={${codeBlockValue}};\n const components={${baseCodeObjStr}}`;
93-
return indexStr;
94-
};
95-
96-
export const getCodeBlockString = (scope: string, opts: Options = {}) => {
97-
const children = getProcessor(scope);
98-
const codeBlock = getCodeBlock(children, opts);
99-
const result = createStr(codeBlock);
100-
return result;
101-
};
102-
10378
/**
10479
* `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.
10580
* @param {webpack.Configuration} config webpack config

‎core/src/utils/interface.ts

-34
This file was deleted.

0 commit comments

Comments
 (0)