const comp2 = function (vnode) { // vnode is inferred
	return {
		view ({attrs: {title, description}}) { // Comp2Attrs type is inferred
			return [m('h2', title), m('p', description)]
		}
	}
} as FactoryComponent<Comp2Attrs>

 view: vnode => {
     const onclick = vnode.attrs.closeWindow;
     const onmousedown = e => e.stopPropagation();
     return m("td.window-buttons", [
         m("button.close-button", { onclick, onmousedown }, [
             m("i.icon-cancel-circled")
         ])
     ])
 }

 const children = names.map((n, i) => {
     const attrs = {
         onclick: () => setTab(i),
         onmousedown: (e: MouseEvent) => e.stopPropagation()
     }
     return i === activeIndex
         ? m("div.window-tab-active", attrs, n)
         : m("div.window-tab", attrs, n);
 });

 view: vnode => {
     const { err, code } = vnode.attrs;
     if (err !== undefined) {
         return m(Err, {err})
     } else if (vnode.attrs.code) {
         return m(Loaded, {code})
     } else {
         return m("div.euler-code-wrapper", "Loading...");
     }
 }

    view: vnode => {
        const { x, y } = vnode.state;
        const style = { top: `${y}px`, left: `${x}px` };

        const tab = vnode.attrs.tabs[vnode.state.activeIndex];
        const attr = typeof tab.attr === "function" 
            ? tab.attr() 
            : tab.attr;

        const key = vnode.attrs.k;
        const focusWindow = () => vnode.attrs.focusWindow(key);
        const closeWindow = () => vnode.attrs.closeWindow(key);

        return m("div.window-frame", { style }, [
            m("table.window", { onmousedown: focusWindow }, [
                m("tbody", [
                    m("tr.window-header", { onmousedown: grabHeader.bind(vnode) }, [
                        m(WindowTabs, {
                            names: vnode.attrs.tabs.map(t => t.name),
                            activeIndex: vnode.state.activeIndex,
                            setTab: i => { vnode.state.activeIndex = i; m.redraw() }
                        }),
                        m(WindowButtons, { closeWindow })
                    ]),
                    m("tr", m("td.window-body", { colSpan: 2 }, [
                        m(tab.component, attr)
                    ]))
                ])
            ])
        ])
    }

            view: vnode => {
                const { dispatch, getState } = store;

                let actionMap = {};
                if (typeof actions === 'function') {
                    actionMap = actions(dispatch, store.getState);
                } else if (typeof actions === 'object') {
                    const actionKeys = Object.keys(actions);
                    let k;
                    for (k of actionKeys) {
                        if (typeof actions[k] === 'function') {
                            actionMap[k] = dispatchFactory(actions[k], dispatch);
                        }
                    }
                }

                const state = selector(getState());
                const attrs = {
                    ...vnode.attrs,
                    ...state,
                    ...actionMap,
                    dispatch,
                }
                return m(Component, attrs, vnode.children);
            }

///////////////////////////////////////////////////////////
// 0.
// Simplest component example - no attrs or state.
//
function comp0() {
	return {
		view() {
			return m('span', "Test");
		}
	};
}

  view: function(ctrl: OnlineRound) {
    if (!promoting) return null;

    const pieces = ['queen', 'knight', 'rook', 'bishop'];
    if (ctrl.data.game.variant.key === 'antichess') pieces.push('king');

    return m('div.overlay.open', {
      oncreate: helper.ontap(cancel.bind(undefined, ctrl))
    }, [m('div#promotion_choice', {
      className: settings.general.theme.piece(),
      style: { top: (helper.viewportDim().vh - 100) / 2 + 'px' }
    }, pieces.map(function(role) {
      return m('piece.' + role + '.' + ctrl.data.player.color, {
        oncreate: helper.ontap(finish.bind(undefined, ctrl, role))
      });
    }))]);
  }

export default (): Component<Attrs, {}> => {
	const count = 0;
	return {
		view({attrs}) {
			return m('span', `name: ${attrs.name}, count: ${count}`);
		}
	};
};

	const view = function() {
		return m(".container", cells.map(i => {
			return m(".slice", {
				style: {backgroundPosition: (i % 10 * 11) + "% " + (Math.floor(i / 10) * 11) + "%"},
				onbeforeremove: exit
			})
		}))
	}