lupine.web 1.0.14

package/src/lib/observable.ts

@@ -0,0 +1,188 @@
+// inspired by rxjs
+
+export class Subscription {
+  private _unsubscribe;
+  constructor(unsubscribe: () => void) {
+    this._unsubscribe = unsubscribe;
+  }
+  unsubscribe(): void {
+    if (this._unsubscribe) {
+      this._unsubscribe();
+    }
+  }
+}
+
+export class Observable<T> {
+  constructor() {}
+  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription {
+    throw new Error('subscribe is not implemented');
+  }
+}
+
+export class Subject<T> extends Observable<T> {
+  private observers: {
+    next?: (value: T) => void;
+    error?: (error: any) => void;
+    complete?: () => void;
+  }[] = [];
+  private isStopped = false;
+  private _hasError = false;
+  private passLastMsgWhenSubscribe;
+  private lastSaved: { [key: string]: T } = {};
+
+  constructor(passLastMsgWhenSubscribe = false) {
+    super();
+    this.passLastMsgWhenSubscribe = passLastMsgWhenSubscribe;
+  }
+
+  next(value?: T) {
+    if (this.isStopped) {
+      throw new Error('Subject is closed');
+    }
+
+    const len = this.observers.length;
+    const copy = this.observers.slice();
+    for (let i = 0; i < len; i++) {
+      const item = copy[i].next;
+      if (typeof item !== 'undefined' && typeof value !== 'undefined') {
+        item(value);
+      }
+    }
+    if (this.passLastMsgWhenSubscribe) {
+      if (typeof value !== 'undefined') {
+        this.lastSaved['value'] = value;
+      }
+    }
+  }
+
+  error(err: any) {
+    if (this.isStopped) {
+      throw new Error('Subject is closed');
+    }
+
+    this._hasError = true;
+    this.isStopped = true;
+    const len = this.observers.length;
+    const copy = this.observers.slice();
+    for (let i = 0; i < len; i++) {
+      const item = copy[i].error;
+      if (typeof item !== 'undefined' && typeof err !== 'undefined') {
+        item(err);
+      }
+    }
+    this.observers.length = 0;
+  }
+
+  complete() {
+    if (this.isStopped) {
+      throw new Error('Subject is closed');
+    }
+
+    this.isStopped = true;
+    const copy = this.observers.slice();
+    const len = copy.length;
+    for (let i = 0; i < len; i++) {
+      const item = copy[i].complete;
+      if (typeof item !== 'undefined') {
+        item();
+      }
+    }
+    if (this.observers.length != len) {
+      console.warn(`Subscribe count changed from ${len} to ${this.observers.length}`);
+    }
+    this.observers.length = 0;
+  }
+
+  hasError() {
+    return this._hasError;
+  }
+
+  private unsubscribe(observer: {}) {
+    const index = this.observers.findIndex((item) => item === observer);
+    if (index > -1) {
+      this.observers.splice(index, 1);
+    }
+  }
+
+  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription {
+    if (this.isStopped) {
+      throw new Error('Subject is stopped');
+    }
+
+    const observer = {
+      next,
+      error,
+      complete,
+    };
+    this.observers.push(observer);
+    if (this.passLastMsgWhenSubscribe) {
+      if (typeof observer.next !== 'undefined' && typeof this.lastSaved['value'] !== 'undefined') {
+        observer.next(this.lastSaved['value']);
+      }
+    }
+    const ret = new Subscription(() => {
+      this.unsubscribe(observer);
+    });
+    return ret;
+  }
+
+  asObservable(): Observable<T> {
+    return this as Observable<T>;
+  }
+}
+
+// /*[TEST-START]*/
+// function TEST_sample() {
+//   const flag = new Subject(true);
+//   const observable1 = flag.asObservable();
+//   const unsubscribeA = observable1.subscribe(
+//     (next) => {
+//       console.log('A', next);
+//     },
+//     (error) => {
+//       console.log('A error:', error);
+//     }
+//   );
+//   const unsubscribeB = observable1.subscribe(
+//     (next) => {
+//       console.log('B', next);
+//     },
+//     (error) => {
+//       console.log('B error:', error);
+//     }
+//   );
+
+//   flag.next('test 1');
+//   unsubscribeA.unsubscribe();
+//   flag.next('test 2');
+//   flag.error('error 1');
+// }
+// TEST_sample();
+/*[TEST-END]*/
+
+// const flag: BehaviorSubject<Date>;
+// getFlag(): Observable<Date> {
+//     return this.flag.asObservable();
+// }
+// setFlag(flag) {
+//     this.flag.next(flag);
+// }
+
+// getAll(): Observable<string[]> {
+//     this.labelsSubject = new ReplaySubject(1);
+//     this.http.get().subscribe(result => {
+//         this.labelsSubject.next(result);
+//     });
+
+//     return new Observable<string[]>(observer => {
+//         this.labelsSubject.subscribe(result => {
+//             observer.next(result);
+//             observer.complete();
+//         }, error => {
+//             observer.error(error);
+//         });
+//     });
+// }
+
+// getAll().subscribe(labels => labels.push(res));
+// sub.unsubscribe()

