lupine.web 1.0.14

package/src/core/bind-styles.ts

@@ -0,0 +1,180 @@
+import { CssProps } from '../jsx';
+import { getCurrentTheme, themeCookieName } from './bind-theme';
+import { camelToHyphens } from './camel-to-hyphens';
+// import { bindPageResetEvent } from './page-reset-events';
+import { bindPageLoadedEvent } from './page-loaded-events';
+
+const wrapCss = (className: string, cssText: string, mediaQuery?: string) => {
+  // if (!className) {
+  //   console.warn(`No class name is provided for ${cssText}`);
+  // }
+  let cssTextWrap = className ? `${className}{${cssText}}` : cssText;
+  if (mediaQuery) {
+    cssTextWrap = `${mediaQuery}{${cssTextWrap}}`;
+  }
+  return cssTextWrap;
+};
+
+const processStyleValue = (style: CssProps) => {
+  return Object.keys(style)
+    .map((key) => key.trim())
+    .map((key) => {
+      const noOutput =
+        (style[key] != null && typeof style[key] === 'object') ||
+        typeof style[key] === 'undefined' ||
+        style[key] === '';
+      return noOutput ? '' : `${camelToHyphens(key)}:${style[key]};`;
+    })
+    .join('');
+};
+
+const updateOneBlock = (css: string[], cssTemp: string[], className: string, mediaQuery?: string) => {
+  if (cssTemp.length > 0) {
+    const cssText = wrapCss(className, cssTemp.join(''), mediaQuery);
+    css.push(cssText);
+    cssTemp.length = 0;
+  }
+};
+
+export const processStyle = (className: string, style: CssProps, mediaQuery?: string): string[] => {
+  const css: string[] = [];
+  const cssTemp: string[] = [];
+  for (let i in style) {
+    const value = style[i];
+    if (value === null || typeof value !== 'object') {
+      if (value !== '' && typeof value !== 'undefined') {
+        if (!className) {
+          console.warn(`No className is defined for: ${camelToHyphens(i)}:${value};`);
+        }
+        cssTemp.push(`${camelToHyphens(i)}:${value};`);
+      }
+    } else {
+      updateOneBlock(css, cssTemp, className, mediaQuery);
+
+      if (i.startsWith('@keyframes')) {
+        const cssText = Object.keys(value)
+          .map((stageKey) => stageKey + '{' + processStyleValue(value[stageKey] as CssProps) + '}')
+          .join('');
+        css.push(`${i}{${cssText}}`);
+      } else if (i.startsWith('@media')) {
+        const ret = processStyle(className, value, i);
+        css.push(...ret);
+      } else {
+        // '&:hover, &.open': {
+        //     '>.d1, .d2': {
+        //     },
+        // }, ==>
+        // &:hover >.d1, &:hover >.d2, &.open >.d1, &.open .d2
+        const newClassName = !className
+          ? i
+          : className
+              .split(',')
+              .map((key0) => key0.trim())
+              .map((key0) => {
+                return i
+                  .split(',')
+                  .map((key) => key.trim())
+                  .map((key) => {
+                    // not needed to "+" as them share same parents?
+                    // return key.split('+').map(key2 => key2.startsWith('&') ? key0 + key2.substring(1) : key0 + ' ' + key2).join('+');
+                    return key.startsWith('&') ? key0 + key.substring(1) : key0 + ' ' + key;
+                  })
+                  .join(',');
+              })
+              .join(',');
+        const ret = processStyle(newClassName, value, mediaQuery);
+        css.push(...ret);
+      }
+    }
+  }
+  updateOneBlock(css, cssTemp, className, mediaQuery);
+  return css;
+};
+
+// mount-components has the same name `sty-`
+export const updateStyles = (selector: string, style: CssProps) => {
+  const el = selector && document.querySelector(selector);
+  if (el) {
+    const cssText = processStyle(selector, style).join('');
+    // if the first child is style, then update it
+    if (el.firstChild && el.firstChild.nodeName === 'STYLE') {
+      (el.firstChild as any).innerHTML = cssText;
+    } else {
+      const style = document.createElement('style');
+      style.innerHTML = cssText;
+      // style.id = `sty-${selector}`; // sty means style, this is different from mount-components.renderComponent
+      el.prepend(style);
+    }
+  } else {
+    console.warn(`Can't find "${selector}" to update styles.`);
+  }
+};
+
+const updateCssDom = (uniqueStyleId: string, cssText: string, cssDom: HTMLElement | null) => {
+  if (!cssDom) {
+    cssDom = document.createElement('style');
+    cssDom.id = `sty-${uniqueStyleId}`;
+    document.head.appendChild(cssDom);
+  }
+  cssDom.innerText = cssText;
+};
+
+/*
+Global styles including theme will not be updated once it's created.
+topClassName is a className or a tag name.
+For example, it can be like this for all elements:
+  html { ... } or :root { ... }
+*/
+const _globalStyle = new Map();
+export const bindGlobalStyles = (uniqueStyleId: string, topClassName: string, style: CssProps, forceUpdate = false) => {
+  if (typeof document !== 'undefined') {
+    let cssDom = document.getElementById(`sty-${uniqueStyleId}`);
+    if (forceUpdate || !cssDom) {
+      updateCssDom(uniqueStyleId, processStyle(topClassName, style).join(''), cssDom);
+    }
+  } else if (!_globalStyle.has(uniqueStyleId) || forceUpdate) {
+    // don't overwrite it to have the same behavior as in the Browser
+    _globalStyle.set(uniqueStyleId, { topClassName, style });
+  }
+};
+
+const generateThemeStyles = () => {
+  const currentTheme = getCurrentTheme();
+  const themeCss = [];
+  for (let themeName in currentTheme.themes) {
+    // i is for case-insensitive
+    themeCss.push(...processStyle(`[data-theme="${themeName}" i]`, currentTheme.themes[themeName]));
+  }
+  return themeCss.join('\n');
+};
+
+if (typeof document !== 'undefined') {
+  // Update theme in Browser when no SSR
+  bindPageLoadedEvent(() => {
+    const uniqueStyleId = themeCookieName;
+    let cssDom = document.getElementById(`sty-${uniqueStyleId}`);
+    if (!cssDom) {
+      updateCssDom(uniqueStyleId, generateThemeStyles(), cssDom);
+    }
+  });
+}
+
+const clearGlobalStyles = () => {
+  // reset unique id
+  _globalStyle.clear();
+};
+// bindPageResetEvent(clearGlobalStyles);
+
+export const generateAllGlobalStyles = () => {
+  const result = [];
+
+  result.push(`<style id="sty-theme">${generateThemeStyles()}</style>`);
+
+  for (let [uniqueStyleId, { topClassName, style }] of _globalStyle) {
+    const cssText = processStyle(topClassName, style).join('');
+    result.push(`<style id="sty-${uniqueStyleId}">${cssText}</style>`);
+  }
+
+  clearGlobalStyles();
+  return result.join('');
+};

package/src/core/bind-theme.ts

@@ -0,0 +1,51 @@
+import { CssProps } from '../jsx';
+import { DomUtils } from '../lib';
+import { getEitherCookie } from './server-cookie';
+
+// theme doesn't need to reset, theme name is stored in cookie
+
+export const defaultThemeName = 'light';
+export const themeCookieName = 'theme';
+export const updateThemeEventName = 'updateTheme';
+export const themeAttributeName = 'data-theme';
+const _themeCfg: any = { defaultTheme: defaultThemeName, themes: {} };
+export const bindTheme = (defaultTheme: string, themes: { [key: string]: CssProps }) => {
+  _themeCfg.defaultTheme = defaultTheme;
+  _themeCfg.themes = themes;
+
+  // set to cookie
+  getCurrentTheme();
+};
+
+export const getCurrentTheme = () => {
+  let themeName = getEitherCookie(themeCookieName) as string;
+  if (!themeName || !_themeCfg.themes[themeName]) {
+    themeName = _themeCfg.defaultTheme;
+    if (typeof window !== 'undefined') {
+      DomUtils.setCookie(themeCookieName, _themeCfg.defaultTheme);
+    }
+  }
+  return { themeName, themes: _themeCfg.themes as { [key: string]: CssProps } };
+};
+
+export const updateTheme = (themeName: string) => {
+  // Theme is only updated in Browser
+  _themeCfg.defaultTheme = themeName;
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  DomUtils.setCookie(themeCookieName, themeName);
+  document.documentElement.setAttribute(themeAttributeName, themeName);
+
+  // update theme for all iframe
+  const allIframe = document.querySelectorAll('iframe');
+  for (let i = 0; i < allIframe.length; i++) {
+    if (allIframe[i].contentWindow && allIframe[i].contentWindow!.top === window) {
+      allIframe[i].contentWindow!.document.documentElement.setAttribute(themeAttributeName, themeName);
+    }
+  }
+
+  const event = new CustomEvent(updateThemeEventName, { detail: themeName });
+  window.dispatchEvent(event);
+};

package/src/core/camel-to-hyphens.ts

@@ -0,0 +1,3 @@
+export const camelToHyphens = function (name: string) {
+  return name.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+};

package/src/core/core.ts

@@ -0,0 +1,179 @@
+import { getMetaDataObject, getMetaDataTags, getMetaTitle } from '../components';
+import { VNode } from '../jsx';
+import { initWebEnv, initWebSetting } from '../lib';
+import { Logger } from '../lib/logger';
+import { generateAllGlobalStyles } from './bind-styles';
+import { defaultThemeName, getCurrentTheme, updateTheme } from './bind-theme';
+import { mountComponents } from './mount-components';
+// import { callPageResetEvent } from './page-reset-events';
+import { PageRouter } from './page-router';
+import { callPageLoadedEvent } from './page-loaded-events';
+import { initServerCookies } from './server-cookie';
+import { IToClientDelivery } from '../models/to-client-delivery-props';
+
+export type JsonKeyValue = {
+  [key: string]: string | number | boolean | null | undefined | JsonKeyValue | JsonKeyValue[];
+};
+export type JsonObject =
+  | JsonKeyValue[]
+  | {
+      [key: string]: string | number | boolean | null | undefined | JsonKeyValue | JsonKeyValue[];
+    };
+
+export type RenderPageFunctionsType = {
+  fetchData: (url: string, postBody?: string | JsonObject, returnRawResponse?: boolean) => Promise<any>;
+  [key: string]: Function;
+};
+export interface PageProps {
+  url: string;
+  // urlSections: string[];
+  query: { [key: string]: string };
+  urlParameters: { [key: string]: string };
+  renderPageFunctions: RenderPageFunctionsType;
+}
+
+export type PageResultType = {
+  content: string;
+  title: string;
+  metaData: string;
+  themeName: string;
+  globalCss: string;
+};
+export type _LupineJs = {
+  generatePage: (props: any, toClientDelivery: IToClientDelivery) => Promise<PageResultType>;
+  renderPageFunctions: RenderPageFunctionsType;
+  router: PageRouter | ((props: PageProps) => Promise<VNode<any>>);
+  renderPageProps: PageProps;
+};
+
+const logger = new Logger('core');
+export const _lupineJs: _LupineJs = {} as _LupineJs;
+
+// for SSR, it exports _lupineJs function for the server to call
+if (typeof exports !== 'undefined') {
+  // ignore esbuild's warnings:
+  // The CommonJS "exports" variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]
+  exports._lupineJs = () => {
+    return _lupineJs;
+  };
+}
+
+// this should be called by the FE and also by the server side to set fetchData and others for client and server side rendering.
+// And the RenderPageFunctionsType will be passed to call (generate) a page through PageProps
+export const bindRenderPageFunctions = (calls: RenderPageFunctionsType) => {
+  _lupineJs.renderPageFunctions = calls || {};
+};
+// export const getRenderPageFunctions = (): RenderPageFunctionsType => {
+//   return globalThis._lupineJs.renderPageFunctions;
+// }
+// this is only used inside the core
+const setRenderPageProps = (props: PageProps) => {
+  _lupineJs.renderPageProps = props;
+};
+// this is used by the code to get url info when it's executed in the FE or in the server side.
+export const getRenderPageProps = (): PageProps => {
+  return _lupineJs.renderPageProps;
+};
+
+export const bindRouter = (router: PageRouter | ((props: PageProps) => Promise<VNode<any>>)) => {
+  _lupineJs.router = router;
+};
+
+export const isFrontEnd = () => {
+  return typeof window === 'object' && typeof document === 'object';
+};
+
+const renderTargetPage = async (props: PageProps, renderPartPage: boolean) => {
+  if (_lupineJs.router instanceof PageRouter) {
+    return _lupineJs.router.handleRoute(props.url, props, renderPartPage);
+  }
+  return await _lupineJs.router(props);
+};
+
+// this is called by server side for SSR (server-side-rendering)
+export const generatePage = async (props: PageProps, toClientDelivery: IToClientDelivery): Promise<PageResultType> => {
+  setRenderPageProps(props);
+
+  initWebEnv(toClientDelivery.getWebEnv());
+  initWebSetting(toClientDelivery.getWebSetting());
+  initServerCookies(toClientDelivery.getServerCookie());
+  // callPageResetEvent();
+  callPageLoadedEvent();
+
+  const jsxNodes = await renderTargetPage(props, false);
+  if (!jsxNodes || !jsxNodes.props) {
+    return {
+      content: `Unexpected url: ${props.url}`,
+      title: '',
+      metaData: '',
+      globalCss: '',
+      themeName: defaultThemeName,
+    };
+  }
+
+  await mountComponents(null, jsxNodes);
+  const currentTheme = getCurrentTheme();
+  const cssText = generateAllGlobalStyles();
+  const content = jsxNodes.props._html.join('');
+
+  return {
+    content,
+    title: getMetaTitle(),
+    metaData: getMetaDataTags(),
+    globalCss: cssText,
+    themeName: currentTheme.themeName,
+  };
+};
+_lupineJs.generatePage = generatePage;
+
+let _pageInitialized = false;
+// this is called in the FE when the document is loaded
+export const initializePage = async (newUrl?: string) => {
+  const currentPageInitialized = _pageInitialized;
+  _pageInitialized = true;
+  logger.log('initializePage: ', newUrl);
+  if (newUrl) {
+    window.history.pushState({ urlPath: newUrl }, '', newUrl);
+    // prevents browser from storing history with each change:
+    // window.history.replaceState({ html: '', pageTitle: newUrl }, '', newUrl);
+  }
+  const splitUrl = newUrl ? newUrl.split('?') : [];
+  const url = splitUrl[0] || document.location.pathname;
+  const queryString = splitUrl[1] || document.location.search;
+
+  const props: PageProps = {
+    url,
+    // urlSections: url.split('/').filter((i) => !!i),
+    query: Object.fromEntries(new URLSearchParams(queryString)), // new URLSearchParams(queryString),
+    urlParameters: {},
+    renderPageFunctions: _lupineJs.renderPageFunctions,
+  };
+
+  setRenderPageProps(props);
+  // !currentPageInitialized && callPageResetEvent();
+  !currentPageInitialized && callPageLoadedEvent();
+
+  const jsxNodes = await renderTargetPage(props, currentPageInitialized);
+  if (jsxNodes === null) return;
+  if (!jsxNodes || !jsxNodes.props) {
+    document.querySelector('.lupine-root')!.innerHTML = `Unexpected url: ${url}`;
+    return;
+  }
+
+  // generateAllGlobalStyles will be updated directly in Browser
+  await mountComponents('.lupine-root', jsxNodes);
+  updateTheme(getCurrentTheme().themeName);
+
+  // title
+  document.title = getMetaTitle();
+  const metaData = getMetaDataObject();
+  // meta data?
+};
+if (typeof window !== 'undefined') {
+  addEventListener('popstate', (event) => {
+    initializePage();
+  });
+  addEventListener('load', (event) => {
+    initializePage();
+  });
+}

