Add docs

packages/website/components/sidebar.js

@@ -1,7 +1,7 @@
 import { defineComponent, html } from '@tybalt/core';
 
 const PACKAGES = ['cli', 'core', 'eleventy-plugin', 'esbuild-plugin', 'eslint-plugin', 'parser', 'test-utils', 'validator'];
-const GUIDES = ['new-website', 'styling-your-component', 'writing-tests', 'custom-validator', 'data-fetching'];
+const GUIDES = ['props', 'events', 'slots', 'new-website', 'styling-your-component', 'writing-tests', 'custom-validator', 'data-fetching', 'linting', 'building'];
 
 defineComponent({
     name: 'tybalt-sidebar',

packages/website/pages/building-guide.md

@@ -0,0 +1,74 @@
+---
+layout: layout.html
+title: Building
+---
+
+# Building
+
+## Using the cli
+
+The easiest way to get started building your project is to use the tybalt cli with npx.
+
+```shell
+npx @tybalt/cli build
+```
+
+However, if you will have many collaborators on a project, you'll likely want to standardize your build step, especially if you have to set flags or options when building your project.
+
+First, install the cli
+
+```shell
+yarn add -D @tybalt/cli
+```
+
+You can also add a new script to your package.json
+
+```json
+{
+    "scripts": {
+        "build": "tybalt build"
+    }
+}
+```
+
+Now you can run the build using `yarn run build`.
+
+You can see the [cli documentation](/pages/cli) for more details on how to use the cli to build your project, like how to specify entry points or the output directory.
+
+## Using the esbuild plugin
+
+For more complex projects, such as projects that want to use css preprocessors, you'll need to set up your build to use `@tybalt/esbuild-plugin` instead of using the cli.
+
+First, install the dependencies
+
+```shell
+yarn add -D esbuild @tybalt/esbuild-plugin
+```
+
+Then create a new file, such as `scripts/build.js`, to house your new build script
+
+```js
+import tybaltPlugin from '@tybalt/esbuild-plugin';
+import esbuild from 'esbuild';
+
+esbuild.build({
+    bundle: true,
+    entryPoints: ['path/to/my/entry-points/*.ts'],
+    outdir: 'path/to/my/output/directory/',
+    assetNames: 'assets/[name]-[hash]',
+    chunkNames: '[ext]/[name]-[hash]',
+    plugins: [tybaltPlugin()],
+});
+```
+
+And finally update your `package.json` to have an alias to call the new script
+
+```json
+{
+    "scripts": {
+        "build": "node scripts/build.js"
+    }
+}
+```
+
+You can see the [esbuild plugin documentation](/pages/esbuild-plugin) and in the [esbuild documentation](https://esbuild.github.io/getting-started/#build-scripts) for more details on building using the esbuild plugin with a build script.

packages/website/pages/core.md

@@ -71,146 +71,6 @@ import { defineComponent, html } from 'https://unpkg.com/@tybalt/[email protected]/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`<button @click=${listener}>Click me!</button>`;
-    }
-});
-```
-
-### 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`
-            <div class="my-class">
-                <span>Example: </span>
-                <slot name="content"></slot>
-            </div>
-        `;
-    },
-});
-```
-
-When you render a `slot-example` component, it will replace the `slot` element with the children
-of the `slot-example` component. A component rendered in the DOM as
-
-```html
-<slot-example>
-    <div my-attribute="foo">example content</div>
-</slot-example>
-```
-
-Would be rendered to the user as
-
-```html
-<div class="my-class">
-    <span>Example: </span>
-    <div my-attribute="foo">example content</div>
-</div>
-```
-
 ## API
 
 ### defineComponent

packages/website/pages/events-guide.md

@@ -0,0 +1,33 @@
+---
+layout: layout.html
+title: Events
+---
+
+# 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`<button @click=${listener}>Click me!</button>`;
+    }
+});
+```

packages/website/pages/linting-guide.md

@@ -0,0 +1,69 @@
+---
+layout: layout.html
+title: Linting
+---
+
+# Linting
+
+## Using the tybalt cli
+
+The easiest way to get set up with linting your project is using the Tybalt cli. You can use [npx](https://docs.npmjs.com/cli/v8/commands/npx) to lint your files
+
+```shell
+npx @tybalt/cli lint
+```
+
+However, if you will have many collaborators on a project, you'll likely want to standardize your lint step, especially if you have to set flags or options when building your project.
+
+First, install the cli
+
+```shell
+yarn add -D @tybalt/cli
+```
+
+You can also add a new script to your package.json
+
+```json
+{
+    "scripts": {
+        "lint": "tybalt lint"
+    }
+}
+```
+
+Now you can run the linter using your package manager's script runner, for instance `yarn run lint` or `npm run lint`.
+
+You can see the [cli documentation](/pages/cli) for more details on setting up linting using the cli, like how to provide a pattern of files to lint.
+
+## Using @tybalt/eslint-plugin
+
+For more complex projects, you'll likely need to do customization to your linting setup that is more complex than is available with the tybalt cli. For these cases, you'll want to use the eslint plugin.
+
+To get started, install the plugin and associated dependencies
+
+```shell
+yarn add -D eslint @tybalt/eslint-plugin
+```
+
+Then create an `.eslintrc.js` file that contains, at a minimum
+
+```javascript
+module.exports = {
+    extends: ['plugin:@tybalt/eslint-plugin/ts-recommended'],
+    plugins: ['@tybalt/eslint-plugin'],
+};
+```
+
+And finally add a script to your `package.json`
+
+```json
+{
+    "scripts": {
+        "lint": "tybalt lint"
+    }
+}
+```
+
+And now you can run `npm run lint` to lint your code!
+
+You can see the [eslint plugin documentation](/pages/eslint-plugin) and the [eslint documentation](https://eslint.org/docs/latest/use/configure/) for more details on setting up linting using the eslint plugin.