package/src/lib/promise-timeout.ts

@@ -0,0 +1 @@
+export const promiseTimeout = (delayMs: number) => new Promise((resolve) => setTimeout(resolve, delayMs));

package/src/lib/simple-storage.ts

@@ -0,0 +1,40 @@
+// This class is used by both BE and FE (cookie for SSR).
+export class SimpleStorage {
+  private settings: { [key: string]: string } = {};
+
+  constructor(settings: { [key: string]: string }) {
+    this.settings = settings;
+  }
+
+  contains(key: string): boolean {
+    return key in this.settings;
+  }
+  set(key: string, value: string) {
+    return (this.settings[key] = value);
+  }
+  get(key: string, defaultValue: string): string {
+    return key in this.settings ? this.settings[key] : defaultValue;
+  }
+  getInt(key: string, defaultValue: number): number {
+    if (key in this.settings) {
+      const i = parseInt(this.settings[key]);
+      if (!isNaN(i)) {
+        return i;
+      }
+    }
+    return defaultValue;
+  }
+  getBoolean(key: string, defaultValue: boolean): boolean {
+    return key in this.settings
+      ? this.settings[key] === '1' || this.settings[key].toLowerCase() === 'true'
+      : defaultValue;
+  }
+  getJson(key: string, defaultValue: object): object {
+    if (key in this.settings) {
+      try {
+        return JSON.parse(this.settings[key]);
+      } catch (error) {}
+    }
+    return defaultValue;
+  }
+}

package/src/lib/stop-propagation.ts

@@ -0,0 +1,7 @@
+export const stopPropagation = (event: any) => {
+  if (!event) return;
+  if (event.stopPropagation) event.stopPropagation();
+  if (event.preventDefault) event.preventDefault();
+  event.cancelBubble = true;
+  event.returnValue = false;
+};

package/src/lib/unique-id.ts

@@ -0,0 +1,39 @@
+/**
+ * Sample:
+ *   const domUniqueId = uniqueIdGenerator('lj');
+ *   const id1 = domUniqueId();
+ *   const id2 = domUniqueId();
+ * @param preKey
+ * @returns A function to generate Unique Ids
+ */
+// export function uniqueIdGenerator2(preKey: string) {
+//   let count = 0;
+//   let diff = '';
+//   return function (reset = false): string {
+//     if (reset) {
+//       count = 0;
+//       diff = '';
+//     }
+//     if (count > 9999999999999999) {
+//       count = 0;
+//       diff = Math.round(new Date().getTime() / 1000).toString(36) + '-';
+//     }
+//     count++;
+//     return `${preKey}${diff}${count.toString(36)}`;
+//   };
+// }
+
+export function uniqueIdGenerator(preKey: string) {
+  let count = 0;
+  let lastKey = Math.round(new Date().getTime() / 1000).toString(36);
+  return function (): string {
+    const key = Math.round(new Date().getTime() / 1000).toString(36);
+    if (key !== lastKey) {
+      count = 0;
+      lastKey = key;
+    } else {
+      count++;
+    }
+    return `${preKey}${lastKey}${count.toString(36)}`;
+  };
+}

package/src/lib/upload-file.ts

