refactor: improve vue tech stack support (#2036)

* chore: update eslintignore

* refactor: merge bundler-utils to tech-stack-utils

* refactor: turn useRenderer to internal api

* refactor: clean type definitions

* refactor: export parser apis from tech-stack-utils

* refactor: remove useless demo data from loader

* build: clear build config for dumi-vue-meta

* test: update test case

* test: update case for parser

.eslintignore

@@ -1,6 +1,5 @@
 /dist
 /compiled
 /theme-default
-/runtime
 /suites/*/compiled
 /suites/preset-vue/lib

package.json

@@ -33,8 +33,6 @@
     "index.d.ts",
     "plugin-utils.js",
     "plugin-utils.d.ts",
-    "bundler-utils.js",
-    "bundler-utils.d.ts",
     "tech-stack-utils.js",
     "tech-stack-utils.d.ts"
   ],

src/assetParsers/BaseParser.ts

@@ -1,59 +1,63 @@
-import type { AtomAssetsParser, AtomAssetsParserResult } from '@/types';
+import type { AtomComponentAsset, AtomFunctionAsset } from 'dumi-assets-types';
 import path from 'path';
 import { chokidar, lodash, logger } from 'umi/plugin-utils';
 
-export interface PatchFile {
+export interface IPatchFile {
   event: 'add' | 'addDir' | 'change' | 'unlink' | 'unlinkDir';
   fileName: string;
 }
 
+export interface IAtomAssetsParserResult {
+  components: Record<string, AtomComponentAsset>;
+  functions: Record<string, AtomFunctionAsset>;
+}
+
 /**
  * The parsing and extraction of language metadata should be implemented separately
  */
-export interface LanguageMetaParser {
-  patch(file: PatchFile): void;
-  parse(): Promise<AtomAssetsParserResult>;
+export interface ILanguageMetaParser {
+  patch(file: IPatchFile): void;
+  parse(): Promise<IAtomAssetsParserResult>;
   destroy(): Promise<void>;
 }
 
-export interface HandleWatcherArgs {
-  patch: LanguageMetaParser['patch'];
+export interface IHandleWatcherArgs {
+  patch: ILanguageMetaParser['patch'];
   parse: () => void;
   watchArgs: {
     paths: string | string[];
     options: chokidar.WatchOptions;
   };
 }
 
-export interface BaseAtomAssetsParserParams<T> {
+export interface IBaseAtomAssetsParserParams<T> {
   entryFile: string;
   resolveDir: string;
   parser: T;
   handleWatcher?: (
     watcher: chokidar.FSWatcher,
-    params: HandleWatcherArgs,
+    params: IHandleWatcherArgs,
   ) => chokidar.FSWatcher;
   watchOptions?: chokidar.WatchOptions;
 }
 
 export class BaseAtomAssetsParser<
-  T extends LanguageMetaParser = LanguageMetaParser,
-> implements AtomAssetsParser
-{
-  private watchArgs!: HandleWatcherArgs['watchArgs'];
+  T extends ILanguageMetaParser = ILanguageMetaParser,
+> {
+  private watchArgs!: IHandleWatcherArgs['watchArgs'];
 
   private watcher: chokidar.FSWatcher | null = null;
-  private handleWatcher?: BaseAtomAssetsParserParams<T>['handleWatcher'];
+  private handleWatcher?: IBaseAtomAssetsParserParams<T>['handleWatcher'];
 
   private entryDir!: string;
   private resolveDir!: string;
 
   private readonly parser!: T;
   private isParsing = false;
-  private parseDeferrer: Promise<AtomAssetsParserResult> | null = null;
-  private cbs: Array<(data: AtomAssetsParserResult) => void> = [];
+  private parseDeferrer: Promise<IAtomAssetsParserResult> | null = null;
+  private cbs: Array<(data: IAtomAssetsParserResult) => void> = [];
 
-  constructor(opts: BaseAtomAssetsParserParams<T>) {
+  constructor(opts: IBaseAtomAssetsParserParams<T>) {
     const { entryFile, resolveDir, watchOptions, parser, handleWatcher } = opts;
     this.resolveDir = resolveDir;
     const absEntryFile = path.resolve(resolveDir, entryFile);
@@ -88,7 +92,7 @@ export class BaseAtomAssetsParser<
     return this.parseDeferrer;
   }
 
-  public watch(cb: (data: AtomAssetsParserResult) => void): void {
+  public watch(cb: (data: IAtomAssetsParserResult) => void): void {
     // save watch callback
     this.cbs.push(cb);
     // initialize watcher
@@ -119,7 +123,7 @@ export class BaseAtomAssetsParser<
           }
         },
         watchArgs: this.watchArgs,
-        patch: (file: PatchFile) => {
+        patch: (file: IPatchFile) => {
           this.parser.patch(file);
         },
       });
@@ -128,7 +132,7 @@ export class BaseAtomAssetsParser<
     }
   }
 
-  public unwatch(cb: (data: AtomAssetsParserResult) => void) {
+  public unwatch(cb: (data: IAtomAssetsParserResult) => void) {
     this.cbs.splice(this.cbs.indexOf(cb), 1);
   }
 
@@ -153,3 +157,5 @@ export class BaseAtomAssetsParser<
     await this.parser.destroy();
   }
 }
+
+export type IAtomAssetsParser = InstanceType<typeof BaseAtomAssetsParser>;

src/assetParsers/__tests__/FakeParser.js

@@ -1,8 +1,6 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.FakeParser = void 0;
-const dist_1 = require('../../../dist');
-exports.FakeParser = (0, dist_1.createApiParser)({
+const { createApiParser } = require('../../../tech-stack-utils');
+
+module.exports.FakeParser = createApiParser({
   filename: __filename,
   worker: class {
     patch() {}

src/assetParsers/__tests__/parser.fork.test.ts

@@ -1,10 +1,11 @@
 import { expect, test } from 'vitest';
-import { FakeParser } from './FakeParser.js';
+// @ts-ignore
+import { FakeParser } from './FakeParser';
 
 test('AtomAssetsParser: create worker mode', async () => {
   const parser = FakeParser();
   const now = performance.now();
-  parser.parse().then((result) => {
+  parser.parse().then((result: any) => {
     expect(result).toStrictEqual({
       components: {},
       functions: {},

src/assetParsers/atom.ts

@@ -2,11 +2,11 @@ import { getProjectRoot } from '@/utils';
 import { SchemaParser, SchemaResolver } from 'dumi-afx-deps/compiled/parser';
 import path from 'path';
 import { logger } from 'umi/plugin-utils';
-import { AtomAssetsParserResult } from '../types';
 import {
   BaseAtomAssetsParser,
-  LanguageMetaParser,
-  PatchFile,
+  IAtomAssetsParserResult,
+  ILanguageMetaParser,
+  IPatchFile,
 } from './BaseParser';
 
 // maximum support 512kb for each atoms
@@ -20,7 +20,7 @@ interface ParserParams {
   parseOptions?: object;
 }
 
-class ReactMetaParser implements LanguageMetaParser {
+class ReactMetaParser implements ILanguageMetaParser {
   private parser: SchemaParser;
   private resolveFilter: (args: {
     type: 'COMPONENT' | 'FUNCTION';
@@ -53,7 +53,7 @@ class ReactMetaParser implements LanguageMetaParser {
     });
 
     // parse atoms from resolver
-    const result: AtomAssetsParserResult = {
+    const result: IAtomAssetsParserResult = {
       components: {},
       functions: {},
     };
@@ -121,7 +121,7 @@ class ReactMetaParser implements LanguageMetaParser {
     return this.parser.$$destroyWorker();
   }
 
-  public patch(file: PatchFile): void {
+  public patch(file: IPatchFile): void {
     this.unresolvedFiles.push(file.fileName);
   }
 }

src/assetParsers/utils.ts

@@ -4,8 +4,8 @@ import { lodash } from 'umi/plugin-utils';
 import { Worker, isMainThread, parentPort } from 'worker_threads';
 import {
   BaseAtomAssetsParser,
-  BaseAtomAssetsParserParams,
-  LanguageMetaParser,
+  IBaseAtomAssetsParserParams,
+  ILanguageMetaParser,
 } from './BaseParser';
 
 /**
@@ -94,7 +94,7 @@ export function createRemoteClass<
   } as unknown as T;
 }
 
-export interface CreateApiParserOptions<S, C> {
+interface ICreateApiParserOptions<S, C> {
   /**
    * The full file name (absolute path) of the file where `parseWorker` is located
    */
@@ -109,7 +109,7 @@ export interface CreateApiParserOptions<S, C> {
   parseOptions?: C;
 }
 
-export interface BaseApiParserOptions {
+export interface IBaseApiParserOptions {
   entryFile: string;
   resolveDir: string;
 }
@@ -150,8 +150,10 @@ export interface BaseApiParserOptions {
  */
 export function createApiParser<
   P extends new (...args: ConstructorParameters<P>) => InstanceType<P> &
-    LanguageMetaParser,
->(options: CreateApiParserOptions<P, Partial<BaseAtomAssetsParserParams<P>>>) {
+    ILanguageMetaParser,
+>(
+  options: ICreateApiParserOptions<P, Partial<IBaseAtomAssetsParserParams<P>>>,
+) {
   const { filename, worker, parseOptions } = options;
   const ParserClass = createRemoteClass(filename, worker);
   return (...args: ConstructorParameters<P>) =>

src/client/pages/Demo/index.ts

@@ -1,5 +1,6 @@
-import { useDemo, useLiveDemo, useParams, useRenderer } from 'dumi';
+import { useDemo, useLiveDemo, useParams } from 'dumi';
 import { ComponentType, createElement, useEffect, type FC } from 'react';
+import { useRenderer } from '../../theme-api/useRenderer';
 import './index.less';
 
 const DemoRenderPage: FC = () => {

src/client/theme-api/index.ts

@@ -31,7 +31,6 @@ export { useLiveDemo } from './useLiveDemo';
 export { useLocale } from './useLocale';
 export { useNavData } from './useNavData';
 export { usePrefersColor } from './usePrefersColor';
-export { useRenderer } from './useRenderer';
 export { useRouteMeta } from './useRouteMeta';
 export { useFullSidebarData, useSidebarData } from './useSidebarData';
 export { useSiteSearch } from './useSiteSearch';

src/features/parser.ts

@@ -1,10 +1,13 @@
-import type { AtomAssetsParser, IApi } from '@/types';
+import type { IApi } from '@/types';
 import { lodash } from '@umijs/utils';
 import assert from 'assert';
-import { BaseAtomAssetsParser } from '../assetParsers/BaseParser';
+import {
+  BaseAtomAssetsParser,
+  type IAtomAssetsParser,
+} from '../assetParsers/BaseParser';
 import { ATOMS_META_PATH } from './meta';
 
-type IParsedAtomAssets = Awaited<ReturnType<AtomAssetsParser['parse']>>;
+type IParsedAtomAssets = Awaited<ReturnType<IAtomAssetsParser['parse']>>;
 
 function filterIgnoredProps(
   props: IParsedAtomAssets['components'][string]['propsConfig']['properties'],
@@ -88,7 +91,10 @@ export default (api: IApi) => {
       default: ReactAtomAssetsParser,
     }: typeof import('@/assetParsers/atom') = require('@/assetParsers/atom');
 
-    const apiParser = api.config.apiParser || {};
+    const apiParser = api.config.apiParser as Exclude<
+      IApi['config']['apiParser'],
+      false | undefined
+    >;
 
     api.service.atomParser = new ReactAtomAssetsParser({
       entryFile: api.config.resolve.entryFile!,

src/index.ts

@@ -1,6 +1,4 @@
 import type {
-  AtomAssetsParser,
-  AtomAssetsParserResult,
   IDumiTechStack,
   IDumiTechStackRuntimeOpts,
   IDumiUserConfig,
@@ -13,14 +11,6 @@ let unistUtilVisit: typeof import('unist-util-visit');
 })();
 
 export * from 'umi';
-export * from './assetParsers/BaseParser';
-export * from './assetParsers/utils';
 export { getProjectRoot } from './utils';
-export {
-  unistUtilVisit,
-  IDumiTechStack,
-  IDumiTechStackRuntimeOpts,
-  AtomAssetsParser,
-  AtomAssetsParserResult,
-};
+export { unistUtilVisit, IDumiTechStack, IDumiTechStackRuntimeOpts };
 export const defineConfig = (config: IDumiUserConfig) => config;

src/loaders/markdown/index.ts

@@ -124,11 +124,9 @@ function emitDemo(
 export const demos = {
   {{#demos}}
   '{{{id}}}': {
-    id: "{{{id}}}",
     {{#component}}
     component: {{{component}}},
     {{/component}}
-    renderOpts: {{{renderRenderOpts}}},
     asset: {{{renderAsset}}},
     context: {{{renderContext}}},
     renderOpts: {{{renderRenderOpts}}},