diff --git a/docs/contributing.md b/docs/contributing.md index e2e65fd6..5b4770d3 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -4,7 +4,7 @@ ## How do I go about contributing ideas or new features? -Create an [issue thread on Github](https://github.com/lhorie/mithril.js/issues/new) to suggest your idea so the community can discuss it. And don't worry, we're nice :) +Create an [issue thread on Github](https://github.com/lhorie/mithril.js/issues/new) to suggest your idea so the community can discuss it. If the consensus is that it's a good idea, the fastest way to get it into a release is to send a pull request. Without a PR, the time to implement the feature will depend on the bandwidth of the development team and its list of priorities. diff --git a/docs/fragment.md b/docs/fragment.md index cd1ff53a..018dc4ab 100644 --- a/docs/fragment.md +++ b/docs/fragment.md @@ -10,6 +10,23 @@ Allows attaching lifecycle methods to a fragment [vnode](vnodes.md) +```javascript +var groupVisible = true +var log = function() { + console.log("group is now visible") +} + +m("ul", [ + m("li", "child 1"), + m("li", "child 2"), + groupVisible ? m.fragment({oninit: log}, [ + // a fragment containing two elements + m("li", "child 3"), + m("li", "child 4"), + ]) : null +]) +``` + --- ### Signature diff --git a/docs/framework-comparison.md b/docs/framework-comparison.md index 70debb38..029d0319 100644 --- a/docs/framework-comparison.md +++ b/docs/framework-comparison.md @@ -1,5 +1,9 @@ # Framework comparison +- [React](#react) +- [Angular](#angular) +- [Vue](#vue) + If you're reading this page, you probably have used other frameworks to build applications, and you want to know if Mithril would help you solve your problems more effectively. In this page, you will find common arguments about other frameworks and comments on where Mithril is similar or why it differs from them. diff --git a/docs/guides.md b/docs/guides.md index 4abbf045..a4333b58 100644 --- a/docs/guides.md +++ b/docs/guides.md @@ -1,7 +1,7 @@ - Tutorials - [Installation](installation.md) - [Introduction](introduction.md) - - [Tutorial](tutorial.md) + - [Tutorial](simple-application.md) - [Testing](testing.md) - [Examples](examples.md) - Key concepts @@ -14,4 +14,5 @@ - [Contributing](contributing.md) - [Credits](credits.md) - Misc + - [Framework comparison](framework-comparison.md) - [Change log/Migration](change-log.md) diff --git a/docs/installation.md b/docs/installation.md index 24135b10..7536cbce 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -1,5 +1,8 @@ # Installation +- [CDN](#cdn) +- [NPM](#npm) + ### CDN If you're new to Javascript or just want a very simple setup to get your feet wet, you can get Mithril from a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network): @@ -12,33 +15,6 @@ If you're new to Javascript or just want a very simple setup to get your feet we ### NPM -#### Quick start with Budo - -The [budo browserify development server](https://github.com/mattdesl/budo) -allows for the fastest way to have your pure JavaScript app (no HTML file needed) -running in the browser with the covenient live reload feature on any source changes. - -```bash -# 1) install -npm install mithril@rewrite --save -npm install budo -g - -# 2) add this line into the scripts section in package.json -# "scripts": { -# "start": "budo --live --open index.js" -# } - -# 3) create an `index.js` file - -# 4) run budo -npm start -``` - -The source file `index.js` will be compiled (bundled) and a browser window opens showing the result. -Any changes in the source files will instantly get recompiled and the -browser will refresh reflecting the changes. - - #### Quick start with Webpack ```bash @@ -62,6 +38,10 @@ npm run build open index.html ``` +The source file `index.js` will be compiled (bundled) and a browser window opens showing the result. +Any changes in the source files will instantly get recompiled and the +browser will refresh reflecting the changes. + #### Step by step For production-level projects, the recommended way of installing Mithril is to use NPM. @@ -166,9 +146,31 @@ m.mount(document.body, MyComponent) Note that in this example, we're using `m.mount`, which wires up the component to Mithril's autoredraw system. In most applications, you will want to use `m.mount` (or `m.route` if your application has multiple screens) instead of `m.render` to take advantage of the autoredraw system, rather than re-rendering manually every time a change occurs. -#### Alternate ways to use Mithril +--- -##### Mithril bundler +### Alternate ways to use Mithril + +#### Live reload development environment + +Live reload is a feature where code changes automatically trigger the page to reload. [Budo](https://github.com/mattdesl/budo) is one tool that enables live reloading. + +```bash +# 1) install +npm install mithril@rewrite --save +npm install budo -g + +# 2) add this line into the scripts section in package.json +# "scripts": { +# "start": "budo --live --open index.js" +# } + +# 3) create an `index.js` file + +# 4) run budo +npm start +``` + +#### Mithril bundler Mithril comes with a bundler tool of its own. It is sufficient for projects that have no other dependencies other than Mithril, but it's currently considered experimental for projects that require other NPM dependencies. It produces smaller bundles than webpack, but you should not use it in production yet. @@ -183,7 +185,7 @@ If you want to try it and give feedback, you can open `package.json` and change } ``` -##### Vanilla +#### Vanilla If you don't have the ability to run a bundler script due to company security policies, there's an options to not use a module system at all: diff --git a/docs/style.css b/docs/style.css index faef030c..d80b9bca 100644 --- a/docs/style.css +++ b/docs/style.css @@ -5,8 +5,11 @@ nav a {border-left:1px solid #ddd;padding:0 10px;} nav a:first-child {border:0;padding-left:0;} main {margin-bottom:100px;} main section {margin-left:270px;} -h1 {margin:0 0 15px;} -h5 {font-style:italic;} +h1 {font-size:24px;margin:0 0 15px;} +h2 {font-size:22px;margin:30px 0 15px;} +h3 {font-size:20px;margin:30px 0 15px;} +h4 {font-size:18px;margin:15px 0 15px;} +h5 {font-weight:bold;margin:15px 0 15px;} pre,code {background:#eee;font-family:monospace;} pre {border-left:3px solid #1e5799;overflow:auto;padding:10px 20px;} code {border:1px solid #ddd;display:inline-block;margin:0 0 1px;padding:3px;white-space:pre;} diff --git a/docs/testing.md b/docs/testing.md index 63f231cf..ad4aaba0 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -8,11 +8,7 @@ The easist way to setup the test runner is to create an NPM script for it. Open { "name": "my-project", "scripts": { - "build": "bundle index.js --output app.js --watch", "test": "ospec" - }, - "dependencies": { - "mithril": "^1.0.0-rc.5" } } ```