Mithril to React adapters

mithril-react.mjs

import m from "mithril"
import React, {useLayoutEffect, Component} from "react"
import ReactDOM from "react-dom"

// Bottom-up to Mithril, top-down to React
export function useMithril(ref, view) {
    useLayoutEffect(() => { m.render(ref.current, view()) })
    useLayoutEffect(() => () => { m.render(ref.current, null) }, [])
}

export class FromMithril {
    constructor(props) {
        super(props)
        this.ref = React.createRef()
    }

    render() {
        return this.props.wrapper != null
            ? this.props.wrapper(this.ref)
            : React.createElement("div", {ref: this.ref})
    }

    componentDidMount() {
        m.render(this.ref, this.props.children())
    }

    shouldComponentUpdate(newProps) {
        m.render(this.ref, newProps.children())
        // Try not to patch on React's side where possible.
        return false
    }
}

// In case React decides it's still worth re-rendering even with `shouldComponentUpdate`
// returning `false`, as their docs imply is possible in the future.
Object.defineProperty(FromMithril, "componentDidUpdate",
    Object.getOwnPropertyDescriptor(FromMithril, "componentDidMount")
)

function mithrilUpdate(v) {
    ReactDOM.render(v.attrs.view(), v.dom)
}

export const FromReact = {
    view: v => v.attrs.wrapper != null ? v.attrs.wrapper() : m("div"),
    oncreate: mithrilUpdate,
    onupdate: mithrilUpdate,
    onremove: v => { ReactDOM.render(null, v.dom) }
}

@DaniellMesquita This is mainly for migration, not simple porting. Also, all React components necessarily inherit from React.Component.

@isiahmeadows

But there's a tutorial for porting ReactJS components?

Best to ask that in the Gitter channel. This gist was mostly just used to explain a concept at the time.