mithril-tsx-component

TSX base class & settings for Mithril.

Install

This assumes an existing TypeScript project.

npm i mithril-tsx-component

Or:

yarn add mithril-tsx-component

Setup

tsconfig.json

{
    // ...
    "compilerOptions": {
        // ...
        "jsx": "react",
        "jsxFactory": "m"
    }
}

Use

import * as m from 'mithril'
 
import { MithrilTsxComponent } from 'mithril-tsx-component'
 
export interface IFooCompAttrs { }
 
type Vnode = m.Vnode<IFooCompAttrs, FooComp>
type VnodeDOM = m.VnodeDOM<IFooCompAttrs, FooComp>
 
export class FooComp extends MithrilTsxComponent<IFooCompAttrs> {
 
    // oninit(v: Vnode) {}
    // onbeforeupdate(v: Vnode, o: VnodeDOM) {}
    view(v: Vnode) {
        return (
            <div>
                Hello World!
            </div>
        )
    }
    // oncreate(v: VnodeDOM) {}
    // onupdate(v: VnodeDOM) {}
    // onbeforeremove(v: VnodeDOM) {}
    // onremove(v: VnodeDOM) {}
}

VS Code snippet

Use the following in VS Code’s TypeScript React snippets file:

{
    "Mithril Component": {
        "prefix": "mc",
        "body": [
            "import * as m from 'mithril'",
            "",
            "import { MithrilTsxComponent } from 'mithril-tsx-component'",
            "",
            "export interface I$1Attrs { }",
            "",
            "type Vnode = m.Vnode<I$1Attrs, $1>",
            "type VnodeDOM = m.VnodeDOM<I$1Attrs, $1>",
            "",
            "export class $1 extends MithrilTsxComponent<I$1Attrs> {",
            "",
            "\t// oninit(v: Vnode) {}",
            "\t// onbeforeupdate(v: Vnode, o: VnodeDOM) {}",
            "\tview(v: Vnode) {",
            "\t\treturn (",
            "\t\t\t$0",
            "\t\t)",
            "\t}",
            "\t// oncreate(v: VnodeDOM) {}",
            "\t// onupdate(v: VnodeDOM) {}",
            "\t// onbeforeremove(v: VnodeDOM) {}",
            "\t// onremove(v: VnodeDOM) {}",
            "}"
        ]
    }
}