feat: support add custom tempdir for modern.js App (#3706)

* feat: support add custom tempdir for modern.js App

* chore: add output.tempDir config

* docs: change changeset

* feat: add docs

Author: zllkjc

.changeset/popular-toes-whisper.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/app-tools': patch
+'@modern-js/core': patch
+---
+
+feat: 添加 output.tempDir 配置，支持单项目多配置同时启动
+feat: add output.tempDir configuration, supports launching project with multiple config at the same time

packages/cli/core/src/createCli.ts

@@ -109,6 +109,8 @@ export const createCli = () => {
       },
     );
 
+    await hooksRunner.beforeConfig();
+
     const extraConfigs = await hooksRunner.config();
 
     const extraSchemas = await hooksRunner.validateSchema();

packages/cli/core/src/manager.ts

@@ -16,6 +16,7 @@ import {
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 const baseHooks: BaseHooks<{}> = {
+  beforeConfig: createAsyncWorkflow(),
   config: createParallelWorkflow(),
   resolvedConfig: createAsyncWaterfall(),
   validateSchema: createParallelWorkflow(),

packages/cli/core/src/types/hooks.ts

@@ -22,6 +22,7 @@ export type BaseHooks<
   // eslint-disable-next-line @typescript-eslint/ban-types
   ExtendNormalizedConfig extends Record<string, any> = {},
 > = {
+  beforeConfig: AsyncWorkflow<void, void>;
   config: ParallelWorkflow<void, UserConfig<Extends>>;
   resolvedConfig: AsyncWaterfall<{
     resolved: NormalizedConfig<Extends>;

packages/document/main-doc/docs/en/configure/app/output/temp-dir.mdx

@@ -0,0 +1,24 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **Type:** `string`
+- **Default:** `''`
+
+When developing or building a project, Modern.js generates real Webpack entries and HTML templates, placing them in a temporary directory.
+
+If you want to start a project with multiple configurations at the same time, you can use this configuration to generate files in different temporary directories to avoid interference with each other.
+
+The configuration can be a relative or absolute path, but paths outside the project should be avoided.
+
+Example:
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

packages/document/main-doc/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -9,6 +9,28 @@ Modern.js exposes three types of plugins: CLI, Runtime, and Server.
 
 ## CLI
 
+### `beforeConfig`
+
+- Functionality: Running tasks before the config process
+- Execution phase: Before the config process
+- Hook model: AsyncWorkflow
+- Type: `AsyncWorkflow<void, void>`
+- Example usage:
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      beforeConfig: () => {
+        // do something
+      },
+    };
+  },
+});
+```
+
 ### `config`
 
 - Functionality: Collect configuration

packages/document/main-doc/docs/zh/configure/app/output/temp-dir.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **类型：** `string`
+- **默认值：** `''`
+
+项目开发或构建时，Modern.js 会生成真实的 Webpack 入口和 HTML 模板，并放在临时目录下。
+
+如果希望由多个配置同时启动某项目，可以通过该配置，将文件生成到不同的临时目录下，避免相互干扰。配置可以是相对路径或绝对路径，但应避免项目外的路径。
+
+示例
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

packages/document/main-doc/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -8,6 +8,28 @@ sidebar_position: 8
 
 ## CLI
 
+### `beforeConfig`
+
+- 功能：运行收集配置前的任务
+- 执行阶段：收集配置前
+- Hook 模型：AsyncWorkflow
+- 类型：`AsyncWorkflow<void, void>`
+- 使用示例：
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      beforeConfig: () => {
+        // do something
+      },
+    };
+  },
+});
+```
+
 ### `config`
 
 - 功能：收集配置

packages/solutions/app-tools/src/index.ts

@@ -154,6 +154,19 @@ export default (
     i18n.changeLanguage({ locale });
 
     return {
+      async beforeConfig() {
+        const userConfig = api.useConfigContext();
+        const appContext = api.useAppContext();
+        if (userConfig.output?.tempDir) {
+          api.setAppContext({
+            ...appContext,
+            internalDirectory: path.resolve(
+              appContext.appDirectory,
+              userConfig.output.tempDir,
+            ),
+          });
+        }
+      },
       async commands({ program }) {
         await devCommand(program, api);
 

packages/solutions/app-tools/src/types/config/output.ts

@@ -14,6 +14,7 @@ export interface SharedOutputConfig extends BuilderSharedOutputConfig {
   ssg?: SSGConfig;
   splitRouteChunks?: boolean;
   disableNodePolyfill?: boolean;
+  tempDir?: string;
 }
 
 export interface OutputUserConfig