@zohodesk/library-platform 1.1.9 → 1.1.10-exp.2

package/es/library/custom-component/applications/usecases/DispatchUseCase.js

@@ -1,19 +1,42 @@
+/* eslint-disable max-lines-per-function */
+
+/* eslint-disable complexity */
+import { ACA_ERROR_OCCURRED } from "../../../../cc/component/ErrorStructure";
 import AbstractUseCase from "./AbstractUseCase";
 
 class DispatchUseCase extends AbstractUseCase {
   execute(input) {
-    let {
+    const {
       repository,
       presenter,
       eventManager
     } = this.dependencies;
-    let component = repository.getComponent();
+    const component = repository.getComponent();
+
+    if (component.canSkipDispatchingEvent(input.type)) {
+      return;
+    }
 
     try {
-      let action = component.constructAction(input);
-      eventManager.dispatch(action);
+      if (input.type === ACA_ERROR_OCCURRED) {
+        const {
+          payload
+        } = input;
+
+        if (payload.errorDetails?.isBreaking) {
+          component.setError(payload);
+          presenter.setError(payload);
+        }
+
+        const action = component.getPublicErrorEvent(payload);
+        eventManager.dispatch(action);
+      } else {
+        const action = component.constructAction(input);
+        eventManager.dispatch(action);
+      }
     } catch (e) {
-      presenter.setError([e]);
+      component.setError(e);
+      presenter.setError(e);
     }
   }
 

package/es/library/custom-component/applications/usecases/InitializeUseCase.js

@@ -6,17 +6,18 @@ class InitializeUseCase extends AbstractUseCase {
     let {
       presenter,
       jsonValidator,
-      repository,
-      schemaValidator
+      repository
     } = this.dependencies;
     let component = createComponent(input, input.helpers);
 
     try {
-      component.init(jsonValidator, input.newProps, schemaValidator);
+      component.init(jsonValidator, input.newProps);
       let state = component.getState();
       presenter.render(state);
     } catch (e) {
-      presenter.setError(e);
+      const error = component.getClassifiedErrorStructure(e);
+      component.setError(error);
+      presenter.setError(error);
     } finally {
       repository.save(component);
     }

package/es/library/custom-component/applications/usecases/MountUseCase.js

@@ -2,20 +2,24 @@ import AbstractUseCase from "./AbstractUseCase";
 
 class MountUsecase extends AbstractUseCase {
   execute() {
-    let {
+    const {
       repository,
       presenter,
       eventManager
     } = this.dependencies;
-    let component = repository.getComponent();
-    let mountAction = component.getMountAction();
-    let eventHandlers = component.getEventHandlersWrapper();
+    const component = repository.getComponent();
+    const mountAction = component.getMountAction();
+    const eventHandlers = component.getEventHandlersWrapper();
 
     try {
       eventManager.subscribe(eventHandlers);
-      eventManager.dispatch(mountAction);
+
+      if (!component.hasBreakingError()) {
+        eventManager.dispatch(mountAction);
+      }
     } catch (e) {
-      presenter.setError([e]);
+      component.setError(e);
+      presenter.setError(e);
     }
   }
 

package/es/library/custom-component/applications/usecases/SetRefUseCase.js

@@ -0,0 +1,31 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class SetRefUseCase extends AbstractUseCase {
+  execute(_ref) {
+    let {
+      ref
+    } = _ref;
+    const {
+      repository,
+      presenter,
+      eventManager
+    } = this.dependencies;
+    const component = repository.getComponent();
+    const eventHandlers = component.getEventHandlersWrapper();
+
+    try {
+      if (eventManager.isDifferentElement(ref)) {
+        eventManager.unSubscribe(eventHandlers);
+        eventManager.setElement(ref);
+        eventManager.subscribe(eventHandlers);
+      }
+    } catch (e) {
+      const error = component.getClassifiedErrorStructure(e);
+      component.setError(error);
+      presenter.setError(error);
+    }
+  }
+
+}
+
+export default SetRefUseCase;

package/es/library/custom-component/applications/usecases/UnmountUseCase.js

@@ -2,21 +2,22 @@ import AbstractUseCase from "./AbstractUseCase";
 
 class UnmountUsecase extends AbstractUseCase {
   execute() {
-    let {
+    const {
       repository,
       presenter,
       eventManager
     } = this.dependencies;
-    let component = repository.getComponent();
-    let eventHanlders = component.getEventHandlers();
-    let unmountAction = component.getUnmountAction();
+    const component = repository.getComponent();
+    const eventHanlders = component.getEventHandlers();
+    const unmountAction = component.getUnmountAction();
 
     try {
       eventManager.dispatch(unmountAction);
       eventManager.unSubscribe(eventHanlders);
       repository.clear();
     } catch (e) {
-      presenter.setError([]);
+      component.setError(null);
+      presenter.setError(null);
     }
   }
 

package/es/library/custom-component/applications/usecases/UpdatePropertyUseCase.js

@@ -2,29 +2,34 @@ import AbstractUseCase from "./AbstractUseCase";
 
 class UpdatePropertyUseCase extends AbstractUseCase {
   execute(newProps) {
-    let {
+    const {
       repository,
       jsonValidator,
       eventManager,
-      presenter,
-      schemaValidator
+      presenter
     } = this.dependencies;
-    let component = repository.getComponent();
-    let properties = component.getProperties();
-    let isUpdated = component.updateProperties(jsonValidator, newProps, schemaValidator);
+    const component = repository.getComponent();
 
-    if (isUpdated) {
-      let updatedProperties = component.getProperties();
-      let state = component.getState();
-      presenter.render(state);
-      let updatePropertyAction = component.getPropertyUpdateAction({
-        currentProperties: updatedProperties,
-        previousProperties: properties
-      });
-      eventManager.dispatch(updatePropertyAction);
-      eventManager.dispatch(component.getStateUpdatedAction({
-        state
-      }));
+    try {
+      const properties = component.getProperties();
+      const isUpdated = component.updateProperties(jsonValidator, newProps);
+
+      if (isUpdated) {
+        const updatedProperties = component.getProperties();
+        const state = component.getState();
+        presenter.render(state);
+        const updatePropertyAction = component.getPropertyUpdateAction({
+          currentProperties: updatedProperties,
+          previousProperties: properties
+        });
+        eventManager.dispatch(updatePropertyAction);
+        eventManager.dispatch(component.getStateUpdatedAction({
+          state
+        }));
+      }
+    } catch (error) {
+      component.setError(error);
+      presenter.setError(error);
     }
   }
 

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.js

@@ -7,15 +7,16 @@ class UpdateStateUseCase extends AbstractUseCase {
       presenter,
       eventManager
     } = this.dependencies;
-    let component = repository.getComponent(); // let preState=component.getState();
-    // console.log(`preState ${component.getName()}`,preState)
+    let component = repository.getComponent();
+    let preState = component.getState(); // console.log(`preState ${component.getName()}`,preState)
 
     component.updateState(newState);
     let state = component.getState(); // console.log(`newState ${component.getName()}`,state)
 
     presenter.render(state);
     eventManager.dispatch(component.getStateUpdatedAction({
-      state
+      state,
+      preState
     }));
   }
 

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

@@ -1,5 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 class Behaviour {
   constructor(_ref) {
     let {
@@ -8,15 +6,6 @@ class Behaviour {
       setIntialState,
       eventHandlers
     } = _ref;
-
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "properties", void 0);
-
-    _defineProperty(this, "setIntialState", void 0);
-
-    _defineProperty(this, "eventHandlers", void 0);
-
     this.name = name;
     this.properties = properties;
     this.setIntialState = setIntialState;
@@ -31,6 +20,10 @@ class Behaviour {
     return this.properties;
   }
 
+  getPropertiesClone() {
+    return this.properties.getPropertiesClone();
+  }
+
   getEventHandlers() {
     return this.eventHandlers;
   }

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

@@ -1,47 +1,73 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+/* eslint-disable complexity */
 import EventHandler from "./EventHandler";
+import { ERROR_OCCURRED_SUFFIX, ErrorCodes } from "../../../../cc/component/ErrorStructure";
 export default class Component {
-  constructor() {
-    _defineProperty(this, "_name", void 0);
+  currentError = null;
 
-    _defineProperty(this, "_events", void 0);
+  constructor(componentProperties) {
+    this.componentProperties = componentProperties;
+  }
 
-    _defineProperty(this, "_properties", void 0);
+  setLogger(logger) {
+    this.logger = logger;
+  }
 
-    _defineProperty(this, "_lifeCycleAction", void 0);
+  mergeStateAndProps() {
+    return { ...this._state.getState(),
+      properties: this.componentProperties.getAllPropertiesValue()
+    };
+  }
 
-    _defineProperty(this, "_eventHandlers", void 0);
+  hasBreakingError() {
+    return !!this.currentError?.errorDetails?.isBreaking;
+  }
 
-    _defineProperty(this, "_tranformer", void 0);
+  canSkipDispatchingEvent(eventName) {
+    if (!this.hasBreakingError()) {
+      return false;
+    } // TODO: eventName.endsWith('UPDATE_PROPERTIES')
 
-    _defineProperty(this, "_stateInitializer", void 0);
 
-    _defineProperty(this, "_state", void 0);
+    if (eventName.endsWith(ERROR_OCCURRED_SUFFIX)) {
+      return false;
+    }
 
-    _defineProperty(this, "_eventHandlersWrapper", void 0);
+    return true;
+  }
 
-    _defineProperty(this, "_behaviours", void 0);
+  setError(error) {
+    error && this.logger.logError(error);
 
-    _defineProperty(this, "_behavioursProperties", void 0);
+    if (this.hasBreakingError()) {
+      return;
+    }
 
-    this._behavioursProperties = {};
+    this.currentError = error;
   }
 
-  getAllBehavioursPropertiesWithValue() {
-    let output = {};
-    Object.keys(this._behavioursProperties).forEach((value, key) => {
-      output[value] = this._behavioursProperties[value].getValue();
-    });
-    return output;
+  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;
   }
 
-  mergeStateAndProps() {
-    return { ...this._state.getState(),
-      properties: { ...this._properties.getAllPropertiesValue(),
-        ...this.getAllBehavioursPropertiesWithValue()
-      }
-    };
+  getPublicErrorEvent(error) {
+    const payload = this.getClassifiedErrorStructure(error);
+    return this.constructAction({
+      type: `${this._name}${ERROR_OCCURRED_SUFFIX}`,
+      payload
+    });
   }
 
   getName() {
@@ -79,10 +105,6 @@ export default class Component {
     return state;
   }
 
-  setProperties(properties) {
-    this._properties = properties;
-  }
-
   setEvents(_events) {
     this._events = _events;
   }
@@ -113,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) {
@@ -182,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({
@@ -203,9 +172,7 @@ export default class Component {
   }
 
   getProperties() {
-    return { ...this._properties.getAllPropertiesValue(),
-      ...this.getAllBehavioursPropertiesWithValue()
-    };
+    return this.componentProperties.getAllPropertiesValue();
   }
 
   getEventHandlersWrapper() {
@@ -234,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)) {
@@ -265,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,120 @@
+/* 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) {
+      // console.log({ isValid, componentName: this.componentName, validationResults });
+      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/Event.js

@@ -1,13 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 class Event {
   constructor(type) {
     let payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    _defineProperty(this, "type", void 0);
-
-    _defineProperty(this, "payload", void 0);
-
     this.type = type;
     this.payload = payload;
   }

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

@@ -1,11 +1,5 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class EventHandler {
   constructor(key, handler) {
-    _defineProperty(this, "handler", void 0);
-
-    _defineProperty(this, "key", void 0);
-
     this.key = key;
     this.handler = handler;
   }

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

@@ -1,16 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 export default class LifeCycleAction {
   constructor(name) {
-    _defineProperty(this, "mount", void 0);
-
-    _defineProperty(this, "unmount", void 0);
-
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "contructUpdatePropertiesAction", void 0);
-
     this.name = name;
     this.mount = {
       type: `${name}#${LifeCycleEvents.MOUNT}`