Merge pull request #259 from github/v2-doc-improvements

V2 doc improvements

Author: koddsson

docs/_guide/targets.md

@@ -136,21 +136,32 @@ Important to note here is that nodes from the `shadowRoot` get returned _first_.
 
 ### What about without Decorators?
 
-If you're using decorators, then the `@target` and `@targets` decorators will turn the decorated properties into getters.
+If you're not using decorators, then the `@target` and `@targets` decorators have an escape hatch: you can define a static class field using the `[target.static]` computed property, as an array of key names. Like so:
 
-If you're not using decorators, then you'll need to make a `getter`, and call `findTarget(this, key)` or `findTargets(this, key)` in the getter, for example:
+```js
+import {controller, target, targets} from '@github/catalyst'
+
+controller(class HelloWorldElement extends HTMLElement {
+  // The same as `@target output`
+  [target.static] = ['output']
+
+  // The same as `@targets pages; @targets links`
+  [targets.static] = ['pages', 'links']
+
+})
+```
+
+This is functionally identical to:
 
 ```js
-import {findTarget, findTargets} from '@github/catalyst'
-class HelloWorldElement extends HTMLElement {
+import {controller} from '@github/catalyst'
 
-  get output() {
-    return findTarget(this, 'output')
-  }
+@controller
+class HelloWorldElement extends HTMLElement {
+  @target output
 
-  get pages() {
-    return findTargets(this, 'pages')
-  }
+  @targets pages
+  @targets links
 
 }
-```
+```

docs/_guide/your-first-component.md

@@ -40,24 +40,21 @@ The `@controller` decorator ties together the various other decorators within Ca
 
  - Derives a tag name based on your class name, removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash.
  - Calls `window.customElements.define` with the newly derived tag name and your class.
- - Calls `defineObservedAttributes` with the class to add map any `@attr` decorators. See [attrs]({{ site.baseurl }}/guide/attrs) for more on this.
- - Injects the following code inside of the `connectedCallback()` function of your class:
-   - `bind(this)`; ensures that as your element connects it picks up any `data-action` handlers. See [actions]({{ site.baseurl }}/guide/actions) for more on this.
-   - `initializeAttrs(this)`; ensures that your element binds any `data-*` attributes to props. See [attrs]({{ site.baseurl }}/guide/attrs) for more on this.
+ - Loads the `attrable` decorator, which provides the ability to define `@attr` decorators. See [attrs]({{ site.baseurl }}/guide/attrs) for more on this.
+ - Loads the `actionable` decorator, which provides the ability to bind actions. See [actions]({{ site.baseurl }}/guide/actions) for more on this.
+ - Loads the `targetable` decorator, which provides Target querying. See [targets]({{ site.baseurl }}/guide/targets) for more on this.
 
 You can do all of this manually; for example here's the above `HelloWorldElement`, written without the `@controller` annotation:
 
 ```js
-import {bind, initializeAttrs, defineObservedAttributes} from '@github/catalyst'
+import {attrable, targetable, actionable} from '@github/catalyst'
+
+@register
+@actionable
+@attrable
+@targetable
 class HelloWorldElement extends HTMLElement {
-  connectedCallback() {
-    initializeAttrs(this)
-    this.innerHTML = 'Hello World!'
-    bind(this)
-  }
 }
-defineObservedAttributes(HelloWorldElement)
-window.customElements.define('hello-world', HelloWorldElement)
 ```
 
 The `@controller` decorator saves on having to write this boilerplate for each element.