Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add meta description to docs #2316

Merged
merged 3 commits into from
Feb 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .github/ISSUE_TEMPLATE/bug.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: "\U0001F41B Bug"
about: Report a bug in Mithril
about: Report a bug in Mithril.js
title: ''
labels: 'Type: Bug'
assignees: isiahmeadows
Expand All @@ -9,12 +9,12 @@ assignees: isiahmeadows

<!-- Provide a general summary of your issue in the "Title" above -->
<!--
Provide the exact version of Mithril you're experiencing these issues with. This
Provide the exact version of Mithril.js you're experiencing these issues with. This
matters, even if it's really old like version 0.1.0. Do note that bugs in older
versions are commonly fixed in newer versions, so you should try to test it
against the latest version if you can.
-->
**Mithril version:**
**Mithril.js version:**

<!--
Provide the name and version of both the browser and operating system you're
Expand All @@ -35,7 +35,7 @@ projects, feel free to list them all.
What did you try? What code is causing the unexpected behavior? Make sure to
try to reduce your code as best as you can while still reproducing the bug, so
we can more accurately determine the cause. Ideally, it should just be a bunch
of Mithril calls with virtually no logic at all, but it's sufficient to just
of Mithril.js calls with virtually no logic at all, but it's sufficient to just
remove unrelated network calls, attributes, and the like.

In addition, make sure the bug still persists with the latest version of
Expand Down
8 changes: 4 additions & 4 deletions .github/ISSUE_TEMPLATE/feature-or-enhancement.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: "\U0001F680 Feature or Enhancement"
about: Suggest an idea or feature for Mithril
about: Suggest an idea or feature for Mithril.js
title: ''
labels: 'Type: Enhancement'
assignees: isiahmeadows
Expand All @@ -9,17 +9,17 @@ assignees: isiahmeadows

<!-- Provide a general summary of your suggestion in the "Title" above -->
<!--
Optional: Provide the exact version of Mithril you're experiencing issues with.
Optional: Provide the exact version of Mithril.js you're experiencing issues with.
This could matter, even if it's really old like version 0.1.0. Do note that bugs
in older versions are commonly fixed in newer versions and that newer versions
are much more actively maintained than older versions, so it's unlikely we'll
add new features to older versions like 0.1.x.
-->
**Mithril version:**
**Mithril.js version:**

<!--
Optional: Provide the name and version of both the platform (Chrome, Node, etc.)
and operating system you're running Mithril on. If it's multiple, feel free to
and operating system you're running Mithril.js on. If it's multiple, feel free to
list multiple. This could matter, even if it's super ancient like IE 6 on
Windows XP.
-->
Expand Down
6 changes: 3 additions & 3 deletions .github/ISSUE_TEMPLATE/question.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: "\U0001F64B‍♀️ Question"
about: Ask a question about Mithril
about: Ask a question about Mithril.js
title: ''
labels: 'Type: Question'
assignees: ''
Expand All @@ -9,10 +9,10 @@ assignees: ''

<!-- Provide a general summary of your question in the "Title" above -->
<!--
Provide the exact version of Mithril you're experiencing these issues with. This
Provide the exact version of Mithril.js you're experiencing these issues with. This
matters, even if it's really old like version 0.1.0.
-->
**Mithril version:**
**Mithril.js version:**

<!--
Provide the name and version of both the browser and operating system you're
Expand Down
2 changes: 1 addition & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
# subdirectories.
tests/

