Skip to content

Commit 834ca29

Browse files
jaywcjlovejaywcjlove
committed
feat: add 'meta' parameter.
1 parent 4af1f4d commit 834ca29

File tree

8 files changed

+160
-34
lines changed

8 files changed

+160
-34
lines changed

‎core/README-zh.md‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -118,26 +118,22 @@ mdObj.data // => 组件源码索引对象，从 markdown 索引到的示
118118
```js
119119
{
120120
data: {
121-
17: {
122-
code: "\"use strict\";\n\nfunction ......"
123-
language: "jsx"
124-
name: 17,
125-
value: "impo....."
126-
},
127121
77: {
128122
code: "\"use strict\";\n\nfunction ......"
129123
language: "jsx"
130-
name: 17,
124+
name: 77,
125+
meta: {},
131126
value: "impo....."
132127
},
133128
demo12: {
134129
code: "\"use strict\";\n\nfunction ......"
135130
language: "jsx"
136-
name: 17,
131+
name: 'demo12',
132+
meta: {},
137133
value: "impo....."
138134
}
139135
},
140-
components: { 17: ƒ, 77: ƒ, demo12: ƒ },
136+
components: { 77: ƒ, demo12: ƒ },
141137
source: "# Alert 确认对话框...."
142138
}
143139
```
@@ -152,6 +148,8 @@ export type CodeBlockItem = {
152148
language?: string;
153149
/** 索引名称可以自定义，可以是行号。 */
154150
name?: string | number;
151+
/** `meta` 参数被转换为 `object` */
152+
meta?: Record<string, string>;
155153
};
156154

157155
export type CodeBlockData = {
@@ -186,13 +184,52 @@ getMetaId('mdx:preview:demo12') // => 'demo12'
186184
const getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];
187185
```
188186

187+
## getURLParameters
188+
189+
```js
190+
import { getURLParameters } from 'markdown-react-code-preview-loader';
191+
192+
getURLParameters('name=Adam&surname=Smith') // => { name: 'Adam', surname: "Smith" }
193+
getURLParameters('mdx:preview:demo12') // => { }
194+
getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith') // => { name: 'Adam', surname: "Smith" }
195+
getURLParameters('mdx:preview:demo12&code=true&boreder=0') // => { code: 'true', boreder: "0" }
196+
```
197+
198+
```markdown
199+
\```tsx mdx:preview:demo12&code=true&boreder=0
200+
import React from "react"
201+
const Demo = ()=>{
202+
return <div>测试</div>
203+
}
204+
205+
export default Demo
206+
\```
207+
```
208+
209+
```js
210+
{
211+
data: {
212+
demo12: {
213+
code: "\"use strict\";\n\nfunction ......"
214+
language: "jsx"
215+
name: 'demo12',
216+
meta: { code: 'true', boreder: '0' },
217+
value: "impo....."
218+
}
219+
},
220+
components: { demo12: ƒ },
221+
source: "# Alert 确认对话框...."
222+
}
223+
```
224+
189225
## 配置 meta 标识
190226

191227
注意 ⚠️：需要在代码块示例中添加特殊的 `meta` 标识，`loader` 才会去索引对于的 `react` 示例，进行代码转换。
192228

193229
1. `mdx:` 特殊标识前缀
194230
2. `mdx:preview` 控制是否进行进行示例索引，通过对应所在行号，获取需要的示例对象。
195231
3. `mdx:preview:demo12` 通过 `demo12` 唯一标识，准确获取索引的 `示例代码` 或 `示例组件对象`。
232+
4. `mdx:preview:&code=true&border=0` 传递参数，提供给渲染层使用。
196233

197234
```markdown
198235
\```tsx mdx:preview
@@ -216,6 +253,17 @@ export default Demo
216253
\```
217254
```
218255

256+
```markdown
257+
\```tsx mdx:preview:demo12&code=true&boreder=0
258+
import React from "react"
259+
const Demo = ()=>{
260+
return <div>测试</div>
261+
}
262+
263+
export default Demo
264+
\```
265+
```
266+
219267
## 开发
220268

