@zohodesk/library-platform 1.0.0-exp.1

package/src/library/custom-component/entities/interfaces/IValidator.ts

@@ -0,0 +1,8 @@
+type IValidator = ({
+  propertySchema,
+  propertyValue
+}: {
+  propertySchema: JSON;
+  propertyValue: string;
+}) => boolean;
+export default IValidator;

package/src/library/custom-component/frameworks/json-schema-validator/validator.ts

@@ -0,0 +1,5 @@
+import Ajv from "ajv";
+let jsonValidator = new Ajv();
+export default function validator(schema, value) {
+  return jsonValidator.validate(schema, value);
+}

package/src/library/custom-component/frameworks/object-path-immutable/ImmutableHelper.ts

@@ -0,0 +1,3 @@
+import * as immutable from "object-path-immutable";
+
+class ImmutableHelper {}

package/src/library/custom-component/frameworks/ui/Compare.ts

@@ -0,0 +1,41 @@
+function isDeepEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
+
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
+    return false;
+  }
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+  for (let key of keys1) {
+    if (!keys2.includes(key) || !isDeepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export default class Compare {
+  static diffPropertiesNames(obj1, obj2) {
+    if (Object.keys(obj1).length === Object.keys(obj2).length) {
+      const c = Object.keys(obj1).filter(key => {
+        const v1 = obj1[key];
+        const v2 = obj2[key];
+        return !isDeepEqual(v1, v2);
+      });
+      return c;
+    }
+    return [];
+  }
+
+  static shallowCompare(obj1, obj2) {
+    if (Object.keys(obj1).length === Object.keys(obj2).length) {
+      return Object.keys(obj1).some(key => {
+        const v1 = obj1[key];
+        const v2 = obj2[key];
+        return !isDeepEqual(v1, v2);
+      });
+    }
+    return false;
+  }
+}

package/src/library/custom-component/frameworks/ui/ComponentRegistry.ts

@@ -0,0 +1,26 @@
+// import ComponentModel from '@cc/component/component';
+type ComponentModel = any;
+
+class ComponentRegistry {
+  private static instance: ComponentRegistry;
+  private components: Map<string, ComponentModel> = new Map<string, ComponentModel>();
+
+  private constructor() {}
+
+  static getInstance(): ComponentRegistry {
+    if (!ComponentRegistry.instance) {
+      ComponentRegistry.instance = new ComponentRegistry();
+    }
+    return ComponentRegistry.instance;
+  }
+
+  register(name: string, component: ComponentModel) {
+    this.components.set(name, component);
+  }
+
+  get(name: string): ComponentModel | undefined {
+    return this.components.get(name);
+  }
+}
+
+export default ComponentRegistry.getInstance();

package/src/library/custom-component/frameworks/ui/createCustomComponent.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef } from "react";
+import ComponentCC from "../../../../cc/component/component";
+import createDependencies from "./dependencyFactory";
+import PresenterOutputPort from "../../usecases/interfaces/output/OutputBoundary";
+import EventManager from "../../adapters/gateways/event-manager/EventManager";
+import Compare from "./Compare";
+
+const createCustomComponent = (input: ComponentCC) => {
+  class Component extends React.Component {
+    controller: any;
+    elementRef: Element;
+    state: any;
+    presenter: PresenterOutputPort;
+    eventManager: EventManager;
+    View: any;
+    helpers: {
+      updateProperties: Function;
+      updateState: Function;
+      dispatch: Function;
+    };
+    constructor(props) {
+      super(props);
+      this.state = null;
+      let { controller, presenter, eventManager } = createDependencies({
+        updateState: (state) => {
+          //hack initial render
+          if (this.state == null) {
+            this.state = state;
+          } else {
+            this.setState(() => state);
+          }
+        },
+      });
+      this.presenter = presenter;
+      this.controller = controller;
+      this.eventManager = eventManager;
+      eventManager.name = input.name;
+      this.helpers = {
+        updateState: this.controller.updateState.bind(controller),
+        updateProperties: this.controller.updateProperties.bind(controller),
+        dispatch: this.controller.dispatch.bind(controller),
+      };
+      this.controller.initialize({
+        ...input,
+        newProps: props,
+        helpers: this.helpers,
+      });
+      this.View = forwardRef(input.View); //need to analyse react forwardref, removed from hoc
+    }
+    componentDidMount() {
+      this.controller.mount();
+    }
+    shouldComponentUpdate(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean {
+      return Compare.shallowCompare(this.props, nextProps) || Compare.shallowCompare(this.state, nextState);
+    }
+    componentWillUnmount() {
+      this.controller.unmount();
+    }
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+      console.log("Error", error, errorInfo, errorInfo.componentStack);
+    }
+    componentDidUpdate(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+      snapshot?: any
+    ): void {
+      this.controller.updateProperties(this.props);
+    }
+    // shouldComponentUpdate(
+    //   nextProps: Readonly<{}>,
+    //   nextState: Readonly<{}>,
+    //   nextContext: any
+    // ): boolean {
+    //   /* need to move usecase */
+    //   let a = !shallowCompare(this.props, nextProps);
+    //   return a;
+    // }
+    render() {
+      let View = this.View;
+      
+      if (this.state.error) {
+        console.log(this.state.error);
+        return <div>error</div>;
+      } else
+        return (
+          <View
+            ref={this.eventManager.setElement.bind(this.eventManager)}
+            helpers={this.helpers}
+            state={this.state}
+          />
+        );
+    }
+  }
+  // Component.prototype = input.View.propTypes;
+  return Component;
+};
+export default createCustomComponent;

package/src/library/custom-component/frameworks/ui/dependencyFactory.ts

@@ -0,0 +1,25 @@
+import Presenter from "../../adapters/presenters/Presenter";
+import Service from "../../adapters/gateways/service/Service";
+import Controller from "../../adapters/controllers/Controller";
+import Repository from "../../adapters/gateways/repository/Repository";
+import jsonValidator from "../../adapters/gateways/validator/jsonValidator";
+import validator from "../json-schema-validator/validator";
+import EventManager from "../../adapters/gateways/event-manager/EventManager";
+
+export default function dependencyFactory({ updateState }) {
+  let repository = new Repository();
+  let presenter = new Presenter({ updateState });
+  let eventManager = new EventManager();
+  const service = new Service({
+    presenter,
+    repository,
+    jsonValidator: jsonValidator(validator),
+    eventManager
+  });
+  const controller = new Controller(service);
+  return {
+    controller,
+    presenter,
+    eventManager
+  };
+}

package/src/library/custom-component/index.ts

@@ -0,0 +1 @@
+export { default as createCustomComponent } from "./frameworks/ui/createCustomComponent";

package/src/library/custom-component/usecases/entities-factory/BehavioursFactory.ts

@@ -0,0 +1,37 @@
+import Component from "../../../../cc/component/component";
+import Behaviour from "../../entities/Behaviour";
+import IBehaviour from "../../entities/interfaces/IBehaviour";
+import EventHandlersFactory from "./EventHandlersFactory";
+import PropertiesFactory from "./PropertiesFactory";
+let n = 0
+function BehavioursFactory(input: Component): Array<IBehaviour> {
+  let behaviours = input.behaviours || [];
+
+  return behaviours.map((behaviour) => {
+    // will be removed in future
+    if (behaviour.actionHandlers) {
+      // console.error(input.name, " ==> actionHandlers was deprecated, use eventHandlers instead");
+      // !n++ && console.clear(); 
+      behaviour.eventHandlers = behaviour.actionHandlers
+    }
+    const { eventHandlers } = behaviour;
+    let newEventHandlers = Object.keys(eventHandlers).reduce((res, next) => {
+      let key = next;
+      if (["MOUNT", "UN_MOUNT", "UPDATE_PROPERTIES"].includes(next)) {
+        key = input.name + "#" + next;
+      }
+      res[key] = eventHandlers[next];
+      return res;
+    }, {});
+
+    return new Behaviour({
+      name: behaviour.name,
+      eventHandlers: EventHandlersFactory(newEventHandlers),
+      properties: PropertiesFactory({
+        properties: behaviour.properties,
+      }),
+      setIntialState: behaviour.setInitialState,
+    });
+  });
+}
+export default BehavioursFactory;

package/src/library/custom-component/usecases/entities-factory/ComponentFactory.ts

@@ -0,0 +1,42 @@
+import HelpersCC from "../../../../cc/component/Helpers";
+import ComponentCC from "../../../../cc/component/component";
+import Component from "../../entities/Component";
+import LifeCycleAction from "../../entities/LifeCycleAction";
+import State from "../../entities/State";
+import EventHandlersFactory from "./EventHandlersFactory";
+import BehavioursFactory from "./BehavioursFactory";
+import PropertiesFactory from "./PropertiesFactory";
+let defaultTransformState = (state) => state;
+export default function createComponentFactory(
+  input: ComponentCC,
+  helpers: HelpersCC
+): Component {
+
+  let component = new Component();
+  let lifeCycleAction = new LifeCycleAction(input.name);
+  let behaviours = BehavioursFactory(input);
+
+  component.setName(input.name);
+  component.setLifeCycleAction(lifeCycleAction);
+  component.setProperties(
+    PropertiesFactory({
+      properties: input.properties,
+      componentName: input.name
+    })
+  );
+
+  // will be removed in future
+  if (input.actionHandlers) {
+    // console.error(input.name, " ==> actionHandlers was deprecated, use eventHandlers instead");
+    input.eventHandlers = input.actionHandlers
+  }
+
+  component.setEventHandlers(EventHandlersFactory(input.eventHandlers));
+  component.setState(new State());
+  component.setBehaviours(behaviours);
+  component.createEventHandlers(helpers);
+  component.setStateInitializer(input.setInitialState);
+  component.setTransformer(input.transformState || defaultTransformState);
+
+  return component;
+}

package/src/library/custom-component/usecases/entities-factory/EventHandlersFactory.ts

@@ -0,0 +1,10 @@
+import EventHandlers from "../../entities/EventHandlers";
+
+export default function EventHandlersFactory(eventHandlers): EventHandlers {
+  let eventHandlerMap = new Map();
+  Object.keys(eventHandlers).forEach((key) => {
+    eventHandlerMap.set(key, eventHandlers[key]);
+  });
+
+  return new EventHandlers(eventHandlerMap);
+}

package/src/library/custom-component/usecases/entities-factory/PropertiesFactory.ts

@@ -0,0 +1,13 @@
+import Properties from "../../entities/Properties";
+import Property from "../../entities/Property";
+
+export default function PropertiesFactory({ properties, componentName }): Properties {
+  let propertyMap = new Map();
+  Object.keys(properties).forEach((key) => {
+    let property = new Property(properties[key]);
+    propertyMap.set(key, property);
+  });
+
+  let propertiesObject = new Properties(propertyMap, componentName);
+  return propertiesObject;
+}

package/src/library/custom-component/usecases/interactors/AbstractUseCase.ts

@@ -0,0 +1,8 @@
+import InputDependencies from "../interfaces/InputDependencies";
+import UseCase from "../interfaces/UseCase";
+
+abstract class AbstractUseCase<InputModel> implements UseCase<InputModel> {
+  constructor(protected dependencies: InputDependencies) {}
+  abstract execute(inputModel: InputModel): void;
+}
+export default AbstractUseCase;

package/src/library/custom-component/usecases/interactors/DispatchUseCase.ts

@@ -0,0 +1,18 @@
+import DispatchInputModel from "../interfaces/input/DispatchInputModel";
+import AbstractUseCase from "./AbstractUseCase";
+
+class DispatchUseCase extends AbstractUseCase<DispatchInputModel> {
+  public execute(input: DispatchInputModel): void {
+    let { repository, presenter, eventManager } = this.dependencies;
+    let component = repository.getComponent();
+
+    try {
+      let action = component.constructAction(input);
+      eventManager.dispatch(action);
+    } catch (e) {
+      presenter.setError([e]);
+    }
+  }
+}
+
+export default DispatchUseCase;

package/src/library/custom-component/usecases/interactors/InitializeUseCase.ts

@@ -0,0 +1,23 @@
+import createComponent from "../entities-factory/ComponentFactory";
+import InitailizeInputModel from "../interfaces/input/InitailizeInputModel";
+import AbstractUseCase from "./AbstractUseCase";
+
+class InitializeUseCase extends AbstractUseCase<InitailizeInputModel> {
+  public execute(input: InitailizeInputModel): void {
+    let { presenter, jsonValidator, repository } = this.dependencies;
+    let component = createComponent(input, input.helpers);
+    try {
+      // console.log("input.newProps", input.newProps);
+      component.init(jsonValidator, input.newProps);
+      let state = component.getState();
+      // console.log("this state", state);
+      presenter.render(state);
+    } catch (e) {
+      presenter.setError(e);
+    } finally {
+      repository.save(component);
+    }
+  }
+}
+
+export default InitializeUseCase;

package/src/library/custom-component/usecases/interactors/MountUseCase.ts

@@ -0,0 +1,18 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class MountUsecase extends AbstractUseCase<void> {
+  public execute() {
+    let { repository, presenter, eventManager } = this.dependencies;
+    let component = repository.getComponent();
+    let mountAction = component.getMountAction();
+    let eventHandlers = component.getEventHandlersWrapper();
+    try {
+      eventManager.subscribe(eventHandlers);
+      eventManager.dispatch(mountAction);
+    } catch (e) {
+      presenter.setError([e]);
+    }
+  }
+}
+
+export default MountUsecase;

package/src/library/custom-component/usecases/interactors/UnmountUseCase.ts

@@ -0,0 +1,18 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class UnmountUsecase extends AbstractUseCase<void> {
+  public execute() {
+    let { repository, presenter, eventManager } = this.dependencies;
+    let component = repository.getComponent();
+    let eventHanlders = component.getEventHandlers();
+    let unmountAction = component.getUnmountAction();
+    try {
+      eventManager.unSubscribe(eventHanlders);
+      eventManager.dispatch(unmountAction);
+      repository.clear();
+    } catch (e) {
+      presenter.setError([]);
+    }
+  }
+}
+export default UnmountUsecase;

package/src/library/custom-component/usecases/interactors/UpdatePropertyUseCase.ts

@@ -0,0 +1,24 @@
+import UpdatePropertiesInputModel from "../interfaces/input/UpdatePropertiesInputModel";
+import AbstractUseCase from "./AbstractUseCase";
+
+class UpdatePropertyUseCase extends AbstractUseCase<UpdatePropertiesInputModel> {
+  public execute(newProps: UpdatePropertiesInputModel) {
+    let { repository, jsonValidator, eventManager, presenter } =
+      this.dependencies;
+    let component = repository.getComponent();
+    let properties = component.getProperties();
+    let isUpdated = component.updateProperties(jsonValidator, newProps);
+    // console.log("isUpdated", isUpdated);
+    if (isUpdated) {
+      let updatedProperties = component.getProperties();
+      let state = component.getState();
+      let updatePropertyAction = component.getPropertyUpdateAction({
+        currentProperties: updatedProperties,
+        previousProperties: properties
+      });
+      eventManager.dispatch(updatePropertyAction);
+      presenter.render(state);
+    }
+  }
+}
+export default UpdatePropertyUseCase;

package/src/library/custom-component/usecases/interactors/UpdateStateUseCase.ts

@@ -0,0 +1,13 @@
+import UpdateStateInputModel from "../interfaces/input/UpdateStateInputModel";
+import AbstractUseCase from "./AbstractUseCase";
+
+class UpdateStateUseCase extends AbstractUseCase<UpdateStateInputModel> {
+  public execute(newState: UpdateStateInputModel) {
+    let { repository, presenter } = this.dependencies;
+    let component = repository.getComponent();
+    component.updateState(newState);
+    let state = component.getState();
+    presenter.render(state);
+  }
+}
+export default UpdateStateUseCase;

package/src/library/custom-component/usecases/interfaces/InputDependencies.ts

@@ -0,0 +1,13 @@
+import IEventManager from "./gateways/IEventManager";
+import Repository from "./gateways/IRepository";
+import IValidator from "./gateways/IJSONValidator";
+import OutputBoundary from "./output/OutputBoundary";
+
+type InputDependencies = {
+  presenter: OutputBoundary;
+  repository: Repository;
+  jsonValidator: IValidator;
+  eventManager: IEventManager;
+};
+
+export default InputDependencies;

package/src/library/custom-component/usecases/interfaces/OutputDependencies.ts

@@ -0,0 +1,5 @@
+type OutputDependencies = {
+  updateState: Function;
+  setInitialState: Function;
+};
+export default OutputDependencies;

package/src/library/custom-component/usecases/interfaces/UseCase.ts

@@ -0,0 +1,4 @@
+interface UseCase<T> {
+  execute(input: T): void;
+}
+export default UseCase;

package/src/library/custom-component/usecases/interfaces/gateways/IEventManager.ts

@@ -0,0 +1,12 @@
+interface IElement {
+  addEventListener: (key: string, fn: Function) => void;
+  removeEventListener: (key: string, fn: Function) => void;
+}
+interface IEventManager {
+  getElement: () => IElement;
+  setElement: (element: IElement) => void;
+  subscribe: (actionHandlers: Map<string, Array<Function>>) => void;
+  unSubscribe: (actionHandlers: Map<string, Array<Function>>) => void;
+  dispatch: (event) => void;
+}
+export default IEventManager;

package/src/library/custom-component/usecases/interfaces/gateways/IJSONValidator.ts

@@ -0,0 +1,8 @@
+type IJSONValidator = ({
+  propertySchema,
+  propertyValue
+}: {
+  propertySchema: JSON;
+  propertyValue: any;
+}) => boolean;
+export default IJSONValidator;

package/src/library/custom-component/usecases/interfaces/gateways/IRepository.ts

@@ -0,0 +1,9 @@
+import Component from "../../../entities/interfaces/IComponent";
+
+interface IRepository {
+  save: (value: Component) => void;
+  getComponent: () => Component;
+  clear: () => void;
+}
+
+export default IRepository;

package/src/library/custom-component/usecases/interfaces/gateways/IService.ts

@@ -0,0 +1,15 @@
+import UseCase from "../UseCase";
+import DispatchInputModel from "../input/DispatchInputModel";
+import InitailizeInputModel from "../input/InitailizeInputModel";
+import UpdatePropertiesInputModel from "../input/UpdatePropertiesInputModel";
+import UpdateStateInputModel from "../input/UpdateStateInputModel";
+
+interface IService {
+  initializeUseCase: UseCase<InitailizeInputModel>;
+  mountUseCase: UseCase<void>;
+  unmountUseCase: UseCase<void>;
+  updatePropertiesUseCase: UseCase<UpdatePropertiesInputModel>;
+  updateStateUseCase: UseCase<UpdateStateInputModel>;
+  dispatchUseCase: UseCase<DispatchInputModel>;
+}
+export default IService;

package/src/library/custom-component/usecases/interfaces/input/DispatchInputModel.ts

@@ -0,0 +1,4 @@
+import { ActionHandlerParams } from "../../../../../cc/component/ActionHandlers.ts";
+
+type DispatchInputModel = ActionHandlerParams;
+export default DispatchInputModel;

package/src/library/custom-component/usecases/interfaces/input/InitailizeInputModel.ts

@@ -0,0 +1,5 @@
+import Helpers from "../../../../../cc/component/Helpers";
+import Component from "../../../../../cc/component/component";
+
+type InitailizeInputModel = Component & { helpers: Helpers; newProps: any };
+export default InitailizeInputModel;

package/src/library/custom-component/usecases/interfaces/input/UpdatePropertiesInputModel.ts

@@ -0,0 +1,2 @@
+type UpdatePropertiesInputModel = any;
+export default UpdatePropertiesInputModel;

package/src/library/custom-component/usecases/interfaces/input/UpdateStateInputModel.ts

@@ -0,0 +1,2 @@
+type UpdateStateInputModel = any;
+export default UpdateStateInputModel;

package/src/library/custom-component/usecases/interfaces/output/OutputBoundary.ts

@@ -0,0 +1,6 @@
+interface OutputBoundary {
+  setError: (error: Array<string>) => void;
+  render: (state: any) => void;
+}
+
+export default OutputBoundary;

package/src/library/dot/components/action-location/adapters/controllers/MountController.ts

@@ -0,0 +1,15 @@
+import { EventHandlerParams } from '@cc/component/EventHandlers';
+import InitializeUseCase from '../../usecases/interactors/InitializeUseCase';
+import IController from '@cc/architecture/IController';
+
+export default class MountController implements IController<EventHandlerParams> {
+  constructor(protected initializeUseCase: InitializeUseCase) {
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input: EventHandlerParams) {
+    const { host, dispatch, state, updateState } = input;
+    this.initializeUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.initializeUseCase.execute();
+  }
+}

package/src/library/dot/components/action-location/adapters/controllers/PropertiesChangeController.ts

@@ -0,0 +1,20 @@
+import { EventHandlerParams } from '@cc/component/EventHandlers';
+import PropertiesChangeUseCase from '../../usecases/interactors/PropertiesChangeUseCase';
+import IController from '@cc/architecture/IController';
+
+export default class PropertiesChangeController implements IController<EventHandlerParams> {
+  constructor(protected propertiesChangeUseCase: PropertiesChangeUseCase) {
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input: EventHandlerParams) {
+    const { host, dispatch, state, action, updateState } = input;
+    const { currentProperties, previousProperties } = action.payload;
+
+    this.propertiesChangeUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.propertiesChangeUseCase.execute({
+      currentActions: currentProperties.actions,
+      previousActions: previousProperties.actions
+    });
+  }
+}

package/src/library/dot/components/action-location/adapters/controllers/UnmountController.ts

@@ -0,0 +1,15 @@
+import { EventHandlerParams } from '@cc/component/EventHandlers';
+import DestroyUseCase from '../../usecases/interactors/DestroyUseCase';
+import IController from '@cc/architecture/IController';
+
+export default class UnmountController implements IController<EventHandlerParams> {
+  constructor(protected destroyUseCase: DestroyUseCase) {
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input: EventHandlerParams) {
+    const { host, dispatch, state, updateState } = input;
+    this.destroyUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.destroyUseCase.execute();
+  }
+}

package/src/library/dot/components/action-location/adapters/gateway/Repository.ts

@@ -0,0 +1,26 @@
+import ActionLocationEntity from '../../entities/ActionLocationEntity';
+import ActionViewModel from '../../entities/interfaces/ActionViewModel';
+import IRepository from '../../usecases/interfaces/gateways/IRepository';
+
+export default class Repository implements IRepository {
+  private element: HTMLElement | null;
+  private dispatch: Function;
+  private state: { properties: { actions: ActionViewModel[] }; handlers: object };
+
+  constructor() {
+    this.element = null;
+  }
+
+  updateDependencies(element: HTMLElement, state, dispatch: Function) {
+    this.element = element;
+    this.dispatch = dispatch;
+    this.state = state;
+  }
+
+  getActionLocation(): ActionLocationEntity {
+    const { actions } = this.state.properties;
+    const { handlers } = this.state;
+    const actionLocation = new ActionLocationEntity(handlers, actions, this.element, this.dispatch);
+    return actionLocation;
+  }
+}