ui: fix tpl

packages/ui-default/utils/base.ts

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import _ from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import DOMServer from 'react-dom/server';
 
 export function substitute(str: string, obj: any) {
   return str.replace(/\{([^{}]+)\}/g, (match, key) => {
@@ -37,13 +38,12 @@ export function tpl<T extends boolean = false>(node: React.ReactNode, reactive?:
 export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]): string;
 export function tpl(pieces: TemplateStringsArray | React.ReactNode, ...substitutions: Substitution[] | boolean[]) {
   if (React.isValidElement(pieces)) {
-    const div = document.createElement('div');
-    const root = ReactDOM.createRoot(div);
-    root.render(pieces);
-    if (substitutions[0]) return div;
-    const html = div.innerHTML;
-    root.unmount();
-    return html;
+    if (substitutions[0]) {
+      const div = document.createElement('div');
+      ReactDOM.createRoot(div).render(pieces);
+      return div;
+    }
+    return DOMServer.renderToStaticMarkup(pieces);
   }
   let result = pieces[0];
   for (let i = 0; i < substitutions.length; ++i) {