feat: renderClient with callback

packages/preset-built-in/src/plugins/generateFiles/umi.tpl

@@ -11,8 +11,9 @@ import { renderClient } from '{{{ rendererPath }}}';
 const getClientRender = (args: { hot?: boolean } = {}) => plugin.applyPlugins({
   key: 'render',
   type: ApplyPluginsType.compose,
-  initialValue: () => {
+  initialValue: (opts = {}) => {
     return renderClient({
+      ...opts,
       // @ts-ignore
       routes: require('./core/routes').routes,
       plugin,

packages/renderer-react/src/renderClient/renderClient.test.tsx

@@ -1,9 +1,21 @@
 import React from 'react';
 import { render, cleanup, waitFor, getByText } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
 import { createMemoryHistory, Plugin, dynamic } from '@umijs/runtime';
 import renderClient, { preloadComponent } from './renderClient';
 
-afterEach(cleanup);
+let container;
+beforeEach(() => {
+  container = document.createElement('div');
+  container.id = 'app';
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+  cleanup();
+});
 
 test('normal', async () => {
   const history = createMemoryHistory({
@@ -49,6 +61,58 @@ test('normal', async () => {
   expect(routeChanges).toEqual(['POP /foo', 'PUSH /bar']);
 });
 
+test('normal with mount', async () => {
+  const history = createMemoryHistory({
+    initialEntries: ['/foo'],
+  });
+  const routeChanges: string[] = [];
+  const plugin = new Plugin({
+    validKeys: ['onRouteChange', 'rootContainer'],
+  });
+  plugin.register({
+    apply: {
+      onRouteChange({ location, action }: any) {
+        routeChanges.push(`${action} ${location.pathname}`);
+      },
+      rootContainer(container: any, args: any) {
+        if (!(args.history && args.plugin && args.routes)) {
+          throw new Error(
+            'history, plugin or routes not exists in the args of rootContainer',
+          );
+        }
+        return <div>{container}</div>;
+      },
+    },
+    path: '/foo',
+  });
+  let loading = true;
+  act(() => {
+    renderClient({
+      history,
+      plugin,
+      // #app
+      rootElement: 'app',
+      routes: [
+        { path: '/foo', component: () => <h1>foo</h1> },
+        { path: '/bar', component: () => <h1>bar</h1> },
+      ],
+      callback: () => {
+        loading = false;
+      },
+    });
+  });
+  expect(container.outerHTML).toEqual(
+    '<div id="app"><div><h1>foo</h1></div></div>',
+  );
+  expect(loading).toBeFalsy();
+
+  history.push({
+    pathname: '/bar',
+  });
+  expect(container.innerHTML).toEqual('<div><h1>bar</h1></div>');
+  expect(routeChanges).toEqual(['POP /foo', 'PUSH /bar']);
+});
+
 const Common = ({ title }) => {
   return <h1>{title}</h1>;
 };

packages/renderer-react/src/renderClient/renderClient.tsx

@@ -17,6 +17,7 @@ interface IRouterComponentProps {
 
 interface IOpts extends IRouterComponentProps {
   rootElement?: string | HTMLElement;
+  callback?: () => void;
 }
 
 function RouterComponent(props: IRouterComponentProps) {
@@ -111,19 +112,21 @@ export default function renderClient(opts: IOpts) {
       typeof opts.rootElement === 'string'
         ? document.getElementById(opts.rootElement)
         : opts.rootElement;
-    // flag showing SSR successed
+    const callback = opts.callback || (() => {});
+
+    // flag showing SSR successed    
     if (window.g_useSSR) {
       if (opts.dynamicImport) {
         // dynamicImport should preload current route component
         // first loades);
         preloadComponent(opts.routes).then(function () {
-          ReactDOM.hydrate(rootContainer, rootElement);
+          ReactDOM.hydrate(rootContainer, rootElement, callback);
         });
       } else {
-        ReactDOM.hydrate(rootContainer, rootElement);
+        ReactDOM.hydrate(rootContainer, rootElement, callback);
       }
     } else {
-      ReactDOM.render(rootContainer, rootElement);
+      ReactDOM.render(rootContainer, rootElement, callback);
     }
   } else {
     return rootContainer;