@modern-js/module-tools 1.4.1 → 1.4.4

package/dist/js/node/tasks/build-watch-source-code.js

@@ -78,7 +78,8 @@ const runBabelCompiler = async (config, modernConfig) => {
     rootDir: config.srcRootDir,
     distDir: config.distDir,
     watchDir: config.srcRootDir,
-    extensions: getExts(isTs)
+    extensions: getExts(isTs),
+    ignore: ['*.d.ts']
   }, _objectSpread(_objectSpread({}, babelConfig), {}, {
     sourceMaps: config.sourceMaps
   }));

package/dist/js/node/tasks/build-watch-style.js

@@ -13,7 +13,7 @@ const logger = _utils.Import.lazy('../features/build/logger', require);
 
 const cssConfig = _utils.Import.lazy('@modern-js/css-config', require);
 
-const hooks = _utils.Import.lazy('@modern-js/module-tools-hooks', require);
+const hooks = _utils.Import.lazy('../hooks', require);
 
 const core = _utils.Import.lazy('@modern-js/core', require);
 

package/dist/js/node/tasks/generator-dts/index.js

@@ -1,12 +1,8 @@
 "use strict";
 
-var path = _interopRequireWildcard(require("path"));
-
 var _utils = require("@modern-js/utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utils2 = require("./utils");
 
 const core = _utils.Import.lazy('@modern-js/core', require);
 
@@ -75,7 +71,7 @@ const generatorDts = async (_, config) => {
     sourceDir: sourceDirName
   });
   removeTsconfigPath = willDeleteTsconfigPath;
-  const tscBinFile = path.join(appDirectory, './node_modules/.bin/tsc');
+  const tscBinFile = (0, _utils2.getTscBinPath)(appDirectory);
   const watchParams = watch ? ['-w'] : [];
   const childProgress = execa(tscBinFile, ['-p', willDeleteTsconfigPath, ...watchParams], {
     stdio: 'pipe',
@@ -88,17 +84,15 @@ const generatorDts = async (_, config) => {
 
   try {
     await childProgress;
-    console.info('[Tsc Compiler]: Successfully');
+    console.info('[TSC Compiler]: Successfully');
   } catch (e) {
     if (!tsCheck) {
       console.info(`There are some type warnings, which can be checked by configuring 'output.disableTsChecker = false'`);
+    } // 通过使用 execa，可以将 tsc 的 data 类型的报错信息变为异常错误信息
+    else if ((0, _utils.isObject)(e) && e.stdout) {
+      console.error(e.stdout);
     } else {
-      const isRecord = input => typeof input === 'object'; // 通过使用 execa，可以将tsc 的 data 类型的报错信息变为异常错误信息
-
-
-      if (isRecord(e)) {
-        console.error(e.stdout);
-      }
+      console.error(e);
     }
   }
 

package/dist/js/node/tasks/generator-dts/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveAlias = exports.generatorTsConfig = void 0;
+exports.resolveAlias = exports.getTscBinPath = exports.generatorTsConfig = void 0;
 
 var path = _interopRequireWildcard(require("path"));
 
@@ -105,4 +105,16 @@ const resolveAlias = (modernConfig, config, watchFilenames = []) => {
   }
 };
 
-exports.resolveAlias = resolveAlias;
+exports.resolveAlias = resolveAlias;
+
+const getTscBinPath = appDirectory => {
+  const tscBinFile = path.join(appDirectory, './node_modules/.bin/tsc');
+
+  if (!_utils.fs.existsSync(tscBinFile)) {
+    throw new Error('Failed to excute the `tsc` command, please check if `typescript` is installed correctly in the current directory.');
+  }
+
+  return tscBinFile;
+};
+
+exports.getTscBinPath = getTscBinPath;

package/dist/js/node/utils/babel.js

@@ -48,7 +48,8 @@ const resolveBabelConfig = (appDirectory, modernConfig, option) => {
       importStyle
     },
     tools: {
-      lodash: userLodashOption
+      lodash: userLodashOption,
+      styledComponents
     }
   } = modernConfig; // alias config
 
@@ -70,32 +71,21 @@ const resolveBabelConfig = (appDirectory, modernConfig, option) => {
     globalVars,
     lodashOptions,
     jsxTransformRuntime,
-    importStyle
+    importStyle,
+    styledComponentsOptions: (0, _utils.applyOptionsChain)({
+      pure: true,
+      displayName: true,
+      ssr: (0, _utils.isUseSSRBundle)(modernConfig),
+      transpileTemplateLiterals: true
+    }, styledComponents)
   }, {
     type: option.type,
     syntax: option.syntax
   }); // Preventing warning when files are too large
 
   internalBabelConfig.compact = false;
