diff --git a/packages/website/pages/core.md b/packages/website/pages/core.md index 57495b8c..de4d7281 100644 --- a/packages/website/pages/core.md +++ b/packages/website/pages/core.md @@ -71,146 +71,6 @@ import { defineComponent, html } from 'https://unpkg.com/@tybalt/core@0.0.10/dis Alternatively, you can use `cdnjs`, or `jsDelivr`. -## Guide - -### Props - -Dom elements can have attributes set on them. You can transform an attribute into a prop by specifying -some data about it with the props config object passed to `defineComponent`. - -```javascript -defineComponent({ - props: { example: {} }, -}); -``` - -All props are passed as observables with the same name as the first argument to setup. Each observable -is notified when the corresponding attribute changes. - -```javascript -defineComponent({ - props: { - example: {}, - }, - setup({ example }) { - assert(example instanceof Observable); - }, -}); -``` - -Props can have a default value that is provided if the attribute is unset. - -```javascript -defineComponent({ - props: { - example: { - default: 'tybalt', - }, - }, -}); -``` - -Props can also have a validator. Validation errors are pushed to the error stream of the observable. - -```javascript -defineComponent({ - props: { - example: { - validator: oneOf(['foo', 'bar', 'baz']), - }, - }, - setup({ example }) { - example.subscribe({ - error(err) { - alert(err); - }, - }); - }, -}); -``` - -To create derived state from a prop, you should create a new observable, and then update it with the -derived value. - -```javascript -{ - props: { - name: { validator: string() } - }, - setup({ name }) { - const greeting = new BehaviorSubject(`hello ${name}`); - - return { greeting }; - } -} -``` - -### Events - -Events can be emitted from Tybalt components using `emit`, passed on the second argument to `setup`. - -```javascript -defineComponent({ - name: 'setup-context', - setup({}, { emit }): { - emit('mounted'); - } -}); -``` - -If you want to listen for an event, attach an event handler using a special attribute that starts with `@` and is the name of the event you want to listen for - -```javascript -defineComponent({ - name: 'setup-context', - setup(): { - return { - listener: () => console.log('hello world') - } - }, - render({ listener }) { - return html``; - } -}); -``` - -### Slots - -There are `slot` and `template` elements in javascript that work well with web components. - -```javascript -defineComponent({ - name: 'slot-example', - shadowMode: 'open', - render() { - return html` -