merkur_select_preact_plugin_widget_registration_quickstart.ts

1import { createMerkurWidget } from '@merkur/core';
2import { componentPlugin } from '@merkur/plugin-component';
3import { selectPreactPlugin } from '@merkur/plugin-select-preact';
4import { View } from './View';
5
6export const widget = createMerkurWidget({
7  name: 'my-widget',
8  version: '1.0.0',
9  containerSelector: '#widget-container',
10  // Register required plugins
11  plugins: [
12    componentPlugin,
13    selectPreactPlugin
14  ],
15  // Define the main view
16  View,
17  // Define the widget state
18  async create(widget) {
19    return {
20      ...widget,
21      state: {
22        counter: 0
23      }
24    };
25  },
26  // Use the plugin to select the component
27  async mount(widget) {
28    // .select() is added to the widget instance by selectPreactPlugin
29    const { View, container } = widget.select();
30    
31    // Logic for mounting to the DOM (usually handled by @merkur/plugin-component)
32    return { View, container };
33  }
34});
35
36// Example of a basic View.tsx
37// import { h } from 'preact';
38// export const View = ({ state }) => <div>Counter: {state.counter}</div>;