From a1d95de60a00b7f9e5b581be3cbe8535e9a55056 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Wed, 11 May 2022 15:03:38 +0800 Subject: [PATCH] feat: add removeImports/babelPlugins options. --- core/README-zh.md | 23 ++++++++++++++++++++++- core/README.md | 22 +++++++++++++++++++++- core/package.json | 1 + core/src/index.ts | 24 +++++++++++++++++++++--- core/src/utils/index.ts | 14 ++++++++------ core/src/utils/transform.ts | 14 +++++++++++--- 6 files changed, 84 insertions(+), 14 deletions(-) diff --git a/core/README-zh.md b/core/README-zh.md index c313c42..cc48b8f 100644 --- a/core/README-zh.md +++ b/core/README-zh.md @@ -19,6 +19,8 @@ npm i markdown-react-code-preview-loader -D **第 ① 种方法，使用 mdCodeModulesLoader 方法** +`mdCodeModulesLoader` 用于在 webpack 配置添加 `markdown-react-code-preview-loader` 的方法。 + ```ts // .kktrc.ts import scopePluginOptions from '@kkt/scope-plugin-options'; @@ -67,7 +69,26 @@ export default (conf: Configuration, env: 'development' | 'production', options: ### options 参数 -- lang: 需要解析代码块的语言，默认: `["jsx","tsx"]` +```ts +import { PluginItem } from '@babel/core'; +import { Options as RIOptions } from 'babel-plugin-transform-remove-imports' +export type Options = { + /** + * 需要解析代码块的语言，默认: `["jsx","tsx"]` + */ + lang?: string[]; + /** + * 删除过滤 imports 包； + * babel (babel-plugin-transform-remove-imports) 包的 option 设置 + * https://github.com/uiwjs/babel-plugin-transform-remove-imports + */ + removeImports?: RIOptions; + /** + * 添加 babel 插件。 + */ + babelPlugins?: PluginItem[]; +} +``` ## 项目中使用 diff --git a/core/README.md b/core/README.md index bdec694..b64080a 100644 --- a/core/README.md +++ b/core/README.md @@ -19,6 +19,8 @@ After installing the dependency (loader), we need to configure the `loader` into **① The first method, use the mdCodeModulesLoader method** +`mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config. + ```ts // .kktrc.ts import scopePluginOptions from '@kkt/scope-plugin-options'; @@ -67,7 +69,25 @@ export default (conf: Configuration, env: 'development' | 'production', options: ### options parameter -- lang: Language to parse code blocks, default: `["jsx","tsx"]` +```ts +import { PluginItem } from '@babel/core'; +import { Options as RIOptions } from 'babel-plugin-transform-remove-imports' +export type Options = { + /** + * Language to parse code blocks, default: `["jsx","tsx"]` + */ + lang?: string[]; + /** + * Option settings for the babel (babel-plugin-transform-remove-imports) package + * https://github.com/uiwjs/babel-plugin-transform-remove-imports + */ + removeImports?: RIOptions; + /** + * Add babel plugins. + */ + babelPlugins?: PluginItem[]; +} +``` ## Used in the project diff --git a/core/package.json b/core/package.json index d758141..7baa156 100644 --- a/core/package.json +++ b/core/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@babel/standalone": "^7.17.11", + "babel-plugin-transform-remove-imports": "^1.7.0", "remark": "~13.0.0" }, "devDependencies": { diff --git a/core/src/index.ts b/core/src/index.ts index 24baa0e..cf2f449 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -1,5 +1,7 @@ -import { getCodeBlockString } from './utils'; import React from 'react'; +import { PluginItem } from '@babel/core'; +import { Options as RIOptions } from 'babel-plugin-transform-remove-imports'; +import { getCodeBlockString } from './utils'; export * from './utils'; export type CodeBlockData = { @@ -9,9 +11,25 @@ export type CodeBlockData = { languages: Record; }; +export type Options = { + /** + * Language to parse code blocks, default: `["jsx","tsx"]` + */ + lang?: string[]; + /** + * Option settings for the babel (babel-plugin-transform-remove-imports) package + * https://github.com/uiwjs/babel-plugin-transform-remove-imports + */ + removeImports?: RIOptions; + /** + * Add babel plugins. + */ + babelPlugins?: PluginItem[]; +}; + export default function (source: string) { - const options = this.getOptions(); - const result = getCodeBlockString(source, options.lang || ['tsx', 'jsx']); + const options: Options = this.getOptions(); + const result = getCodeBlockString(source, options); return ` ${result} diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts index 92068ac..5749664 100644 --- a/core/src/utils/index.ts +++ b/core/src/utils/index.ts @@ -4,8 +4,9 @@ import { MarkDownTreeType, CodeBlockItemType } from './interface'; import { getTransformValue } from './transform'; import webpack from 'webpack'; -export * from './interface'; import remark from 'remark'; +export * from './interface'; +import { Options } from '../'; /** 转换 代码*/ const getProcessor = (scope: string) => { @@ -32,7 +33,8 @@ const getMeta = (meta: string | null): Record => { }; /** 获取需要渲染的代码块 **/ -const getCodeBlock = (child: MarkDownTreeType['children'], lang: string[] = ['jsx', 'tsx']) => { +const getCodeBlock = (child: MarkDownTreeType['children'], opts: Options = {}) => { + const { lang = ['jsx', 'tsx'] } = opts; // 获取渲染部分 const codeBlock: Record = {}; try { @@ -43,7 +45,7 @@ const getCodeBlock = (child: MarkDownTreeType['children'], lang: string[] = ['js if (metaData.preview) { let name = typeof metaData.preview === 'string' ? metaData.preview : line; const funName = `BaseCode${line}`; - const returnCode = getTransformValue(item.value, `${funName}.${lang}`, funName); + const returnCode = getTransformValue(item.value, `${funName}.${lang}`, funName, opts); codeBlock[line] = { code: returnCode, name, @@ -81,15 +83,15 @@ const createStr = (codeBlock: Record) => { return indexStr; }; -export const getCodeBlockString = (scope: string, lang: string[] = ['jsx', 'tsx']) => { +export const getCodeBlockString = (scope: string, opts: Options = {}) => { const children = getProcessor(scope); - const codeBlock = getCodeBlock(children, lang); + const codeBlock = getCodeBlock(children, opts); const result = createStr(codeBlock); return result; }; /** - * 配置好markdown的loader + * 用于修改 webpack 配置 loader 的方法 * @param {webpack.Configuration} config webpack配置 * @param {string[]} lang 解析语言 * @returns {webpack.Configuration} diff --git a/core/src/utils/transform.ts b/core/src/utils/transform.ts index d597a10..1489cfb 100644 --- a/core/src/utils/transform.ts +++ b/core/src/utils/transform.ts @@ -1,20 +1,28 @@ import { transform } from '@babel/standalone'; +import { PluginItem } from '@babel/core'; +import { Options } from '../'; -export function babelTransform(input: string, filename: string) { +export function babelTransform(input: string, filename: string, opts: Options = {}) { + const plugins: PluginItem[] = [...(opts.babelPlugins || [])]; + if (opts.removeImports) { + plugins.push(['babel-plugin-transform-remove-imports', opts.removeImports]); + } return transform(input, { filename, presets: ['env', 'es2015', 'react', 'typescript'], + plugins: [...plugins], }); } -export const getTransformValue = (str: string, filename: string, funName: string) => { +export const getTransformValue = (str: string, filename: string, funName: string, opts: Options) => { try { const isReact = /import\x20+React(\x20+|[\x20+,]+({[a-zA-Z0-9,\s]+}|{})\x20+)from\x20+('|")react('|")/.test(str); // 先判断 是否引入 react const tran = isReact ? str : `import React from "react"\n ${str}`; /** 先把默认导出 export default 进行替换 **/ const newCode = `${tran.replace(/export\x20+default/, 'const _default = ')}\n`; - const code = `${babelTransform(newCode, `${filename}`).code}\n return _react["default"].createElement(_default)`; + const tranCode = babelTransform(newCode, `${filename}`, opts).code; + const code = `${tranCode}\n return _react["default"].createElement(_default)`; return `function ${funName}(){\n${code}\n};`; } catch (err) { console.warn(err);