merkur_plugin_component_widget_registration_quickstart.ts

1import { createWidget, Widget } from '@merkur/core';
2import { componentPlugin } from '@merkur/plugin-component';
3
4// Define the shape of your widget's state
5interface WidgetState {
6  counter: number;
7}
8
9// Create the widget instance with the component plugin
10export const widget = createWidget({
11  name: 'my-widget',
12  version: '1.0.0',
13  plugins: [componentPlugin],
14  setup(widget: Widget) {
15    // Initialize state
16    widget.state = {
17      counter: 0,
18    };
19
20    // Register a component
21    widget.registerComponent({
22      name: 'counter',
23      // The view function receives the widget instance
24      view: (widget: Widget<WidgetState>) => {
25        return `<div>Counter: ${widget.state.counter}</div>`;
26      },
27    });
28
29    return widget;
30  },
31});