Reorder

Author: srt32

docs/_guide/rendering.md

@@ -51,58 +51,58 @@ Remember that _all_ instances of your controller _must_ add the `<template data-
 
 Sometimes you wont have a template that is server rendered, and instead want to make a template using JS. Catalyst does not support this out of the box, but it is possible to use another library: `@github/jtml`. This library can be used to write declarative templates using JS. Let's re-work the above example using `@github/jtml`:
 
-```typescript
-import { controller } from "@github/catalyst"
+```
+import { attr, controller } from "@github/catalyst"
 import { html, render } from "@github/jtml"
 
 @controller
 class HelloWorldElement extends HTMLElement {
-
-  // Make `name` automatically update when changed
-  #name = 'World'
-  get name() {
-    return this.#name
-  }
-  set name(value: string) {
-    this.#name = value
-    this.update()
-  }
+  @attr name = 'World'
 
   connectedCallback() {
     this.attachShadow({mode: 'open'})
-    this.update()
   }
 
-  update() {
+  attributeChangedCallback() {
     render(() => html`
       <div>
-        Hello <span>${ this.#name }</span>
+        Hello <span>${ this.name }</span>
       </div>`,
     this.shadowRoot!)
   }
 }
 ```
 
-Here, instead of declaring our template in HTML, we can do so in JS, and achieve exactly the same effect. We aren't using `@targets` in this example, as there is a more direct way to handle the data; re-calling `update()` will efficiently update only the parts that change.
+Here, instead of declaring our template in HTML, we can do so in JS, and achieve exactly the same effect. We aren't using `@targets` in this example, as there is a more direct way to handle the data; relying on `attributeChangedCallback` which will efficiently update only the parts that change.
 
-The same effect could be achieved using `@attr` via:
+The same effect could be achieved without using `@attr` via:
 
-```
-import { attr, controller } from "@github/catalyst"
+```typescript
+import { controller } from "@github/catalyst"
 import { html, render } from "@github/jtml"
 
 @controller
 class HelloWorldElement extends HTMLElement {
-  @attr name = 'World'
+
+  // Make `name` automatically update when changed
+  #name = 'World'
+  get name() {
+    return this.#name
+  }
+  set name(value: string) {
+    this.#name = value
+    this.update()
+  }
 
   connectedCallback() {
     this.attachShadow({mode: 'open'})
+    this.update()
   }
 
-  attributeChangedCallback() {
+  update() {
     render(() => html`
       <div>
-        Hello <span>${ this.name }</span>
+        Hello <span>${ this.#name }</span>
       </div>`,
     this.shadowRoot!)
   }