merkur_widget_with_preact_select_plugin_state_selector.ts

1import { createWidget } from '@merkur/core';
2import { componentPlugin } from '@merkur/plugin-component';
3import { selectPlugin, createSelector } from '@merkur/plugin-select';
4import { selectPreactPlugin } from '@merkur/plugin-select-preact';
5import { h, render } from 'preact';
6
7// Define the widget state type
8interface WidgetState {
9  counter: number;
10}
11
12// Create a selector to extract specific data from the state
13const selectCounter = createSelector(
14  (state: WidgetState) => state.counter,
15  (counter) => ({ counter })
16);
17
18const widget = await createWidget({
19  name: 'my-widget',
20  version: '1.0.0',
21  props: {
22    containerSelector: '#widget-container'
23  },
24  state: {
25    counter: 0
26  },
27  plugins: [
28    componentPlugin,
29    selectPlugin,
30    selectPreactPlugin
31  ],
32  setup(widget) {
33    // Optional setup logic
34    return widget;
35  },
36  async mount(widget) {
37    const { containerSelector } = widget.props;
38    const container = document.querySelector(containerSelector);
39
40    // Component using the selector
41    const CounterComponent = () => {
42      // Use the select hook provided by the plugin
43      const { counter } = widget.useSelect(selectCounter);
44
45      return h('div', {}, [
46        h('h1', {}, `Counter: ${counter}`),
47        h('button', {
48          onClick: () => widget.setState({ counter: counter + 1 })
49        }, 'Increment')
50      ]);
51    };
52
53    render(h(CounterComponent, {}), container);
54  },
55  async unmount(widget) {
56    const { containerSelector } = widget.props;
57    const container = document.querySelector(containerSelector);
58    if (container) {
59      render(null, container);
60    }
61  }
62});
63
64export default widget;