From a52ae57d49bf1adf0110db585cc19ffc663ecade Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Wed, 26 Dec 2018 14:30:31 +0100 Subject: [PATCH 01/19] Initial addition of flems - fixes #526 --- docs/index.md | 123 +++++++++++++++++++++++++++++++++++++++++------ docs/layout.html | 46 ++++++++++++++++++ 2 files changed, 155 insertions(+), 14 deletions(-) diff --git a/docs/index.md b/docs/index.md index 979212dbe..3692e84df 100644 --- a/docs/index.md +++ b/docs/index.md @@ -65,12 +65,22 @@ Let's create an HTML file to follow along: ``` -To make things simpler you can fork this pen which already has the latest version of mithril loaded. +To make things simpler you can try out mithril right here. This is a live playground with mithril preloaded, which - by the way, is also built in mithril. -

See the Pen Mithril Scaffold by Pat Cavit (@tivac) on CodePen.

- +```js +var root = document.body + +// Your code here + +m.mount(root, { + view: function() { + return m("h1", "Try me out") + } +}) -Mithril is also loaded onto this page already, so you can start poking at the `m` object in the developer console right away if you'd like! + +``` +> *[If it doesn't load, or you want a full playground, click here to try it out](https://flems.io/mithril#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4s+LLQCuDABQATWtSk4G+AEa15ATwoACYAB00e03oBuEGAHdEesDOrEI9WQEoDxs970AnGMRSviZYsgDkhACMYfphACq+2no4etLEYW5eZqzGrG6UIHAwsE4uaAg8AAyIAEyRbBwgmDh4+NRwAjT0jMw8bAC6VFAQaADWFahNXGIQxIS+0AVB5DwkxAAOcIgA9Nsy66MA5m20WNtYs-PQAAKR+HcAbOeXC1D4-AXE2uvchdQL61ErH6rCAA)* --- @@ -94,8 +104,11 @@ As you can see, you use the same code to both create and update HTML. Mithril au #### Live Example -

See the Pen Mithril Hello World by Pat Cavit (@tivac) on CodePen.

- +```js +var root = document.body + +m.render(root, "Hello World") +``` --- @@ -133,8 +146,16 @@ m("main", [ #### Live Example -

See the Pen Simple Mithril Example by Pat Cavit (@tivac) on CodePen.

- +```js +var root = document.body + +m.render(root, [ + m("main", [ + m("h1", {class: "title"}, "My first app"), + m("button", "A button"), + ]) +]) +``` Note: If you prefer `` syntax, [it's possible to use it via a Babel plugin](jsx.md). @@ -204,8 +225,25 @@ If you're wondering about performance, it turns out Mithril is very fast at rend #### Live Example -

See the Pen Mithril Component Example by Pat Cavit (@tivac) on CodePen.

- +```js +var root = document.body +var count = 0 // added a variable + +var Hello = { + view: function() { + return m("main", [ + m("h1", { + class: "title" + }, "My first app"), + m("button", { + onclick: function() {count++} + }, count + " clicks") + ]) + } +} + +m.mount(root, Hello) +``` --- @@ -242,8 +280,36 @@ Also, as you would expect, clicking on the link on the splash page takes you to #### Live Example -

See the Pen Mithril Routing Example by Pat Cavit (@tivac) on CodePen.

- +```js +var root = document.body +var count = 0 + +var Hello = { + view: function() { + return m("main", [ + m("h1", { + class: "title" + }, "My first app"), + m("button", { + onclick: function() {count++} + }, count + " clicks"), + ]) + } +} + +var Splash = { + view: function() { + return m("a", { + href: "#!/hello" + }, "Enter!") + } +} + +m.route(root, "/splash", { + "/splash": Splash, + "/hello": Hello, +}) +``` --- @@ -289,8 +355,37 @@ Clicking the button should now update the count. #### Live Example -

See the Pen Mithril XHR Example by Pat Cavit (@tivac) on CodePen.

- +```js +var root = document.body +var count = 0 + +var increment = function() { + m.request({ + method: "PUT", + url: "//rem-rest-api.herokuapp.com/api/tutorial/1", + data: {count: count + 1}, + withCredentials: true, + }) + .then(function(data) { + count = parseInt(data.count) + }) +} + +var Hello = { + view: function() { + return m("main", [ + m("h1", { + class: "title" + }, "My first app"), + m("button", { + onclick: increment + }, count + " clicks"), + ]) + } +} + +m.mount(root, Hello) +``` --- diff --git a/docs/layout.html b/docs/layout.html index fa06f4f11..6e7f5f62e 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -38,5 +38,51 @@

Mithril [version]

} } + + + From 63332916c4b7788b9faa560692763be9a7ae2b0f Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Wed, 26 Dec 2018 16:15:21 +0100 Subject: [PATCH 02/19] Fix leftover ```js code blocks --- docs/components.md | 4 ++-- docs/installation.md | 4 ++-- docs/testing.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components.md b/docs/components.md index 3dccc5c1c..479baa80e 100644 --- a/docs/components.md +++ b/docs/components.md @@ -456,7 +456,7 @@ var Modal = { If you do it like above, you could run into issues when using it: -```js +```javascript var MyModal = { view: function() { return m(Modal, { @@ -473,7 +473,7 @@ var MyModal = { Instead, you should forward *single* attributes into vnodes: -```js +```javascript // PREFER var Modal = { // ... diff --git a/docs/installation.md b/docs/installation.md index 0c2625d0c..2c4dbb72d 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -37,7 +37,7 @@ $ npm install webpack webpack-cli --save-dev ``` 3. Add a "start" entry to the scripts section in `package.json`. -```js +```javascript { // ... "scripts": { @@ -47,7 +47,7 @@ $ npm install webpack webpack-cli --save-dev ``` 4. Create `src/index.js` file. -```js +```javascript import m from "mithril"; m.render(document.body, "hello world"); ``` diff --git a/docs/testing.md b/docs/testing.md index ead115172..942b67893 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -42,7 +42,7 @@ Mithril has a few dependencies on globals that exist in all its supported browse The simplest way to do this is ensure the following snippet of code runs **before** you include mithril itself in your project. -```js +```javascript // Polyfill DOM env for mithril global.window = require("mithril/test-utils/browserMock.js")(); global.document = window.document; From 1eda6060f00574a2bd9033cfb21052f2774e36c2 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Wed, 26 Dec 2018 17:47:51 +0100 Subject: [PATCH 03/19] Add DOCTYPE --- docs/layout.html | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/layout.html b/docs/layout.html index 6e7f5f62e..e1a8900da 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -1,3 +1,4 @@ + From abb56ed9f665a7dd695b3e45e256f6d0d7865ebe Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Wed, 26 Dec 2018 17:48:15 +0100 Subject: [PATCH 04/19] Fix edge & IE11 --- docs/layout.html | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/docs/layout.html b/docs/layout.html index e1a8900da..11bc28676 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -53,19 +53,21 @@

Mithril [version]

From f7b7b9d315341835b167100f2cff8f604e8fa328 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Wed, 26 Dec 2018 17:48:46 +0100 Subject: [PATCH 05/19] Don't show console --- docs/layout.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/layout.html b/docs/layout.html index 11bc28676..fb38b04bd 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -67,7 +67,7 @@

Mithril [version]

editable : true, toolbar : false, shareButton : true, - console : true, + console : false, autoHeight : true, files: [{ name: ".js", From bcf41a68aa6c9f303eda95710638caac14c960fc Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Wed, 26 Dec 2018 18:01:36 +0100 Subject: [PATCH 06/19] Change orientation on mobile --- docs/layout.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/layout.html b/docs/layout.html index fb38b04bd..0f7cf0b10 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -50,6 +50,11 @@

Mithril [version]

max-height: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.25); } + @media (max-width: 500px) { + .flems { + min-height: calc(100vw * 1.3); + } + } + - - - diff --git a/docs/style.css b/docs/style.css index 3da4e572b..655e432fd 100644 --- a/docs/style.css +++ b/docs/style.css @@ -95,3 +95,10 @@ h1 + ul strong + ul {border-left:3px solid #1e5799;} .token.selector,.token.attr-name,.token.string,.token.builtin {color:#690;} .token.atrule,.token.attr-value,.token.punctuation,.token.keyword {color:#1e5799;} .token.regex,.token.important {color:#e90;} + +/* flems theming */ +.flems main { margin: 0; max-width: auto; } +.flems { margin: 20px; max-height: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.25); } +@media (max-width: 500px) { + .flems { min-height: calc(100vw * 1.3); } +} From 2b540b13dc15257b37f18993b8aea8417dcfa94c Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Thu, 27 Dec 2018 22:44:09 +0100 Subject: [PATCH 09/19] Fix header alignment in IE --- docs/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/style.css b/docs/style.css index 655e432fd..bd3f5c507 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,6 +1,6 @@ body {background:white;-webkit-text-size-adjust: 100%;} body,table,h5 {font:normal 16px 'Open Sans';} -header,main {margin:auto;max-width:1000px;} +header,main {max-width:1000px;} header section {position:absolute;width:250px;} nav a {border-left:1px solid #ddd;padding:0 10px;} nav a:first-child {border:0;padding-left:0;} From 56a0f33e96b682f19fc0e689219996372b0867a2 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Fri, 28 Dec 2018 13:29:11 +0100 Subject: [PATCH 10/19] Don't rotate logo --- docs/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/style.css b/docs/style.css index bd3f5c507..0e8a7bf47 100644 --- a/docs/style.css +++ b/docs/style.css @@ -28,7 +28,7 @@ h2 {font-size:22px;margin:45px 0 15px;} h3 {font-size:20px;margin:45px 0 15px;} h4 {font-size:18px;margin:30px 0 15px;} h5 {font-weight:bold;margin:15px 0 15px;} -h1 img {transform:rotate(180deg);vertical-align:middle;width:20px;} +h1 img {vertical-align:middle;width:20px;} h1 small {font-size:16px;} h2 a,h3 a,h4 a,h5 a, h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover, From 8d1523f6b69aebf4250612f972f1ab643d86392d Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Sun, 28 Jul 2019 23:31:21 +0200 Subject: [PATCH 11/19] Fix conflicts --- docs/index.md | 37 ------------------------------------- docs/testing.md | 8 -------- 2 files changed, 45 deletions(-) diff --git a/docs/index.md b/docs/index.md index 194b1fb89..219472c4f 100644 --- a/docs/index.md +++ b/docs/index.md @@ -69,7 +69,6 @@ Let's create an HTML file to follow along: To make things simpler you can try out mithril right here. This is a live playground with mithril preloaded, which - by the way, is also built in mithril. -<<<<<<< HEAD ```js var root = document.body @@ -80,12 +79,6 @@ m.mount(root, { return m("h1", "Try me out") } }) -======= -

See the Pen Mithril Scaffold by Pat Cavit (@tivac) on CodePen.

- ->>>>>>> MithrilJS/next - - ``` > *[If it doesn't load, or you want a full playground, click here to try it out](https://flems.io/mithril@next#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4s+LLQCuDABQATWtSk4G+AEa15ATwoACYAB00e03oBuEGAHdEesDOrEI9WQEoDxs970AnGMRSviZYsgDkhACMYfphACq+2no4etLEYW5eZqzGrG6UIHAwsE4uaAg8ACyIAExsHCCYOHj41HACNPSMzDxsALqsQA)* @@ -111,16 +104,11 @@ As you can see, you use the same code to both create and update HTML. Mithril au #### Live Example -<<<<<<< HEAD ```js var root = document.body m.render(root, "Hello World") ``` -======= -

See the Pen Mithril Hello World by Pat Cavit (@tivac) on CodePen.

- ->>>>>>> MithrilJS/next --- @@ -158,7 +146,6 @@ m("main", [ #### Live Example -<<<<<<< HEAD ```js var root = document.body @@ -169,10 +156,6 @@ m.render(root, [ ]) ]) ``` -======= -

See the Pen Simple Mithril Example by Pat Cavit (@tivac) on CodePen.

- ->>>>>>> MithrilJS/next Note: If you prefer `` syntax, [it's possible to use it via a Babel plugin](jsx.md). @@ -242,7 +225,6 @@ If you're wondering about performance, it turns out Mithril is very fast at rend #### Live Example -<<<<<<< HEAD ```js var root = document.body var count = 0 // added a variable @@ -261,11 +243,6 @@ var Hello = { } m.mount(root, Hello) -``` -======= -

See the Pen Mithril Component Example by Pat Cavit (@tivac) on CodePen.

- ->>>>>>> MithrilJS/next --- @@ -302,7 +279,6 @@ Also, as you would expect, clicking on the link on the splash page takes you to #### Live Example -<<<<<<< HEAD ```js var root = document.body var count = 0 @@ -333,10 +309,6 @@ m.route(root, "/splash", { "/hello": Hello, }) ``` -======= -

See the Pen Mithril Routing Example by Pat Cavit (@tivac) on CodePen.

- ->>>>>>> MithrilJS/next --- @@ -382,7 +354,6 @@ Clicking the button should now update the count. #### Live Example -<<<<<<< HEAD ```js var root = document.body var count = 0 @@ -414,14 +385,6 @@ var Hello = { m.mount(root, Hello) ``` -======= -

- See the Pen - Mithril XHR Example by Isiah Meadows (@isiahmeadows) - on CodePen. -

- ->>>>>>> MithrilJS/next --- diff --git a/docs/testing.md b/docs/testing.md index 3797de971..3f0f11521 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -77,17 +77,9 @@ var MyComponent = require("../my-component.js") o.spec("MyComponent", function() { o("things are working", function() { var out = mq(MyComponent, {text: "What a wonderful day to be alive!"}) - -<<<<<<< HEAD -```javascript -// Polyfill DOM env for mithril -global.window = require("mithril/test-utils/browserMock.js")(); -global.document = window.document; -======= out.should.contain("day") }) }) ->>>>>>> MithrilJS/next ``` Once you've got all that set up, in that same terminal you installed everything to, run this command. From fbd9544d2ff64717b1f6fdc2d40331b59427e83b Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Sun, 28 Jul 2019 23:51:59 +0200 Subject: [PATCH 12/19] Allow `js` tags --- scripts/lint-docs.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/scripts/lint-docs.js b/scripts/lint-docs.js index 692f50800..c6cf5e6e6 100644 --- a/scripts/lint-docs.js +++ b/scripts/lint-docs.js @@ -105,7 +105,6 @@ class LintRenderer extends marked.Renderer { } } this._ensureCodeIsHighlightable() - this._ensureCodeHasConsistentTag() this._ensureCodeIsSyntaticallyValid() this._ensureCommentStyle() } @@ -133,12 +132,6 @@ class LintRenderer extends marked.Renderer { } } - _ensureCodeHasConsistentTag() { - if (this._lang === "js") { - this._emit("JS code block has wrong language tag", this._block()) - } - } - _ensureCodeIsSyntaticallyValid() { if (!this.lang || !(/^js$|^javascript$/).test(this._lang)) return if (this._error != null) { From b3236aad3766d149e7649f65165a53901d317a12 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Mon, 2 Sep 2019 14:09:09 +0200 Subject: [PATCH 13/19] Fix code block query --- docs/layout.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/layout.html b/docs/layout.html index 62a30f9fc..ae1b4c6a5 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -44,7 +44,8 @@

Mithril [version]

"body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }", "body { height: 100%; overflow:hidden; display:flex; justify-content: center; align-items:center; }" ].join("") - ;[].forEach.call(document.querySelectorAll("pre.language-js,pre code.lang-js"), function(el) { + ;[].forEach.call(document.querySelectorAll("pre.language-js,pre code.language-js"), function(el) { + console.log(el) if (el.tagName === "CODE") el = el.parentNode From aed221beda6679a5c7cf3c3aa31972ce5d55a8d3 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Mon, 2 Sep 2019 16:56:34 +0200 Subject: [PATCH 14/19] Fix Routing section and flems --- docs/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/index.md b/docs/index.md index 219472c4f..7a253757e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -243,6 +243,7 @@ var Hello = { } m.mount(root, Hello) +``` --- From 421a67b206963e8e5d3bb160b30d6804cdd0d498 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Mon, 2 Sep 2019 17:17:08 +0200 Subject: [PATCH 15/19] Fix firefox --- docs/layout.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/layout.html b/docs/layout.html index ae1b4c6a5..a4992d31c 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -44,10 +44,8 @@

Mithril [version]

"body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }", "body { height: 100%; overflow:hidden; display:flex; justify-content: center; align-items:center; }" ].join("") - ;[].forEach.call(document.querySelectorAll("pre.language-js,pre code.language-js"), function(el) { - console.log(el) - if (el.tagName === "CODE") - el = el.parentNode + ;[].forEach.call(document.querySelectorAll("pre code.language-js"), function(el) { + el = el.parentNode var div = document.createElement("div") window.Flems(div, { From e1a2f9752e6b41896f4358adc92f3bf9efab3800 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Mon, 2 Sep 2019 23:51:51 +0200 Subject: [PATCH 16/19] Improve flems styling --- docs/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/style.css b/docs/style.css index eecd6fec4..c52039aef 100644 --- a/docs/style.css +++ b/docs/style.css @@ -98,7 +98,8 @@ h1 + ul strong + ul {border-left:3px solid #1e5799;} /* flems theming */ .flems main { margin: 0; max-width: auto; } -.flems { margin: 20px; max-height: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.25); } +.flems { margin: 20px 0; max-height: 400px; } +.flems .runtime { border: 1px solid #ddd; } @media (max-width: 500px) { .flems { min-height: calc(100vw * 1.3); } } From c0c25ea6539c6d3b8f3e09531b9ba26bb26ae121 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Mon, 2 Sep 2019 23:54:07 +0200 Subject: [PATCH 17/19] Improve copy --- docs/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.md b/docs/index.md index 7a253757e..115230306 100644 --- a/docs/index.md +++ b/docs/index.md @@ -67,7 +67,7 @@ Let's create an HTML file to follow along: ``` -To make things simpler you can try out mithril right here. This is a live playground with mithril preloaded, which - by the way, is also built in mithril. +To make things simpler you can try out mithril right here. This is a live playground with Mithril preloaded that - by the way - is also built in Mithril. ```js var root = document.body @@ -80,7 +80,7 @@ m.mount(root, { } }) ``` -> *[If it doesn't load, or you want a full playground, click here to try it out](https://flems.io/mithril@next#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4s+LLQCuDABQATWtSk4G+AEa15ATwoACYAB00e03oBuEGAHdEesDOrEI9WQEoDxs970AnGMRSviZYsgDkhACMYfphACq+2no4etLEYW5eZqzGrG6UIHAwsE4uaAg8ACyIAExsHCCYOHj41HACNPSMzDxsALqsQA)* +> *[Click here to open the sample on flems.io](https://flems.io/mithril@next#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4s+LLQCuDABQATWtSk4G+AEa15ATwoACYAB00e03oBuEGAHdEesDOrEI9WQEoDxs970AnGMRSviZYsgDkhACMYfphACq+2no4etLEYW5eZqzGrG6UIHAwsE4uaAg8ACyIAExsHCCYOHj41HACNPSMzDxsALqsQA)* --- From 3e2733ee6fee974e4b31830f8c6a5afc8b826229 Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Tue, 3 Sep 2019 11:20:29 +0200 Subject: [PATCH 18/19] Fix data -> body in m.request sample --- docs/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 115230306..7b36f4abc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -363,7 +363,7 @@ var increment = function() { m.request({ method: "PUT", url: "//rem-rest-api.herokuapp.com/api/tutorial/1", - data: {count: count + 1}, + body: {count: count + 1}, withCredentials: true, }) .then(function(data) { From 9603c3a2334fcd285ad40e23656107820a78009f Mon Sep 17 00:00:00 2001 From: Rasmus Porsager Date: Mon, 14 Oct 2019 18:51:51 +0200 Subject: [PATCH 19/19] Add flems in docs usage description --- docs/contributing.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/contributing.md b/docs/contributing.md index ada5269ec..acc2345c4 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -6,6 +6,7 @@ - [I'm submitting a PR. How do I run tests?](#i'm-submitting-a-pr-how-do-i-run-tests?) - [How do I build Mithril?](#how-do-i-build-mithril?) - [Is there a style guide?](#is-there-a-style-guide?) +- [How do I embed live previews in docs?](#how-do-I-embed-live-previews-in-docs?) - [Why do tests mock the browser APIs?](#why-do-tests-mock-the-browser-apis?) - [Why does Mithril use its own testing framework and not Mocha/Jasmine/Tape?](#why-does-mithril-use-its-own-testing-framework-and-not-mochajasminetape?) - [Why doesn't the Mithril codebase use ES6 via Babel or Bublé? Would a PR to upgrade be welcome?](#why-doesn't-the-mithril-codebase-use-es6-via-babel-or-bublé?-would-a-pr-to-upgrade-be-welcome?) @@ -69,6 +70,12 @@ Spacing and formatting inconsistencies may be fixed after the fact, and we don't +## How do I embed live previews in docs? + +Any code tag marked as `js` and not `javascript` will automatically be wrapped in a live Flems preview. + + + ## Why do tests mock the browser APIs? Most notoriously, because it's impossible to test the router and some side effects properly otherwise. Also, mocks allow the tests to run under Node.js without requiring heavy dependencies like PhantomJS/ChromeDriver/JSDOM.