lupine.web 1.1.2 → 1.1.4

package/package.json

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

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

@@ -209,7 +209,7 @@ 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);
         // }

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,79 @@
+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();
+
+    const v = WebConfig.cfg[key];
+    if (typeof v === 'undefined') {
+      return defaultValue;
+    }
+
+    if (typeof defaultValue === 'number') {
+      return Number.parseInt(v!);
+    }
+    if (typeof defaultValue === 'boolean') {
+      return v!.toLocaleLowerCase() === 'true' || v === '1';
+    }
+    if (typeof defaultValue === 'object') {
+      if (typeof v === 'object') {
+        return v;
+      }
+      try {
+        return JSON.parse(v!);
+      } catch (error) {
+        console.error(`WebConfig JSON.parse error: `, error);
+      }
+      return defaultValue;
+    }
+    // if empty, then return default value
+    return v || 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 };