# Mithril's mocks are for internal use only, and it's wholly undocumented for a
# Mithril.js' mocks are for internal use only, and it's wholly undocumented for a
# reason. I've already gotten way too many complaints over users' tests breaking
# from changes to it in patch releases. Let's force people to finally stop using
# them.
Expand Down
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ mithril.js [![npm Version](https://img.shields.io/npm/v/mithril.svg)](https://ww
</a>
</p>

- [What is Mithril?](#what-is-mithril)
- [What is Mithril.js?](#what-is-mithriljs?)
- [Installation](#installation)
- [Documentation](#documentation)
- [Getting Help](#getting-help)
- [Contributing](#contributing)

## What is Mithril?
## What is Mithril.js?

A modern client-side JavaScript framework for building Single Page Applications. It's small (<!-- size -->9.79 KB<!-- /size --> gzipped), fast and provides routing and XHR utilities out of the box.
A modern client-side JavaScript framework for building Single Page Applications. It's small (<!-- size -->10.04 KB<!-- /size --> gzipped), fast and provides routing and XHR utilities out of the box.

Mithril is used by companies like Vimeo and Nike, and open source platforms like Lichess 👍.
Mithril.js is used by companies like Vimeo and Nike, and open source platforms like Lichess 👍.

Mithril supports IE11, Firefox ESR, and the last two versions of Firefox, Edge, Safari, and Chrome. No polyfills required. 👌
Mithril.js supports IE11, Firefox ESR, and the last two versions of Firefox, Edge, Safari, and Chrome. No polyfills required. 👌

## Installation

Expand Down Expand Up @@ -60,11 +60,11 @@ You may be interested in the [API Docs](https://mithril.js.org/api.html), a [Sim

## Getting Help

Mithril has an active & welcoming community on [Gitter](https://gitter.im/mithriljs/mithril.js), or feel free to ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/mithril.js) using the `mithril.js` tag.
Mithril.js has an active & welcoming community on [Gitter](https://gitter.im/mithriljs/mithril.js), or feel free to ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/mithril.js) using the `mithril.js` tag.

## Contributing

There's a [Contributing FAQ](https://mithril.js.org/contributing.html) on the mithril site that hopefully helps, but if not definitely hop into the [Gitter Room](https://gitter.im/mithriljs/mithril.js) and ask away!
There's a [Contributing FAQ](https://mithril.js.org/contributing.html) on the Mithril.js site that hopefully helps, but if not definitely hop into the [Gitter Room](https://gitter.im/mithriljs/mithril.js) and ask away!

---

Expand Down
2 changes: 1 addition & 1 deletion api/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function decodeURIComponentSave(component) {

module.exports = function($window, mountRedraw) {
var callAsync = $window == null
// In case Mithril's loaded globally without the DOM, let's not break
// In case Mithril.js' loaded globally without the DOM, let's not break
? null
: typeof $window.setImmediate === "function" ? $window.setImmediate : $window.setTimeout
var p = Promise.resolve()
Expand Down
10 changes: 7 additions & 3 deletions docs/animation.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<!--meta-description
Approaches you can use to animate your Mithril.js-based apps, including technology and performance suggestions
-->

# Animations

- [Technology choices](#technology-choices)
Expand All @@ -11,7 +15,7 @@

Animations are often used to make applications come alive. Nowadays, browsers have good support for CSS animations, and there are [various](https://greensock.com/gsap) [libraries](https://github.com/julianshapiro/velocity) that provide fast JavaScript-based animations. There's also an upcoming [Web API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) and a [polyfill](https://github.com/web-animations/web-animations-js) if you like living on the bleeding edge.

Mithril does not provide any animation APIs per se, since these other options are more than sufficient to achieve rich, complex animations. Mithril does, however, offer hooks to make life easier in some specific cases where it's traditionally difficult to make animations work.
Mithril.js does not provide any animation APIs per se, since these other options are more than sufficient to achieve rich, complex animations. Mithril.js does, however, offer hooks to make life easier in some specific cases where it's traditionally difficult to make animations work.

---

Expand Down Expand Up @@ -41,7 +45,7 @@ m.mount(document.body, FancyComponent)

### Animation on element removal

The problem with animating before removing an element is that we must wait until the animation is complete before we can actually remove the element. Fortunately, Mithril offers the [`onbeforeremove`](lifecycle-methods.md#onbeforeremove) hook that allows us to defer the removal of an element.
The problem with animating before removing an element is that we must wait until the animation is complete before we can actually remove the element. Fortunately, Mithril.js offers the [`onbeforeremove`](lifecycle-methods.md#onbeforeremove) hook that allows us to defer the removal of an element.

Let's create an `exit` animation that fades `opacity` from 1 to 0.

Expand Down Expand Up @@ -86,7 +90,7 @@ var FancyComponent = {

`vnode.dom` points to the root DOM element of the component (`<div class="fancy">`). We use the classList API here to add an `exit` class to `<div class="fancy">`.

Then we return a [Promise](promise.md) that resolves when the `animationend` event fires. When we return a promise from `onbeforeremove`, Mithril waits until the promise is resolved and only then it removes the element. In this case, it waits for the exit animation to finish.
Then we return a [Promise](promise.md) that resolves when the `animationend` event fires. When we return a promise from `onbeforeremove`, Mithril.js waits until the promise is resolved and only then it removes the element. In this case, it waits for the exit animation to finish.

We can verify that both the enter and exit animations work by mounting the `Toggler` component:

Expand Down
4 changes: 4 additions & 0 deletions docs/api.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<!--meta-description
An API cheatsheet for Mithril.js
StephanHoyer marked this conversation as resolved.
Show resolved Hide resolved
-->

# API

### Cheatsheet
Expand Down
24 changes: 14 additions & 10 deletions docs/autoredraw.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<!--meta-description
The Mithril.js auto-redraw system re-renders your app after some functions complete. Here, we describe the idiomatic Mithril.js patterns that trigger those redraws.
-->

# The auto-redraw system

Mithril implements a virtual DOM diffing system for fast rendering, and in addition, it offers various mechanisms to gain granular control over the rendering of an application.
Mithril.js implements a virtual DOM diffing system for fast rendering, and in addition, it offers various mechanisms to gain granular control over the rendering of an application.

When used idiomatically, Mithril employs an auto-redraw system that synchronizes the DOM whenever changes are made in the data layer. The auto-redraw system becomes enabled when you call `m.mount` or `m.route` (but it stays disabled if your app is bootstrapped solely via `m.render` calls).
When used idiomatically, Mithril.js employs an auto-redraw system that synchronizes the DOM whenever changes are made in the data layer. The auto-redraw system becomes enabled when you call `m.mount` or `m.route` (but it stays disabled if your app is bootstrapped solely via `m.render` calls).

The auto-redraw system simply consists of triggering a re-render function behind the scenes after certain functions complete.

### After event handlers

Mithril automatically redraws after DOM event handlers that are defined in a Mithril view:
Mithril.js automatically redraws after DOM event handlers that are defined in a Mithril.js view:

```javascript
var MyComponent = {
Expand Down Expand Up @@ -44,7 +48,7 @@ m.mount(document.body, MyComponent)

### After m.request

Mithril automatically redraws after [`m.request`](request.md) completes:
Mithril.js automatically redraws after [`m.request`](request.md) completes:

```javascript
m.request("/api/v1/users").then(function() {
Expand All @@ -63,7 +67,7 @@ m.request("/api/v1/users", {background: true}).then(function() {

### After route changes

Mithril automatically redraws after [`m.route.set()`](route.md#mrouteset) calls and after route changes via links using [`m.route.Link`](route.md#mroutelink).
Mithril.js automatically redraws after [`m.route.set()`](route.md#mrouteset) calls and after route changes via links using [`m.route.Link`](route.md#mroutelink).

```javascript
var RoutedComponent = {
Expand All @@ -87,11 +91,11 @@ m.route(document.body, "/", {

---

### When Mithril does not redraw
### When Mithril.js does not redraw

Mithril does not redraw after `setTimeout`, `setInterval`, `requestAnimationFrame`, raw `Promise` resolutions and 3rd party library event handlers (e.g. Socket.io callbacks). In those cases, you must manually call [`m.redraw()`](redraw.md).
Mithril.js does not redraw after `setTimeout`, `setInterval`, `requestAnimationFrame`, raw `Promise` resolutions and 3rd party library event handlers (e.g. Socket.io callbacks). In those cases, you must manually call [`m.redraw()`](redraw.md).

Mithril also does not redraw after lifecycle methods. Parts of the UI may be redrawn after an `oninit` handler, but other parts of the UI may already have been redrawn when a given `oninit` handler fires. Handlers like `oncreate` and `onupdate` fire after the UI has been redrawn.
Mithril.js also does not redraw after lifecycle methods. Parts of the UI may be redrawn after an `oninit` handler, but other parts of the UI may already have been redrawn when a given `oninit` handler fires. Handlers like `oncreate` and `onupdate` fire after the UI has been redrawn.

If you need to explicitly trigger a redraw within a lifecycle method, you should call `m.redraw()`, which will trigger an asynchronous redraw.

Expand All @@ -111,7 +115,7 @@ function StableComponent() {
}
```

Mithril does not auto-redraw vnode trees that are rendered via `m.render`. This means redraws do not occur after event changes and `m.request` calls for templates that were rendered via `m.render`. Thus, if your architecture requires manual control over when rendering occurs (as can sometimes be the case when using libraries like Redux), you should use `m.render` instead of `m.mount`.
Mithril.js does not auto-redraw vnode trees that are rendered via `m.render`. This means redraws do not occur after event changes and `m.request` calls for templates that were rendered via `m.render`. Thus, if your architecture requires manual control over when rendering occurs (as can sometimes be the case when using libraries like Redux), you should use `m.render` instead of `m.mount`.

Remember that `m.render` expects a vnode tree, and `m.mount` expects a component:

Expand All @@ -123,4 +127,4 @@ m.render(document.body, m(MyComponent))
m.mount(document.body, MyComponent)
```

Mithril may also avoid auto-redrawing if the frequency of requested redraws is higher than one animation frame (typically around 16ms). This means, for example, that when using fast-firing events like `onresize` or `onscroll`, Mithril will automatically throttle the number of redraws to avoid lag.
Mithril.js may also avoid auto-redrawing if the frequency of requested redraws is higher than one animation frame (typically around 16ms). This means, for example, that when using fast-firing events like `onresize` or `onscroll`, Mithril.js will automatically throttle the number of redraws to avoid lag.
16 changes: 10 additions & 6 deletions docs/buildPathname.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
<!--meta-description
Documentation on m.buildPathname(), which creates URLs from path templates and query objects
-->
# buildPathname(object)

- [Description](#description)
Expand All @@ -11,20 +14,21 @@
Turns a [path template](paths.md) and a parameters object into a string of form `/path/user?a=1&b=2`

```javascript
var querystring = m.buildPathname("/path/:id", {id: "user", a: "1", b: "2"})
var pathname = m.buildPathname("/path/:id", {id: "user", a: "1", b: "2"})
// "/path/user?a=1&b=2"
```

---

### Signature

`querystring = m.buildPathname(object)`
`pathname = m.buildPathname(object)`

Argument | Type | Required | Description
------------ | ------------------------------------------ | -------- | ---
`object` | `Object` | Yes | A key-value map to be converted into a string
**returns** | `String` | | A string representing the input object
`path` | `String` | Yes | A URL path
`query ` | `Object` | Yes | A key-value map to be converted into a string
**returns** | `String` | | A string representing the URL with the query string

[How to read signatures](signatures.md)

Expand All @@ -35,7 +39,7 @@ Argument | Type | Required | Descripti
The `m.buildPathname` creates a [path name](paths.md) from a path template and a parameters object. It's useful for building URLs, and it's what [`m.route`](route.md), [`m.request`](request.md), and [`m.jsonp`](jsonp.md) all use internally to interpolate paths. It uses [`m.buildQueryString`](buildQueryString.md) to generate the query parameters to append to the path name.

```javascript
var querystring = m.buildPathname("/path/:id", {id: "user", a: 1, b: 2})
var pathname = m.buildPathname("/path/:id", {id: "user", a: 1, b: 2})

// querystring is "/path/user?a=1&b=2"
// pathname is "/path/user?a=1&b=2"
```
6 changes: 5 additions & 1 deletion docs/buildQueryString.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<!--meta-description
Documentation on m.buildQueryString(), which converts an object like {a: "1", b: "2"} into a string like "a=1&b=2"
-->

# buildQueryString(object)
StephanHoyer marked this conversation as resolved.
Show resolved Hide resolved

- [Description](#description)
Expand All @@ -23,7 +27,7 @@ var querystring = m.buildQueryString({a: "1", b: "2"})

Argument | Type | Required | Description
------------ | ------------------------------------------ | -------- | ---
`object` | `Object` | Yes | A key-value map to be converted into a string
`query` | `Object` | Yes | A key-value map to be converted into a string
**returns** | `String` | | A string representing the input object

[How to read signatures](signatures.md)
Expand Down
6 changes: 5 additions & 1 deletion docs/censor.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<!--meta-description
Documentation on m.censor(), which helps cloning vnodes
-->

# censor(object, extra)

- [Description](#description)
Expand Down Expand Up @@ -109,7 +113,7 @@ function Layout() {
}
```

This would end up [throwing an error](keys.md#key-restrictions) because here's what Mithril sees when creating the `Layout` vnode:
This would end up [throwing an error](keys.md#key-restrictions) because here's what Mithril.js sees when creating the `Layout` vnode:

```javascript
return [
Expand Down
Loading