fix: emit modern.config.json when distPath.root is absolute path (#4649)

* fix: emit modern.config.json when distPath.root is absolute path

* chore: add test

.changeset/large-olives-march.md

@@ -0,0 +1,8 @@
+---
+'@modern-js/app-tools': patch
+'@modern-js/prod-server': patch
+---
+
+fix(app-tools): failed to emit modern.config.json when distPath.root is absolute path
+
+fix(app-tools): 修复 distPath.root 为绝对路径时无法输出 modern.config.json 的问题

packages/document/builder-doc/docs/en/config/output/distPath.md

@@ -50,6 +50,12 @@ Detail:
 - `server`: The output directory of server bundles when target is `node`.
 - `worker`: The output directory of worker bundles when target is `service-worker`.
 
+### Root Directory
+
+The `root` is the root directory of the build artifacts and can be specified as a relative or absolute path. If the value of `root` is a relative path, it will be appended to the project's root directory to form an absolute path.
+
+Other directories can only be specified as relative paths and will be output relative to the `root` directory.
+
 ### Example
 
 The JavaScript files will be output to the `distPath.root` + `distPath.js` directory, which is `dist/static/js`.

packages/document/builder-doc/docs/zh/config/output/distPath.md

@@ -50,6 +50,12 @@ const defaultDistPath = {
 - `server`: 表示服务端产物的输出目录，仅在 target 为 `node` 时有效。
 - `worker`: 表示 worker 产物的输出目录，仅在 target 为 `service-worker` 时有效。
 
+### 根目录
+
+`root` 是构建产物的根目录，可以为相对路径或绝对路径。如果 `root` 的值为相对路径，则会基于当前项目的根目录拼接为绝对路径。
+
+其他目录只能为相对路径，并且会相对于 `root` 进行输出。
+
 ### 示例
 
 以 JavaScript 文件为例，会输出到 `distPath.root` + `distPath.js` 目录，即为 `dist/static/js`。

packages/server/prod-server/src/server/index.ts

@@ -11,6 +11,7 @@ import {
   dotenv,
   dotenvExpand,
   INTERNAL_SERVER_PLUGINS,
+  ensureAbsolutePath,
 } from '@modern-js/utils';
 import {
   serverManager,
@@ -164,10 +165,9 @@ export class Server {
 
     const finalServerConfig = this.runConfigHook(runner, serverConfig);
 
-    const resolvedConfigPath = path.join(
+    const resolvedConfigPath = ensureAbsolutePath(
       pwd,
-      config.output.path || 'dist',
-      OUTPUT_CONFIG_FILE,
+      path.join(config.output.path || 'dist', OUTPUT_CONFIG_FILE),
     );
 
     options.config = loadConfig({

packages/solutions/app-tools/src/utils/config.ts

@@ -1,10 +1,11 @@
 import * as path from 'path';
 import { bundle } from '@modern-js/node-bundle-require';
 import {
-  CONFIG_FILE_EXTENSIONS,
   fs,
   getServerConfig,
+  ensureAbsolutePath,
   OUTPUT_CONFIG_FILE,
+  CONFIG_FILE_EXTENSIONS,
 } from '@modern-js/utils';
 import type { ServerConfig } from '@modern-js/server-core';
 import type { AppNormalizedConfig } from '../types';
@@ -95,11 +96,14 @@ export const emitResolvedConfig = async (
   appDirectory: string,
   resolvedConfig: AppNormalizedConfig<'shared'>,
 ) => {
-  const outputPath = path.join(
+  const outputPath = ensureAbsolutePath(
     appDirectory,
-    resolvedConfig.output.distPath?.root || './dist',
-    OUTPUT_CONFIG_FILE,
+    path.join(
+      resolvedConfig.output.distPath?.root || './dist',
+      OUTPUT_CONFIG_FILE,
+    ),
   );
+
   await fs.writeJSON(outputPath, resolvedConfig, {
     spaces: 2,
     replacer: safeReplacer(),

tests/integration/custom-dist-path/modern.config.ts

@@ -0,0 +1,10 @@
+import path from 'path';
+import { applyBaseConfig } from '../../utils/applyBaseConfig';
+
+export default applyBaseConfig({
+  output: {
+    distPath: {
+      root: path.join(__dirname, 'dist/foo'),
+    },
+  },
+});

tests/integration/custom-dist-path/package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "name": "integration-custom-dist-path",
+  "version": "2.9.0",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "serve": "modern serve"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "workspace:*",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "workspace:*",
+    "typescript": "^5",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/jest": "^29",
+    "@types/node": "^14"
+  }
+}

tests/integration/custom-dist-path/src/App.tsx

@@ -0,0 +1,3 @@
+const App = () => <div>hello</div>;
+
+export default App;

tests/integration/custom-dist-path/tests/index.test.ts

@@ -0,0 +1,14 @@
+import path from 'path';
+import { fs, OUTPUT_CONFIG_FILE } from '@modern-js/utils';
+import { modernBuild } from '../../../utils/modernTestUtils';
+
+test(`should allow distPath.root to be an absolute path`, async () => {
+  const appDir = path.resolve(__dirname, '..');
+  await modernBuild(appDir);
+
+  const distPath = path.join(appDir, 'dist/foo');
+  const configFile = path.join(distPath, OUTPUT_CONFIG_FILE);
+  const htmlFile = path.join(distPath, 'html/main/index.html');
+  expect(fs.existsSync(configFile)).toBeTruthy();
+  expect(fs.existsSync(htmlFile)).toBeTruthy();
+});

tests/integration/custom-dist-path/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "outDir": "dist"
+  },
+  "include": ["src", "tests", "modern.config.ts"]
+}