Skip to content

Commit

Permalink
Fix docs (#2482)
Browse files Browse the repository at this point in the history
* Fix #2414, address part of #1687

Also cleared the CSS up to be a lot more readable instead of smooshed
into a single line.

* Redo the testing docs page

- Addresses another part of #1687
- Also, fix a few linter issues in the ospec binary

* Add note about third-party cookies, tweak a line

* Make the JSX comparison much more meaningful

And let the code speak for itself. Don't fuel the flame wars any more
than what they've already become. We should be *unopinionated*, and so
I've updated those docs to remove the existing opinion.

* Remove a bunch of outdated ES6 references

* Remove the CSS page
  • Loading branch information
dead-claudia committed Jul 23, 2019
1 parent 61b087e commit 20f0759
Show file tree
Hide file tree
Showing 11 changed files with 528 additions and 286 deletions.
46 changes: 28 additions & 18 deletions docs/components.md
Expand Up @@ -6,8 +6,9 @@
- [State](#state)
- [Closure component state](#closure-component-state)
- [POJO component state](#pojo-component-state)
- [ES6 Classes](#es6-classes)
- [Classes](#classes)
- [Class component state](#class-component-state)
- [Special attributes](#special-attributes)
- [Avoid anti-patterns](#avoid-anti-patterns)

### Structure
Expand Down Expand Up @@ -115,7 +116,7 @@ Note that unlike many other frameworks, mutating component state does *not* trig

If a state change occurs that is not as a result of any of the above conditions (e.g. after a `setTimeout`), then you can use `m.redraw()` to trigger a redraw manually.

#### Closure Component State
#### Closure component state

In the above examples, each component is defined as a POJO (Plain Old JavaScript Object), which is used by Mithril internally as the prototype for that component's instances. It's possible to use component state with a POJO (as we'll discuss below), but it's not the cleanest or simplest approach. For that we'll use a **_closure component_**, which is simply a wrapper function which _returns_ a POJO component instance, which in turn carries its own, closed-over scope.

Expand Down Expand Up @@ -183,7 +184,7 @@ A big advantage of closure components is that we don't need to worry about bindi

---

#### POJO Component State
#### POJO component state

It is generally recommended that you use closures for managing component state. If, however, you have reason to manage state in a POJO, the state of a component can be accessed in three ways: as a blueprint at initialization, via `vnode.state` and via the `this` keyword in component methods.

Expand Down Expand Up @@ -247,55 +248,55 @@ m(ComponentUsingThis, {text: "Hello"})
// <div>Hello</div>
```

Be aware that when using ES5 functions, the value of `this` in nested anonymous functions is not the component instance. There are two recommended ways to get around this JavaScript limitation, use ES6 arrow functions, or if ES6 is not available, use `vnode.state`.
Be aware that when using ES5 functions, the value of `this` in nested anonymous functions is not the component instance. There are two recommended ways to get around this JavaScript limitation, use arrow functions, or if those are not supported, use `vnode.state`.

---

### ES6 classes
### Classes

If it suits your needs (like in object-oriented projects), components can also be written using ES6 class syntax:
If it suits your needs (like in object-oriented projects), components can also be written using classes:

```javascript
class ES6ClassComponent {
class ClassComponent {
constructor(vnode) {
this.kind = "ES6 class"
this.kind = "class component"
}
view() {
return m("div", `Hello from an ${this.kind}`)
return m("div", `Hello from a ${this.kind}`)
}
oncreate() {
console.log(`A ${this.kind} component was created`)
console.log(`A ${this.kind} was created`)
}
}
```

Component classes must define a `view()` method, detected via `.prototype.view`, to get the tree to render.
Class components must define a `view()` method, detected via `.prototype.view`, to get the tree to render.

They can be consumed in the same way regular components can.

```javascript
// EXAMPLE: via m.render
m.render(document.body, m(ES6ClassComponent))
m.render(document.body, m(ClassComponent))

// EXAMPLE: via m.mount
m.mount(document.body, ES6ClassComponent)
m.mount(document.body, ClassComponent)

// EXAMPLE: via m.route
m.route(document.body, "/", {
"/": ES6ClassComponent
"/": ClassComponent
})

// EXAMPLE: component composition
class AnotherES6ClassComponent {
class AnotherClassComponent {
view() {
return m("main", [
m(ES6ClassComponent)
m(ClassComponent)
])
}
}
```

#### Class Component State
#### Class component state

With classes, state can be managed by class instance properties and methods, and accessed via `this`:

Expand Down Expand Up @@ -324,14 +325,23 @@ class ComponentWithState {
}
```

Note that we must wrap the event callbacks in arrow functions so that the `this` context is preserved correctly.
Note that we must use arrow functions for the event handler callbacks so the `this` context can be referenced correctly.

---

### Mixing component kinds

Components can be freely mixed. A class component can have closure or POJO components as children, etc...

---

### Special attributes

Mithril places special semantics on several property keys, so you should normally avoid using them in normal component attributes.

- [Lifecycle methods](lifecycle-methods.md): `oninit`, `oncreate`, `onbeforeupdate`, `onupdate`, `onbeforeremove`, and `onremove`
- `key`, which is used to track identity in keyed fragments
- `tag`, which is used to tell vnodes apart from normal attributes objects and other things that are non-vnode objects.

---

Expand Down
94 changes: 0 additions & 94 deletions docs/css.md

This file was deleted.

2 comments on commit 20f0759

@soulofmischief
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@isiahmeadows were those references to mocha in lines 11 & 19 of docs/testing.md accidental?

@dead-claudia
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@soulofmischief Yes. Feel free to file a pull request if you'd like.

Please sign in to comment.