ui: add tpl tsx example

packages/ui-default/components/dialog/index.tsx

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import React from 'react';
 import { i18n, tpl } from 'vj/utils';
 import DomDialog, { DialogOptions } from './DomDialog';
 
@@ -14,19 +15,19 @@ export class Dialog {
       $action: null,
       ...options,
     };
-    let box = '';
+    const box: React.CSSProperties = {};
-    if (options.width) box += `width:${options.width};max-width:${options.width};`;
+    if (options.width) box.width = box.maxWidth = options.width;
-    if (options.height) box += `height:${options.height};max-height:${options.height};`;
+    if (options.height) box.height = box.maxHeight = options.height;
-    this.$dom = $(tpl`
+    this.$dom = $(tpl(
-      <div class="dialog withBg ${this.options.classes}" style="display:none">
+      <div className={`dialog withBg ${this.options.classes}`} style={{ display: 'none' }}>
-        <div class="dialog__content" style="${box}">
+        <div className="dialog__content" style={box}>
-          <div class="dialog__body" style="height:calc(100% - 45px);"></div>
+          <div className="dialog__body" style={{ height: 'calc(100% - 45px);' }} />
-          <div class="row"><div class="columns clearfix">
+          <div className="row"><div className="columns clearfix">
-            <div class="float-right dialog__action"></div>
+            <div className="float-right dialog__action" />
           </div></div>
         </div>
-      </div>
+      </div>,
-    `);
+    ));
     this.$dom.on('click', '[data-action]', this.handleActionButton.bind(this));
     this.$dom.on('vjDomDialogShow', this.beforeShow.bind(this));
     this.$dom.on('vjDomDialogHidden', this.afterHide.bind(this));

packages/ui-default/components/selectUser.tsx

@@ -1,24 +1,27 @@
+import React from 'react';
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
 import { ActionDialog } from 'vj/components/dialog';
 import { i18n, tpl } from 'vj/utils';
 import createHint from './hint';
 
 let hintInserted = false;
-$(tpl`<div style="display: none" class="dialog__body--user-select">
+$(tpl(
-  <div class="row"><div class="columns">
+  <div style={{ display: 'none' }} className="dialog__body--user-select">
-    <h1 name="select_user_hint">${i18n('Select User')}</h1>
+    <div className="row"><div className="columns">
-  </div></div>
+      <h1 id="select_user_hint">{i18n('Select User')}</h1>
-  <div class="row">
+    </div></div>
-    <div class="columns">
+    <div className="row">
-      <label>${i18n('Username / UID')}
+      <div className="columns">
-        <input name="user" type="text" class="textbox" autocomplete="off" data-autofocus>
+        <label>{i18n('Username / UID')}
-      </label>
+          <input name="user" type="text" className="textbox" autoComplete="off" data-autofocus />
+        </label>
+      </div>
     </div>
-  </div>
+  </div>,
-</div>`).appendTo(document.body);
+)).appendTo(document.body);
 const userSelector = UserSelectAutoComplete.getOrConstruct($('.dialog__body--user-select [name="user"]')) as any;
 const userSelectDialog = new ActionDialog({
-  $body: $('.dialog__body--user-select > div'),
+  $body: $('.dialog__body--user-select'),
   onDispatch(action) {
     if (action === 'ok' && userSelector.value() === null) {
       userSelector.focus();
@@ -30,7 +33,7 @@ const userSelectDialog = new ActionDialog({
 
 export default async function selectUser(hint?: string) {
   if (hint && !hintInserted) {
-    createHint(hint, $('[name="select_user_hint"]'));
+    createHint(hint, $('#select_user_hint'));
     hintInserted = true;
   }
   userSelector.clear();

packages/ui-default/utils/base.ts

@@ -1,7 +1,8 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import React from 'react';
-import DOMServer from 'react-dom/server.browser';
+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) => {
@@ -33,8 +34,17 @@ export function secureRandomString(digit = 32, dict = defaultDict) {
 
 type Substitution = string | number | { templateRaw: true, html: string };
 
-export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]) {
+export function tpl(node: React.ReactNode, reactive?: boolean);
-  if (React.isValidElement(pieces)) return DOMServer.renderToStaticMarkup(pieces);
+export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]);
+export function tpl(pieces: TemplateStringsArray | React.ReactNode, ...substitutions: Substitution[] | boolean[]) {
+  if (React.isValidElement(pieces)) {
+    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) {
     const subst = substitutions[i];