@@ -0,0 +1,68 @@
+const _saveChunkSize = {
+  size: 1024 * 500,
+};
+export const setChunkSize = (chunkSize: number) => {
+  _saveChunkSize.size = chunkSize;
+};
+export const getChunkSize = () => {
+  return _saveChunkSize.size;
+};
+export const checkUploadedFileSize = async (uploadUrl: string) => {
+  const response = await fetch(uploadUrl + '?check-size=1', {
+    method: 'POST',
+  });
+  const json = await response.json();
+  return json && json.size ? json.size : 0;
+};
+
+// should return { chunkNumber: number }
+export const uploadFileChunk = async (
+  chunk: any,
+  chunkNumber: number,
+  totalChunks: number,
+  uploadUrl: string,
+  key: string
+) => {
+  // this must be the FE so we can use fetch
+  let url = uploadUrl + (uploadUrl.indexOf('?') === -1 ? '?' : '');
+  url += `&chunkNumber=${chunkNumber.toString()}`;
+  url += `&totalChunks=${totalChunks.toString()}`;
+  if (key) {
+    url += `&key=${key}`;
+  }
+  const response = await fetch(url, {
+    method: 'POST',
+    body: chunk,
+  });
+  const json = await response.json();
+  return json;
+};
+
+export const uploadFile = async (
+  file: File,
+  uploadUrl: string,
+  progressFn?: (percentage: number, chunkNumber: number, totalChunks: number) => void,
+  chunkSize = _saveChunkSize.size
+) => {
+  // const uploadedSize = await checkUploadedFileSize(uploadUrl);
+  let key = '';
+  if (file.size <= chunkSize) {
+    return await uploadFileChunk(file, 0, 1, uploadUrl, key);
+  }
+
+  const totalChunks = Math.ceil(file.size / chunkSize);
+  for (let i = 0; i < totalChunks; i++) {
+    const start = i * chunkSize;
+    const end = Math.min((i + 1) * chunkSize, file.size);
+    const chunk = file.slice(start, end);
+    const uploaded = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key);
+    if (!uploaded || uploaded.chunkNumber === i.toString() || !uploaded.key) {
+      return false;
+    }
+    key = uploaded.key;
+    if (progressFn) {
+      progressFn(Math.round(((i + 1) / totalChunks) * 100) / 100, i, totalChunks);
+    }
+  }
+  return true;
+};

package/src/lib/web-env.ts

@@ -0,0 +1,98 @@
+// _webEnv is from process.env and _webSetting is from config.json (public and can be changed)
+// _webEnv is for env variables used by the FE
+// For SSR, the initWebEnv needs to be called from server side
+const _webEnv: { [key: string]: string } = {};
+let _webEnvInitialized = false;
+function webEnv(key: string, defaultValue: number): number;
+function webEnv(key: string, defaultValue: string): string;
+function webEnv(key: string, defaultValue: boolean): boolean;
+function webEnv(key: string, defaultValue: object): object;
+function webEnv(key: string, defaultValue: any): any {
+  // for SSR, the webEnv should be initialized. But for the FE, it should be initialized by the webEnv script tag
+  if (!_webEnvInitialized) {
+    const json = document.querySelector('#web-env')?.textContent;
+    if (json) {
+      _webEnvInitialized = true;
+      initWebEnv(JSON.parse(json));
+    }
+  }
+
+  !_webEnvInitialized && console.warn('webEnv has not been initialized yet!');
+  if (typeof _webEnv[key] === 'undefined') {
+    return defaultValue;
+  }
+
+  if (typeof defaultValue === 'number') {
+    return Number.parseInt(_webEnv[key]!);
+  }
+  if (typeof defaultValue === 'boolean') {
+    return _webEnv[key]!.toLocaleLowerCase() === 'true' || _webEnv[key] === '1';
+  }
+  if (typeof defaultValue === 'object') {
+    if (typeof _webEnv[key] === 'object') {
+      return _webEnv[key];
+    }
+    try {
+      return JSON.parse(_webEnv[key]!);
+    } catch (error) {
+      console.error(`webEnv JSON.parse error: `, error);
+    }
+    return defaultValue;
+  }
+  return _webEnv[key] || defaultValue;
+}
+// this is only called from the server side for SSR
+function initWebEnv(webEnv: { [key: string]: string }) {
+  Object.assign(_webEnv, webEnv);
+  _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));
+    }
+  }
+
+  !_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;
+}
+
+export { initWebEnv, webEnv, initWebSetting, webSetting };

package/src/models/index.ts

@@ -0,0 +1,2 @@
+export * from './simple-storage-props';
+export * from './to-client-delivery-props';

package/src/models/simple-storage-props.ts

@@ -0,0 +1,9 @@
+// This class is used by both BE and FE (cookie for SSR).
+export interface ISimpleStorage {
+  contains(key: string): boolean;
+  set(key: string, value: string): void;
+  get(key: string, defaultValue: string): string;
+  getInt(key: string, defaultValue: number): number;
+  getBoolean(key: string, defaultValue: boolean): boolean;
+  getJson(key: string, defaultValue: object): object;
+}

package/src/models/to-client-delivery-props.ts

@@ -0,0 +1,8 @@
+import { ISimpleStorage } from './simple-storage-props';
+
+export interface IToClientDelivery {
+  getWebEnv(): { [k: string]: string };
+  getWebSetting(): { [k: string]: string };
+  getServerCookie(): ISimpleStorage;
+  // getLang(): { [k: string]: string };
+}