From 765bc1758eca80551c45ac357014c7a3c260f05a Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Tue, 13 Aug 2024 22:13:18 +0800 Subject: [PATCH 1/9] refactor: liveDemo context no longer uses require for imports --- .../slots/SourceCodeEditor/index.tsx | 2 +- src/features/compile/index.ts | 6 +- src/loaders/markdown/index.ts | 59 ++++++++++++++----- 3 files changed, 48 insertions(+), 19 deletions(-) diff --git a/src/client/theme-default/slots/SourceCodeEditor/index.tsx b/src/client/theme-default/slots/SourceCodeEditor/index.tsx index 74737655b..bdebbedb2 100644 --- a/src/client/theme-default/slots/SourceCodeEditor/index.tsx +++ b/src/client/theme-default/slots/SourceCodeEditor/index.tsx @@ -89,7 +89,7 @@ const SourceCodeEditor: FC = (props) => { autoComplete="off" autoCorrect="off" autoSave="off" - spellcheck="false" + spellCheck="false" /> ) } diff --git a/src/features/compile/index.ts b/src/features/compile/index.ts index 68e957ab8..6d74793d6 100644 --- a/src/features/compile/index.ts +++ b/src/features/compile/index.ts @@ -89,9 +89,9 @@ export default (api: IApi) => { const loaderPath = require.resolve('../../loaders/markdown'); // support require mjs packages(eg. element-plus/es) - memo.resolve.byDependency.set('commonjs', { - conditionNames: ['require', 'node', 'import'], - }); + // memo.resolve.byDependency.set('commonjs', { + // conditionNames: ['require', 'node', 'import'], + // }); const loaderBaseOpts: Partial = { techStacks, diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts index c0ea3bc35..5156edfb4 100644 --- a/src/loaders/markdown/index.ts +++ b/src/loaders/markdown/index.ts @@ -56,6 +56,11 @@ export type IMdLoaderOptions = | IMdLoaderTextModeOptions | IMdLoaderDemoIndexModeOptions; +interface IDemoDependency { + key: string; + specifier: string; +} + function getDemoSourceFiles(demos: IMdTransformerResult['meta']['demos'] = []) { return demos.reduce((ret, demo) => { if ('resolveMap' in demo) { @@ -132,10 +137,43 @@ function emitDemo( ret: IMdTransformerResult, ) { const { demos } = ret.meta; + const demoDepsMap: Record> = {}; + + demos?.forEach((demo) => { + if ('resolveMap' in demo && 'asset' in demo) { + const entryFileName = Object.keys(demo.asset.dependencies)[0]; + Object.keys(demo.resolveMap).forEach((key, index) => { + if (key !== entryFileName) { + demoDepsMap[demo.id] ??= {}; + demoDepsMap[demo.id][key] = `${demo.id.replace( + /-/g, + '_', + )}_deps_${index}`; + } + }); + } + }); + + const demosDeps = Object.entries(demoDepsMap).reduce( + (acc, [, deps]) => { + return acc.concat( + Object.entries(deps).map(([key, specifier]) => { + return { + key, + specifier, + }; + }), + ); + }, + [], + ); return Mustache.render( `import React from 'react'; - import '${winPath(this.getDependencies()[0])}?watch=parent'; +import '${winPath(this.getDependencies()[0])}?watch=parent'; +{{#demosDeps}} +import * as {{{specifier}}} from '{{{key}}}'; +{{/demosDeps}} export const demos = { {{#demos}} '{{{id}}}': { @@ -150,6 +188,7 @@ export const demos = { };`, { demos, + demosDeps, renderAsset: function renderAsset(this: NonNullable[0]) { // do not render asset for inline demo if (!('asset' in this)) return 'null'; @@ -179,25 +218,15 @@ export const demos = { renderContext: function renderContext( this: NonNullable[0], ) { - // do not render context for inline demo + // // do not render context for inline demo if (!('resolveMap' in this) || !('asset' in this)) return 'undefined'; - - const entryFileName = Object.keys(this.asset.dependencies)[0]; - - // render context for normal demo - const context = Object.entries(this.resolveMap).reduce( - (acc, [key, path]) => ({ + const context = Object.entries(demoDepsMap[this.id]).reduce( + (acc, [key, specifier]) => ({ ...acc, - // omit entry file - ...(key !== entryFileName - ? { - [key]: `{{{require('${path}')}}}`, - } - : {}), + ...{ [key]: `{{{${specifier}}}}` }, }), {}, ); - return JSON.stringify(context, null, 2).replace(/"{{{|}}}"/g, ''); }, renderRenderOpts: function renderRenderOpts( From 57fbe121fdde2d297b951622b77ba0d43084785f Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Tue, 13 Aug 2024 22:30:29 +0800 Subject: [PATCH 2/9] chore: delete unuse code --- src/loaders/markdown/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts index 5156edfb4..ca43c7a3b 100644 --- a/src/loaders/markdown/index.ts +++ b/src/loaders/markdown/index.ts @@ -218,7 +218,7 @@ export const demos = { renderContext: function renderContext( this: NonNullable[0], ) { - // // do not render context for inline demo + // do not render context for inline demo if (!('resolveMap' in this) || !('asset' in this)) return 'undefined'; const context = Object.entries(demoDepsMap[this.id]).reduce( (acc, [key, specifier]) => ({ From 56b6c05b3032b6d45ede52e157e45fc1effc6388 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Tue, 13 Aug 2024 22:59:02 +0800 Subject: [PATCH 3/9] fix: empty resolveMap --- src/loaders/markdown/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts index ca43c7a3b..bf16fbc14 100644 --- a/src/loaders/markdown/index.ts +++ b/src/loaders/markdown/index.ts @@ -142,9 +142,9 @@ function emitDemo( demos?.forEach((demo) => { if ('resolveMap' in demo && 'asset' in demo) { const entryFileName = Object.keys(demo.asset.dependencies)[0]; + demoDepsMap[demo.id] ??= {}; Object.keys(demo.resolveMap).forEach((key, index) => { if (key !== entryFileName) { - demoDepsMap[demo.id] ??= {}; demoDepsMap[demo.id][key] = `${demo.id.replace( /-/g, '_', From 8445c764c8888875c106c0549d9cfd125e4beef0 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Thu, 15 Aug 2024 17:13:21 +0800 Subject: [PATCH 4/9] fix: deduped --- src/loaders/markdown/index.ts | 55 +++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 22 deletions(-) diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts index bf16fbc14..99b237970 100644 --- a/src/loaders/markdown/index.ts +++ b/src/loaders/markdown/index.ts @@ -73,6 +73,10 @@ function getDemoSourceFiles(demos: IMdTransformerResult['meta']['demos'] = []) { }, []); } +function isRelativePath(path: string) { + return path.startsWith('./') || path.startsWith('../'); +} + function emitDefault( this: any, opts: IMdLoaderDefaultModeOptions, @@ -137,6 +141,7 @@ function emitDemo( ret: IMdTransformerResult, ) { const { demos } = ret.meta; + const shareDepsMap: Record = {}; const demoDepsMap: Record> = {}; demos?.forEach((demo) => { @@ -144,36 +149,42 @@ function emitDemo( const entryFileName = Object.keys(demo.asset.dependencies)[0]; demoDepsMap[demo.id] ??= {}; Object.keys(demo.resolveMap).forEach((key, index) => { - if (key !== entryFileName) { - demoDepsMap[demo.id][key] = `${demo.id.replace( - /-/g, - '_', - )}_deps_${index}`; + const specifier = `${demo.id.replace(/-/g, '_')}_deps_${index}`; + if (key !== entryFileName && !isRelativePath(key)) { + if (shareDepsMap[key]) { + demoDepsMap[demo.id][key] = shareDepsMap[key]; + } else { + demoDepsMap[demo.id][key] = specifier; + shareDepsMap[key] = specifier; + } + } else if (isRelativePath(key)) { + demoDepsMap[demo.id][demo.resolveMap[key]] = specifier; } }); } }); - const demosDeps = Object.entries(demoDepsMap).reduce( - (acc, [, deps]) => { - return acc.concat( - Object.entries(deps).map(([key, specifier]) => { - return { - key, - specifier, - }; - }), - ); - }, - [], - ); - + const dedupedDemosDeps = Object.entries(demoDepsMap).reduce< + IDemoDependency[] + >((acc, [, deps]) => { + return acc.concat( + Object.entries(deps) + .map(([key, specifier]) => { + const existingIndex = acc.findIndex((obj) => obj.key === key); + if (existingIndex === -1) { + return { key, specifier }; + } + return undefined; + }) + .filter((item) => item !== undefined), + ); + }, []); return Mustache.render( `import React from 'react'; import '${winPath(this.getDependencies()[0])}?watch=parent'; -{{#demosDeps}} +{{#dedupedDemosDeps}} import * as {{{specifier}}} from '{{{key}}}'; -{{/demosDeps}} +{{/dedupedDemosDeps}} export const demos = { {{#demos}} '{{{id}}}': { @@ -188,7 +199,7 @@ export const demos = { };`, { demos, - demosDeps, + dedupedDemosDeps, renderAsset: function renderAsset(this: NonNullable[0]) { // do not render asset for inline demo if (!('asset' in this)) return 'null'; From 6dfb8661e458d5d21a023eadc5798d96aa106cd0 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Thu, 15 Aug 2024 17:15:15 +0800 Subject: [PATCH 5/9] build: release 2.4.8-beta.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4c0fd6939..27ac25321 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dumi", - "version": "2.4.7", + "version": "2.4.8-beta.1", "description": "📖 Documentation Generator of React Component", "keywords": [ "generator", From db23c7a754ec6c6f19d23fcf89f2b8b0361dfb5e Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Thu, 15 Aug 2024 17:41:01 +0800 Subject: [PATCH 6/9] fix: winpath --- src/loaders/markdown/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts index 99b237970..04f9ab2f4 100644 --- a/src/loaders/markdown/index.ts +++ b/src/loaders/markdown/index.ts @@ -172,7 +172,7 @@ function emitDemo( .map(([key, specifier]) => { const existingIndex = acc.findIndex((obj) => obj.key === key); if (existingIndex === -1) { - return { key, specifier }; + return { key: isRelativePath(key) ? winPath(key) : key, specifier }; } return undefined; }) From 23b17ab55da940914279a3623a6dd57193d7f1b2 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Thu, 15 Aug 2024 19:14:02 +0800 Subject: [PATCH 7/9] fix: winpath --- src/loaders/markdown/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts index 04f9ab2f4..3cc1639af 100644 --- a/src/loaders/markdown/index.ts +++ b/src/loaders/markdown/index.ts @@ -158,7 +158,7 @@ function emitDemo( shareDepsMap[key] = specifier; } } else if (isRelativePath(key)) { - demoDepsMap[demo.id][demo.resolveMap[key]] = specifier; + demoDepsMap[demo.id][winPath(demo.resolveMap[key])] = specifier; } }); } @@ -172,7 +172,7 @@ function emitDemo( .map(([key, specifier]) => { const existingIndex = acc.findIndex((obj) => obj.key === key); if (existingIndex === -1) { - return { key: isRelativePath(key) ? winPath(key) : key, specifier }; + return { key, specifier }; } return undefined; }) From 22c4b6436292a6d99d3fd0437f8b44ab97393f0a Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Thu, 15 Aug 2024 19:30:49 +0800 Subject: [PATCH 8/9] build: release 2.4.8-beta.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 27ac25321..d46e8e0c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dumi", - "version": "2.4.8-beta.1", + "version": "2.4.8-beta.2", "description": "📖 Documentation Generator of React Component", "keywords": [ "generator", From 414ea0c624e9e3d77a79e26d7ea8a91ecd9d22e7 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Thu, 15 Aug 2024 19:35:44 +0800 Subject: [PATCH 9/9] build: release 2.4.8-beta.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d46e8e0c9..14c02bd39 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dumi", - "version": "2.4.8-beta.2", + "version": "2.4.8-beta.3", "description": "📖 Documentation Generator of React Component", "keywords": [ "generator",