🔀 Merge pull request #1618 from jovotech/v4/dev

🔖 Prepare latest release

Author: jankoenig

clients/client-web-vue2/package-lock.json

@@ -428,6 +428,53 @@ class YourComponent extends BaseComponent {
 
 ## Advanced Component Features
 
+### Type Safety
+
+You can pass the following interfaces and types to `BaseComponent`:
+
+- [Component options](#component-options)
+- [Component data](#component-data)
+- Component events when [delegating to a component](./handlers.md#delegate-to-components)
+
+For example, this could look like this:
+
+```typescript
+import { Component, BaseComponent, ComponentConfig, ComponentData } from '@jovotech/framework';
+
+export interface YourComponentConfig extends ComponentConfig {
+  someKey: string;
+}
+
+export interface YourComponentData extends ComponentData {
+  someKey: string;
+}
+
+export enum YourComponentEvents {
+  Yes = 'onYes',
+  No = 'onNo',
+}
+
+class YourComponent extends BaseComponent<YourComponentData, YourComponentConfig, YourComponentEvents> {
+  // ...
+}
+```
+
+You don't need to pass all three elements:
+
+```typescript
+import { Component, BaseComponent } from '@jovotech/framework';
+
+export enum YourComponentEvents {
+  Yes = 'onYes',
+  No = 'onNo',
+}
+
+class YourComponent extends BaseComponent<{}, {}, YourComponentEvents> {
+  // ...
+}
+```
+
+
 ### ComponentTree
 
 The [`ComponentTree`](https://github.com/jovotech/jovo-framework/blob/v4/latest/framework/src/ComponentTree.ts) contains all [registered components](#component-registration):

docs/components.md

@@ -189,6 +189,13 @@ onNo() {
 }
 ```
 
+The following options can be added to `$delegate()`:
+
+- `resolve`: Handlers that should be called after the child component [resolves](#resolve-a-component) with certain data.
+  - Can include references to handler functions like `this.onYes` (doesn't work with anonymous functions)
+  - Can include a string to the handler key: `'onYes'`
+- `config`: The config that is used by the child component. Can be accessed inside the child component with `this.$component.config`.
+
 In the above example, the [`$state` stack](./state-stack.md) gets updated like this:
 
 ```typescript
@@ -237,12 +244,22 @@ yourHandler() {
 }
 ```
 
-The following options can be added to `$delegate()`:
+You can also pass that enum to the component for [type safety](./components.md#type-safety):
+
+```typescript
+// src/components/YesNoComponent.ts
+
+export enum YesNoComponentEvent {
+  Yes = 'yes',
+  No = 'no',
+}
+
+class YesNoComponent extends BaseComponent<{}, {}, YesNoComponentEvent> {
+  // ...
+}
+```
+
 
-- `resolve`: Handlers that should be called after the child component [resolves](#resolve-a-component) with certain data.
-  - Can include references to handler functions like `this.onYes` (doesn't work with anonymous functions)
-  - Can include a string to the handler key: `'onYes'`
-- `config`: The config that is used by the child component. Can be accessed inside the child component with `this.$component.config`.
 
 ### Resolve a Component