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) {}", "}" ] }}