docs: latest site updates (#2126)
This commit is contained in:
parent
6fb77b7771
commit
c335aa70ca
6 changed files with 27 additions and 27 deletions
|
|
@ -18,7 +18,7 @@ If you're new to Javascript or just want a very simple setup to get your feet we
|
|||
### NPM
|
||||
|
||||
```bash
|
||||
$> npm install mithril --save
|
||||
$ npm install mithril --save
|
||||
```
|
||||
|
||||
---
|
||||
|
|
@ -27,33 +27,32 @@ $> npm install mithril --save
|
|||
|
||||
1. Initialize the directory as an npm package
|
||||
```bash
|
||||
$> npm init --yes
|
||||
$ npm init --yes
|
||||
```
|
||||
|
||||
2. install required tools
|
||||
```bash
|
||||
$> npm install mithril --save
|
||||
$> npm install webpack webpack-cli --save-dev
|
||||
$ npm install mithril --save
|
||||
$ npm install webpack webpack-cli --save-dev
|
||||
```
|
||||
|
||||
3. Add a "start" entry to the scripts section in `package.json`.
|
||||
```js
|
||||
{
|
||||
// ...
|
||||
"scripts": {
|
||||
"start": "webpack src/index.js --output bin/app.js -d --watch"
|
||||
}
|
||||
// ...
|
||||
"scripts": {
|
||||
"start": "webpack src/index.js --output bin/app.js -d --watch"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. Create `src/index.js`
|
||||
4. Create `src/index.js` file.
|
||||
```js
|
||||
import m from "mithril";
|
||||
|
||||
m.render(document.body, "hello world");
|
||||
```
|
||||
|
||||
4. create `index.html`
|
||||
5. create `index.html`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<body>
|
||||
|
|
@ -61,12 +60,12 @@ m.render(document.body, "hello world");
|
|||
</body>
|
||||
```
|
||||
|
||||
5. run bundler
|
||||
6. run bundler
|
||||
```bash
|
||||
$> npm start
|
||||
$ npm start
|
||||
```
|
||||
|
||||
6. open `index.html` in a browser
|
||||
7. open `index.html` in a browser
|
||||
|
||||
#### Step by step
|
||||
|
||||
|
|
@ -268,7 +267,7 @@ m.render(document.body, "hello world")
|
|||
TypeScript type definitions are available from DefinitelyTyped. They can be installed with:
|
||||
|
||||
```bash
|
||||
$> npm install @types/mithril --save-dev
|
||||
$ npm install @types/mithril --save-dev
|
||||
```
|
||||
|
||||
For example usage, to file issues or to discuss TypeScript related topics visit: https://github.com/MithrilJS/mithril.d.ts
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
# Integrating with Other Libraries
|
||||
# 3rd Party Integration
|
||||
|
||||
Integration with third party libraries or vanilla javascript code can be achieved via [lifecycle methods](lifecycle-methods.md).
|
||||
|
||||
- [Usage](#usage)
|
||||
## Example
|
||||
|
||||
### Usage
|
||||
```javascript
|
||||
var FullCalendar = {
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ var FullCalendar = {
|
|||
// Consider that the lib will modify this parent element in the DOM (e.g. add dependent class attribute and values).
|
||||
// As long as you return the same view results here, mithril will not
|
||||
// overwrite the actual DOM because it's always comparing old and new VDOM
|
||||
// before applying DOM updates.
|
||||
// before applying DOM updates.
|
||||
view: function (vnode) {
|
||||
return m('div')
|
||||
},
|
||||
|
|
@ -54,4 +54,4 @@ m.mount(document.body, {
|
|||
|
||||
```
|
||||
|
||||
Running example [flems: FullCalendar](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHigjQGsACAJxigBeADog4xAJ6w4hGDGKjuhfmBEgSxAA5xEAel3UAJmgBWcfNSi0ArobBQM-C7Sy6MJjAA9d7AEZxdMGsoKGoMWDRDR10AZnwAdnwABkDg0PCmKN58LA4LODhRAD4QAF8KdGxcRAIzShp6RmYagDdHbgAxNIBhDMj2wW5gYTQR4WJ6an4MRkRuILRqYgh6bgAKFrRaQxgASiGxhWI6NDhaWHwrAHM1gHIukN6oft5EREnpxlvdw-GAEg2Wx2+EMLl2+CCjz6WTWw1GR3G+m4mmsxG4EhsvG4HAgy3C3FommW9Dg3AwkW4YRCvgw1E4pNk-F+xFKP1G8PGAHlfCYYEt8BgChArmhAdsYALiMReOZNI4mMQAMrEGYwChDSFQJ6ZRwAUSgc024pBLlZh3KY3hLQgMAA7nMFksVmh1kadvs4eNxvxiNZeC6sHdDBAWt9zRRLeN6L4YGBaPx+FhaC0YA7rItiS6xe6DhziEiAErpsloCTcHbiXi0Mu6SmwcnWTTcHDEQjbBkwJzM-QAt0S8SqiE9aF6qDgzXal5B+DS6th+GlEaL9lYHI2BhrUHUaw4Bj4XzbCTqz3Ea12tMZ52uoF7XNe6XyP0u5DM8aB26EACMt3Vt0nWW+CM8zfNYHi1EdeGPOV+AYZVVUNG98AHRhWSA+8QNuXxUQmNAfzvBEjkmdg6TmTR+BaV8WV-ABZXFlGgbgACFsNWABaQDKPfLCpXoPCT3QnDLAgEjuDQGBPAUYCqO4W5aNbXgGOYniXQAannZkAF1IyOR1M1E8TiDWD1KN7RDkIlCcIP1cdhwiGFbjEiT1KOZdmV0q8yJgFojPw+9TONcyhyhOzRxs4KdV4O5PNDNl71chdLVZMoKhATAcDwfIECoE4mmIPAyg0qh2C4BAUEqdKalyeToHqP1yBqDRtD0XR000TgrmcVwqvoqAAAFP3wAaAFZdG6hSoHwOoqEkTRqhAOpynKuak13PKqDqvBGp0fRWvazrRpcBVeoAJkGgBOfBjoO1bJqykAZrmhaUrSx6AEdrE7CRat4er1ClJqdrQNqOroVwTHez7eriU7P10YNxF0cGPt4CRbvqB68Cepa8E1KkIu+36tua3aQZcVIQjxl4oYSZI4YgBHcYgtHpokWbMYQUoNNKIA)
|
||||
Running example [flems: FullCalendar](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHigjQGsACAJxigBeADog4xAJ6w4hGDGKjuhfmBEgSxAA5xEAel3UAJmgBWcfNSi0ArobBQM-C7Sy6MJjAA9d7AEZxdMGsoKGoMWDRDR10AZnwAdnwABkDg0PCmKN58LA4LODhRAD4QAF8KdGxcRAIzShp6RmYagDdHbgAxNIBhDMj2wW5gYTQR4WJ6an4MRkRuILRqYgh6bgAKFrRaQxgASiGxhWI6NDhaWHwrAHM1gHIukN6oft5EREnpxlvdw-GAEg2Wx2+EMLl2+CCjz6WTWw1GR3G+m4mmsxG4EhsvG4HAgy3C3FommW9Dg3AwkW4YRCvgw1E4pNk-F+xFKP1G8PGAHlfCYYEt8BgChArmhAdsYALiMReOZNI4mMQAMrEGYwChDSFQJ6ZRwAUSgc024pBLlZh3KY3hLQgMAA7nMFksVmh1kadvs4eNxvxiNZeC6sHdDBAWt9zRRLeN6L4YGBaPx+FhaC0YA7rItiS6xe6DhziEiAErpsloCTcHbiXi0Mu6SmwcnWTTcHDEQjbBkwJzM-QAt0S8SqiE9aF6qDgzXal5B+DS6th+GlEaL9lYHI2BhrUHUaw4Bj4XzbCTqz3Ea12tMZ52uoF7XNe6XyP0u5DM8aB26EACMt3Vt0nWW+CM8zfNYHi1EdeGPOV+AYZVVUNG98AHRhWSA+8QNuXxUQmNAfzvBEjkmdg6TmTR+BaV8WV-ABZXFlGgbgACFsNWABaQDKPfLCpXoPCT3QnDLAgEjuDQGBPAUYCqO4W5aNbXgGOYniXQAannZkAF1IyOR1M1E8TiDWD1KN7RDkIlCcIP1cdhwiGFbjEiT1KOZdmV0q8yJgFojPw+9TONcyhyhOzRxs4KdV4O5PNDNl71chdLVZMoKhATAcDwfIECoE4mmIPAyg0qh2C4BAUEqdKalyeToHqP1yBqDRtD0XR000TgrmcVwqvoqAAAFP3wAaAFZdG6hSoHwOoqEkTRqhAOpynKuak13PKqDqvBGp0fRWvazrRpcBVeoAJkGgBOfBjoO1bJqykAZrmhaUrSx6AEdrE7CRat4er1ClJqdrQNqOroVwTHez7eriU7P10YNxF0cGPt4CRbvqB68Cepa8E1KkIu+36tua3aQZcVIQjxl4oYSZI4YgBHcYgtHpokWbMYQUoNNKIA)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# Learning Mithril
|
||||
# Learning Resources
|
||||
|
||||
Links to Mithril learning content:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
- Tutorials
|
||||
- [Installation](installation.md)
|
||||
- Getting Started
|
||||
- [Introduction](index.md)
|
||||
- [Installation](installation.md)
|
||||
- [Tutorial](simple-application.md)
|
||||
- [Learning Resources](learning-mithril.md)
|
||||
- [Getting Help](support.md)
|
||||
- Resources
|
||||
- [JSX](jsx.md)
|
||||
- [ES6](es6.md)
|
||||
|
|
@ -9,8 +11,7 @@
|
|||
- [Animation](animation.md)
|
||||
- [Testing](testing.md)
|
||||
- [Examples](examples.md)
|
||||
- [Integrating with Other Libraries](integrating-libs.md)
|
||||
- [Learning Mithril](learning-mithril.md)
|
||||
- [3rd Party Integration](integrating-libs.md)
|
||||
- Key concepts
|
||||
- [Vnodes](vnodes.md)
|
||||
- [Components](components.md)
|
||||
|
|
|
|||
|
|
@ -475,7 +475,7 @@ m.route(document.body, "/", {
|
|||
})
|
||||
```
|
||||
|
||||
Note that in this case, if the Layout component the `oninit` and `oncreate` lifecycle methods would only fire on the Layout component on the first route change (assuming all routes use the same layout).
|
||||
Note that in this case, if the Layout component has `oninit` and `oncreate` lifecycle methods, they would only fire on the first route change (assuming all routes use the same layout).
|
||||
|
||||
To clarify the difference between the two examples, example 1 is equivalent to this code:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
## Getting Help
|
||||
# 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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue