lupine.web 1.0.29 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.web",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/core/bind-attributes.ts

@@ -22,7 +22,10 @@ export const bindAttributesChildren = (topEl: Element, children: any) => {
 export const bindAttributes = (topEl: Element, type: any, props: any) => {
   const newProps = (props._result && props._result.props) || props;
   if (newProps._id) {
-    const el = topEl.querySelector(`[${newProps._id}]`);
+    let el = topEl.querySelector(`[${newProps._id}]`);
+    if (!el && topEl.getAttribute(newProps._id) === '') {
+      el = topEl;
+    }
     if (el) {
       for (let i in newProps) {
         if (i === 'ref') {

package/src/core/bind-ref.ts

@@ -1,10 +1,9 @@
-// import { mountSelfComponents, renderComponent } from "./mount-components";
-
-import { VNode } from "../jsx";
-import { bindAttributes } from "./bind-attributes";
-import { bindLinks } from "./bind-links";
-import { renderComponents } from "./render-components";
-import { replaceInnerhtml } from "./replace-innerhtml";
+import { VNode } from '../jsx';
+import { bindAttributes } from './bind-attributes';
+import { bindLinks } from './bind-links';
+import { mountInnerComponent, mountOuterComponent } from './mount-component';
+import { renderComponent } from './render-component';
+import { replaceInnerhtml } from './replace-innerhtml';
 
 export const bindRef = (type: any, newProps: any, el: Element) => {
   // console.log('========', newProps, el);
@@ -31,22 +30,19 @@ export const bindRef = (type: any, newProps: any, el: Element) => {
    */
   newProps['ref'].$ = (selector: string) => {
     return el.querySelector(`[${id}] ` + selector);
-    // const dom = LiteDom.queryOne(el);
-    // return dom && dom.$(selector, value);
   };
   newProps['ref'].$all = (selector: string) => {
     return el.querySelectorAll(`[${id}] ` + selector);
   };
 
-  newProps['ref'].loadContent = async (content: string | VNode<any>) => {
+  newProps['ref'].mountInnerComponent = async (content: string | VNode<any>) => {
     if (typeof content === 'object' && content.type && content.props) {
-      // await mountComponents(el, content);
-      renderComponents(content.type, content.props);
-      await replaceInnerhtml(el, content.props._html.join(''));
-      bindAttributes(el, content.type, content.props);
-      bindLinks(el);
+      await mountInnerComponent(el, content);
     } else {
       await replaceInnerhtml(el, content as string);
     }
   };
+  newProps['ref'].mountOuterComponent = async (content: VNode<any>) => {
+    await mountOuterComponent(el, content);
+  };
 };

package/src/core/index.ts

@@ -5,10 +5,9 @@ export * from './bind-meta';
 export * from './bind-ref';
 export * from './bind-styles';
 export * from './bind-theme';
-export * from './component-factory';
 export * from './export-lupine';
 export * from './camel-to-hyphens';
-export * from './mount-components';
+export * from './mount-component';
 export * from './page-loaded-events';
 export * from './page-router';
 export * from './replace-innerhtml';

package/src/core/initialize.ts

@@ -1,7 +1,7 @@
 import { Logger } from '../lib/logger';
 import { generateAllGlobalStyles } from './bind-styles';
 import { defaultThemeName, getCurrentTheme, updateTheme } from './bind-theme';
-import { mountComponents } from './mount-components';
+import { mountInnerComponent } from './mount-component';
 // import { callPageResetEvent } from './page-reset-events';
 import { PageRouter } from './page-router';
 import { callPageLoadedEvent } from './page-loaded-events';
@@ -42,7 +42,7 @@ const generatePage = async (props: PageProps, toClientDelivery: IToClientDeliver
     };
   }
 
-  await mountComponents(null, jsxNodes);
+  await mountInnerComponent(null, jsxNodes);
   const currentTheme = getCurrentTheme();
   const cssText = generateAllGlobalStyles();
   const content = jsxNodes.props._html.join('');
@@ -93,7 +93,7 @@ export const initializePage = async (newUrl?: string) => {
   }
 
   // generateAllGlobalStyles will be updated directly in Browser
-  await mountComponents('.lupine-root', jsxNodes);
+  await mountInnerComponent('.lupine-root', jsxNodes);
   updateTheme(getCurrentTheme().themeName);
 
   // title

package/src/core/mount-component.ts

@@ -0,0 +1,68 @@
+import { bindAttributes } from './bind-attributes';
+import { bindLinks } from './bind-links';
+import { VNode } from '../jsx';
+// import { Logger } from '../lib/logger';
+// import { bindPageResetEvent } from './page-reset-events';
+import { callUnload, replaceInnerhtml } from './replace-innerhtml';
+import { renderComponent } from './render-component';
+
+// const logger = new Logger('mount-components');
+export const mountInnerComponent = 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) {
+    // call unload before releace innerHTML
+    await replaceInnerhtml(el, jsxNodes.props._html.join(''));
+
+    bindAttributes(el, jsxNodes.type, jsxNodes.props);
+    bindLinks(el);
+  }
+};
+
+// suggest to use HtmlVar.
+export const mountOuterComponent = async (selector: string | Element, jsxNodes: VNode<any>) => {
+  renderComponent(jsxNodes.type, jsxNodes.props);
+  let el = selector && (typeof selector === 'string' ? document.querySelector(selector) : selector);
+  if (el) {
+    // 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);
+    const newEl = template.content.firstChild as Element;
+    // el.replaceWith(newEl);
+    await callUnload(el);
+    el.parentNode?.replaceChild(newEl, el);
+    bindAttributes(newEl, jsxNodes.type, jsxNodes.props);
+    bindLinks(newEl);
+  }
+};
+
+// suggest to use HtmlVar.
+export const mountSiblingComponent = async (selector: string | Element, jsxNodes: VNode<any>, position: 'before' | 'after' = 'after') => {
+  renderComponent(jsxNodes.type, jsxNodes.props);
+  let el = selector && (typeof selector === 'string' ? document.querySelector(selector) : selector);
+  if (el) {
+    // 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);
+    const newEl = template.content.firstChild as Element;
+    // el.replaceWith(newEl);
+    await callUnload(el);
+    if (el.nextSibling || position === 'before') {
+      el.parentNode?.insertBefore(newEl, position === 'after' ? el.nextSibling : el);
+    } else {
+      el.parentNode?.appendChild(newEl);
+    }
+    bindAttributes(newEl, jsxNodes.type, jsxNodes.props);
+    bindLinks(newEl);
+  }
+};

package/src/core/page-router.ts

@@ -1,7 +1,7 @@
 import { VNode } from '../jsx';
 import { isFrontEnd } from '../lib/is-frontend';
 import { PageProps } from './export-lupine';
-import { mountComponents } from './mount-components';
+import { mountInnerComponent } from './mount-component';
 import { Logger } from '../lib/logger';
 
 export type PageRouterCallback = (props: PageProps) => Promise<VNode<any> | null>;
@@ -160,7 +160,7 @@ export class PageRouter {
     if (vNode && this.framePage) {
       const selector = '.' + this.framePage.placeholderClassname;
       if (renderPartPage && isFrontEnd() && document.querySelector(selector)) {
-        await mountComponents(selector, vNode);
+        await mountInnerComponent(selector, vNode);
         return null;
       } else {
         return this.framePage.component(this.framePage.placeholderClassname, vNode);

package/src/core/{render-components.ts → render-component.ts}

@@ -25,7 +25,7 @@ function renderChildren(html: string[], children: any) {
       renderChildren(html, item);
     }
   } else if (children.type && children.props) {
-    renderComponents(children.type, children.props);
+    renderComponent(children.type, children.props);
     html.push(...children.props._html);
     children.props._html.length = 0;
   } else {
@@ -137,11 +137,11 @@ function renderAttribute(type: any, props: any, jsxNodes: any) {
 // }
 
 // The result has only one element
-export const renderComponents = (type: any, props: any) => {
+export const renderComponent = (type: any, props: any) => {
   //   logger.log("==================renderComponent", type);
   if (Array.isArray(props)) {
     const jsxNodes = { type: 'Fragment', props: { children: props } } as any;
-    renderComponents(jsxNodes.type, jsxNodes.props);
+    renderComponent(jsxNodes.type, jsxNodes.props);
     return;
   }
 
@@ -159,7 +159,7 @@ export const renderComponents = (type: any, props: any) => {
     // }
     // logger.log('==========props._result', props._result);
     if (typeof props._result.type === 'function') {
-      renderComponents(props._result.type, props._result.props);
+      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;

package/src/core/replace-innerhtml.ts

@@ -5,6 +5,14 @@ export const replaceInnerhtml = async (el: Element, newHtml: string) => {
     firstDom.parentNode?.removeChild(firstDom);
   }
 
+  await callUnload(el);
+  el.innerHTML = newHtml;
+
+  if (firstDom && firstDom.tagName === 'STYLE') {
+    el.insertBefore(firstDom, el.firstChild);
+  }
+};
+export const callUnload = async (el: Element) => {
   const promises: Promise<void>[] = [];
   el.querySelectorAll('[data-ref]').forEach((child: any) => {
     if (child._lj && child._lj.onUnload) {
@@ -12,9 +20,4 @@ export const replaceInnerhtml = async (el: Element, newHtml: string) => {
     }
   });
   await Promise.all(promises);
-  el.innerHTML = newHtml;
-
-  if (firstDom && firstDom.tagName === 'STYLE') {
-    el.insertBefore(firstDom, el.firstChild);
-  }
 };

package/src/jsx.ts

@@ -25,7 +25,8 @@ export type RefProps = {
   onUnload?: (el: Element) => Promise<void>;
   $?: any; // (selector: string) => undefined | Element,
   $all?: any; // (selector: string) => undefined | Element,
-  loadContent?: (content: string | VNode<any>) => Promise<void>;
+  mountInnerComponent?: (content: string | VNode<any>) => Promise<void>;
+  mountOuterComponent?: (content: VNode<any>) => Promise<void>;
 };
 
 export interface ClassAttributes<T> extends Attributes {

package/src/core/component-factory.ts

@@ -1,19 +0,0 @@
-import { RefProps } from '../jsx';
-import { mountComponents } from './mount-components';
-
-export class ComponentFactory {
-  private static _session: Map<Function, { [key: string]: any }> = new Map<Function, { [key: string]: any }>();
-
-  static getSession(fn: Function) {
-    let ret = this._session.get(fn);
-    if (!ret) {
-      ret = {};
-      this._session.set(fn, ret);
-    }
-    return ret;
-  }
-
-  static async refresh(fn: Function, props: any, ref: RefProps) {
-    mountComponents(ref.current!, await fn(props));
-  }
-}

package/src/core/mount-components.ts

@@ -1,42 +0,0 @@
-import { bindAttributes } from './bind-attributes';
-import { bindLinks } from './bind-links';
-import { VNode } from '../jsx';
-// import { Logger } from '../lib/logger';
-// import { bindPageResetEvent } from './page-reset-events';
-import { replaceInnerhtml } from './replace-innerhtml';
-import { renderComponents } from './render-components';
-
-// const logger = new Logger('mount-components');
-export const mountComponents = async (selector: string | null | Element, jsxNodes: VNode<any>) => {
-  renderComponents(jsxNodes.type, jsxNodes.props);
-  const el = selector && (typeof selector === 'string' ? document.querySelector(selector) : selector);
-  if (el) {
-    // call unload before releace innerHTML
-    await replaceInnerhtml(el, jsxNodes.props._html.join(''));
-
-    bindAttributes(el, jsxNodes.type, jsxNodes.props);
-    bindLinks(el);
-  }
-};
-
-// // suggest to use HtmlVar.
-// export const mountSelfComponents = async (selector: string | null | Element, jsxNodes: VNode<any>) => {
-//   renderComponents(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);
-//   }
-// };