vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Consistent naming of Mithril.js

Browse source
This commit is contained in:
Stephan Hoyer 2022-02-18 09:08:10 +01:00
parent 7b1fda5b66
commit 885b3f9442
48 changed files with 269 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

36
docs/hyperscript.md
View file

@ -26,7 +26,7 @@ Documentation on m(), Mithril.js' hyperscript DSL, which you can use to define t
### Description
Represents an HTML element in a Mithril view
Represents an HTML element in a Mithril.js view
```javascript
m("div.foo", {style: {color: "red"}}, "hello")
@ -59,7 +59,7 @@ Argument | Type | Required | Descripti
### How it works
Mithril provides a hyperscript function `m()`, which allows expressing any HTML structure using JavaScript syntax. It accepts a `selector` string (required), an `attrs` object (optional) and a `children` array (optional).
Mithril.js provides a hyperscript function `m()`, which allows expressing any HTML structure using JavaScript syntax. It accepts a `selector` string (required), an `attrs` object (optional) and a `children` array (optional).
```javascript
m("div", {id: "box"}, "hello")
@ -130,7 +130,7 @@ m("a#exit.external[href='https://example.com']", "Leave")
// <a id="exit" class="external" href="https://example.com">Leave</a>
```
If you omit the tag name, Mithril assumes a `div` tag.
If you omit the tag name, Mithril.js assumes a `div` tag.
```javascript
m(".box.box-bordered") // <div class="box box-bordered"></div>
@ -171,9 +171,9 @@ If another attribute is present in both the first and the second argument, the s
### DOM attributes
Mithril uses both the JavaScript API and the DOM API (`setAttribute`) to resolve attributes. This means you can use both syntaxes to refer to attributes.
Mithril.js uses both the JavaScript API and the DOM API (`setAttribute`) to resolve attributes. This means you can use both syntaxes to refer to attributes.
For example, in the JavaScript API, the `readonly` attribute is called `element.readOnly` (notice the uppercase). In Mithril, all of the following are supported:
For example, in the JavaScript API, the `readonly` attribute is called `element.readOnly` (notice the uppercase). In Mithril.js, all of the following are supported:
```javascript
m("input", {readonly: true}) // lowercase
@ -182,7 +182,7 @@ m("input[readonly]")
m("input[readOnly]")
```
This even includes custom elements. For example, you can use [A-Frame](https://aframe.io/docs/0.8.0/introduction/) within Mithril, no problem!
This even includes custom elements. For example, you can use [A-Frame](https://aframe.io/docs/0.8.0/introduction/) within Mithril.js, no problem!
```javascript
m("a-scene", [
@ -256,7 +256,7 @@ Do note that all the properties with magic semantics, like lifecycle attributes,
### Style attribute
Mithril supports both strings and objects as valid `style` values. In other words, all of the following are supported:
Mithril.js supports both strings and objects as valid `style` values. In other words, all of the following are supported:
```javascript
m("div", {style: "background:red;"})
@ -268,13 +268,13 @@ Using a string as a `style` would overwrite all inline styles in the element if
You can use both hyphenated CSS property names (like `background-color`) and camel cased DOM `style` property names (like `backgroundColor`). You can also define [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), if your browser supports them.
Mithril does not attempt to add units to number values. It simply stringifies them.
Mithril.js does not attempt to add units to number values. It simply stringifies them.
---
### Events
Mithril supports event handler binding for all DOM events, including events whose specs do not define an `on${event}` property, such as `touchstart`
Mithril.js supports event handler binding for all DOM events, including events whose specs do not define an `on${event}` property, such as `touchstart`
```javascript
function doSomething(e) {
@ -284,7 +284,7 @@ function doSomething(e) {
m("div", {onclick: doSomething})
```
Mithril accepts functions and [EventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) objects. So this will also work:
Mithril.js accepts functions and [EventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) objects. So this will also work:
```javascript
var clickListener = {
@ -296,7 +296,7 @@ var clickListener = {
m("div", {onclick: clickListener})
```
By default, when an event attached with hyperscript fires, this will trigger Mithril's auto-redraw after your event callback returns (assuming you are using `m.mount` or `m.route` instead of `m.render` directly). You can disable auto-redraw specifically for a single event by setting `e.redraw = false` on it:
By default, when an event attached with hyperscript fires, this will trigger Mithril.js' auto-redraw after your event callback returns (assuming you are using `m.mount` or `m.route` instead of `m.render` directly). You can disable auto-redraw specifically for a single event by setting `e.redraw = false` on it:
```javascript
m("div", {
@ -311,7 +311,7 @@ m("div", {
### Properties
Mithril supports DOM functionality that is accessible via properties such as `<select>`'s `selectedIndex` and `value` properties.
Mithril.js supports DOM functionality that is accessible via properties such as `<select>`'s `selectedIndex` and `value` properties.
```javascript
m("select", {selectedIndex: 0}, [
@ -349,7 +349,7 @@ To learn more about components, [see the components page](components.md).
### Lifecycle methods
Vnodes and components can have lifecycle methods (also known as *hooks*), which are called at various points during the lifetime of a DOM element. The lifecycle methods supported by Mithril are: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove`, and `onbeforeupdate`.
Vnodes and components can have lifecycle methods (also known as *hooks*), which are called at various points during the lifetime of a DOM element. The lifecycle methods supported by Mithril.js are: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove`, and `onbeforeupdate`.
Lifecycle methods are defined in the same way as DOM event handlers, but receive the vnode as an argument, instead of an Event object:
@ -366,7 +366,7 @@ Hook | Description
`oninit(vnode)` | Runs before a vnode is rendered into a real DOM element
`oncreate(vnode)` | Runs after a vnode is appended to the DOM
`onupdate(vnode)` | Runs every time a redraw occurs while the DOM element is attached to the document
`onbeforeremove(vnode)` | Runs before a DOM element is removed from the document. If a Promise is returned, Mithril only detaches the DOM element after the promise completes. This method is only triggered on the element that is detached from its parent DOM element, but not on its child elements.
`onbeforeremove(vnode)` | Runs before a DOM element is removed from the document. If a Promise is returned, Mithril.js only detaches the DOM element after the promise completes. This method is only triggered on the element that is detached from its parent DOM element, but not on its child elements.
`onremove(vnode)` | Runs before a DOM element is removed from the document. If a `onbeforeremove` hook is defined, `onremove` is called after `done` is called. This method is triggered on the element that is detached from its parent element, and all of its children
`onbeforeupdate(vnode, old)` | Runs before `onupdate` and if it returns `false`, it prevents a diff for the element and all of its children
@ -403,7 +403,7 @@ To learn more about keys, [see the keys page](keys.md).
### SVG and MathML
Mithril fully supports SVG. Xlink is also supported, but unlike in pre-v1.0 versions of Mithril, must have the namespace explicitly defined:
Mithril.js fully supports SVG. Xlink is also supported, but unlike in pre-v1.0 versions of Mithril.js, must have the namespace explicitly defined:
```javascript
m("svg", [
@ -464,7 +464,7 @@ You cannot use JavaScript statements such as `if` or `for` within JavaScript exp
### Converting HTML
In Mithril, well-formed HTML is valid JSX. Little effort other than copy-pasting is required to integrate an independently produced HTML file into a project using JSX.
In Mithril.js, well-formed HTML is valid JSX. Little effort other than copy-pasting is required to integrate an independently produced HTML file into a project using JSX.
When using hyperscript, it's necessary to convert HTML to hyperscript syntax before the code can be run. To facilitate this, you can [use the HTML-to-Mithril-template converter](https://arthurclemens.github.io/mithril-template-converter/index.html).
@ -472,7 +472,7 @@ When using hyperscript, it's necessary to convert HTML to hyperscript syntax bef
### Avoid Anti-patterns
Although Mithril is flexible, some code patterns are discouraged:
Although Mithril.js is flexible, some code patterns are discouraged:
#### Avoid dynamic selectors
@ -555,6 +555,6 @@ var BetterListComponent = {
#### Avoid creating vnodes outside views
When a redraw encounters a vnode which is strictly equal to the one in the previous render, it will be skipped and its contents will not be updated. While this may seem like an opportunity for performance optimisation, it should be avoided because it prevents dynamic changes in that node's tree - this leads to side-effects such as downstream lifecycle methods failing to trigger on redraw. In this sense, Mithril vnodes are immutable: new vnodes are compared to old ones; mutations to vnodes are not persisted.
When a redraw encounters a vnode which is strictly equal to the one in the previous render, it will be skipped and its contents will not be updated. While this may seem like an opportunity for performance optimisation, it should be avoided because it prevents dynamic changes in that node's tree - this leads to side-effects such as downstream lifecycle methods failing to trigger on redraw. In this sense, Mithril.js vnodes are immutable: new vnodes are compared to old ones; mutations to vnodes are not persisted.
The component documentation contains [more detail and an example of this anti-pattern](components.md#avoid-creating-component-instances-outside-views).