221269
```bash

‎core/README.md‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -117,26 +117,22 @@ mdObj.data // => The component source code index object, the sample source
117117
```js
118118
{
119119
data: {
120-
17: {
121-
code: "\"use strict\";\n\nfunction ......"
122-
language: "jsx"
123-
name: 17,
124-
value: "impo....."
125-
},
126120
77: {
127121
code: "\"use strict\";\n\nfunction ......"
128122
language: "jsx"
129-
name: 17,
123+
name: 77,
124+
meta: {},
130125
value: "impo....."
131126
},
132127
demo12: {
133128
code: "\"use strict\";\n\nfunction ......"
134129
language: "jsx"
135-
name: 17,
130+
name: 'demo12',
131+
meta: {},
136132
value: "impo....."
137133
}
138134
},
139-
components: { 17: ƒ, 77: ƒ, demo12: ƒ },
135+
components: { 77: ƒ, demo12: ƒ },
140136
source: "# Alert 确认对话框...."
141137
}
142138
```
@@ -151,6 +147,8 @@ export type CodeBlockItem = {
151147
language?: string;
152148
/** The index name, which can be customized, can be a row number. */
153149
name?: string | number;
150+
/** The `meta` parameter is converted into an `object`. */
151+
meta?: Record<string, string>;
154152
};
155153

156154
export type CodeBlockData = {
@@ -179,6 +177,44 @@ getMetaId('mdx:preview') // => ''
179177
getMetaId('mdx:preview:demo12') // => 'demo12'
180178
```
181179

180+
## getURLParameters
181+
182+
```js
183+
import { getURLParameters } from 'markdown-react-code-preview-loader';
184+
185+
getURLParameters('name=Adam&surname=Smith') // => { name: 'Adam', surname: "Smith" }
186+
getURLParameters('mdx:preview:demo12') // => { }
187+
getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith') // => { name: 'Adam', surname: "Smith" }
188+
getURLParameters('mdx:preview:demo12&code=true&boreder=0') // => { code: 'true', boreder: "0" }
189+
```
190+
191+
```markdown
192+
\```tsx mdx:preview:demo12&code=true&boreder=0
193+
import React from "react"
194+
const Demo = ()=>{
195+
return <div>测试</div>
196+
}
197+
198+
export default Demo
199+
\```
200+
```
201+
202+
```js
203+
{
204+
data: {
205+
demo12: {
206+
code: "\"use strict\";\n\nfunction ......"
207+
language: "jsx"
208+
name: 'demo12',
209+
meta: { code: 'true', boreder: '0' },
210+
value: "impo....."
211+
}
212+
},
213+
components: { demo12: ƒ },
214+
source: "# Alert 确认对话框...."
215+
}
216+
```
217+
182218
## getCodeBlock
183219

184220
```ts
@@ -192,6 +228,7 @@ Note ⚠️: You need to add a special `meta` identifier to the code block examp
192228
1. `mdx:` special identifier prefix
193229
2. `mdx:preview` Controls whether to perform example indexing, and obtain the required example object through the corresponding line number.
194230
3. `mdx:preview:demo12` Uniquely identified by `demo12`, accurately obtain the `example code` or `example component object` of the index.
231+
4. `mdx:preview:&code=true&border=0` pass the parameters for the rendering layer to use.
195232

196233
```markdown
197234
\```tsx mdx:preview
@@ -215,6 +252,17 @@ export default Demo
215252
\```
216253
```
217254

255+
```markdown
256+
\```tsx mdx:preview:demo12&code=true&boreder=0
257+
import React from "react"
258+
const Demo = ()=>{
259+
return <div>测试</div>
260+
}
261+
262+
export default Demo
263+
\```
264+
```
265+
218266
## Development
219267

