lupine.web 1.1.1 → 1.1.3

package/package.json

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

package/src/core/bind-styles.ts

@@ -1,3 +1,4 @@
+import { uniqueIdGenerator } from 'lupine.components';
 import { CssProps } from '../jsx';
 import { getCurrentTheme, themeCookieName } from './bind-theme';
 import { camelToHyphens } from './camel-to-hyphens';
@@ -163,8 +164,18 @@ For example, it can be like this for all elements:
 
 For themes like [data-theme="dark" i], the topUniqueClassName should be empty
 */
+export const globalStyleUniqueId = uniqueIdGenerator('g'); // g means global style
+const _globalStyleIds = new Map<CssProps, string>();
+export const getGlobalStylesId = (style: CssProps): string => {
+  if (!_globalStyleIds.has(style)) {
+    const id = globalStyleUniqueId();
+    _globalStyleIds.set(style, id);
+  }
+  return _globalStyleIds.get(style)!;
+};
+
 const _globalStyle = new Map();
-export const bindGlobalStyles = (
+export const bindGlobalStyle = (
   topUniqueClassName: string,
   style: CssProps,
   forceUpdate = false,

package/src/core/index.ts

@@ -10,6 +10,7 @@ export * from './camel-to-hyphens';
 export * from './mount-component';
 export * from './page-loaded-events';
 export * from './page-router';
+export * from './render-component';
 export * from './replace-innerhtml';
 export * from './server-cookie';
 

package/src/core/initialize.ts

@@ -8,9 +8,10 @@ import { callPageLoadedEvent } from './page-loaded-events';
 import { initServerCookies } from './server-cookie';
 import { IToClientDelivery } from '../models';
 import { getMetaDataObject, getMetaDataTags, getPageTitle } from './bind-meta';
-import { initWebEnv, initWebSetting } from '../lib/web-env';
+import { initWebEnv } from '../lib/web-env';
 import { _lupineJs, PageProps, PageResultType, setRenderPageProps } from './export-lupine';
 import { isFrontEnd } from '../lib/is-frontend';
+import { WebConfig } from '../lib/web-config';
 
 const logger = new Logger('initialize');
 
@@ -26,7 +27,8 @@ const generatePage = async (props: PageProps, toClientDelivery: IToClientDeliver
   setRenderPageProps(props);
 
   initWebEnv(toClientDelivery.getWebEnv());
-  initWebSetting(toClientDelivery.getWebSetting());
+  WebConfig.initFromData(toClientDelivery.getWebSetting());
+  // initWebSetting(toClientDelivery.getWebSetting());
   initServerCookies(toClientDelivery.getServerCookie());
   // callPageResetEvent();
   callPageLoadedEvent();
@@ -57,12 +59,14 @@ const generatePage = async (props: PageProps, toClientDelivery: IToClientDeliver
 };
 _lupineJs.generatePage = generatePage;
 
-let _pageInitialized = false;
+const _initSaved = {
+  pageInitialized: false,
+};
 // this is called in the FE when the document is loaded
 // to avoid circular reference, bindLinks can't call initializePage directly
 export const initializePage = async (newUrl?: string) => {
-  const currentPageInitialized = _pageInitialized;
-  _pageInitialized = true;
+  const currentPageInitialized = _initSaved.pageInitialized;
+  _initSaved.pageInitialized = true;
   logger.log('initializePage: ', newUrl);
   if (newUrl) {
     window.history.pushState({ urlPath: newUrl }, '', newUrl);

package/src/core/render-component.ts

@@ -11,7 +11,7 @@ export const domUniqueId = uniqueIdGenerator('l'); // l means label
 //   domUniqueId(true);
 // });
 
-function renderChildren(html: string[], children: any, uniqueClassName?: string) {
+function renderChildren(html: string[], children: any, uniqueClassName?: string, globalCssId?: string) {
   if (typeof children === 'string') {
     html.push(children);
   } else if (children === false || children === null || typeof children === 'undefined') {
@@ -22,10 +22,10 @@ function renderChildren(html: string[], children: any, uniqueClassName?: string)
   } else if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       const item = children[i];
-      renderChildren(html, item, uniqueClassName);
+      renderChildren(html, item, uniqueClassName, globalCssId);
     }
   } else if (children.type && children.props) {
-    renderComponent(children.type, children.props, uniqueClassName);
+    renderComponent(children.type, children.props, uniqueClassName, globalCssId);
     html.push(...children.props._html);
     children.props._html.length = 0;
   } else {
@@ -57,7 +57,7 @@ const genUniqueId = (props: any) => {
   return props._id;
 };
 // data-refid will be assigned with a ref.id
-function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?: string) {
+function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?: string, globalCssId?: string) {
   const html = [];
   // data-refid is used for nested components like this:
   //    <div class='class-name' ref={ref} ...>...
@@ -108,7 +108,21 @@ function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?:
           // add as the first
           classNameList.unshift(props._id);
         }
-        if (uniqueClassName) {
+        if (props['ref'] && props['ref'].globalCssId && !classNameList.includes(props['ref'].globalCssId)) {
+          // add as the first
+          classNameList.unshift(props['ref'].globalCssId);
+        }
+        if (globalCssId && uniqueClassName) {
+          // &xx -> globalCssId + xx and uniqueClassName+xx
+          classNameList = classNameList.flatMap((item: string) => {
+            if (item.includes('&')) {
+              return [item.replace(/&/g, globalCssId), item.replace(/&/g, uniqueClassName)];
+            }
+            return [item];
+          });
+        } else if (globalCssId) {
+          classNameList = classNameList.map((item: string) => item.replace(/&/g, globalCssId));
+        } else if (uniqueClassName) {
           classNameList = classNameList.map((item: string) => item.replace(/&/g, uniqueClassName));
         }
         html.push(`class="${classNameList.join(' ')}"`);
@@ -125,11 +139,11 @@ function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?:
 }
 
 // The result has only one element
-export const renderComponent = (type: any, props: any, uniqueClassName?: string) => {
+export const renderComponent = (type: any, props: any, uniqueClassName?: string, globalCssId?: string) => {
   //   logger.log("==================renderComponent", type);
   if (Array.isArray(props)) {
     const jsxNodes = { type: 'Fragment', props: { children: props } } as any;
-    renderComponent(jsxNodes.type, jsxNodes.props, uniqueClassName);
+    renderComponent(jsxNodes.type, jsxNodes.props, uniqueClassName, globalCssId);
     return;
   }
 
@@ -147,7 +161,7 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
     // }
     // logger.log('==========props._result', props._result);
     if (typeof props._result.type === 'function') {
-      renderComponent(props._result.type, props._result.props, uniqueClassName);
+      renderComponent(props._result.type, props._result.props, uniqueClassName, globalCssId);
       if (props._result.props._html) {
         props._html.push(...props._result.props._html);
         props._result.props._html.length = 0;
@@ -172,7 +186,11 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
         newProps['class'] = newUniqueClassName;
       }
     }
-    const attrs = renderAttribute(newType, newProps, { type, props }, newUniqueClassName);
+    let newGlobalCssId = globalCssId;
+    if (newProps['ref'] && newProps['ref'].globalCssId) {
+      newGlobalCssId = newProps['ref'].globalCssId;
+    }
+    const attrs = renderAttribute(newType, newProps, { type, props }, newUniqueClassName, newGlobalCssId);
     if (selfClosingTags.includes(newType.toLowerCase())) {
       // for Fragment, only needs this tag when Ref is assigned
       if (newType !== 'Fragment' || newProps.ref) {
@@ -191,12 +209,12 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
         props._html.push(`<style id="sty-${newUniqueClassName}">${cssText}</style>`); // sty means style, and updateStyles has the same name
       }
 
-      if (newProps.children) {
+      if (newProps.children || newProps.children === 0) {
         // if (newProps._lb) {
         //     assignLabels(newProps._lb, newProps.children);
         // }
 
-        renderChildren(props._html, newProps.children, newUniqueClassName);
+        renderChildren(props._html, newProps.children, newUniqueClassName, newGlobalCssId);
       } else if (newProps['dangerouslySetInnerHTML']) {
         props._html.push(newProps['dangerouslySetInnerHTML']);
       } else {
@@ -208,7 +226,7 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
       }
     }
   } else if (newType.name === 'Fragment') {
-    renderChildren(props._html, newProps.children, uniqueClassName);
+    renderChildren(props._html, newProps.children, uniqueClassName, globalCssId);
   } else {
     logger.warn('Unknown type: ', type, props, newType, newProps);
   }

package/src/jsx.ts

@@ -20,6 +20,8 @@ export type Ref<T> = RefObject<T> | RefCallback<T>;
 // Ref can only apply to a DOM element (not a function component)
 export type RefProps = {
   id?: string;
+  // if a component has global styles, and also has "&" classNames, then globalCssId is needed to replace "&"
+  globalCssId?: string;
   current?: any; // Element | null,
   onLoad?: (el: Element) => Promise<void>;
   onUnload?: (el: Element) => Promise<void>;

package/src/lib/index.ts

@@ -3,4 +3,5 @@ export * from './debug-watch';
 export * from './is-frontend';
 export * from './logger';
 export * from './unique-id';
+export * from './web-config';
 export * from './web-env';

package/src/lib/web-config.ts

@@ -0,0 +1,77 @@
+import { getRenderPageProps } from 'lupine.web';
+
+// for mobile app, it needs the url to fetch the config for the first time
+export const bindWebConfigApi = (webConfigApi: string) => {
+  WebConfig.webConfigApi = webConfigApi;
+};
+
+export class WebConfig {
+  static webConfigApi = '';
+  static initialized = false;
+  static cfg: { [key: string]: string } = {};
+
+  // called from generatePage (SSR)
+  static initFromData(cfg: { [key: string]: string }) {
+    this.initialized = true;
+    this.cfg = cfg;
+  }
+
+  static async init(force?: boolean) {
+    if (this.initialized && !force) {
+      return;
+    }
+    this.initialized = true;
+
+    // For web, it's injected in the html by SSR, but for mobile, it's fetched from api
+    if (typeof document === 'object' && !force) {
+      const json = document.querySelector('#web-setting')?.textContent;
+      if (json) {
+        this.cfg = JSON.parse(json);
+        return;
+      }
+    }
+
+    if (!this.webConfigApi) {
+      console.error('WebConfig webConfigApi is not set');
+      return;
+    }
+    const url = getRenderPageProps().renderPageFunctions.baseUrl(this.webConfigApi);
+    const data = await getRenderPageProps().renderPageFunctions.fetchData(url);
+    if (data && data.json && data.json.status === 'ok') {
+      this.cfg = data.json.result;
+    } else {
+      console.error(data?.json?.message || 'Failed to get web config');
+    }
+  }
+
+  static async get(key: string, defaultValue: number): Promise<number>;
+  static async get(key: string, defaultValue: string): Promise<string>;
+  static async get(key: string, defaultValue: boolean): Promise<boolean>;
+  static async get(key: string, defaultValue: object): Promise<object>;
+  static async get(key: string, defaultValue?: any): Promise<any> {
+    await WebConfig.init();
+
+    if (typeof WebConfig.cfg[key] === 'undefined') {
+      return defaultValue;
+    }
+
+    if (typeof defaultValue === 'number') {
+      return Number.parseInt(WebConfig.cfg[key]!);
+    }
+    if (typeof defaultValue === 'boolean') {
+      return WebConfig.cfg[key]!.toLocaleLowerCase() === 'true' || WebConfig.cfg[key] === '1';
+    }
+    if (typeof defaultValue === 'object') {
+      if (typeof WebConfig.cfg[key] === 'object') {
+        return WebConfig.cfg[key];
+      }
+      try {
+        return JSON.parse(WebConfig.cfg[key]!);
+      } catch (error) {
+        console.error(`WebConfig JSON.parse error: `, error);
+      }
+      return defaultValue;
+    }
+    return WebConfig.cfg[key] || defaultValue;
+  }
+}

package/src/lib/web-env.ts

@@ -47,52 +47,53 @@ function initWebEnv(webEnv: { [key: string]: string }) {
   _webEnvInitialized = true;
 }
 
-// _webSetting is for dynamic settings that can be changed without redeploying the app
-// _webSetting is json format so the returning can be an object
-const _webSetting: { [key: string]: string } = {};
-let _webSettingInitialized = false;
-function webSetting(key: string, defaultValue: number): number;
-function webSetting(key: string, defaultValue: string): string;
-function webSetting(key: string, defaultValue: boolean): boolean;
-function webSetting(key: string, defaultValue: object): object;
-function webSetting(key: string, defaultValue: any): any {
-  // for SSR, the webSetting should be initialized. But for the FE, it should be initialized by the webSetting script tag
-  if (!_webSettingInitialized) {
-    const json = document.querySelector('#web-setting')?.textContent;
-    if (json) {
-      _webSettingInitialized = true;
-      initWebSetting(JSON.parse(json));
-    }
-  }
+// _webSetting is removed to WebConfig because for mobile app, it's async to load webconfig from an api
+// // _webSetting is for dynamic settings that can be changed without redeploying the app
+// // _webSetting is json format so the returning can be an object
+// const _webSetting: { [key: string]: string } = {};
+// let _webSettingInitialized = false;
+// function webSetting(key: string, defaultValue: number): number;
+// function webSetting(key: string, defaultValue: string): string;
+// function webSetting(key: string, defaultValue: boolean): boolean;
+// function webSetting(key: string, defaultValue: object): object;
+// function webSetting(key: string, defaultValue: any): any {
+//   // for SSR, the webSetting should be initialized. But for the FE, it should be initialized by the webSetting script tag
+//   if (!_webSettingInitialized) {
+//     const json = document.querySelector('#web-setting')?.textContent;
+//     if (json) {
+//       _webSettingInitialized = true;
+//       initWebSetting(JSON.parse(json));
+//     }
+//   }
 
-  !_webSettingInitialized && console.warn('webSetting has not been initialized yet!');
-  if (typeof _webSetting[key] === 'undefined') {
-    return defaultValue;
-  }
+//   !_webSettingInitialized && console.warn('webSetting has not been initialized yet!');
+//   if (typeof _webSetting[key] === 'undefined') {
+//     return defaultValue;
+//   }
 
-  if (typeof defaultValue === 'number') {
-    return Number.parseInt(_webSetting[key]!);
-  }
-  if (typeof defaultValue === 'boolean') {
-    return _webSetting[key]!.toLocaleLowerCase() === 'true' || _webSetting[key] === '1';
-  }
-  if (typeof defaultValue === 'object') {
-    if (typeof _webSetting[key] === 'object') {
-      return _webSetting[key];
-    }
-    try {
-      return JSON.parse(_webSetting[key]!);
-    } catch (error) {
-      console.error(`webSetting JSON.parse error: `, error);
-    }
-    return defaultValue;
-  }
-  return _webSetting[key] || defaultValue;
-}
-// this is only called from the server side for SSR
-function initWebSetting(webSetting: { [key: string]: string }) {
-  Object.assign(_webSetting, webSetting);
-  _webSettingInitialized = true;
-}
+//   if (typeof defaultValue === 'number') {
+//     return Number.parseInt(_webSetting[key]!);
+//   }
+//   if (typeof defaultValue === 'boolean') {
+//     return _webSetting[key]!.toLocaleLowerCase() === 'true' || _webSetting[key] === '1';
+//   }
+//   if (typeof defaultValue === 'object') {
+//     if (typeof _webSetting[key] === 'object') {
+//       return _webSetting[key];
+//     }
+//     try {
+//       return JSON.parse(_webSetting[key]!);
+//     } catch (error) {
+//       console.error(`webSetting JSON.parse error: `, error);
+//     }
+//     return defaultValue;
+//   }
+//   return _webSetting[key] || defaultValue;
+// }
+// // this is only called from the server side for SSR
+// function initWebSetting(webSetting: { [key: string]: string }) {
+//   Object.assign(_webSetting, webSetting);
+//   _webSettingInitialized = true;
+// }
 
-export { initWebEnv, webEnv, initWebSetting, webSetting };
+export { initWebEnv, webEnv };