-  const babelChain = (0, _babelPresetModule.getModuleBabelChain)({
-    appDirectory,
-    enableReactPreset: true,
-    enableTypescriptPreset: true,
-    alias: aliasConfig,
-    envVars,
-    globalVars,
-    lodashOptions,
-    jsxTransformRuntime,
-    importStyle
-  }, {
-    type: option.type,
-    syntax: option.syntax
-  });
   const userBabelConfig = modernConfig.tools.babel;
-  return (0, _utils.applyOptionsChain)(internalBabelConfig, // TODO: 感觉 userBabelConfig 的类型应该是TransformOptions
-  userBabelConfig, {
-    chain: babelChain
-  });
+  return (0, _utils.applyOptionsChain)(internalBabelConfig, userBabelConfig);
 };
 
 exports.resolveBabelConfig = resolveBabelConfig;

package/dist/types/cli/build.d.ts

@@ -1,2 +1,3 @@
 import type { Command } from 'commander';
-export declare const buildCli: (program: Command) => void;
+import type { PluginAPI } from '@modern-js/core';
+export declare const buildCli: (program: Command, api: PluginAPI) => void;

package/dist/types/cli/dev.d.ts

@@ -1,2 +1,3 @@
+import type { PluginAPI } from '@modern-js/core';
 import type { Command } from 'commander';
-export declare const devCli: (program: Command) => void;
+export declare const devCli: (program: Command, api: PluginAPI) => void;

package/dist/types/commands/build.d.ts

