Architecture

Compared to version 1, the widget-editor v2 was built with a strong architecture in mind. We wanted to achieve a better separation of concerns, and the possibility to use the editor with other sources of data.

Below you will find some high level details about the architecture, as well as how the packages are organised in a monorepo structure.

Table of content

• High level architecture
• Monorepo structure

High level architecture

The widget-editor is built on a loose MVP (Model - View - Presenter) pattern where the model is the adapter, the view is the widget-editor or the Renderer component, and the presenter is the core package.

The diagram above shows how each package interacts with the other. This isn't an exact representation but rather a general overview of the dependencies.

In order to have the adapters swappable, they must all extend an interface defined in the @widget-editor/types package. As such, the core doesn't directly import an adapter, but it receives one from the widget-editor component. The interface makes sure the core knows how to get data, without having knowledge about the actual implementation.

Monorepo structure

The repository is set up as a monorepo that is managed with Lerna. The packages are separated in three folders:

• src/adapters/ where all the first-party adapters are located
• src/applications/ where the UI components are available (widget-editor and Renderer)
• src/packages/ where the core, the types, the eslint configuration and others are stored

As a general rule of thumb, the files in src/adapters/ are in Javascript or JSX, and the files in src/adapters/ and src/packages/ are written in Typescript.