package/src/core/index.ts

@@ -0,0 +1,15 @@
+export * from './bind-attributes';
+export * from './bind-lang';
+export * from './bind-links';
+export * from './bind-ref';
+export * from './bind-styles';
+export * from './bind-theme';
+export * from './core';
+export * from './camel-to-hyphens';
+export * from './mount-components';
+export * from './page-loaded-events';
+export * from './page-router';
+export * from './replace-innerhtml';
+export * from './server-cookie';
+export * from './web-version';
+

package/src/core/mount-components.ts

@@ -0,0 +1,259 @@
+import { bindAttributes } from './bind-attributes';
+import { bindLinks } from './bind-links';
+import { VNode } from '../jsx';
+import { Logger } from '../lib/logger';
+import { uniqueIdGenerator } from '../lib/unique-id';
+import { processStyle } from './bind-styles';
+// import { bindPageResetEvent } from './page-reset-events';
+import { replaceInnerhtml } from './replace-innerhtml';
+import { camelToHyphens } from './camel-to-hyphens';
+
+const logger = new Logger('mount-components');
+export const domUniqueId = uniqueIdGenerator('l'); // l means label
+// bindPageResetEvent(() => {
+//   // reset unique id
+//   domUniqueId(true);
+// });
+
+function renderChildren(html: string[], children: any) {
+  if (typeof children === 'string') {
+    html.push(children);
+  } else if (children === false || children === null || typeof children === 'undefined') {
+    // add nothing
+  } else if (typeof children === 'number' || typeof children === 'boolean') {
+    // true will be added
+    html.push(children.toString());
+  } else if (Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const item = children[i];
+      renderChildren(html, item);
+    }
+  } else if (children.type && children.props) {
+    renderComponent(children.type, children.props);
+    html.push(...children.props._html);
+    children.props._html.length = 0;
+  } else {
+    logger.warn('Unexpected', children);
+  }
+}
+
+const selfClosingTags = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
+const genUniqueId = (props: any) => {
+  if (!props._id) {
+    props._id = domUniqueId();
+  }
+  return props._id;
+};
+// data-refid will be assigned with a ref.id
+function renderAttribute(type: any, props: any, jsxNodes: any) {
+  const html = [];
+  // data-refid is used for nested components like this:
+  //    <div class='class-name' ref={ref} ...>...
+  //      <div data-refid={ref}>
+  // then data-refid can be located:
+  //   ref.$(`.class-name[data-refid=${ref.id}]`)
+  if (props['data-refid'] && props['data-refid'].id) {
+    props['data-refid'] = props['data-refid'].id;
+  }
+  for (let i in props) {
+    if (i === 'ref') {
+      if (props[i]) {
+        props[i].id = genUniqueId(props);
+        html.push('data-ref');
+      }
+    } else if (!['children', 'key', '_result', '_html', '_id'].includes(i)) {
+      //, "_lb"
+      // , "value", "checked"
+      // style is a  string, in-line style
+      if (i === 'style') {
+        if (typeof props[i] === 'object') {
+          let attrs = `${i}="`;
+          for (let j in props[i]) {
+            attrs += `${camelToHyphens(j)}:${props[i][j]};`;
+          }
+          attrs += `"`;
+          html.push(attrs);
+        } else {
+          html.push(`${i}="${props[i]}"`);
+        }
+      } else if (i === 'css') {
+        // css is a <style> tag, and is the first element in html
+        genUniqueId(props);
+        // props._lb = props._id;
+      } else if (i[0] === 'o' && i[1] === 'n') {
+        genUniqueId(props);
+      } else if (i === 'defaultChecked') {
+        if (props[i] === true || props[i] === 'checked') {
+          html.push(`checked="true"`);
+        }
+      } else if (i === 'readonly' || i === 'disabled' || i === 'selected' || i === 'checked') {
+        if (props[i] !== undefined && props[i] !== false && props[i] !== 'false') {
+          html.push(`${i}="${props[i]}"`);
+        }
+      } else if (i === 'class' || i === 'className') {
+        const className = props[i]
+          .split(' ')
+          .filter((item: string) => item && item !== '')
+          .join(' ');
+        html.push(`class="${className}"`);
+      } else if (i !== 'dangerouslySetInnerHTML') {
+        html.push(`${i}="${props[i]}"`);
+      }
+    }
+  }
+  if (props._id) {
+    // tag id will be after all attributes
+    html.push(props._id);
+  }
+  return html.join(' ');
+}
+
+// assign the same label to all children
+// function assignLabels(label: string, children: any) {
+//     if (Array.isArray(children)) {
+//         for (let i = 0; i < children.length; i++) {
+//             const item = children[i];
+//             if (Array.isArray(item) || (item && item.type && item.props)) {
+//                 assignLabels(label, item);
+//             }
+//         }
+//     } else if (children.type && children.props) {
+//         if (typeof children.type === 'string') {
+//             children.props._lb = label;
+//         }
+//     }
+// }
+
+// The result has only one element
+const renderComponent = (type: any, props: any) => {
+  //   logger.log("==================renderComponent", type);
+  if (Array.isArray(props)) {
+    const jsxNodes = { type: 'Fragment', props: { children: props } } as any;
+    return renderComponent(jsxNodes.type, jsxNodes.props);
+  }
+
+  props._html = [];
+  if (typeof type === 'function') {
+    props._result = type.call(null, props);
+    if (props._result === null || props._result === undefined || props._result === false) {
+      // placeholder for sub components
+      props._result = { type: 'Fragment', props };
+    }
+    if (props._fragment_ref && props._result && props._result.props) {
+      // pass the ref to the sub Fragment tag
+      props._result.props.ref = props._fragment_ref;
+      props._result.props._id = genUniqueId(props._result.props);
+    }
+    // logger.log('==========props._result', props._result);
+    if (typeof props._result.type === 'function') {
+      renderComponent(props._result.type, props._result.props);
+      if (props._result.props._html) {
+        props._html.push(...props._result.props._html);
+        props._result.props._html.length = 0;
+      }
+      // function component doesn't have any attributes
+      return;
+    }
+  }
+  const newType = (props._result && props._result.type) || type;
+  const newProps = (props._result && props._result.props) || props;
+  if (newType === 'div' && newProps.class === 'answer-box') {
+    console.log('renderComponent', newType, newProps);
+  }
+  if (typeof newType === 'string') {
+    const attrs = renderAttribute(newType, newProps, { type, props });
+    if (selfClosingTags.includes(newType.toLowerCase())) {
+      props._html.push(`<${newType}${attrs ? ' ' : ''}${attrs} />`);
+      if (newProps['css']) {
+        console.warn(`ClosingTag [${newType}] doesn't support 'css', please use 'style' instead.`);
+      }
+    } else {
+      props._html.push(`<${newType}${attrs ? ' ' : ''}${attrs}>`);
+
+      if (newProps['css']) {
+        const cssText = processStyle(`[${newProps._id}]`, newProps['css']).join('');
+        props._html.push(`<style id="sty-${newProps._id}">${cssText}</style>`); // sty means style, and updateStyles has the same name
+      }
+
+      if (newProps.children) {
+        // if (newProps._lb) {
+        //     assignLabels(newProps._lb, newProps.children);
+        // }
+
+        renderChildren(props._html, newProps.children);
+      } else if (newProps['dangerouslySetInnerHTML']) {
+        props._html.push(newProps['dangerouslySetInnerHTML']);
+      } else {
+        // single element
+      }
+
+      props._html.push(`</${newType}>`);
+    }
+  } else if (newType.name === 'Fragment') {
+    renderChildren(props._html, newProps.children);
+  } else {
+    logger.warn('Unknown type: ', type, props, newType, newProps);
+  }
+};
+
+export const mountComponents = async (selector: string | null | Element, jsxNodes: VNode<any>) => {
+  renderComponent(jsxNodes.type, jsxNodes.props);
+  const el = selector && (typeof selector === 'string' ? document.querySelector(selector) : selector);
+  if (el) {
+    // the parent node shouldn't have any styles
+    // el.replaceChildren(...);
+    // // keep <style id="sty-${newProps._id}">...</style>
+    // const firstDom = el.firstChild as Element;
+    // if (firstDom && firstDom.tagName === 'STYLE') {
+    //   firstDom.parentNode?.removeChild(firstDom);
+    // }
+
+    // call unload before releace innerHTML
+    // el.innerHTML = jsxNodes.props._html.join('');
+    await replaceInnerhtml(el, jsxNodes.props._html.join(''));
+
+    // if (firstDom && firstDom.tagName === 'STYLE') {
+    //   el.insertBefore(firstDom, el.firstChild);
+    // }
+    bindAttributes(el, jsxNodes.type, jsxNodes.props);
+    bindLinks(el);
+  }
+};
+
+// suggest to use HtmlVar.
+export const mountSelfComponents = async (selector: string | null | Element, jsxNodes: VNode<any>) => {
+  renderComponent(jsxNodes.type, jsxNodes.props);
+  let el = selector && (typeof selector === 'string' ? document.querySelector(selector) : selector);
+  if (el) {
+    const parentNode = el.parentElement;
+    // Can't do outerHTML directly because it will lose attributes
+    const template = document.createElement('template');
+    // template.innerHTML = jsxNodes.props._html.join("");
+    // call unload before releace innerHTML
+    await replaceInnerhtml(template, jsxNodes.props._html.join(''));
+
+    // renderComponent should only have one element
+    template.content.children.length > 1 &&
+      console.error('renderComponent should only have one element: ', template.content.children.length);
+    el.replaceWith(template.content.firstChild as Element);
+    el = parentNode as Element;
+    bindAttributes(el, jsxNodes.type, jsxNodes.props);
+    bindLinks(el);
+  }
+};