diff --git a/types/mithril/index.d.ts b/types/mithril/index.d.ts index 1115d7c1f5..46fbb061ab 100644 --- a/types/mithril/index.d.ts +++ b/types/mithril/index.d.ts @@ -61,11 +61,11 @@ declare namespace Mithril { trust(html: string): Vnode; } - interface RouteResolver { + interface RouteResolver { /** The onmatch hook is called when the router needs to find a component to render. */ - render?(this: State, vnode: Vnode): Children; + onmatch?(this: this, args: Attrs, requestedPath: string): Component | Promise | void; /** The render method is called on every redraw for a matching route. */ - onmatch?(args: Params, requestedPath: string): Component | Promise | void; + render?(this: this, vnode: Vnode): Children; } /** This represents a key-value mapping linking routes to components. */ @@ -232,7 +232,7 @@ declare namespace Mithril { /** The onremove hook is called before a DOM element is removed from the document. */ onupdate?(vnode: VnodeDOM): any; /** Creates a view out of virtual elements. */ - view(vnode: CVnode): Children | null | void; + view(vnode: Vnode): Children | null | void; } /** diff --git a/types/mithril/test/test-class-component.ts b/types/mithril/test/test-class-component.ts index 7c1348683e..19f3aa343a 100644 --- a/types/mithril/test/test-class-component.ts +++ b/types/mithril/test/test-class-component.ts @@ -1,5 +1,5 @@ import * as m from 'mithril'; -import {ClassComponent, CVnode, CVnodeDOM} from 'mithril'; +import {ClassComponent, Vnode, CVnode, CVnodeDOM} from 'mithril'; /////////////////////////////////////////////////////////// // 0. @@ -95,12 +95,13 @@ class Comp4 implements ClassComponent { add(num: number) { this.count += num; } - view({attrs}: CVnode) { + view(vnode: Vnode) { return [ - m('h1', `This ${attrs.name} has been clicked ${this.count} times`), + m('h1', `This ${vnode.attrs.name} has been clicked ${this.count} times`), m('button', { - onclick: () => this.add(1) + // Can access 'this' via vnode.state + onclick: () => vnode.state.add(1) }, "Click me") ]; @@ -129,7 +130,7 @@ export interface Attrs { export default class MyComponent implements ClassComponent { count = 0; - view({attrs}: CVnode) { + view({attrs}: Vnode) { return m('span', `name: ${attrs.name}, count: ${this.count}`); } } diff --git a/types/mithril/test/test-route.ts b/types/mithril/test/test-route.ts index 5e584a8184..b18a92212c 100644 --- a/types/mithril/test/test-route.ts +++ b/types/mithril/test/test-route.ts @@ -1,4 +1,4 @@ -import {Component} from 'mithril'; +import {Component, Comp, RouteResolver} from 'mithril'; import * as h from 'mithril/hyperscript'; import * as route from 'mithril/route'; @@ -14,6 +14,39 @@ const component2 = { } } as Component<{title: string}, {}>; +interface Attrs { + id: string; +} + +interface State { + text: string; +} + +const component3: Comp = { + text: "Uninitialized", + oninit({state}) { + state.text = "Initialized"; + }, + view({attrs}) { + return h('p', 'id: ' + attrs.id); + } +}; + +// RouteResolver example using Attrs type and this context +const routeResolver: RouteResolver & {message: string} = { + message: "", + onmatch(attrs, path) { + this.message = "Match"; + const id: string = attrs.id; + return component3; + }, + render(vnode) { + this.message = "Render"; + vnode.key = vnode.attrs.id; + return vnode; + } +}; + route(document.body, '/', { '/': component1, '/test1': { @@ -41,7 +74,8 @@ route(document.body, '/', { resolve(component2); }); } - } + }, + 'test5/:id': routeResolver }); route.prefix('/app');