From 570db36e68c88373e141c53fbcb9d7a45ddd550d Mon Sep 17 00:00:00 2001 From: spacejack Date: Tue, 1 Jan 2019 17:51:48 -0500 Subject: [PATCH 1/2] Edits to pass new linting rules --- types/mithril/index.d.ts | 12 ++++++------ types/mithril/test/test-api.ts | 8 ++++---- types/mithril/test/test-route.ts | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/types/mithril/index.d.ts b/types/mithril/index.d.ts index 32f3976e2e..be2b03f298 100644 --- a/types/mithril/index.d.ts +++ b/types/mithril/index.d.ts @@ -173,7 +173,7 @@ declare namespace Mithril { type ChildArrayOrPrimitive = ChildArray | string | number | boolean; /** Virtual DOM nodes, or vnodes, are Javascript objects that represent an element (or parts of the DOM). */ - interface Vnode = Lifecycle> { + interface Vnode = {}> { /** The nodeName of a DOM element. It may also be the string [ if a vnode is a fragment, # if it's a text vnode, or < if it's a trusted HTML vnode. Additionally, it may be a component. */ tag: string | ComponentTypes; /** A hashmap of DOM attributes, events, properties and lifecycle methods. */ @@ -194,7 +194,7 @@ declare namespace Mithril { // In some lifecycle methods, Vnode will have a dom property // and possibly a domSize property. - interface VnodeDOM = Lifecycle> extends Vnode { + interface VnodeDOM = {}> extends Vnode { /** Points to the element that corresponds to the vnode. */ dom: Element; /** This defines the number of DOM elements that the vnode represents (starting from the element referenced by the dom property). */ @@ -210,7 +210,7 @@ declare namespace Mithril { * Any Javascript object that has a view method can be used as a Mithril component. * Components can be consumed via the m() utility. */ - interface Component = Lifecycle> extends Lifecycle { + interface Component = {}> extends Lifecycle { /** Creates a view out of virtual elements. */ view(this: State, vnode: Vnode): Children | null | void; } @@ -242,16 +242,16 @@ declare namespace Mithril { * Any function that returns an object with a view method can be used as a Mithril component. * Components can be consumed via the m() utility. */ - type FactoryComponent = (vnode: Vnode) => Component; + type FactoryComponent = (vnode: Vnode) => Component; /** * Components are a mechanism to encapsulate parts of a view to make code easier to organize and/or reuse. * Any Javascript object that has a view method is a Mithril component. Components can be consumed via the m() utility. */ - type Comp = Lifecycle> = Component & State; + type Comp = {}> = Component & State; /** Components are a mechanism to encapsulate parts of a view to make code easier to organize and/or reuse. Components can be consumed via the m() utility. */ - type ComponentTypes = Lifecycle> = Component | { new (vnode: CVnode): ClassComponent } | FactoryComponent; + type ComponentTypes = {}> = Component | { new (vnode: CVnode): ClassComponent } | FactoryComponent; /** This represents the attributes available for configuring virtual elements, beyond the applicable DOM attributes. */ interface Attributes extends Lifecycle { diff --git a/types/mithril/test/test-api.ts b/types/mithril/test/test-api.ts index 73e03edeae..a8a042a891 100644 --- a/types/mithril/test/test-api.ts +++ b/types/mithril/test/test-api.ts @@ -116,7 +116,7 @@ const FRAME_BUDGET = 100; { // define a component - const Greeter: m.Comp<{ style: string }, {}> = { + const Greeter: m.Comp<{ style: string }> = { view(vnode) { return m("div", vnode.attrs, ["Hello ", vnode.children]); } @@ -191,7 +191,7 @@ const FRAME_BUDGET = 100; //////////////////////////////////////////////////////////////////////////////// { - const Fader: m.Comp<{}, {}> = { + const Fader: m.Comp = { onbeforeremove(vnode) { vnode.dom.classList.add("fade-out"); return new Promise(resolve => { @@ -227,7 +227,7 @@ const FRAME_BUDGET = 100; } }; - const Form: m.Comp<{term: string}, {}> = { + const Form: m.Comp<{term: string}> = { oninit(vnode) { state.term = vnode.attrs.term || ""; // populated from the `history.state` property if the user presses the back button }, @@ -239,7 +239,7 @@ const FRAME_BUDGET = 100; } }; - const Layout: m.Comp<{}, {}> = { + const Layout: m.Comp = { view(vnode) { return m(".layout", vnode.children); } diff --git a/types/mithril/test/test-route.ts b/types/mithril/test/test-route.ts index 7f82c9fa40..030a260bcb 100644 --- a/types/mithril/test/test-route.ts +++ b/types/mithril/test/test-route.ts @@ -89,7 +89,7 @@ route(document.body, '/', { test4: { onmatch(args, path) { // Must provide a Promise type if we want type checking - return new Promise>((resolve, reject) => { + return new Promise>((resolve, reject) => { resolve(component2); }); } From f516c9be01c554eb2e0fe6c0c0ff94dc9c7ca32e Mon Sep 17 00:00:00 2001 From: spacejack Date: Tue, 1 Jan 2019 18:04:14 -0500 Subject: [PATCH 2/2] Add ClosureComponent type --- types/mithril/index.d.ts | 7 ++++ types/mithril/test/test-factory-component.ts | 38 ++++++++++++++++++-- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/types/mithril/index.d.ts b/types/mithril/index.d.ts index be2b03f298..83de8c9825 100644 --- a/types/mithril/index.d.ts +++ b/types/mithril/index.d.ts @@ -244,6 +244,13 @@ declare namespace Mithril { */ type FactoryComponent = (vnode: Vnode) => Component; + /** + * Components are a mechanism to encapsulate parts of a view to make code easier to organize and/or reuse. + * Any function that returns an object with a view method can be used as a Mithril component. + * Components can be consumed via the m() utility. + */ + type ClosureComponent = FactoryComponent; + /** * Components are a mechanism to encapsulate parts of a view to make code easier to organize and/or reuse. * Any Javascript object that has a view method is a Mithril component. Components can be consumed via the m() utility. diff --git a/types/mithril/test/test-factory-component.ts b/types/mithril/test/test-factory-component.ts index 6d0102fe38..b0d8f3b265 100644 --- a/types/mithril/test/test-factory-component.ts +++ b/types/mithril/test/test-factory-component.ts @@ -1,5 +1,5 @@ -import m = require('mithril'); -import { Component, FactoryComponent, Vnode } from 'mithril'; +import * as m from 'mithril'; +import { Component, ClosureComponent, FactoryComponent } from 'mithril'; /////////////////////////////////////////////////////////// // 0. @@ -50,6 +50,13 @@ const comp2: FactoryComponent = vnode => ({ // vnode is inferred } }); +// 2a. Test ClosureComponent type alias +const comp2a: ClosureComponent = vnode => ({ // vnode is inferred + view({attrs: {title, description}}) { // Comp2Attrs type is inferred + return [m('h2', title), m('p', description)]; + } +}); + /////////////////////////////////////////////////////////// // 3. // Declares attrs type inline. @@ -80,6 +87,31 @@ const comp3: FactoryComponent<{pageHead: string}> = () => ({ } }); +// 3.a Test ClosureComponent type alias +const comp3a: ClosureComponent<{pageHead: string}> = () => ({ + oncreate({dom}) { + // Can do stuff with dom + }, + view({attrs}) { + return m('.page', + m('h1', attrs.pageHead), + m(comp2, + { + // attrs is type checked - nice! + title: "A Title", + description: "Some descriptive text.", + onremove(vnode) { + console.log("comp2 was removed"); + }, + } + ), + // Test other hyperscript parameter variations + m(comp1, m(comp1)), + m('br') + ); + } +}); + /////////////////////////////////////////////////////////// // 4. // Stateful component using closure method & var @@ -152,7 +184,9 @@ m.route(document.body, '/', { '/comp0': comp0, '/comp1': comp1, '/comp2': comp2, + '/comp2a': comp2a, '/comp3': comp3, + '/comp3a': comp3a, '/comp4': comp4, '/comp5': comp5 });