From 61932f1faaa92d72a92554c38ce8297b54976667 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Wed, 25 May 2022 23:09:06 +0800 Subject: [PATCH] fix: Fix loader example error issue. --- core/src/index.ts | 20 +++++++++++----- core/src/utils/index.ts | 46 ++++++++++++++++++------------------- core/src/utils/transform.ts | 22 ++++++++---------- 3 files changed, 46 insertions(+), 42 deletions(-) diff --git a/core/src/index.ts b/core/src/index.ts index d6873a0..67949d0 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -2,6 +2,7 @@ import React from 'react'; import { PluginItem } from '@babel/core'; import { Options as RIOptions } from 'babel-plugin-transform-remove-imports'; import { getProcessor, getCodeBlock } from './utils'; +import { LoaderDefinitionFunction } from 'webpack'; export * from './utils'; export type CodeBlockItem = { @@ -41,18 +42,25 @@ export type Options = { babelPlugins?: PluginItem[]; }; -export default function (source: string) { +const codePreviewLoader: LoaderDefinitionFunction = function (source) { const options: Options = this.getOptions(); - const codeBlock = getCodeBlock(getProcessor(source), options); let components = ''; - Object.keys(codeBlock).forEach((key) => { - components += `${key}: (function() { ${codeBlock[key].code} })(),`; - }); + let codeBlock = {} as CodeBlockData['data']; + try { + codeBlock = getCodeBlock(getProcessor(source), options, this.resourcePath); + Object.keys(codeBlock).forEach((key) => { + components += `${key}: (function() { ${codeBlock[key].code} })(),`; + }); + } catch (error) { + this.emitError(error); + } return `\nexport default { components: { ${components} }, data: ${JSON.stringify(codeBlock, null, 2)}, source: ${JSON.stringify(source)} }`; -} +}; + +export default codePreviewLoader; diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts index dc7c611..e772f26 100644 --- a/core/src/utils/index.ts +++ b/core/src/utils/index.ts @@ -63,34 +63,34 @@ export const getMetaId = (meta: string = '') => { export const isMeta = (meta: string = '') => meta && meta.includes('mdx:preview'); /** 获取需要渲染的代码块 **/ -export const getCodeBlock = (child: MarkdownParseData['children'], opts: Options = {}): CodeBlockData['data'] => { +export function getCodeBlock( + child: MarkdownParseData['children'], + opts: Options = {}, + resourcePath?: string, +): CodeBlockData['data'] { const { lang = ['jsx', 'tsx'] } = opts; // 获取渲染部分 const codeBlock: Record = {}; - try { - child.forEach((item) => { - if (item && item.type === 'code' && lang.includes(item.lang)) { - const line = item.position.start.line; - const metaId = getMetaId(item.meta); - if (isMeta(item.meta)) { - let name = metaId || line; - const funName = `${FUNNAME_PREFIX}${name}`; - const returnCode = getTransformValue(item.value, `${funName}.${lang}`, opts); - codeBlock[name] = { - name, - meta: getURLParameters(item.meta), - code: returnCode, - language: item.lang, - value: item.value, - }; - } + child.forEach((item) => { + if (item && item.type === 'code' && lang.includes(item.lang)) { + const line = item.position.start.line; + const metaId = getMetaId(item.meta); + if (isMeta(item.meta)) { + let name = metaId || line; + const funName = `${resourcePath}.${FUNNAME_PREFIX}${name}`; + const returnCode = getTransformValue(item.value, `${funName}.${item.lang}`, opts); + codeBlock[name] = { + name, + meta: getURLParameters(item.meta), + code: returnCode, + language: item.lang, + value: item.value, + }; } - }); - } catch (err) { - console.warn(err); - } + } + }); return codeBlock; -}; +} /** * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config. diff --git a/core/src/utils/transform.ts b/core/src/utils/transform.ts index aff3797..c5dd637 100644 --- a/core/src/utils/transform.ts +++ b/core/src/utils/transform.ts @@ -5,18 +5,14 @@ import replaceExportDefault from 'babel-plugin-transform-replace-export-default' import { Options } from '../'; export const getTransformValue = (str: string, filename: string, opts: Options) => { - try { - const plugins: PluginItem[] = [...(opts.babelPlugins || [])]; - if (opts.removeImports) { - plugins.push([removeImports, opts.removeImports]); - } - const result = transform(str, { - filename, - presets: ['env', 'es2015', 'react', 'typescript'], - plugins: [...plugins, replaceExportDefault], - }); - return result.code; - } catch (err) { - console.warn(err); + const plugins: PluginItem[] = [...(opts.babelPlugins || [])]; + if (opts.removeImports) { + plugins.push([removeImports, opts.removeImports]); } + const result = transform(str, { + filename, + presets: ['env', 'es2015', 'react', 'typescript'], + plugins: [...plugins, replaceExportDefault], + }); + return result.code; };