Fixes for RouteResolver type and ClassComponent view method. (#16232)

types/mithril/index.d.ts

@@ -61,11 +61,11 @@ declare namespace Mithril {
 		trust(html: string): Vnode<any, any>;
 	}
 
-	interface RouteResolver<State, Params> {
+	interface RouteResolver<Attrs, State> {
 		/** The onmatch hook is called when the router needs to find a component to render. */
-		render?(this: State, vnode: Vnode<State, Params>): Children;
+		onmatch?(this: this, args: Attrs, requestedPath: string): Component<any, any> | Promise<any> | void;
 		/** The render method is called on every redraw for a matching route. */
-		onmatch?(args: Params, requestedPath: string): Component<any, any> | Promise<any> | void;
+		render?(this: this, vnode: Vnode<Attrs, State>): 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<A, this>): any;
 		/** Creates a view out of virtual elements. */
-		view(vnode: CVnode<A>): Children | null | void;
+		view(vnode: Vnode<A, this>): Children | null | void;
 	}
 
 	/**

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<Comp4Attrs> {
 	add(num: number) {
 		this.count += num;
 	}
-	view({attrs}: CVnode<Comp4Attrs>) {
+	view(vnode: Vnode<Comp4Attrs, Comp4>) {
 		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<Attrs> {
 	count = 0;
-	view({attrs}: CVnode<Attrs>) {
+	view({attrs}: Vnode<Attrs, MyComponent>) {
 		return m('span', `name: ${attrs.name}, count: ${this.count}`);
 	}
 }

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<Attrs, State> = {
+	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<Attrs, State> & {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');