feat: support config mountElementId

sorrycc · sorrycc · commit ab948c709c8a · 2024-12-20T15:26:52.000+08:00
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);
   }
 }
     `,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@umijs/tnf': patch
 +---
++
 +feat: support config mountElementId
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "umd": "foooo-[name]"`
	`2`	`+ "umd": "foooo"`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export async function loadConfig(opts: ConfigOpts): Promise<Config> {`
`41`	`41`	`['click-to-react-component', require.resolve('click-to-react-component')],`
`42`	`42`	`...(config.alias \|\| []),`
`43`	`43`	`];`
	`44`	`+ config.mountElementId = config.mountElementId \|\| 'root';`
`44`	`45`	`return config;`
`45`	`46`	`}`
`46`	`47`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ export function createClient() {`
`43`	`43`	`const srcClientPath = path.join(cwd, 'src/client.tsx');`
`44`	`44`	`const clientPath = fs.existsSync(srcClientPath) ? srcClientPath : './client';`
`45`	`45`	`const relativeClientPath = path.relative(cwd, clientPath);`
	`46`	`+ const mountElementId = config.mountElementId!;`
`46`	`47`	`writeFileSync(`
`47`	`48`	`clientEntry,`
`48`	`49`	`
`@@ -96,7 +97,7 @@ if (client.createClient) {`
`96`	`97`	`if (window.__TSR__) {`
`97`	`98`	`ReactDOM.hydrateRoot(document, elements);`
`98`	`99`	`} else {`
`99`		`- ReactDOM.createRoot(document.getElementById('root')!).render(elements);`
	`100`	`+ ReactDOM.createRoot(document.getElementById('${mountElementId}')!).render(elements);`
`100`	`101`	`}`
`101`	`102`	`}`
`102`	`103`	`,