Skip to content

Instantly share code, notes, and snippets.

@barneycarroll
Last active August 2, 2019 21:10

Revisions

  1. barneycarroll revised this gist Aug 1, 2019. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions .js
    Original file line number Diff line number Diff line change
    @@ -48,8 +48,7 @@ m.mount(document.body, () => {
    teardown: dom => new Promise(done => {
    dom.addEventListener('transitionend', done)

    dom.style.transition = 'opacity 1s ease-in-out'
    dom.style.opacity = 0
    dom.style.opacity = 0
    })
    })
    ]
  2. barneycarroll revised this gist Aug 1, 2019. 3 changed files with 51 additions and 18 deletions.
    22 changes: 11 additions & 11 deletions .js
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,23 @@
    import m from './functor-mithril'

    import tick from './tick'

    function Async({}, getDom){
    function Async(){
    let cache

    return ({content, setup, teardown}) => {
    return ({content, setup, teardown}, dom) => {
    if(content && !cache && teardown)
    tick(() => {
    void getDom().clientHeight
    dom(node => {
    void node.clientHeight

    setup(getDom())
    setup(node)
    })

    else if(!content && cache && setup){
    teardown(getDom()).then(() => {
    cache = undefined

    m.redraw()
    dom(node => {
    teardown(node).then(() => {
    cache = undefined

    m.redraw()
    })
    })

    return cache
    23 changes: 22 additions & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1 +1,22 @@
    [Functor Mithril!](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoArakyKAF0T6oQ5RtggAnXgAJGU0uIiyA5KwD0pAK5QwvCQFpG5XgAtxlJQB0oVkWMlTe5MAGs5C5WscvL1qJu2O0FIAgjAAntoAFMAAvkRSAOaIvAAiigCUwFZSUkjSYJhgxojZUqXiyRriUFLRPPx88Xi8Gtjx-Jji+BAA7lAx6VIAvAB8Ulk1OVLkpJH1AtIAZItSAIQFRYhSyw6Ind196aVTDk7OkZGDo+PHJ1IAbhDk+InJaYyXrGDw5AsAEohyAljLxbicwVNmq1IklUopLkdJicBhDboh4HhprN1tAGksVhtitsVlDsJkIR0ur0oDC3vD0ulWCYBBcrmMJncpoStkMpFp8IgKFACBCcqKZKwKvhxJgepcISikVMIRUWtUpNzbjFbrdVVUatzhhrcQtStr+lYrIxWIwIFpeJFumANMw+KwAEYQfBheKXYbs0p5KQwYy9S2TPXqv3XGi3D5KYwARiU8SUAHV0ZBmA4IFIAGJaHQSKQAWSMpkoqyU6SI4ZO8fdGl4uigKZuSpy0G+ZxQtTZwdDPSNqxDvVrSriUiUABUIAkEkhq+O45FQhEwPEOXd5nxe6OhztxfHsDQYLwwkghhBsIUjGEUAAGADcvBlsCM5GgKETMAAum2lD+cgqxrVEO2DSpsF7bpZGuLdORg1gzwvRBWGvW9zyNRMFWXcDKQOKBoMUf0pGFIcAAV3HIPBHWgHkA3AnJEMwfB8AAUXuBYABlqIaRBxEiJRX0wd9AmFKB8DbbphURcVEOQpAmTfGAPyCXklHQsA7ykH8pD2PA9HIKA9DtXgfE5JjFCQ89FM07Spl5B8FURZEXKkX8rAGEA4noJgWDIQtdHEAxyzMeAOC4dA+AWIRbAkaR-CLcQ3GIlR1EC-QszEcTeBgHw4vsG9eCKFKPFUQwTDCvQis2cQfCsRAAA87GkAVSEwDR4GkGrjEiRh4kSoL0mIEA8CQHRP1gIQH0fPQAGYUDmgAmbyiF85ghEGzLFGyhYYAikad14WLRHi04XFKqdPDOerhWas62o6rqpDaozVJqa5SkGyb8wy8QAGEdrovh-vgCAYCqRBInucklSDSzZFuHgz1eOFYL7EiYKR6AUfuX4hxyXlXqgd7Ii0AA1aGa1R95ZKVSMangqY8cQHpe2+oICwCCRAdOnLyfxqmmZOLxzmjBiLKmGCjXuVgscYqRFUlsUFYZh5BYpqm3ORLUzVKKwOZqTWYa3UgJEiINnEQMJphqWXMGbcQYG1qQ1ftx2YH1yYZmhr5jEoaUBBdt2-YDiooBoB8PP6EaxsQCacem2aloAVm-Vb1v8iqK3gaqHdqg7uBNQQ0FUVRS2gK2wjz4rihgUtQsoHMpEKMBEGwaQyONPmFlt-hxHatv9qsMupAAZVabB4BtxNBhE22zxEtupAgUgG8qpuViWue5EKIKbZ6f2SuRl1EE9qBR6y4HcqkHpywcIkBRUqU+-4wethEl4GfrssN9zkfy5ZR+CJfIQMcrDwvuXAASpUao9dmRSB6gQdeOdX4D0KKhMoJNTr2EaskS6aU8FmXDE1FqL1BRPWkH1Aae8JBhH7FuZGoCe58HrryLuGZMDOBLDgUoTDd5JTCCWBy3ddp8BIrcIhcwwF7XiFfHKvp+yD33tIlhvAGR1ldrAmoAB5d07B468FYJgGAKkEg0luIbVRYjeDxCMtgJssNORq0iOKHI55sCIFXqI6+awhjqUNuZCyAB+NxEocBTzCJEEw1F4idASKfVhLsTgoDCR8ZRdCSzWOvtTexjiIQu0nHGccJxhYyDtLuWomA5EyL4P2I8NoKkOmqQI-eWT5ELAZLhZxplEC9kiC090ci2QNIUE2KGgz4hhL0QYnQrB7iYHgBoM+cxkkWUlAQDQbcLjGBMcYeINAir7J8TlX8-ZXEK05LskMhyHbGF-EaDJ4ghHZJyqBXwys7jXOMGEnIGiFaFJKVIREMRY7okMZNagaAZoPnmgADnTj5EADANpoFFoXKKeIhCkIehQzq+RFnwHdIUVwcE+E407l6LYJwiYQGdK6IxYAKgO0QNOJqvAAByVLBLVnJbAaQEB3R4HEJxZK7DWalibA7SaejhWitZCRJmgq5X8TltRHgwodDyiVAUeARKSXapyIqUoyr+KirQkKs1UMoBUs3EUToe9+IpAdpgXsr5llKywTkG1ApWA+sQOTRZyyjRKB8KCkgccE5TWhbNRMM1EwZ2RX5IQRCMVHWxfdewj18W1EYDgeIVcaGCIYaUH2ebsCsGuZEKu-yThq3LawWE1brZuT5bjINPJWl0MNV6mQOAkLJGbT6B4HbW0Rm0SOpZJQY4RvBVGqFIAYV6AAJyIt-CQH4UBnBQroEm1FIBs5hQxVUeAQgQS8FwCgMuWhsDOASF8RQ5VG7wAAAJLVYA+Vgc0n1-wxR4-yMAmXkA7t5dde7-JcySigsKqxvJAA)
    [Functor Mithril!](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoArakyKAF0T6oQ5RtggAnXgAJGU0uIiyA5KwD0pAK5QwvCQFpG5XgAtxlJQB0oVzdt7loUgIIwAntoAUASmBWpUpGkwTDBjRD8pCPFEXg1xKCkPYB5+PiIpPFjsdP5McXwIAHcoAF90gsYvKQBeAD4pXwT-KXJSDxSBaQAyLqkAQmDQxCkeqVz8oqgvCOapCo8oCHxhuoaZ2akANwhyfClF5dYweHJOgAlEcgBzY1512fvmzI1sBaXEaabZks+NyK+pIh4HgWm0BtBUt1eoMwiNes9sD5HvMDit6o0-v5xgVim9ll5WCYBB5vDV0Y9ZjCVlItMsKFACFYKc1GKxovhxJhCt5mT9HnyAf5HtFYvEpFT1iV1usRXEElSauKIZ0IlLSkyoKzGBAtLwPAUwBpmHxWAAjJaudKk1YYgIxDLGIoa-yysXW+o0daMDxKYwARiU6SUAHUgZBmGMIFIAGJaHQSKQAWSMpkofSUXiIzpZPtNGl4uiggbWgqk0GO5DAAGsUIkqqsYI7Coq+o2ilmAWUpEoACoQK5XJAZjtejwudxgdK2ynKvi1tvN0bM71KbA0GC8VxIaoQbAhIyuFAABgA3LxObAjA4oCg-TAALrFpRncjpzOPR4I2sVMklzFzRRWA3LdEFYXd903RU-X5EdS2xSZv0UX8GWbAAFBRDDwfVoDRP9MQqVhMHwfAAFFNk6AAZcgNwERBxB9c9MEvewcKgfBiwKBlPmZAjgKQQkLxgK9HGqbtwLAA8pDvQFMDwPRyCgPQdV4SxS38XjN348TJOaUSj35X5mgFfx7ysH5iBAPAkB0a9qDQAAmP0UAANhAMp6CYFgyDjXRxAMFMzHgDguHQPhOiEEQxEkOQfITeQkJUdRYr88MxAZPgYFUyKJGkPdeFCOQMO7NRDBMQK9DyoZxFUqxEAADyi6Q6UwDR4FyzB8uMDxGHSWx43ELwLKsxAbOgOyQCPY89AAZhQab7LcogPOYIQ+t8vRUtY3gYGCiyOkENBsui+xq0KhK1BOqsaoZBqcrmRBSBatr7vpYSElWCI1uvGNkoAYUUNLOl++AIBgOJEA8TYkQBHgNwyGIXkVGhTJhsbctB6QkZRmdYGkTZTmbRU6QUt6PEeLQADVIffUsEVYbANEbM0FPwDwERp2ZDKFAFLpJetyVLQpjEoCG6aQKArhMLmNjpsRXi8SHWAqaWBRlBGxWnZp8cQQpay+xxYzsCR-tELaKYJ6nNdmXn3Tw-8hZFjwxA3Vhxcl4xpf-Z3eHp3dvEV5XeU95pmVdBJte5Zl-Ep6mO3-fxvfpxnjGZtinYxjnMSqflJVVCIbB876Y6h21SAkDxAikKtEFcFpw8IgtxBgaWw62BvzxgfOmlaRXQkoDkBBb9X677+AB6gGgjxRkohqBEaWNgIQ-Scv1XPckAGBWtBStTeAKo6qrdu4WdeCEVRVCTaBq9cffOsQGAkwCyhIykEIwEQbBpBQpVTfS6QFP4OIR678dpWHPlIAAyi8bA8Ba5+iqExOuG4mLvzLKQR+ZVn69HsgguQIRfK1wdgVWGRp75gIvptP+D9CgpjGLCZYQl2R10AcA4YTE9hhwfsmTBe9yE-xgeQJiQQAZbVAVAcBAAlYeD8iRSEqmEPY3Dd7MLoqw1g-wjrSDqvaeKyg1DaJUhqeqjUXpPWkN1Xq+CJCuH5nhWGwjf6dAfqJb+oZMBVkTDgCI9i8H9VcImXS-Ctq-nWAY9oIiqHpEoZ0K0tjgEEPCY4vgXhuJNFbgAeVNOweehEYBCSuFAMmAJ9aFOiWkOuDNeDQz+K3Ip8cxiuGwIgCA6CynSD6NUUSSgSmqX-AAfijjIQi2AYGuA8CYai6Q8hXFIRlYO-gUCDO9PE6xiZEmA2SekBSlTg4q3SF6OOzQrYyB1HORImAokRM6LY5crBtS6g8Bc3xBC1ltJSbBGpylEC1keekU0UT+a3IUPmCGTz-n-HqZk7JOhWCbEwPADQ992jzI2GyAgGh34kmMLJYw6QaB5VxUEv+95bF1Pqc0bFjZ8UdWMPeRUKzxD+PWVtGmgzZiUuMGyqQKTmR7IiJ8GeJBhqjUXmgSaR4ZoAA5byLWWl5S6R9QqQiEMYu6zVWpBHhfAU0IQqy-ltD41EGxRIGlmT7MA0QOqIB7PVXgAA5d4PoMzeLRmWU0eBxDkXEIqb+iZ8wdWvJkj1Xq+b6vWBAd1dEvVK2ojwBkOgeQwy1Tq6sib-CqyaBG4NdEwKRs9RDVEU5Qh5HwXRAAIh1TAtZzyIuMhC-Y7xWCogpvCxFiolCqUFZZOeIrxrir0H6SafpZUb08kIAxir9qnzQKq6K6rnrdRwOka+li-G2NtD3RgOBWCUo8NfHlAJW5buwKwK4MQ9010Mi63GWxW3UgZWMq9TRj1AXPSu29CKPhdxdMPD9iKzKz2sgvPtU0ACcMqSj3hICcKAVY7J0FHVvEAO9AqKriPAIQtxeC4BQOfLQ2AqxXCOIoVQKHKAAAF7KsCPKwaapGn5BU4BZTcTShAwAteQT+bkoOIa8obfqGDd59DckAA)

    Functor Mithril drastically simplifies Mithril's component API surface. A component now consists of a function, executed on initialisation, which returns another, which is executed every loop, and whose return value is virtual DOM. Both functions receive the first argument supplied via hyperscript, and a function which will execute post draw loop and is supplied with the underlying DOM.

    ```js
    function setup(initialInput, setup){
    setup(dom => {
    dom.style.opacity = 0
    dom.style.transition = '1s'

    void dom.clientHeight

    dom.style.opacity = 1
    })

    return function view(input, postDraw){
    return m('p', 'Hi')
    }
    }
    ```

    Follow the link above to see a component, written in Functor Mithril which handles setup and async DOM teardown!
    24 changes: 18 additions & 6 deletions functor-components.js
    Original file line number Diff line number Diff line change
    @@ -2,17 +2,29 @@ import tick from './tick'

    export default definition =>
    function FunctorComponentClosure(v){
    let dom
    const getDom = () => dom
    const view = definition(unV(v), getDom)
    const setup = []
    const post = []
    const view = definition(
    unV(v),
    setup.push.bind(setup),
    )

    tick(() => {
    while(setup.length)
    setup.pop()(v.dom)
    })

    return {
    view: function FunctorComponentView(v){
    tick(() => {
    dom = v.dom
    while(post.length)
    post.pop()(v.dom)
    })

    return view(unV(v))

    return view(
    unV(v),
    post.push.bind(post),
    )
    }
    }
    }
  3. barneycarroll revised this gist Jul 31, 2019. No changes.
  4. barneycarroll revised this gist Jul 31, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    [Functor Mithril!](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoArakyKAF0T6oQ5RtggAnXgAJGU0uIiyA5KwD0pAK5QwvCQFpG5XgAtxlJQB0oVkWMlTe5MAGs5C5WscvL1qJu2O0FIAgjAAntoAFMAAvkRSAOaIvAAiigCUwFZSUkjSYJhgxojZUqXiyRriUFLRPPx88Xi8Gtjx-Jji+BAA7lAx6VIAvAB8Ulk1OVLkpJH1AtIAZItSAIQFRYhSyw6Ind196aVTDk7OkZGDo+PHJ1IAbhDk+InJaYyXrGDw5AsAEohyAljLxbicwVNmq1IklUopLkdJicBhDboh4HhprN1tAGksVhtitsVlDsJkIR0ur0oDC3vD0ulWCYBBcrmMJncpoStkMpFp8IgKFACBCcqKZKwKvhxJgepcISikVMIRUWtUpNzbjFbrdVVUatzhhrcQtStr+lYrIxWIwIFpeJFumANMw+KwAEYQfBheKXYbs0p5KQwYy9S2TPXqv3XGi3D5KYwARiU8SUAHV0ZBmA4IFIAGJaHQSKQAWSMpkoqyU6SI4ZO8fdGl4uigKZuSpy0G+ZxQtTZwdDPSNqxDvVrSriUiUABUIAkEkhq+O45FQhEwPEOXd5nxe6OhztxfHsDQYLwwkghhBsIUjGEUAAGADcvBlsCM5GgKETMAAum2lD+cgqxrVEO2DSpsF7bpZGuLdORg1gzwvRBWGvW9zyNRMFWXcDKQOKBoMUf0pGFIcAAV3HIPBHWgHkA3AnJEMwfB8AAUXuBYABlqIaRBxEiJRX0wd9AmFKB8DbbphURcVEOQpAmTfGAPyCXklHQsA7ykH8pD2PA9HIKA9DtXgfE5JjFCQ89FM07Spl5B8FURZEXKkX8rAGYgQDwJAdE-WAhAfFAACYABYQDiegmBYEAvGcDguHQPgFiERAAA87GkAVSEwDR4HyTB4Hgd1ClcODSh4M9SK9LYTl5J0XQWL4Kkwfhpwy3gADlasE6tKugaqIHdPBxE48QjTI0smzagKAHkRv48bWRI+CpGG0bxtYfBqJ4YUdHlJUCmK0qXEOnJFVKDalv4tDFrGxBIigWrNyKTpCn4cQUjazBe1fDREEVMVJmegVWFBxAADUioBo0lB8GJvN8xB-MGoQAE5v3RvRMZCxNIqIaLmCEfwi3EAxyzMeBEu8ndeCEWwJGkUndAm+RiJUdRC1ZvQszEcTeBgHxGfsG9eCKNwObUQwTCpvQxc2cQfCsDKsqkHK8oKqQFeMSJGHiFmJHSJH0RRsTqDQABmFBLZCgmidiw3yb5ui+BgGnuBNQQ0BF6R4sljxVHi5XhUypn1cFTXssFIzVJqa5ShZgL825iQAGFFH5hY0-gCAYCqR77nJJUg0s2Rbiq6RYXeI1ozGGCK8G6R7l+IccgamOoDjyItEhyIi-iauMjrKZIxqNachbxAel7JOggLAJ08z13eEh1v++LizTjOuv2y3sujXubbFHFIH9-FMeHnX3uN7c5EtTNUorDnmob6LrdSAkSIg2cRAwmmGoR82qvhgHfKQl8gHNnEDAJ+kwZj9y+MYSg0oBBgIgYg5BFQoA0AfB5foJs-LmyEImYKIUHz2xAAwYmaAZYVngPLNqisPbJTxEIVQqhSzQF-mEBh4tigwFLJTSgOYpCFDAIgbA0gpouwFgAz6uVxHuysOwqQABlVo2B4D-0TIMESACzwiXEetUggjZbCJWCFXRcgPoSH-j0JBEsqpNRgVAFRMiFgCJ6OWBwRIBQqSlHI-iCitgiReGPARZYzH0OURwvmPwRL5GXgLJRriOEACVKjVAEcybWjDigvEiXQwJ4hgmsDKKHNWGt8rSD1gbGx4gwj9i3JXY0ogV4CN5FNDMmBnAlhwANWAzN6lhBLA5VpWc+AkVuOlZIcwkkePiO4xofYSIKNZmEOZbSBYMhHpfBa7AzasEwDAFSCQaS3BfpsiZvB4hGWwE2TedxL6RHFDkc82BEAQBMUs6QqwhjqRfuZCyAB+V5EocCaI2SYai8ROgJCam7MBJwUBgo+Gs2xJYrkrxrAA+5vAkVSDAZOOM44TgTxkHaXctRMCLPmXwfsR4bSUodDS6xZMRlYu2aBXwnIFBNkQL2SIrL3SLLZIyvl-AhXxBFeU-eUh9mHPuDDRAMA5gEs5JKAgGhxEXGMMc4w8QaBiwNeMlev5+wvMYhZPVIYjVtWML+I06KGmYp+dysFJwbXGA9YS9VhKtSkv9RaXwL8pAzIdIwHA8RuF1PZY8+BkbsCsBtZEbhOylSX0TawWEqa-5uQGdVJV8BYa8mdRs-Nkws3NFzT6B4yqK05AgcqzyBCzYBQtiAAA7DbCKMRfwkB+FAZwFs6CUJikIWhVNmFVHgEIEEvBcAoHYVobAzgEhfEUKoSdlAAACIVWAPlYJbLdQjqacG8u82KMAwBmEkZFftY7qEgAXmTUxdDViRSAA)
    [Functor Mithril!](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoArakyKAF0T6oQ5RtggAnXgAJGU0uIiyA5KwD0pAK5QwvCQFpG5XgAtxlJQB0oVkWMlTe5MAGs5C5WscvL1qJu2O0FIAgjAAntoAFMAAvkRSAOaIvAAiigCUwFZSUkjSYJhgxojZUqXiyRriUFLRPPx88Xi8Gtjx-Jji+BAA7lAx6VIAvAB8Ulk1OVLkpJH1AtIAZItSAIQFRYhSyw6Ind196aVTDk7OkZGDo+PHJ1IAbhDk+InJaYyXrGDw5AsAEohyAljLxbicwVNmq1IklUopLkdJicBhDboh4HhprN1tAGksVhtitsVlDsJkIR0ur0oDC3vD0ulWCYBBcrmMJncpoStkMpFp8IgKFACBCcqKZKwKvhxJgepcISikVMIRUWtUpNzbjFbrdVVUatzhhrcQtStr+lYrIxWIwIFpeJFumANMw+KwAEYQfBheKXYbs0p5KQwYy9S2TPXqv3XGi3D5KYwARiU8SUAHV0ZBmA4IFIAGJaHQSKQAWSMpkoqyU6SI4ZO8fdGl4uigKZuSpy0G+ZxQtTZwdDPSNqxDvVrSriUiUABUIAkEkhq+O45FQhEwPEOXd5nxe6OhztxfHsDQYLwwkghhBsIUjGEUAAGADcvBlsCM5GgKETMAAum2lD+cgqxrVEO2DSpsF7bpZGuLdORg1gzwvRBWGvW9zyNRMFWXcDKQOKBoMUf0pGFIcAAV3HIPBHWgHkA3AnJEMwfB8AAUXuBYABlqIaRBxEiJRX0wd9AmFKB8DbbphURcVEOQpAmTfGAPyCXklHQsA7ykH8pD2PA9HIKA9DtXgfE5JjFCQ89FM07Spl5B8FURZEXKkX8rAGEA4noJgWDIQtdHEAxyzMeAOC4dA+AWIRbAkaR-CLcQ3GIlR1EC-QszEcTeBgHw4vsG9eCKFKPFUQwTDCvQis2cQfCsRAAA87GkAVSEwDR4GkGrjEiRh4kSoL0mIEA8CQHRP1gIQH0fPQAGYUDmgAmbyiF85ghEGzLFGyhYYAikad14WLRHi04XFKqdPDOerhWas62o6rqpDaozVJqa5SkGyb8wy8QAGEdrovh-vgCAYCqRBInucklSDSzZFuHgz1eOFYL7EiYKR6AUfuX4hxyXlXqgd7Ii0AA1aGa1R95ZKVSMangqY8cQHpe2+oICwCCRAdOnLyfxqmmZOLxzmjBiLKmGCjXuVgscYqRFUlsUFYZh5BYpqm3ORLUzVKKwOZqTWYa3UgJEiINnEQMJphqWXMGbcQYG1qQ1ftx2YH1yYZmhr5jEoaUBBdt2-YDiooBoB8PP6EaxsQCacem2aloAVm-Vb1v8iqK3gaqHdqg7uBNQQ0FUVRS2gK2wjz4rihgUtQsoHMpEKMBEGwaQyONPmFlt-hxHatv9qsMupAAZVabB4BtxNBhE22zxEtupAgUgG8qpuViWue5EKIKbZ6f2SuRl1EE9qBR6y4HcqkHpywcIkBRUqU+-4wethEl4GfrssN9zkfy5ZR+CJfIQMcrDwvuXAASpUao9dmRSB6gQdeOdX4D0KKhMoJNTr2EaskS6aU8FmXDE1FqL1BRPWkH1Aae8JBhH7FuZGoCe58HrryLuGZMDOBLDgUoTDd5JTCCWBy3ddp8BIrcIhcwwF7XiFfHKvp+yD33tIlhvAGR1ldrAmoAB5d07B468FYJgGAKkEg0luIbVRYjeDxCMtgJssNORq0iOKHI55sCIFXqI6+awhjqUNuZCyAB+NxEocBTzCJEEw1F4idASKfVhLsTgoDCR8ZRdCSzWOvtTexjiIQu0nHGccJxhYyDtLuWomA5EyL4P2I8NoKkOmqQI-eWT5ELAZLhZxplEC9kiC090ci2QNIUE2KGgz4hhL0QYnQrB7iYHgBoM+cxkkWUlAQDQbcLjGBMcYeINAir7J8TlX8-ZXEK05LskMhyHbGF-EaDJ4ghHZJyqBXwys7jXOMGEnIGiFaFJKVIREMRY7okMZNagaAZoPnmgADnTj5EADANpoFFoXKKeIhCkIehQzq+RFnwHdIUVwcE+E407l6LYJwiYQGdK6IxYAKgO0QNOJqvAAByVLBLVnJbAaQEB3R4HEJxZK7DWalibA7SaejhWitZCRJmgq5X8TltRHgwodDyiVAUeARKSXapyIqUoyr+KirQkKs1UMoBUs3EUToe9+IpAdpgXsr5llKywTkG1ApWA+sQOTRZyyjRKB8KCkgccE5TWhbNRMM1EwZ2RX5IQRCMVHWxfdewj18W1EYDgeIVcaGCIYaUH2ebsCsGuZEKu-yThq3LawWE1brZuT5bjINPJWl0MNV6mQOAkLJGbT6B4HbW0Rm0SOpZJQY4RvBVGqFIAYV6AAJyIt-CQH4UBnBQroEm1FIBs5hQxVUeAQgQS8FwCgMuWhsDOASF8RQ5VG7wAAAJLVYA+Vgc0n1-wxR4-yMAmXkA7t5dde7-JcySigsKqxvJAA)
  5. barneycarroll created this gist Jul 31, 2019.
    56 changes: 56 additions & 0 deletions .js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    import m from './functor-mithril'

    import tick from './tick'

    function Async({}, getDom){
    let cache

    return ({content, setup, teardown}) => {
    if(content && !cache && teardown)
    tick(() => {
    void getDom().clientHeight

    setup(getDom())
    })

    else if(!content && cache && setup){
    teardown(getDom()).then(() => {
    cache = undefined

    m.redraw()
    })

    return cache
    }

    return cache = content
    }
    }

    m.mount(document.body, () => {
    let show

    return () => [
    m('h1', 'Welcome to Functor Mithril!'),

    m('button', {
    onclick: () => show = !show,
    }, 'Toggle'),

    m(Async, {
    content: show &&
    m('p[style=opacity:0;transition:1s]', 'Hi!'),

    setup: dom => {
    dom.style.opacity = 1
    },

    teardown: dom => new Promise(done => {
    dom.addEventListener('transitionend', done)

    dom.style.transition = 'opacity 1s ease-in-out'
    dom.style.opacity = 0
    })
    })
    ]
    })
    1 change: 1 addition & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [Functor Mithril!](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoArakyKAF0T6oQ5RtggAnXgAJGU0uIiyA5KwD0pAK5QwvCQFpG5XgAtxlJQB0oVkWMlTe5MAGs5C5WscvL1qJu2O0FIAgjAAntoAFMAAvkRSAOaIvAAiigCUwFZSUkjSYJhgxojZUqXiyRriUFLRPPx88Xi8Gtjx-Jji+BAA7lAx6VIAvAB8Ulk1OVLkpJH1AtIAZItSAIQFRYhSyw6Ind196aVTDk7OkZGDo+PHJ1IAbhDk+InJaYyXrGDw5AsAEohyAljLxbicwVNmq1IklUopLkdJicBhDboh4HhprN1tAGksVhtitsVlDsJkIR0ur0oDC3vD0ulWCYBBcrmMJncpoStkMpFp8IgKFACBCcqKZKwKvhxJgepcISikVMIRUWtUpNzbjFbrdVVUatzhhrcQtStr+lYrIxWIwIFpeJFumANMw+KwAEYQfBheKXYbs0p5KQwYy9S2TPXqv3XGi3D5KYwARiU8SUAHV0ZBmA4IFIAGJaHQSKQAWSMpkoqyU6SI4ZO8fdGl4uigKZuSpy0G+ZxQtTZwdDPSNqxDvVrSriUiUABUIAkEkhq+O45FQhEwPEOXd5nxe6OhztxfHsDQYLwwkghhBsIUjGEUAAGADcvBlsCM5GgKETMAAum2lD+cgqxrVEO2DSpsF7bpZGuLdORg1gzwvRBWGvW9zyNRMFWXcDKQOKBoMUf0pGFIcAAV3HIPBHWgHkA3AnJEMwfB8AAUXuBYABlqIaRBxEiJRX0wd9AmFKB8DbbphURcVEOQpAmTfGAPyCXklHQsA7ykH8pD2PA9HIKA9DtXgfE5JjFCQ89FM07Spl5B8FURZEXKkX8rAGYgQDwJAdE-WAhAfFAACYABYQDiegmBYEAvGcDguHQPgFiERAAA87GkAVSEwDR4HyTB4Hgd1ClcODSh4M9SK9LYTl5J0XQWL4Kkwfhpwy3gADlasE6tKugaqIHdPBxE48QjTI0smzagKAHkRv48bWRI+CpGG0bxtYfBqJ4YUdHlJUCmK0qXEOnJFVKDalv4tDFrGxBIigWrNyKTpCn4cQUjazBe1fDREEVMVJmegVWFBxAADUioBo0lB8GJvN8xB-MGoQAE5v3RvRMZCxNIqIaLmCEfwi3EAxyzMeBEu8ndeCEWwJGkUndAm+RiJUdRC1ZvQszEcTeBgHxGfsG9eCKNwObUQwTCpvQxc2cQfCsDKsqkHK8oKqQFeMSJGHiFmJHSJH0RRsTqDQABmFBLZCgmidiw3yb5ui+BgGnuBNQQ0BF6R4sljxVHi5XhUypn1cFTXssFIzVJqa5ShZgL825iQAGFFH5hY0-gCAYCqR77nJJUg0s2Rbiq6RYXeI1ozGGCK8G6R7l+IccgamOoDjyItEhyIi-iauMjrKZIxqNachbxAel7JOggLAJ08z13eEh1v++LizTjOuv2y3sujXubbFHFIH9-FMeHnX3uN7c5EtTNUorDnmob6LrdSAkSIg2cRAwmmGoR82qvhgHfKQl8gHNnEDAJ+kwZj9y+MYSg0oBBgIgYg5BFQoA0AfB5foJs-LmyEImYKIUHz2xAAwYmaAZYVngPLNqisPbJTxEIVQqhSzQF-mEBh4tigwFLJTSgOYpCFDAIgbA0gpouwFgAz6uVxHuysOwqQABlVo2B4D-0TIMESACzwiXEetUggjZbCJWCFXRcgPoSH-j0JBEsqpNRgVAFRMiFgCJ6OWBwRIBQqSlHI-iCitgiReGPARZYzH0OURwvmPwRL5GXgLJRriOEACVKjVAEcybWjDigvEiXQwJ4hgmsDKKHNWGt8rSD1gbGx4gwj9i3JXY0ogV4CN5FNDMmBnAlhwANWAzN6lhBLA5VpWc+AkVuOlZIcwkkePiO4xofYSIKNZmEOZbSBYMhHpfBa7AzasEwDAFSCQaS3BfpsiZvB4hGWwE2TedxL6RHFDkc82BEAQBMUs6QqwhjqRfuZCyAB+V5EocCaI2SYai8ROgJCam7MBJwUBgo+Gs2xJYrkrxrAA+5vAkVSDAZOOM44TgTxkHaXctRMCLPmXwfsR4bSUodDS6xZMRlYu2aBXwnIFBNkQL2SIrL3SLLZIyvl-AhXxBFeU-eUh9mHPuDDRAMA5gEs5JKAgGhxEXGMMc4w8QaBiwNeMlev5+wvMYhZPVIYjVtWML+I06KGmYp+dysFJwbXGA9YS9VhKtSkv9RaXwL8pAzIdIwHA8RuF1PZY8+BkbsCsBtZEbhOylSX0TawWEqa-5uQGdVJV8BYa8mdRs-Nkws3NFzT6B4yqK05AgcqzyBCzYBQtiAAA7DbCKMRfwkB+FAZwFs6CUJikIWhVNmFVHgEIEEvBcAoHYVobAzgEhfEUKoSdlAAACIVWAPlYJbLdQjqacG8u82KMAwBmEkZFftY7qEgAXmTUxdDViRSAA)
    26 changes: 26 additions & 0 deletions functor-components.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    import tick from './tick'

    export default definition =>
    function FunctorComponentClosure(v){
    let dom
    const getDom = () => dom
    const view = definition(unV(v), getDom)

    return {
    view: function FunctorComponentView(v){
    tick(() => {
    dom = v.dom
    })

    return view(unV(v))
    }
    }
    }

    function unV(v){
    for(let key in v.attrs)
    return v.attrs

    if(v.children)
    return v.children[0]
    }
    4 changes: 4 additions & 0 deletions functor-mithril.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    import functor from './functor-components'
    import patch from './mithril-patcher'

    export default patch(m, functor)
    39 changes: 39 additions & 0 deletions mithril-patcher.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    // Monkey-patches Mithril to accept new component interfaces.
    // Supply 1) an instance of Mithril & 2) a factory which consumes
    // components with the desired interface and returns Mithril-
    // compliant components.
    // Returns the patched Mithril interface.
    import xet from './xet'

    export default (m, factory) => {
    const components = new WeakMap
    const factoryM = component =>
    xet(components, component, () => factory(component))

    return Object.assign(
    function(component, input){
    return (
    typeof component !== 'function'
    ?
    m.apply(this, arguments)
    :
    m(factoryM(component), input)
    )
    },
    m,
    {
    mount: (a, component) =>
    m.mount(a, factoryM(component)),

    route: (a, b, c) =>
    m.route(a, b,
    Object.values(c)
    .reduce((hash, [path, component]) => (
    hash[path] = factoryM(component),

    hash
    ))
    )
    },
    )
    }
    11 changes: 11 additions & 0 deletions tick.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    export default callback => {
    const node = document.createTextNode('')
    const observer = new MutationObserver(() => {
    observer.disconnect()
    callback()
    })

    observer.observe(node, {characterData: true})

    node.nodeValue = ''
    }
    10 changes: 10 additions & 0 deletions xet.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    export default (map, key, factory) => {
    if(map.has(key))
    return map.get(key)

    const value = factory()

    map.set(key, value)

    return value
    }