feat: support config mountElementId

umijs · Dec 20, 2024 · ab948c7 · ab948c7
1 parent 75bc491
commit ab948c7
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 21 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -18,11 +18,11 @@
   "ignore": [
     "@examples/hackernews",
     "@examples/normal",
+    "@examples/qiankun-master",
+    "@examples/qiankun-slave",
     "@examples/shadcn-cli",
     "@examples/ssr",
     "@examples/tailwindcss",
-    "@examples/with-antdx",
-    "@examples/qiankun-master",
-    "@examples/qiankun-slave"
+    "@examples/with-antdx"
   ]
 }
diff --git a/.changeset/shy-countries-compare.md b/.changeset/shy-countries-compare.md
@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: support config mountElementId
diff --git a/README.md b/README.md
@@ -140,6 +140,13 @@ The configuration passed to lessLoader.
 
 In addition to supporting numbers, delay also supports string ranges, such as delay: '500-1000', which randomly selects a value between 500ms and 1000ms.And allowing the configuration to be overridden by the url parameter, such as /api/users?delay=3000.
 
+### mountElementId
+
+- Type: `string`
+- Default: `'root'`
+
+The mount element id.
+
 ### plugins
 
 - Type: `Plugin[]`

diff --git a/examples/qiankun-master/README.md b/examples/qiankun-master/README.md
@@ -0,0 +1,5 @@
+# qiankun-master
+
+Notice:
+
+- Please run `pnpm run dev` in `qiankun-slave` first.
diff --git a/examples/qiankun-slave/.tnfrc.ts b/examples/qiankun-slave/.tnfrc.ts
@@ -1 +1,3 @@
-export default {};
+export default {
+  mountElementId: 'sub-app-container',
+};
diff --git a/examples/qiankun-slave/mako.config.json b/examples/qiankun-slave/mako.config.json
@@ -1,3 +1,3 @@
 {
-  "umd": "foooo-[name]"
+  "umd": "foooo"
 }
diff --git a/examples/qiankun-slave/src/index.html b/examples/qiankun-slave/src/index.html
diff --git a/src/config/config.ts b/src/config/config.ts
@@ -41,6 +41,7 @@ export async function loadConfig(opts: ConfigOpts): Promise<Config> {
     ['click-to-react-component', require.resolve('click-to-react-component')],
     ...(config.alias || []),
   ];
+  config.mountElementId = config.mountElementId || 'root';
   return config;
 }
 

diff --git a/src/config/types.ts b/src/config/types.ts
@@ -71,6 +71,7 @@ export const ConfigSchema = z
         plugins: z.array(z.any()).optional(),
       })
       .optional(),
+    mountElementId: z.string().optional(),
     plugins: z.array(PluginSchema).optional(),
     reactCompiler: z
       .object({

diff --git a/src/html.test.ts b/src/html.test.ts
@@ -39,6 +39,9 @@ test('should use default HTML when document.html does not exist', async () => {
       apply: vi.fn().mockImplementation(({ memo }) => Promise.resolve(memo)),
     },
     pluginContext: {},
+    config: {
+      mountElementId: 'root',
+    },
   } as any;
   const result = await buildHtml(mockContext);
   expect(result).toContain('<div id="root"></div>');

diff --git a/src/html.ts b/src/html.ts
@@ -14,7 +14,7 @@ const DEFAULT_HTML = `
     <link rel="stylesheet" href="/client.css" />
   </head>
   <body>
-    <div id="root"></div>
+    <div id="<%= mountElementId %>"></div>
     <script src="/client.js"></script>
   </body>
 </html>
@@ -29,9 +29,13 @@ export async function buildHtml(ctx: Context) {
   );
   // TODO: support index.ejs
   const htmlPath = path.join(cwd, 'src', 'index.html');
-  const html = fs.existsSync(htmlPath)
+  let html = fs.existsSync(htmlPath)
     ? fs.readFileSync(htmlPath, 'utf-8')
     : DEFAULT_HTML;
+  html = html.replace(
+    /<%= mountElementId %>/g,
+    ctx.config.mountElementId || 'root',
+  );
   // TODO: support HtmlTagDescriptor[] & { html: string, tags: HtmlTagDescriptor[] }
   const result = await ctx.pluginManager.apply({
     hook: 'transformIndexHtml',

diff --git a/src/sync/write_client_entry.ts b/src/sync/write_client_entry.ts
@@ -43,6 +43,7 @@ export function createClient() {
   const srcClientPath = path.join(cwd, 'src/client.tsx');
   const clientPath = fs.existsSync(srcClientPath) ? srcClientPath : './client';
   const relativeClientPath = path.relative(cwd, clientPath);
+  const mountElementId = config.mountElementId!;
   writeFileSync(
     clientEntry,
     `
@@ -96,7 +97,7 @@ if (client.createClient) {
   if (window.__TSR__) {
     ReactDOM.hydrateRoot(document, elements);
   } else {
-    ReactDOM.createRoot(document.getElementById('root')!).render(elements);
+    ReactDOM.createRoot(document.getElementById('${mountElementId}')!).render(elements);
   }
 }
     `,