Revert "refactor: improve vue tech stack support (umijs#2036)"

This reverts commit 19ebd41.

.eslintignore

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

bundler-utils.d.ts

@@ -0,0 +1,5 @@
+import type * as BabelCore from '@umijs/bundler-utils/compiled/@babel/core';
+export { BabelCore };
+export const babelCore: () => typeof import('@umijs/bundler-utils/compiled/@babel/core');
+export const babelPresetTypeScript: () => BabelCore.PluginItem;
+export const babelPresetEnv: () => BabelCore.PluginItem;

bundler-utils.js

@@ -0,0 +1,7 @@
+module.exports = {
+  babelCore: () => require('@umijs/bundler-utils/compiled/babel/core'),
+  babelPresetTypeScript: () =>
+    require('@umijs/bundler-utils/compiled/babel/preset-typescript'),
+  babelPresetEnv: () =>
+    require('@umijs/bundler-utils/compiled/babel/preset-env'),
+};

package.json

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

src/assetParsers/__tests__/FakeParser.d.ts

@@ -0,0 +1,3 @@
+export declare const FakeParser: () => import('../../../dist').BaseAtomAssetsParser<
+  import('../../../dist').LanguageMetaParser
+>;

src/assetParsers/__tests__/FakeParser.js

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

src/assetParsers/__tests__/FakeParser.ts

@@ -0,0 +1,25 @@
+import { AtomAssetsParserResult, createApiParser } from '../../../dist';
+
+export const FakeParser = createApiParser({
+  filename: __filename,
+  worker: class {
+    patch() {}
+    parse() {
+      return new Promise<AtomAssetsParserResult>((resolve) => {
+        setTimeout(() => {
+          resolve({
+            components: {},
+            functions: {},
+          });
+        }, 1000);
+      });
+    }
+    async destroy() {}
+  },
+  // If the worker class has no parameters
+  // entryFile and resolveDir must be passed in manually.
+  parseOptions: {
+    entryFile: __filename,
+    resolveDir: __dirname,
+  },
+});

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

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

src/assetParsers/__tests__/setup.js

@@ -0,0 +1,12 @@
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
+import path from 'path';
+
+const execPromise = promisify(exec);
+
+export default async function () {
+  const tsconfigPath = path.join(__dirname, 'tsconfig.test.json');
+  const files = path.resolve(__dirname, './FakeParser.{js,d.ts}');
+  await execPromise(`tsc --project ${tsconfigPath}`);
+  await execPromise(`prettier ${files} --write`);
+}

src/assetParsers/__tests__/tsconfig.test.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "baseUrl": "./",
+    "types": ["vitest/globals"]
+  },
+  "include": ["FakeParser.ts"]
+}

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,
-  IAtomAssetsParserResult,
-  ILanguageMetaParser,
-  IPatchFile,
+  LanguageMetaParser,
+  PatchFile,
 } from './BaseParser';
 
 // maximum support 512kb for each atoms
@@ -20,7 +20,7 @@ interface ParserParams {
   parseOptions?: object;
 }
 
-class ReactMetaParser implements ILanguageMetaParser {
+class ReactMetaParser implements LanguageMetaParser {
   private parser: SchemaParser;
   private resolveFilter: (args: {
     type: 'COMPONENT' | 'FUNCTION';
@@ -53,7 +53,7 @@ class ReactMetaParser implements ILanguageMetaParser {
     });
 
     // parse atoms from resolver
-    const result: IAtomAssetsParserResult = {
+    const result: AtomAssetsParserResult = {
       components: {},
       functions: {},
     };
@@ -121,7 +121,7 @@ class ReactMetaParser implements ILanguageMetaParser {
     return this.parser.$$destroyWorker();
   }
 
-  public patch(file: IPatchFile): void {
+  public patch(file: PatchFile): 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,
-  IBaseAtomAssetsParserParams,
-  ILanguageMetaParser,
+  BaseAtomAssetsParserParams,
+  LanguageMetaParser,
 } from './BaseParser';
 
 /**
@@ -94,7 +94,7 @@ export function createRemoteClass<
   } as unknown as T;
 }
 
-interface ICreateApiParserOptions<S, C> {
+export interface CreateApiParserOptions<S, C> {
   /**
    * The full file name (absolute path) of the file where `parseWorker` is located
    */
@@ -109,7 +109,7 @@ interface ICreateApiParserOptions<S, C> {
   parseOptions?: C;
 }
 
-export interface IBaseApiParserOptions {
+export interface BaseApiParserOptions {
   entryFile: string;
   resolveDir: string;
 }
@@ -150,10 +150,8 @@ export interface IBaseApiParserOptions {
  */
 export function createApiParser<
   P extends new (...args: ConstructorParameters<P>) => InstanceType<P> &
-    ILanguageMetaParser,
->(
-  options: ICreateApiParserOptions<P, Partial<IBaseAtomAssetsParserParams<P>>>,
-) {
+    LanguageMetaParser,
+>(options: CreateApiParserOptions<P, Partial<BaseAtomAssetsParserParams<P>>>) {
   const { filename, worker, parseOptions } = options;
   const ParserClass = createRemoteClass(filename, worker);
   return (...args: ConstructorParameters<P>) =>

src/client/pages/Demo/index.ts

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

src/index.ts

@@ -1,4 +1,6 @@
 import type {
+  AtomAssetsParser,
+  AtomAssetsParserResult,
   IDumiTechStack,
   IDumiTechStackRuntimeOpts,
   IDumiUserConfig,
@@ -11,6 +13,14 @@ 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 };
+export {
+  unistUtilVisit,
+  IDumiTechStack,
+  IDumiTechStackRuntimeOpts,
+  AtomAssetsParser,
+  AtomAssetsParserResult,
+};
 export const defineConfig = (config: IDumiUserConfig) => config;

src/loaders/markdown/index.ts

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