220268
```bash

‎core/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export type CodeBlockItem = {
1313
language?: string;
1414
/** The index name, which can be customized, can be a row number. */
1515
name?: string | number;
16+
/** The `meta` parameter is converted into an `object`. */
17+
meta?: Record<string, string>;
1618
};
1719

1820
export type CodeBlockData = {

‎core/src/utils/index.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
import { Parent, Node } from 'unist';
2-
import { getTransformValue } from './transform';
32
import webpack from 'webpack';
43
import remark from 'remark';
4+
import { getTransformValue } from './transform';
55
import { Options, FUNNAME_PREFIX, CodeBlockItem, CodeBlockData } from '../';
66

7+
/**
8+
* Creates an object containing the parameters of the current URL.
9+
*
10+
* ```js
11+
* getURLParameters('name=Adam&surname=Smith');
12+
* // 👉 {name: 'Adam', surname: 'Smith'}
13+
* ```
14+
* @param url `name=Adam&surname=Smith`
15+
* @returns
16+
*/
17+
export const getURLParameters = (url: string): Record<string, string> =>
18+
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
19+
(a: Record<string, string>, v: string) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
20+
{},
21+
);
22+
723
export interface MarkdownDataChild extends Node {
824
lang: string;
925
meta: string;
@@ -62,6 +78,7 @@ export const getCodeBlock = (child: MarkdownParseData['children'], opts: Options
6278
const returnCode = getTransformValue(item.value, `${funName}.${lang}`, opts);
6379
codeBlock[name] = {
6480
name,
81+
meta: getURLParameters(item.meta),
6582
code: returnCode,
6683
language: item.lang,
6784
value: item.value,

‎package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,6 @@
3131
],
3232
"testMatch": [
3333
"<rootDir>/test/*.{ts,tsx}"
34-
],
35-
"transformIgnorePatterns": [
36-
"<rootDir>/node_modules/?!(.*)"
3734
]
3835
},
3936
"license": "MIT",

‎test/index.test.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
/**
2-
* @jest-environment jsdom
3-
*/
4-
import { render, screen } from '@testing-library/react';
5-
import '@testing-library/jest-dom';
6-
import React from 'react';
7-
import MonorepoTemplate from '../core/src';
1+
import { getURLParameters, getMetaId, isMeta } from '../core/src/utils'
82

9-
test('renders learn react link', () => {
10-
render(<MonorepoTemplate>learn react</MonorepoTemplate>);
11-
const linkElement = screen.getByText(/learn react/i);
12-
expect(linkElement).toBeInTheDocument();
3+
test('getURLParameters test case', () => {
4+
expect(getURLParameters('name=Adam&surname=Smith')).toEqual({ name: 'Adam', surname: "Smith" })
5+
expect(getURLParameters('mdx:preview:demo12')).toEqual({ })
6+
expect(getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith')).toEqual({ name: 'Adam', surname: "Smith" })
7+
expect(getURLParameters('mdx:preview:demo12&code=true&boreder=0')).toEqual({ code: 'true', boreder: "0" })
8+
});
9+
10+
test('getMetaId test case', () => {
11+
expect(getMetaId('name=Adam&surname=Smith')).toEqual('')
12+
expect(getMetaId('mdx:preview:demo12')).toEqual('demo12')
13+
expect(getMetaId('mdx:preview:&code=true')).toEqual('')
14+
expect(getMetaId('mdx:preview&code=true')).toEqual('')
15+
expect(getMetaId('mdx:preview:demo12&name=Adam&surname=Smith')).toEqual('demo12')
16+
expect(getMetaId('mdx:preview:demo12&code=true&boreder=0')).toEqual('demo12')
17+
});
18+
19+
test('isMeta test case', () => {
20+
expect(isMeta('name=Adam&surname=Smith')).toBeFalsy()
21+
expect(isMeta('mdx:preview:demo12')).toBeTruthy()
22+
expect(isMeta('mdx:preview')).toBeTruthy()
23+
expect(isMeta('mdx:preview&code=true')).toBeTruthy()
24+
expect(isMeta('mdx:preview:demo12&name=Adam&surname=Smith')).toBeTruthy()
25+
expect(isMeta('mdx:preview:demo12&code=true&boreder=0')).toBeTruthy()
1326
});

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"$schema": "http://json.schemastore.org/tsconfig",
23
"compilerOptions": {
34
"jsx": "react",
45
"target": "esnext",
@@ -12,7 +13,6 @@
1213
"module": "esnext",
1314
"moduleResolution": "node",
1415
"resolveJsonModule": true,
15-
"isolatedModules": true,
1616
"declaration": true,
1717
"baseUrl": ".",
1818
"noFallthroughCasesInSwitch": true,

‎website/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"extends": "../tsconfig",
33
"include": [".kktrc.ts", "src"],
44
"compilerOptions": {
5+
"isolatedModules": true,
56
"jsx": "react-jsx",
67
"baseUrl": "./src",
78
"noEmit": true

0 commit comments

Comments
 (0)