merkur_widget_component_plugin_lifecycle_quickstart.ts

1import { createWidget, Widget } from '@merkur/core';
2import { componentPlugin } from '@merkur/plugin-component';
3
4export const widget = createWidget({
5  name: 'my-widget',
6  version: '1.0.0',
7  plugins: [componentPlugin],
8  setup(widget: Widget) {
9    widget.registerComponents([
10      {
11        name: 'main',
12        mount: (widget: Widget) => {
13          const { container } = widget.getProps();
14          if (container) {
15            container.innerHTML = 'Hello from Merkur component!';
16          }
17        },
18        unmount: (widget: Widget) => {
19          const { container } = widget.getProps();
20          if (container) {
21            container.innerHTML = '';
22          }
23        },
24        update: (widget: Widget) => {
25          // Logic for updating the component
26        },
27      },
28    ]);
29
30    return widget;
31  },
32});