@@ -1,3 +1,4 @@
+import type { PluginAPI } from '@modern-js/core';
 import type { Platform } from '../types';
 export interface IBuildOption {
   watch: boolean;
@@ -7,7 +8,7 @@ export interface IBuildOption {
   tsc: boolean;
   clear: boolean;
 }
-export declare const build: ({
+export declare const build: (api: PluginAPI, {
   watch,
   tsconfig: tsconfigName,
   tsc,

package/dist/types/commands/dev.d.ts

@@ -1,4 +1,5 @@
+import type { PluginAPI } from '@modern-js/core';
 export interface IDevOption {
   tsconfig: string;
 }
-export declare const dev: (option: IDevOption, subCmd?: string) => Promise<void>;
+export declare const dev: (api: PluginAPI, option: IDevOption, subCmd?: string) => Promise<void>;

package/dist/types/features/build/build-platform.d.ts

@@ -1,6 +1,7 @@
+import type { PluginAPI } from '@modern-js/core';
 export declare type Platform = 'all' | 'docs' | 'storybook';
 export interface IBuildPlatformOption {
   platform: Platform;
   isTsProject?: boolean;
 }
-export declare const buildPlatform: (option: IBuildPlatformOption) => Promise<void>;
+export declare const buildPlatform: (api: PluginAPI, option: IBuildPlatformOption) => Promise<void>;

package/dist/types/features/build/build-watch.d.ts

@@ -1,3 +1,3 @@
-import type { NormalizedConfig } from '@modern-js/core';
+import type { NormalizedConfig, PluginAPI } from '@modern-js/core';
 import type { IBuildConfig } from '../../types';
-export declare const buildInWatchMode: (config: IBuildConfig, _: NormalizedConfig) => Promise<void>;
+export declare const buildInWatchMode: (api: PluginAPI, config: IBuildConfig, _: NormalizedConfig) => Promise<void>;

package/dist/types/features/build/build.d.ts

@@ -1,3 +1,3 @@
-import type { NormalizedConfig } from '@modern-js/core';
+import type { NormalizedConfig, PluginAPI } from '@modern-js/core';
 import type { IBuildConfig } from '../../types';
-export declare const buildSourceCode: (config: IBuildConfig, _: NormalizedConfig) => Promise<void>;
+export declare const buildSourceCode: (api: PluginAPI, config: IBuildConfig, _: NormalizedConfig) => Promise<void>;

package/dist/types/features/build/index.d.ts

@@ -1,3 +1,3 @@
-import type { NormalizedConfig } from '@modern-js/core';
+import type { NormalizedConfig, PluginAPI } from '@modern-js/core';
 import type { IBuildConfig } from '../../types';
-export declare const build: (config: IBuildConfig, modernConfig: NormalizedConfig) => Promise<void>;
+export declare const build: (api: PluginAPI, config: IBuildConfig, modernConfig: NormalizedConfig) => Promise<void>;

package/dist/types/features/build/utils.d.ts

@@ -1,7 +1,8 @@
+import type { PluginAPI } from '@modern-js/core';
 import type { IBuildConfig, IPackageModeValue, ITaskMapper } from '../../types';
 import type { LoggerText } from './logger';
-export declare const getCodeInitMapper: (_: IBuildConfig) => IPackageModeValue[];
-export declare const getCodeMapper: ({
+export declare const getCodeInitMapper: (api: PluginAPI, _: IBuildConfig) => IPackageModeValue[];
+export declare const getCodeMapper: (api: PluginAPI, {
   logger,
   taskPath,
   config,
@@ -18,7 +19,7 @@ export declare const getCodeMapper: ({
   taskPath: string;
   params: string[];
 }[];
-export declare const getDtsMapper: (config: IBuildConfig, logger: LoggerText) => {
+export declare const getDtsMapper: (api: PluginAPI, config: IBuildConfig, logger: LoggerText) => {
   logger: LoggerText;
   taskPath: string;
   params: string[];

package/dist/types/features/dev/index.d.ts

@@ -1,8 +1,9 @@
+import type { PluginAPI } from '@modern-js/core';
 export interface IDevConfig {
   appDirectory: string;
   isTsProject: boolean;
 }
 export declare type DevTaskType = 'storybook' | 'docsite' | 'unknow';
-export declare const showMenu: (config: IDevConfig) => Promise<void>;
-export declare const devStorybook: (config: IDevConfig) => Promise<void>;
-export declare const runSubCmd: (subCmd: string, config: IDevConfig) => Promise<void>;
+export declare const showMenu: (api: PluginAPI, config: IDevConfig) => Promise<void>;
+export declare const devStorybook: (api: PluginAPI, config: IDevConfig) => Promise<void>;
+export declare const runSubCmd: (api: PluginAPI, subCmd: string, config: IDevConfig) => Promise<void>;

package/dist/types/hooks/build.d.ts

@@ -0,0 +1,46 @@
+import { NormalizedConfig } from '@modern-js/core';
+import { LessOption, SassOptions } from '@modern-js/style-compiler';
+export interface PlatformBuildOption {
+  isTsProject: boolean;
+}
+export declare const platformBuild: import("@modern-js/plugin").ParallelWorkflow<PlatformBuildOption, {
+  name: string;
+  title: string;
+  taskPath: string;
+  params: string[];
+}>;
+export declare const moduleLessConfig: import("@modern-js/plugin").AsyncPipeline<{
+  modernConfig: NormalizedConfig;
+}, LessOption | undefined>;
+export declare const moduleSassConfig: import("@modern-js/plugin").AsyncPipeline<{
+  modernConfig: NormalizedConfig;
+}, SassOptions<"sync"> | undefined>;
+export declare const moduleTailwindConfig: import("@modern-js/plugin").AsyncPipeline<{
+  modernConfig: NormalizedConfig;
+}, any>;
+export declare const buildHooks: {
+  platformBuild: import("@modern-js/plugin").ParallelWorkflow<PlatformBuildOption, {
+    name: string;
+    title: string;
+    taskPath: string;
+    params: string[];
+  }>;
+  moduleLessConfig: import("@modern-js/plugin").AsyncPipeline<{
+    modernConfig: NormalizedConfig;
+  }, LessOption | undefined>;
+  moduleSassConfig: import("@modern-js/plugin").AsyncPipeline<{
+    modernConfig: NormalizedConfig;
+  }, SassOptions<"sync"> | undefined>;
+  moduleTailwindConfig: import("@modern-js/plugin").AsyncPipeline<{
+    modernConfig: NormalizedConfig;
+  }, any>;
+};
+export declare const lifecycle: () => void;
+declare module '@modern-js/core' {
+  interface Hooks {
+    platformBuild: typeof platformBuild;
+    moduleLessConfig: typeof moduleLessConfig;
+    moduleSassConfig: typeof moduleSassConfig;
+    moduleTailwindConfig: typeof moduleTailwindConfig;
+  }
+}

package/dist/types/hooks/dev.d.ts

@@ -0,0 +1,18 @@
+export declare const moduleToolsMenu: import("@modern-js/plugin").ParallelWorkflow<undefined, {
+  name: string;
+  value: string;
+  runTask: (p: any) => void | Promise<void>;
+}>;
+export declare const devHooks: {
+  moduleToolsMenu: import("@modern-js/plugin").ParallelWorkflow<undefined, {
+    name: string;
+    value: string;
+    runTask: (p: any) => void | Promise<void>;
+  }>;
+};
+export declare const lifecycle: () => void;
+declare module '@modern-js/core' {
+  interface Hooks {
+    moduleToolsMenu: typeof moduleToolsMenu;
+  }
+}

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,26 @@
+import { lifecycle as buildLifeCycle } from './build';
+import { lifecycle as devLifeCycle } from './dev';
+export { buildLifeCycle, devLifeCycle };
+export declare const lifecycle: () => void;
+export declare const hooks: {
+  moduleToolsMenu: import("@modern-js/plugin").ParallelWorkflow<undefined, {
+    name: string;
+    value: string;
+    runTask: (p: any) => void | Promise<void>;
+  }>;
+  platformBuild: import("@modern-js/plugin").ParallelWorkflow<import("./build").PlatformBuildOption, {
+    name: string;
+    title: string;
+    taskPath: string;
+    params: string[];
+  }>;
+  moduleLessConfig: import("@modern-js/plugin").AsyncPipeline<{
+    modernConfig: import("@modern-js/core").NormalizedConfig;
+  }, import("@modern-js/style-compiler").LessOption | undefined>;
+  moduleSassConfig: import("@modern-js/plugin").AsyncPipeline<{
+    modernConfig: import("@modern-js/core").NormalizedConfig;
+  }, import("@modern-js/style-compiler").SassOptions<"sync"> | undefined>;
+  moduleTailwindConfig: import("@modern-js/plugin").AsyncPipeline<{
+    modernConfig: import("@modern-js/core").NormalizedConfig;
+  }, any>;
+};

package/dist/types/index.d.ts

@@ -1,22 +1,6 @@
-export declare const defineConfig: (config: import("@modern-js/core/src/config").ConfigParam) => import("@modern-js/core/src/config").ConfigParam;
+import type { CliPlugin } from '@modern-js/core';
+export { defineConfig } from '@modern-js/core';
 
-declare const _default: import("@modern-js/core").AsyncPlugin<Partial<import("@modern-js/core").Progresses2Threads<{
-  config: import("@modern-js/core").ParallelWorkflow<void, unknown>;
-  resolvedConfig: import("@modern-js/core").AsyncWaterfall<{
-    resolved: import("@modern-js/core").NormalizedConfig;
-  }>;
-  validateSchema: import("@modern-js/core").ParallelWorkflow<void, unknown>;
-  prepare: import("@modern-js/core").AsyncWorkflow<void, void>;
-  commands: import("@modern-js/core").AsyncWorkflow<{
-    program: import("commander").Command;
-  }, void>;
-  watchFiles: import("@modern-js/core").ParallelWorkflow<void, unknown>;
-  fileChange: import("@modern-js/core").AsyncWorkflow<{
-    filename: string;
-    eventType: "add" | "unlink" | "change";
-  }, void>;
-  beforeExit: import("@modern-js/core").AsyncWorkflow<void, void>;
-  beforeRestart: import("@modern-js/core").AsyncWorkflow<void, void>;
-} & import("@modern-js/core").ClearDraftProgress<import("@modern-js/core").Hooks>>>>;
+declare const _default: () => CliPlugin;
 
 export default _default;

package/dist/types/tasks/generator-dts/utils.d.ts

@@ -20,4 +20,5 @@ export declare const generatorTsConfig: (projectTsconfig: ITsconfig, {
   distDir: string;
   sourceDir?: string | undefined;
 }) => string;
-export declare const resolveAlias: (modernConfig: NormalizedConfig, config: IGeneratorConfig, watchFilenames?: string[]) => void;
+export declare const resolveAlias: (modernConfig: NormalizedConfig, config: IGeneratorConfig, watchFilenames?: string[]) => void;
+export declare const getTscBinPath: (appDirectory: string) => string;

package/dist/types/utils/babel.d.ts

@@ -1,8 +1,7 @@
-import { TransformOptions } from '@babel/core';
 import { NormalizedConfig } from '@modern-js/core';
 import { IPackageModeValue } from '../types';
 export declare const getFinalAlias: any;
 export declare const resolveBabelConfig: (appDirectory: string, modernConfig: NormalizedConfig, option: Pick<IPackageModeValue, 'syntax' | 'type'> & {
   sourceAbsDir: string;
   tsconfigPath: string;
-}) => TransformOptions;
+}) => import("@modern-js/core").TransformOptions;

package/jest.config.js

@@ -1,10 +1,7 @@
 const sharedConfig = require('@scripts/jest-config');
 
-console.info(sharedConfig.coveragePathIgnorePatterns);
-
 /** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
-  // eslint-disable-next-line node/no-unsupported-features/es-syntax
   ...sharedConfig,
   rootDir: __dirname,
 };

package/lib/types.d.ts

@@ -55,6 +55,98 @@ declare module '*.svg' {
   export default src;
 }
 
+declare module '*.bmp?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.ico?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp?inline' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg?inline' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.ico?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg?url' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  const src: string;
+  export default src;
+}
+
 declare module '*.css' {
   const classes: { readonly [key: string]: string };
   export default classes;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.4.1",
+  "version": "1.4.4",
   "bin": {
     "modern": "./bin/modern.js"
   },
@@ -40,6 +40,9 @@
   },
   "typesVersions": {
     "*": {
+      "types": [
+        "./lib/types.d.ts"
+      ],
       "type": [
         "./lib/types.d.ts"
       ]
@@ -50,21 +53,21 @@
     "@babel/parser": "^7.15.2",
     "@babel/runtime": "^7",
     "@babel/traverse": "^7.15.0",
-    "@babel/types": "^7.15.0",
-    "@modern-js/babel-compiler": "^1.2.1",
+    "@babel/types": "^7.17.0",
+    "@modern-js/babel-compiler": "^1.2.2",
     "@modern-js/babel-preset-module": "^1.3.1",
-    "@modern-js/css-config": "^1.2.2",
+    "@modern-js/core": "^1.6.1",
+    "@modern-js/css-config": "^1.2.3",
     "@modern-js/i18n-cli-language-detector": "^1.2.1",
-    "@modern-js/module-tools-hooks": "^1.2.2",
-    "@modern-js/new-action": "^1.3.2",
-    "@modern-js/plugin-analyze": "^1.3.3",
-    "@modern-js/plugin-changeset": "^1.2.2",
-    "@modern-js/plugin-fast-refresh": "^1.2.1",
+    "@modern-js/new-action": "^1.3.3",
+    "@modern-js/plugin": "^1.3.2",
+    "@modern-js/plugin-analyze": "^1.3.5",
+    "@modern-js/plugin-changeset": "^1.2.4",
+    "@modern-js/plugin-fast-refresh": "^1.2.3",
     "@modern-js/plugin-i18n": "^1.2.1",
     "@modern-js/style-compiler": "^1.2.2",
-    "@modern-js/utils": "^1.3.2",
+    "@modern-js/utils": "^1.3.7",
     "chalk": "^4.1.2",
-    "chokidar": "^3.5.2",
     "dotenv": "^10.0.0",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.5",
@@ -76,16 +79,13 @@
     "normalize-path": "^3.0.0",
     "p-map": "^4",
     "process.argv": "^0.6.0",
-    "signale": "^1.4.0",
     "tsconfig-paths": "^3.10.1"
   },
-  "peerDependencies": {
-    "@modern-js/core": "^1.4.3"
-  },
   "devDependencies": {
-    "@modern-js/core": "^1.4.3",
     "@babel/preset-typescript": "^7.15.0",
     "@modern-js/babel-chain": "^1.2.1",
+    "@scripts/build": "0.0.0",
+    "@scripts/jest-config": "0.0.0",
     "@types/babel__core": "^7.1.15",
     "@types/babel__generator": "^7.6.3",
     "@types/babel__traverse": "^7.14.2",
@@ -95,12 +95,11 @@
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^14",
     "@types/normalize-path": "^3.0.0",
-    "@types/signale": "^1.4.2",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "commander": "^8.1.0",
-    "typescript": "^4",
-    "@scripts/build": "0.0.0",
     "jest": "^27",
-    "@scripts/jest-config": "0.0.0"
+    "typescript": "^4"
   },
   "sideEffects": false,
   "modernConfig": {

package/tests/dev-cli.test.ts

@@ -1,3 +1,4 @@
+import { manager } from '@modern-js/core';
 import { program } from 'commander';
 import { devCli } from '../src/cli/dev';
 
@@ -11,15 +12,48 @@ describe('dev cli subCmd', () => {
       dev: mockCommandDev,
     }));
   });
-  it('should be storybook with "dev storybook"', () => {
-    devCli(program);
-    program.parse(['', '', 'dev', 'storybook']);
-    expect(mockCommandDev.mock.calls[0][1]).toBe('storybook');
+  it('should be storybook with "dev storybook"', async () => {
+    const mockAPI = {
+      useAppContext: jest.fn((): any => ({
+        existSrc: false,
+        distDirectory: '',
+      })),
+      useResolvedConfigContext: jest.fn(),
+      useHookRunners: (): any => ({}),
+    };
+    const cloned = manager.clone(mockAPI);
+    cloned.usePlugin({
+      setup(api) {
+        devCli(program, api);
+        program.parse(['', '', 'dev', 'storybook']);
+        expect(mockCommandDev.mock.calls[0][2]).toBe('storybook');
+      },
+    });
+    await cloned.init();
   });
 
-  it('should be undefined with "dev"', () => {
-    devCli(program);
-    program.parse(['', '', 'dev']);
-    expect(mockCommandDev.mock.calls[0][1]).toBe(undefined);
+  it('should be undefined with "dev"', async () => {
+    const mockBeforeBuild = jest.fn();
+    const mockAfterBuild = jest.fn();
+    const mockAPI = {
+      useAppContext: jest.fn((): any => ({
+        existSrc: false,
+        distDirectory: '',
+      })),
+      useResolvedConfigContext: jest.fn(),
+      useHookRunners: (): any => ({
+        afterBuild: mockAfterBuild,
+        beforeBuild: mockBeforeBuild,
+      }),
+    };
+    const cloned = manager.clone(mockAPI);
+    cloned.usePlugin({
+      setup(api) {
+        devCli(program, api);
+        program.parse(['', '', 'dev']);
+        expect(mockCommandDev.mock.calls[0][2]).toBe(undefined);
+      },
+    });
+    await cloned.init();
   });
 });