@zohodesk/library-platform 1.1.10 → 1.1.12

package/es/library/custom-component/domain/entities/Component.js

@@ -1,25 +1,75 @@
+/* eslint-disable complexity */
 import EventHandler from "./EventHandler";
+import { ERROR_OCCURRED_SUFFIX, ErrorCodes } from "../../../../cc/component/ErrorStructure";
 export default class Component {
-  constructor() {
-    this._behavioursProperties = {};
+  currentError = null;
+
+  constructor(componentProperties) {
+    this.componentProperties = componentProperties;
   }
 
-  getAllBehavioursPropertiesWithValue() {
-    let output = {};
-    Object.keys(this._behavioursProperties).forEach((value, key) => {
-      output[value] = this._behavioursProperties[value].getValue();
-    });
-    return output;
+  setLogger(logger) {
+    this.logger = logger;
   }
 
   mergeStateAndProps() {
     return { ...this._state.getState(),
-      properties: { ...this._properties.getAllPropertiesValue(),
-        ...this.getAllBehavioursPropertiesWithValue()
-      }
+      properties: this.componentProperties.getAllPropertiesValue()
     };
   }
 
+  hasBreakingError() {
+    return !!this.currentError?.errorDetails?.isBreaking;
+  }
+
+  canSkipDispatchingEvent(eventName) {
+    if (!this.hasBreakingError()) {
+      return false;
+    } // TODO: eventName.endsWith('UPDATE_PROPERTIES')
+
+
+    if (eventName.endsWith(ERROR_OCCURRED_SUFFIX)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  setError(error) {
+    error && this.logger.logError(error);
+
+    if (this.hasBreakingError()) {
+      return;
+    }
+
+    this.currentError = error;
+  }
+
+  getClassifiedErrorStructure(error) {
+    if (error instanceof Error) {
+      return {
+        code: ErrorCodes.UNKNOWN_ERROR,
+        message: error.message,
+        errorDetails: {
+          isBreaking: true,
+          originalError: error
+        }
+      };
+    } // if ((error as ErrorStructure).code) {
+
+
+    return error; // }
+    // return this.currentError;
+  }
+
+  getPublicErrorEvent(error) {
+    const payload = this.getClassifiedErrorStructure(error);
+    return this.constructAction({
+      type: `${this._name}${ERROR_OCCURRED_SUFFIX}`,
+      payload
+    });
+  }
+
   getName() {
     return this._name;
   }
@@ -55,10 +105,6 @@ export default class Component {
     return state;
   }
 
-  setProperties(properties) {
-    this._properties = properties;
-  }
-
   setEvents(_events) {
     this._events = _events;
   }
@@ -89,57 +135,10 @@ export default class Component {
 
   setBehaviours(behaviours) {
     this._behaviours = behaviours;
-    /* store behaviour properties */
-
-    this._behaviours.forEach(behaviour => {
-      behaviour.getProperties().data && behaviour.getProperties().data.forEach(obj => {
-        this._behavioursProperties[obj.getName()] = obj.clone();
-      });
-    });
   }
 
-  updateProperties(jsonValidator, newProps, schemaValidator) {
-    const entries = Object.fromEntries(this._properties.data.entries());
-    let property = entries === undefined ? {} : entries;
-    let propertyValue = newProps === undefined ? {} : newProps;
-
-    let isBhvrErrorVisible = this._properties.validateRequiredProperty(schemaValidator, this._behavioursProperties, propertyValue);
-
-    let isCompErrorVisible = this._properties.validateRequiredProperty(schemaValidator, property, propertyValue);
-
-    let isChanged = false;
-    Object.keys(newProps).forEach(key => {
-      let property = null;
-
-      if (this._behavioursProperties[key]) {
-        property = this._behavioursProperties[key];
-      } else if (this._properties.findProperty(key)) {
-        property = this._properties.findProperty(key);
-      }
-
-      if (property) {
-        const optionalSchema = property.getTypeMetadata().schema;
-        const propertyValue = newProps[key] === undefined ? property.getDefaultValue() : newProps[key];
-
-        const isValid = this._properties.validateSingleProperty(jsonValidator, key, propertyValue, optionalSchema);
-
-        if (isValid) {
-          isChanged = property.updateValue(newProps[key]) || isChanged;
-        }
-        /* return isValid */
-
-      } else {
-        throw new Error(`props '${key}' not exist `);
-      }
-    });
-
-    if (isBhvrErrorVisible && isCompErrorVisible) {
-      throw "";
-    }
-    /* return this._properties.updateAllPropertiesValue(jsonValidator, newProps); */
-
-
-    return isChanged;
+  updateProperties(jsonValidator, newProps) {
+    return this.componentProperties.validateAndUpdateProperties(jsonValidator, newProps);
   }
 
   updateState(state) {
@@ -158,15 +157,9 @@ export default class Component {
     return allBehavioursInitialState;
   }
 
-  init(jsonValidator, newProps, schemaValidator) {
-    this.updateProperties(jsonValidator, newProps, schemaValidator);
-
-    const properties = this._properties.getAllPropertiesValue();
-
-    const behavioursProperties = this.getAllBehavioursPropertiesWithValue();
-    let allProperties = { ...properties,
-      ...behavioursProperties
-    };
+  init(jsonValidator, newProps) {
+    this.updateProperties(jsonValidator, newProps);
+    const allProperties = this.componentProperties.getAllPropertiesValue();
     const behaviours = this.getAllBehavioursInitialState(allProperties);
 
     const initialState = this._stateInitializer({
@@ -179,9 +172,7 @@ export default class Component {
   }
 
   getProperties() {
-    return { ...this._properties.getAllPropertiesValue(),
-      ...this.getAllBehavioursPropertiesWithValue()
-    };
+    return this.componentProperties.getAllPropertiesValue();
   }
 
   getEventHandlersWrapper() {
@@ -210,12 +201,27 @@ export default class Component {
         let eventHandler = new EventHandler(key, event => {
           let state = this.getHandlerState();
           let action = event.detail;
-          actionHandler({
-            action,
-            host: event.currentTarget,
-            state,
-            ...helpers
-          });
+
+          try {
+            actionHandler({
+              action,
+              host: event.currentTarget,
+              state,
+              ...helpers
+            });
+          } catch (e) {
+            const error = {
+              code: ErrorCodes.EVENT_HANDLER_FAILED,
+              message: 'Error occurred in event handler for event ' + key,
+              errorDetails: {
+                isBreaking: false,
+                eventName: key,
+                event: action,
+                originalError: e instanceof Error ? e : undefined
+              }
+            };
+            helpers.dispatch(this.getPublicErrorEvent(error));
+          }
         });
 
         if (!eventHandlerMap.has(key)) {
@@ -241,7 +247,7 @@ export default class Component {
   constructAction(input) {
     let action = { ...input,
       payload: { ...input.payload,
-        ...this._properties.getAppendToActionPayloadProperty()
+        ...this.componentProperties.getAppendToActionPayloadProperty()
       }
     };
     return action;

package/es/library/custom-component/domain/entities/ComponentProperties.js

@@ -0,0 +1,119 @@
+/* eslint-disable complexity */
+import { ErrorCodes } from "../../../../cc/component/ErrorStructure";
+export default class ComponentProperties {
+  constructor(componentName, properties, behaviours) {
+    this.componentName = componentName;
+    this.properties = properties;
+    this.behaviours = behaviours;
+    this.behavioursProperties = {};
+    /* store behaviour properties */
+
+    this.behaviours.forEach(behaviour => {
+      const cloneMap = behaviour.getPropertiesClone();
+      this.behavioursProperties = { ...this.behavioursProperties,
+        ...cloneMap
+      };
+    });
+  }
+
+  getAllBehavioursPropertiesWithValue() {
+    const output = {};
+    Object.keys(this.behavioursProperties).forEach(propertyName => {
+      output[propertyName] = this.behavioursProperties[propertyName].getValue();
+    });
+    return output;
+  }
+
+  getAllPropertiesValue() {
+    return { ...this.properties.getAllPropertiesValue(),
+      ...this.getAllBehavioursPropertiesWithValue()
+    };
+  }
+
+  getAllPropertiesKeys() {
+    const propKeys = this.properties.getAllPropertiesKeys();
+    const bhvrKeys = Object.keys(this.behavioursProperties);
+    return [...propKeys, ...bhvrKeys];
+  }
+
+  validateAndUpdateProperties(jsonValidator, newProps) {
+    const {
+      isValid,
+      validationResults
+    } = this.validateProperties(jsonValidator, newProps);
+
+    if (!isValid) {
+      throw {
+        code: ErrorCodes.PROPERTY_VALIDATION_FAILED,
+        message: `Properties validation failed for component ${this.componentName}`,
+        errorDetails: {
+          isBreaking: true,
+          validationResults: validationResults.filter(result => result.errors?.length > 0 || result.warnings?.length > 0)
+        }
+      };
+    }
+
+    return this.updateProperties(newProps);
+  }
+
+  updateProperties(newProps) {
+    const allProperties = this.getAllPropertiesKeys();
+    let isChanged = false;
+    allProperties.forEach(key => {
+      const property = this.findProperty(key);
+
+      if (property) {
+        isChanged = property.updateValue(newProps[key]) || isChanged;
+      }
+    });
+    return isChanged;
+  }
+
+  getExtraPropertiesError(propertyName) {
+    return {
+      key: propertyName,
+      isValid: false,
+      warnings: [{
+        keyword: 'extra',
+        message: 'Property is not allowed',
+        params: {}
+      }],
+      errors: [],
+      value: undefined,
+      schema: {}
+    };
+  }
+
+  validateProperties(validator, newProps) {
+    const allProperties = this.getAllPropertiesKeys();
+    const validationResults = [];
+    allProperties.forEach(propertyName => {
+      const property = this.findProperty(propertyName);
+
+      if (property) {
+        const result = property.validateProperty(validator, newProps[propertyName]);
+        validationResults.push(result);
+      } else {
+        validationResults.push(this.getExtraPropertiesError(propertyName));
+      }
+    });
+    const isValid = validationResults.every(result => result.isValid);
+    return {
+      isValid,
+      validationResults
+    };
+  }
+
+  findProperty(propertyName) {
+    if (this.behavioursProperties[propertyName]) {
+      return this.behavioursProperties[propertyName];
+    }
+
+    return this.properties.findProperty(propertyName);
+  }
+
+  getAppendToActionPayloadProperty() {
+    return this.properties.getAppendToActionPayloadProperty();
+  }
+
+}

package/es/library/custom-component/domain/entities/Logger.js

@@ -0,0 +1,99 @@
+import { ErrorCodes } from "../../../../cc/component/ErrorStructure";
+// const ERROR_TITLE: string = 'color: red; font-weight: bold;';
+const ERROR_PRIMARY = 'color: #FF6F61;font-weight: bold';
+const ERROR_SECONDARY = 'color: #FFA500;font-weight: initial'; // const LOG_TITLE: string = 'color: gray; font-weight: bold;';
+
+const LOG_PRIMARY = 'color: #55c355;font-weight: bold';
+const LOG_SECONDARY = 'color: #5a9de9;font-weight: bold';
+export default class Logger {
+  constructor(componentName) {
+    this.componentName = componentName;
+  } // eslint-disable-next-line max-lines-per-function
+
+
+  logPropertiesValidation(validationResults) {
+    if (__DEVELOPMENT__) {
+      console.group(`%cProperties Validation: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, validationResults);
+      validationResults.forEach(_ref => {
+        let {
+          key,
+          errors,
+          warnings,
+          value
+        } = _ref;
+        errors?.forEach(error => {
+          this.printResult(key, error, 'error');
+        });
+        warnings?.forEach(warning => {
+          this.printResult(key, warning, 'warning');
+        });
+        console.log('%cBut, Given is:', 'color: white;font-weight: bold;', {
+          [key]: value
+        });
+      });
+      console.groupEnd();
+    }
+  }
+
+  logError(error) {
+    if (__DEVELOPMENT__) {
+      console.log('Logging Error in ComponentProperties - logError');
+
+      if (error.code === ErrorCodes.PROPERTY_VALIDATION_FAILED) {
+        this.logPropertiesValidation(error.errorDetails?.validationResults);
+        return;
+      }
+
+      console.group(`%cError Occurred: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, error);
+      console.error(`%cError Code: %c${error.code}`, ERROR_PRIMARY, ERROR_SECONDARY);
+      console.error(`%cError Message: %c${error.message}`, ERROR_PRIMARY, ERROR_SECONDARY);
+
+      if (error.errorDetails?.originalError) {
+        console.error(error.errorDetails.originalError);
+      }
+
+      console.groupEnd();
+    }
+  }
+
+  printResult(key, errorOrWarning, type) {
+    if (__DEVELOPMENT__) {
+      const log = type === 'error' ? console.error : console.warn;
+
+      if (errorOrWarning.dataPath) {
+        log(`Invalid Property %c${key}%c${errorOrWarning.dataPath} %c${errorOrWarning.message}`, ERROR_PRIMARY, ERROR_SECONDARY, 'color: white;');
+        return;
+      }
+
+      log(`Invalid Property %c${key} : %c${errorOrWarning.message}`, ERROR_PRIMARY, 'color: white;');
+    }
+  }
+
+  eventNameConsoleStyle(type) {
+    const index = type.indexOf('#');
+    return {
+      msg: '%c' + type.slice(0, index) + '%c' + type.slice(index),
+      styles: [LOG_PRIMARY, LOG_SECONDARY]
+    };
+  }
+
+  isLoggingEnabled() {
+    // @ts-ignore
+    return __DEVELOPMENT__ && globalThis.enableEventLogging;
+  }
+
+  isLoggingEnabledAndTypePresent(type) {
+    return this.isLoggingEnabled() && type;
+  }
+
+  logEvent(type, data) {
+    if (__DEVELOPMENT__ && this.isLoggingEnabledAndTypePresent(type)) {
+      const {
+        msg,
+        styles: nameStyles
+      } = this.eventNameConsoleStyle(type);
+      console.log(`%cEvent ${msg}`, 'font-weight: bold', ...nameStyles, data);
+    }
+  }
+
+}

package/es/library/custom-component/domain/entities/Properties.js

@@ -8,7 +8,7 @@ export default class Properties {
     this.data = properties;
     this.data.set('appendToActionPayload', new Property(defaultAppendToActionPayload));
     this.data.set('getRef', new Property(getRefPropertySchema));
-    typeof properties.get("slotName") === "undefined" && this.data.set('slotName', new Property(defaultSlotNameAppend));
+    typeof properties.get('slotName') === 'undefined' && this.data.set('slotName', new Property(defaultSlotNameAppend));
   }
 
   getAllPropertiesValue() {
@@ -20,152 +20,25 @@ export default class Properties {
 
     return convertedObject;
   }
-  /* break value object*/
 
-
-  updateAllPropertiesValue(validator, propertyValue) {
-    // this.validateProperties(validator, propertyValue);
-    if (!this.isEqual(propertyValue)) {
-      let isChanged = false;
-      Object.keys(propertyValue).forEach(key => {
-        let property = this.findProperty(key);
-
-        if (property.getValue() == null || property.getValue() == undefined) {
-          // property.updateValue(propertyValue[key]);
-          isChanged = true;
-        } else if (property.getValue() != propertyValue[key]) {
-          // property.updateValue(propertyValue[key]);
-          isChanged = true;
-        }
-      });
-      return isChanged;
-    }
-
-    return false;
+  getAllPropertiesKeys() {
+    return Array.from(this.data.keys());
   }
 
-  isEqual(newProps) {
-    let isShallow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-    if (isShallow) {
-      return this.shallowCompareWithNewObject(newProps);
-    }
-
-    return false;
+  findProperty(key) {
+    return this.data.get(key);
   }
 
-  validateProperties(validator, newProps) {
-    let errors = [];
-    Object.keys(newProps).forEach(key => {
-      this.validate(validator, key, newProps[key], errors);
+  getPropertiesClone() {
+    const clonedMap = {};
+    this.data.forEach(obj => {
+      clonedMap[obj.getName()] = obj.clone();
     });
-
-    if (errors.length > 0) {
-      this.handleValidationErrors(errors);
-    }
-
-    return true;
-  }
-
-  validate(validator, key, value, errors) {
-    if (!this.data.has(key)) {
-      throw new Error(this.componentName + ` props '${key}' not exist `);
-    }
-
-    let property = this.data.get(key);
-    let schema = property.getTypeMetadata().schema;
-    let isValid;
-
-    try {
-      isValid = validator(schema, value);
-    } catch (error) {
-      isValid = false;
-    }
-
-    if (!isValid) {
-      const error = {
-        key: key,
-        componentName: this.componentName,
-        value: value,
-        schema: schema
-      };
-      errors.push(error);
-    }
-  }
-
-  handleValidationErrors(errors) {
-    console.log('Property validation failed', this.componentName, errors);
-    throw new Error('Property validation failed');
-  }
-
-  getSchema(key, optionalSchema) {
-    if (optionalSchema) {
-      return optionalSchema;
-    }
-
-    return this.data.get(key).getTypeMetadata().schema;
-  }
-
-  validateRequiredProperty(validator, properties, newProps) {
-    let errorWarn = validator(properties, newProps);
-    let isErrorVisible = false;
-
-    if (errorWarn.warnings && errorWarn.warnings.length > 0) {
-      errorWarn.warnings.forEach(warning => {
-        console.warn(`%c Property Validation Warnings in %c ${this.componentName}%c :\n${warning}`, 'font-weight: initial', 'color: #FF6F61;font-weight: bold', 'color: #FFA500;font-weight: initial');
-      });
-    }
-
-    if (errorWarn.errors && errorWarn.errors.length > 0) {
-      console.error(`%c Property Validation Errors in %c ${this.componentName}%c :\n${errorWarn.errors.join('\n')}`, 'font-weight: initial', 'color: #FF6F61;font-weight: bold', 'color: #FFF;font-weight: initial');
-      isErrorVisible = true;
-    }
-
-    return isErrorVisible;
-  }
-
-  validateSingleProperty(validator, onePropKey, onePropValue, optionalSchema) {
-    let schema = this.getSchema(onePropKey, optionalSchema); // INFO: Validate the property adheres to its schema
-
-    const {
-      isValid,
-      errors
-    } = validator(schema, onePropValue);
-
-    if (!isValid) {
-      const error = {
-        key: onePropKey,
-        componentName: this.componentName,
-        value: onePropValue,
-        isValid,
-        errors,
-        schema: schema
-      };
-      console.error('Property validation failed', error);
-      throw new Error('Property validation failed');
-    }
-
-    return true;
-  }
-
-  findProperty(key) {
-    return this.data.get(key);
+    return clonedMap;
   }
 
   getAppendToActionPayloadProperty() {
     return this.data.get('appendToActionPayload').getValue();
   }
 
-  shallowCompareWithNewObject(obj1) {
-    const keys1 = Object.keys(obj1);
-
-    for (let key of keys1) {
-      if (!this.data.has(key) || obj1[key] !== this.data.get(key).getValue()) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
 }

package/es/library/custom-component/domain/entities/Property.js

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 export default class Property {
   constructor(_ref) {
     let {
@@ -40,6 +41,34 @@ export default class Property {
     return isChanged;
   }
 
+  getSchemaForValidation(value) {
+    return {
+      required: this.required,
+      isValueProvided: value !== undefined,
+      defaultValue: this.defaultValue,
+      name: this.name,
+      schema: this.getTypeMetadata().schema
+    };
+  }
+
+  validateProperty(validator, value) {
+    const propertySchema = this.getSchemaForValidation(value);
+    const propertyValue = !propertySchema.isValueProvided ? this.getDefaultValue() : value;
+    const {
+      isValid,
+      errors,
+      warnings
+    } = validator(propertySchema, propertyValue);
+    return {
+      key: this.name,
+      isValid,
+      errors,
+      warnings,
+      schema: propertySchema,
+      value: propertyValue
+    };
+  }
+
   clone() {
     return new Property({
       name: this.name,