69 lines
1.1 KiB
TypeScript
69 lines
1.1 KiB
TypeScript
import { value, component, div, h1, p, button, scope } from '../lib/exports';
|
|
|
|
const counter = value(0);
|
|
|
|
const child = component<{ count: number }>(({ context, props }) => {
|
|
const count = context(counter);
|
|
|
|
return div`
|
|
And the count according to the child: ${count.value} which got ${props.count}
|
|
|
|
${button.$({
|
|
click: () => {
|
|
count.value -= 1;
|
|
},
|
|
})`
|
|
Decrement
|
|
`}
|
|
`;
|
|
});
|
|
|
|
const root = component(({ context }) => {
|
|
const count = context(counter);
|
|
|
|
return div`
|
|
${h1.$({ style: { color: 'red' } })`
|
|
Hello
|
|
`}
|
|
|
|
The current count is: ${count.value}
|
|
|
|
${div`
|
|
${h1`Hello`}
|
|
|
|
... Something
|
|
|
|
${p`
|
|
Testing
|
|
`}
|
|
`}
|
|
|
|
${button.$({
|
|
click: () => {
|
|
count.value += 1;
|
|
},
|
|
})`
|
|
Increment
|
|
`}
|
|
|
|
${div`
|
|
${h1`With prop`}
|
|
${child({ count: count.value })}
|
|
`}
|
|
|
|
${div`
|
|
${h1`Without prop`}
|
|
${child}
|
|
`}
|
|
|
|
${scope(counter)`
|
|
${h1`Without scope`}
|
|
${child}
|
|
`}
|
|
|
|
So long and thanks for all the fish
|
|
`;
|
|
});
|
|
|
|
document.body.appendChild(root.toHtmlElement());
|