Lorem ipsum dolor sit amet, consectetur adipisicing elit.
,\n footer: ({ close }) =>Hello World!
\n}\n```\n\nthe compilation was done using this command:\n\n```bash\nesbuild index.tsx --bundle --outfile=index.compiled.js --sourcemap --jsx-factory=h --jsx-fragment=Fragment --inject:./preact-shim.js --format=esm\n```\n\n`stm.component` accepts a configuration object. In the above example we are specifying the minimum set of arguments needed for the component to run.\n\nMake notice the `tagName` property. It must be a tag name of the new Web Component. The specification of custom elements requires the tag name to have a dash (`-`) that's why we cannot simply name our component: `hello` - this won't work. The good practice is to have a prefix for a certain library or project and use this prefix everywhere. For example in this library the prefix for all web components is `sw-`.\n\n### Basic interactivity\n\nIn the previous example we created a component that does nothig. To add some interactivity we need to understand the data flow of a stm component:\n\n![STM data flow](./stm-diagram.svg \"STM data flow\")\n\nThere are two most importand concepts in `stm`:\n\n1. **state** - a state is any data that represents current state of a component.\n2. **msg** - a message represents a change. It may be user clicking a button, form input or some outside change like a received data from a websocket connection.\n\nLet's write a **hello-who** component which will demonstrate the above mentioned data flow:\n\n*index.html*\n```\n\n\n \n \nHello {state.name}!
;\n}\n```\n\nMake notice that both `init` and `update` functions return an array of two elements. The first element is a new state and the second is a command. Commands are required if we want to do something outside the component but we will talk about them later. In current component we don't need any commands so we just use `null` as a command.\n\nImportant things to consider in the above example:\n\n1. `init` returns a new state (along with a null in place of command)\n2. next `view` renders html according to the `state` returned by the `init` function\n3. when user interacts with the view `msg` is returned (see: `` i.e.). The event handler can also be a function like in here: ` ({ type: 'input', name: event.target.value })} />` - this form can be used when we need an `event` object).\n4. the generated `msg` goes to the `update(state, msg)` function\n5. the `update` function returns a new `state` with a command (in our case the command is `null`).\n6. the `view` function is executed again with the new `state` returned from `update` and the rerender is invoked.\n7. and so on in a loop...\n\n### Debug mode\n\nEvery view is rendered based on state, this means that having a state we can recreate how the app looked like in any moment. Quite often when debugging a `stm` component you will want to know what was the state before certain msg and what was the state after a msg. To show this info enable `debug` in the `stm.component` arguments:\n\n```ts\nstm.component({\n tagName: 'hello-who',\n\tdebug: true,\n\tinit, \n\tupdate,\n view\n});\n```\n\nNow every change to state will be logged in a devtools console.\n\n### Shadow DOM\n\nto enable shadow dom use `shadow: true` in the component options:\n\n```ts\nstm.component({\n tagName: 'hello-who',\n\tshadow: true,\n\tinit, \n\tupdate,\n view\n});\n```\n\nat this point the web component will be rendered in a shadow dom.\n\n### Component attributes\n\nIt's often the case that a web component has some attributes. Moreover the attributes are not something static - they can change at any given moment. To deal with changing attributes you have to translate an attribute to a msg, because this is how we deal with changes in `stm`. Additionally we need to specify the list of expected attributes with their types. Let's have a simple example: a counter that will increase it's displayed value every second - however this time the displayed value will come from the outside.\n\n*index.html*\n```html\n\n\n \n \nCurrent count: {state.count}
\n}\n```\n\nMake notice:\n\n1. we have to specify the list of attributes in: `propTypes`\n2. the `propTypes` take attribute name and attribute type. The type of an attribute is a a value constructor (Boolean, Number, String, Object, Array)\n3. you have to translate the attribute change into a msg. This is done in `attributeChangeFactory`\n4. the message: `{ type: 'attr', name: string, value: unknown }` has the `value` property of type `unknown` because we don't know what the outside world will pass to our component. That's why we need to be prepared for an unknown. Normally all attributes are strings however if this web component would be put into some other preact/react application then the specific data type would be passed instead of a string. That's why we should cover both cases:\n\n```ts\nif (msg.type === 'attr' && typeof msg.value === 'string') {\n state.count = parseInt(msg.value, 10);\n} else if (msg.type === 'attr' && typeof msg.value === 'number') {\n state.count = msg.value;\n}\n```\n\n### Making an asynchronous call \n\nTo make an async call we have to take advantage of the `stm.Cmd