+```ts
+import { withTemplate } from '../../src';
+import { TemplateResult } from 'lit-html';
+import { pipe } from 'fp-ts/lib/pipeable';
-Your library will be rebuilt if you make edits.
+// Pipe is a helper from fp-ts which is the equivalent of the pipe operator proposal as a function
+const baseSpec = pipe(emptySpec, withTemplate
+```ts
+type State = { count: number };
-### `npm test` or `yarn test`
+const counterComponent = pipe(baseSpec, withState
+ Count: ${count}
+
+ `;
+ },
+ (action, state) => {
+ // just return the state for now
+ return state;
+ },
+ {}
+ )
+);
+```
+
+The render function also takes a second argument exposing some functions to the component. For now let's take a look at dispatch. Dispatch takes an action and calls your handleAction function replacing the component state with the return of that function.
+
+Let's implement the basic actions for our component
+
+```ts
+const counterComponent = pipe(
+ ...buildSpec(
+ ({ count }, { dispatch }) => {
+ return html`
+
+ Count: ${count}
+
+
+
+ `;
+ },
+ (action, { count }) => {
+ if (action === 'increase') {
+ return { count: count + 1 };
+ }
+
+ return { count: count - 1 };
+ },
+ {}
+ )
+);
+```
+
+## Running a component
+
+To run a component simply use the runUi function:
+
+```ts
+runUi({
+ parent: document.getElementById('app') // you can use any dom element here,
+ render, // this is a function which takes the parent and a template and renders it. In this case we use the render function from lit-html
+ initialState: { count: 0 }, // this is the state your component starts out with
+ component: counterComponent, // the component to render
+});
+```
+
+Now if you run your app with something like parcel you should see a working counter!
+
+## Children
+
+In my library all the state is always in sync. To do that we need to explain monadic how to sync it. This is what the last argument of buildSpec if for. Let's define a simple counters component which keeps a list of counters:
+
+```ts
+type CounterListState = {
+ counters: CounterState[]; // We renamed our previous State type to CounterState to prevent confusion
+};
+
+const counterList = pipe(
+ baseSpec,
+ withState
+ Counters go here
+
+ `;
+ },
+ (_, state) => {
+ // We have no actions for now so we can just return the state
+ return state;
+ },
+ {}
+ )
+);
+```
+
+Using components inside another components:
+
+1. You need to explain typescript what your components looks like. To do this you need to use the withChild state builder which takes 4 arguments:
+ - The name of the component
+ - The input your state syncing function takes. In our case this will be just the index of the counter.
+ - The state your child component has
+ - The output your components raises. We'll talk about this one later
+
+Let's add our counter component to the spec of our counterList component:
+
+```ts
+const counterList = pipe(
+ baseSpec,
+ withState
+ This is a counter list with ${counters.length} counters inside it!
+
+ `;
+};
+```
+
+Now run your component with some initial state and you should see a counter element for each counter in the state!
+
+> Exercise: add an input element and a button allowing the creation of new counters
+
+## Output
+
+Outputs are like events. Let's say we want counters to have a "delete" button. To do that we need to allow the counter component to send messages to the counterList component. Let's start by defining the type of our messages:
+
+```ts
+type CounterOutput = 'delete';
+```
+
+Then let's edit the counter component to emit the output on click. For this the `raise` function is used:
+
+```ts
+const counterComponent = pipe(
+ ...,
+ withOutput
+ ${counters.map((_, index) =>
+ child(
+ // This is the name of the counter. It has to match what you passed to withChild
+ 'counter',
+ // This is similar to key in react. It's used to keep track of the state of each counter.
+ // Using the index is usually bad practice
+ // You should probably use something like an id for it if you can
+ String(index),
+ // This is the input we pass to our sync functions. It has to match what we gave to withChild
+ index
+ )
+ )}
+
+
+
+ Count: ${count}
+
+
+
+ `;
+ },
+ ...
+ )
+);
+```
+
+And now we need to update the `withChild` builder from the list component to reflect the changes:
+
+```ts
+...
+withChild<"counter", number, CounterState, CounterOutput>()
+...
+```
+
+Now we need to actually handle the outputs. You don't always want to do something with an output, so monadic allows you do discard any output you want. To handle the output -> action relation `mkChild` accepts an extra argument which takes an output and returns:
+
+```ts
+Option