Refactor Form Viewer and Editor for Extensibility and Testability

[philippfromme]

The current structure of both the form viewer and editor doesn't allow any extensibility and makes testing features in isolation impossible.

┌──────────────────────────┐            ┌───────────────────────────┐
│  API                     │            │  API                      │
│                          │            │                           │
│  #createForm             │            │  #createFormEditor        │
│                          │            │                           │
└──────────────────────────┘            └───────────────────────────┘

┌──────────────────────────┐            ┌───────────────────────────┐
│  form-js-viewer          │            │  form-js-editor           │
│                          │            │                           │
│ ┌──────────────────────┐ │            │ ┌───────────────────────┐ │
│ │Rendering             │ │            │ │Rendering              │ │
│ └──────────────────────┘ │            │ └───────────────────────┘ │
│                          │            │                           │
│ ┌──────────────────────┐ │            │ ┌───────────────────────┐ │
│ │Event Bus             │ │            │ │Event Bus              │ │
│ └──────────────────────┘ │  Contains  │ └───────────────────────┘ │
│                          ├───────────►│                           │
│ ┌──────────────────────┐ │            │ ┌───────────────────────┐ │
│ │Element Registry      │ │            │ │Element Registry       │ │
│ └──────────────────────┘ │            │ └───────────────────────┘ │
│                          │            │                           │
│ ┌──────────────────────┐ │            │ ┌───────────────────────┐ │
│ │Data Mapping          │ │            │ │Data Mapping           │ │
│ └──────────────────────┘ │            │ └───────────────────────┘ │
│                          │            │                           │
└──────────────────────────┘            │ ┌───────────────────────┐ │
                                        │ │Modeling               │ │
                                        │ └───────────────────────┘ │
                                        │                           │
                                        │ ┌───────────────────────┐ │
                                        │ │Palette                │ │
                                        │ └───────────────────────┘ │
                                        │                           │
                                        │ ┌───────────────────────┐ │
                                        │ │Properties Panel       │ │
                                        │ └───────────────────────┘ │
                                        │                           │
                                        │ ┌───────────────────────┐ │
                                        │ │Selection              │ │
                                        │ └───────────────────────┘ │
                                        │                           │
                                        └───────────────────────────┘

With the diagram-js-based bpmn-js and the table-js-based dmn-js we have solved these issues using dependency injection. Separating the features into individual DI services makes extensibility and testability possible.

Steps

• [x] introduce dependency injection similar to diagram-js using didi
• [x] separate features into individual DI services
  • [x] core
  • [x] rendering
  • [x] element registry
  • [x] event bus
  • [x] modeling
  • [x] palette
  • [x] properties panel
  • [x] selection
  • [x] data mapping (currently baked into the individual form fields e.g. https://github.com/bpmn-io/form-js/blob/master/packages/form-js-viewer/src/rendering/fields/DefaultRenderer.js#L30)
• [x] verify extensibility and testability

Additional questions:

• should we merge the form-js-viewer and form-js-editor packages into a single package? bpmn-js doesn't contain multiple packages and the multiple packages in dmn-js are entirely different.

Follow-up issues:

• Adjust API to Separate Instantiation and Import
• Add attachTo and detach API
• Add Undo/Redo to Editor

[philippfromme]

Closed via https://github.com/bpmn-io/form-js/pull/75.