diff --git a/.changeset/config.json b/.changeset/config.json index 740b504..1022289 100644 --- 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 new file mode 100644 index 0000000..251952e --- /dev/null +++ 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 index 72aab41..43c0cdc 100644 --- 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-slave/.tnfrc.ts b/examples/qiankun-slave/.tnfrc.ts index ff8b4c5..7d5554b 100644 --- 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 index 77a6545..6b5d469 100644 --- 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 deleted file mode 100644 index 99206d7..0000000 --- a/examples/qiankun-slave/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - -
- - - diff --git a/src/config/config.ts b/src/config/config.ts index 33affe6..586943f 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -41,6 +41,7 @@ export async function loadConfig(opts: ConfigOpts): Promise { ['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 index a389ab3..58327bb 100644 --- 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 index 009d0e2..208f55c 100644 --- 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('
'); diff --git a/src/html.ts b/src/html.ts index c8c5043..320b258 100644 --- a/src/html.ts +++ b/src/html.ts @@ -14,7 +14,7 @@ const DEFAULT_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 index 8d92cec..7b1e3c0 100644 --- 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); } } `,