Pierre-Yves Gérardy pygy

Mithril components are diffed wholesale.

m.render(elt, m(Foo))

followed by

m.render(elt, m(Bar))

Earlier this year at work we re-wrote an internal framework we used to create SPA e-learning courses. After briefly trying out React, Angular 2, Ember and Vue, we settled on mithril (https://mithril.js.org). If I were to compare it to the frameworks we tried out, I would say it's more like React but with a simpler, smaller codebase. By the way, if you like geeking out on code articles, the articles from mithril's old site have some real nuggets of gold (http://lhorie.github.io/mithril-blog/).

A few months after the re-write was done, I dug into mithril's codebase to gain a deeper understanding and this is what I found...

The main entry point into mithril's source code is the m() function, which is a hyperscript function that, according to the docs (https://mithril.js.org/hyperscript.html), represents an element in a mithril view. It's demonstrated below as:

m("div", {id: "box"}, "hello")
// equivalent HTML:
// <div id="box">hello</div>

[updated again](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10RFqgBMASrQCujAE74AVgip0GTYngD0ygAQAVQjDUBZCMULjoa8aIlqYAD2LiM1RvzXFaagO61xAazVxiGNH4MKHoYfAAdNFU1DDgYtTosLHoAKQBlNWT+EVgIqPVDHRgwMBgHT0yRPzUAIx0MNTARNAcIemdCDGIY6moYAAdiOIaAEQB5XTU0Wn4YSOiACgg0OBhxYja0NX7aZeIAShjA+MSdtEUKNSgILx19Q2MoAG44gAMsfGTm4lfI+fUtBA4m5Ymp+KFagBPTIzCBgSHLADmHR0dFmMTi12IxFgGO2tDgcAgNVg-1qYhRpngOW6bmgUCmMBgTgaNQMMPEOh21zghGcrjqiR0zQgADc1nBglBIWSqsUcvhFX98pptHoAJIaNQAGQgfRWOgWuk1+2V0QAwrR+pDjIiSGoFtRDgAmAAMAEYACw6mCuAASnggczQZIACmssECie0gWptJyatDEXYFPxLmBOTpaGAEp1xIiYJcXEdof0Je1aDV-MskScrTKVdmOrG4NniCDOUcWYTaNQIF1mWDeyIcAwuptGtB4A7CmpwiA0m2O3MQPsi65ZsEyctKYuwO2MJ26YZzFS-MZWvRLstqFARPxa8fCKfrpH-Bt2rPbSQ4GTi3LLjoa1LiyOFIRAtYC0ufoRBJIFCEuB9z2JMRC18WDrn1VZLgCfhlAqVYoCgMkgKDOIm1nPcD05HDjmLMtxDfbZyxWfl3GfLBdyXQ8dCBMkmnENB4MHYtwV8WhLjgWCpDKbpi1nMA+BCOk0GReQHw-FZEDNAE1QwGpaHFBJ62-bppg2Pou2bOIGMjQkJ3MvUdF5KVal4lo71mJwdylEirTItQCNgvwAg2YJ8XWTZyJzSjuM5PIyQ0P0AFE1DSMYADENAAdQAQUEVL1QyUNBDGAA1dURmSkY5xAXKMiK+d

	atrules:
	@keyframes: bare -webkit-
	@viewport: -ms-
	@document:

	functions:
	linear-gradient(): bare -ms- -webkit-
	calc(): bare -webkit-
	element():
	cross-fade():

	var c = require("compose-regexp")
	function normalize(matcher) {
	if (typeof matcher === 'function') return matcher
	if (({}).toString.call(matcher) === '[object Object]') return grammar(matchers)
	var flags = 'g'
	if (matcher instanceof RegExp) flags += matcher.flags.replace('g', '')
	matcher = c.flags(flags,
	c.either(
	matcher,
	/()/

	<!doctype html>
	<title>XRegExp fast-fake-y benchmarks</title>
	<table><tr><td>
	<div id="log-after">Testing XRegExp 3.1.1-fast-fake-y.<br>Sit back and relax. This might take a while.<br><br>Constructor with short pattern:<br>XRegExp with pattern cache flush x 88,916 ops/sec ±2.24% (82 runs sampled)<br>XRegExp x 834,869 ops/sec ±1.08% (81 runs sampled)<br>XRegExp.cache x 38,821,522 ops/sec ±1.93% (82 runs sampled)<br>RegExp x 5,654,331 ops/sec ±1.68% (81 runs sampled)<br>Fastest is XRegExp.cache<br><br>Constructor with medium pattern:<br>XRegExp with pattern cache flush x 32,278 ops/sec ±1.20% (83 runs sampled)<br>XRegExp x 856,503 ops/sec ±1.48% (79 runs sampled)<br>XRegExp.cache x 38,742,523 ops/sec ±0.66% (82 runs sampled)<br>RegExp x 5,679,163 ops/sec ±2.44% (80 runs sampled)<br>Fastest is XRegExp.cache<br><br>Constructor with long pattern:<br>XRegExp with pattern cache flush x 1,211 ops/sec ±1.01% (80 runs sampled)<br>XRegExp x 484,537 ops/sec ±0.98% (81 runs sampled)<br>XRegExp.cache x 38,776,122 ops/sec ±

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>indexof vs regexp</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>eqeqeq vs regexp</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	/*

	This mixin allows us use CSS grid without having to think about
	what -ms-grid-row/-ms-grid-column we have to assign to a grid element
	for it to properly work on Internet Explorer and Edge.

	It takes three arguments, the last one of which is optional. Specify the
	maximum amount of items you want to have in your grid, when they should
	break to the next line and, if you like, a grid-gap of some sort.

	<!DOCTYPE html>
	<title>onhashchange iframe</title>
	<meta charset="utf-8">
	<iframe src="https://cdn.rawgit.com/pygy/bfe0555ab0ef9a6bfc2a7dc471d0b9d0/raw/e0fad9b45a3a6d5235b8acbc2a7b74137082f1ee/index.html"></iframe>