fix: multi-instance bug and unhandled error for live demo feature

src/assetParsers/block.ts

@@ -1,6 +1,7 @@
 import { parseCodeFrontmatter } from '@/utils';
 import { build } from '@umijs/bundler-utils/compiled/esbuild';
 import assert from 'assert';
+import { IDumiConfig } from 'dist/types';
 import type { ExampleBlockAsset } from 'dumi-assets-types';
 import type { sync } from 'enhanced-resolve';
 import fs from 'fs';
@@ -32,6 +33,7 @@ async function parseBlockAsset(opts: {
   entryPointCode?: string;
   resolver: typeof sync;
   techStack: IDumiTechStack;
+  externals: IDumiConfig['externals'];
 }) {
   const asset: IParsedBlockAsset['asset'] = {
     type: 'BLOCK',
@@ -80,7 +82,11 @@ async function parseBlockAsset(opts: {
                   value: pkg.version,
                 };
 
-                result.resolveMap[args.path] = resolved;
+                result.resolveMap[args.path] = Object.keys(
+                  opts.externals || {},
+                ).includes(args.path)
+                  ? args.path
+                  : resolved;
               }
 
               // make all deps external
@@ -179,7 +185,10 @@ async function parseBlockAsset(opts: {
 
               // save file absolute path for load file via raw-loader
               // to avoid bundle same file to save bundle size
-              if (!isEntryPoint || !opts.entryPointCode) {
+              if (
+                opts.techStack.runtimeOpts &&
+                (!isEntryPoint || !opts.entryPointCode)
+              ) {
                 result.resolveMap[filename] = args.path;
               }
 

src/client/theme-api/useLiveDemo.ts

@@ -170,7 +170,18 @@ export const useLiveDemo = (
               oError.apply(console, args);
 
             // check component is able to render, to avoid show react overlay error
-            (await renderToStaticMarkupDeferred)(newDemoNode);
+            try {
+              (await renderToStaticMarkupDeferred)(newDemoNode);
+            } catch (err: any) {
+              const shouldSkipError =
+                err.message.includes(
+                  'Unable to find node on an unmounted component',
+                ) ||
+                err.message.includes(
+                  'Portals are not currently supported by the server renderer',
+                );
+              if (!shouldSkipError) throw err;
+            }
             console.error = oError;
 
             // set new demo node with passing source

src/features/compile/index.ts

@@ -75,6 +75,7 @@ export default (api: IApi) => {
       techStacks,
       cwd: api.cwd,
       alias: api.config.alias,
+      externals: api.config.externals,
       resolve: api.config.resolve,
       extraRemarkPlugins: api.config.extraRemarkPlugins,
       extraRehypePlugins: api.config.extraRehypePlugins,

src/loaders/markdown/index.ts

@@ -1,5 +1,6 @@
 import { isTabRouteFile } from '@/features/tabs';
 import type { IThemeLoadResult } from '@/features/theme/loader';
+import { IDumiConfig } from '@/types';
 import { generateMetaChunkName, getCache, getContentHash } from '@/utils';
 import fs from 'fs';
 import { Mustache, lodash, winPath } from 'umi/plugin-utils';
@@ -8,11 +9,11 @@ import transform, {
   type IMdTransformerResult,
 } from './transformer';
 import { CONTENT_TEXTS_OBJ_NAME } from './transformer/rehypeText';
-
 interface IMdLoaderDefaultModeOptions
   extends Omit<IMdTransformerOptions, 'fileAbsPath'> {
   mode?: 'markdown';
   builtins: IThemeLoadResult['builtins'];
+  externals: IDumiConfig['externals'];
   onResolveDemos?: (
     demos: NonNullable<IMdTransformerResult['meta']['demos']>,
   ) => void;
@@ -58,7 +59,11 @@ export type IMdLoaderOptions =
 function getDemoSourceFiles(demos: IMdTransformerResult['meta']['demos'] = []) {
   return demos.reduce<string[]>((ret, demo) => {
     if ('resolveMap' in demo) {
-      ret.push(...Object.values(demo.resolveMap));
+      ret.push(
+        ...Object.values(demo.resolveMap).filter((path) =>
+          path.startsWith('/'),
+        ),
+      );
     }
 
     return ret;

src/loaders/markdown/transformer/index.ts

@@ -70,6 +70,7 @@ export interface IMdTransformerOptions {
   cwd: string;
   fileAbsPath: string;
   alias: ResolveOptions['alias'];
+  externals: IDumiConfig['externals'];
   parentAbsPath?: string;
   techStacks: IDumiTechStack[];
   resolve: IDumiConfig['resolve'];
@@ -190,6 +191,7 @@ export default async (raw: string, opts: IMdTransformerOptions) => {
       fileLocale,
       resolve: opts.resolve,
       resolver,
+      externals: opts.externals,
     })
     .use(rehypeSlug)
     .use(rehypeLink, {

src/loaders/markdown/transformer/rehypeDemo.ts

@@ -1,5 +1,6 @@
 import parseBlockAsset from '@/assetParsers/block';
 import type { IDumiDemoProps } from '@/client/theme-api/DumiDemo';
+import { IDumiConfig } from '@/types';
 import { getFileIdFromFsPath } from '@/utils';
 import type { sync } from 'enhanced-resolve';
 import type { Element, Root } from 'hast';
@@ -41,6 +42,7 @@ type IRehypeDemoOptions = Pick<
   resolver: typeof sync;
   fileLocaleLessPath: string;
   fileLocale?: string;
+  externals: IDumiConfig['externals'];
 };
 
 /**
@@ -265,6 +267,7 @@ export default function rehypeDemo(
               entryPointCode: codeType === 'external' ? undefined : codeValue,
               resolver: opts.resolver,
               techStack,
+              externals: opts.externals,
             };
 
             const runtimeOpts = techStack.runtimeOpts;

suites/theme-mobile/src/builtins/Previewer/index.less

@@ -42,7 +42,7 @@
         &:first-child + .dumi-default-previewer-sources {
           border-top: 1px dashed @c-border-light;
           margin-top: 42px;
-
+          overflow: auto;
           @{dark-selector} & {
             border-top-color: @c-border-less-dark;
           }