TypeScript maquette.h函數代碼示例

				function getTabChildVNode(tab: TabbedChild): (VNode | string)[] {
					const tabListeners = getTabListeners(tabbed, tab);
					return [
						h('div.tab-label', { onclick: tabListeners.onclickTabListener }, [ tab.state.label ]),
						/* TODO: only show the close when the tab state is closable */
						h('div.tab-close', { onclick: tabListeners.onclickTabCloseListener }, [ 'X' ])
					];
				}

				function getTabChildVNode(tab: TabbedChild): (VNode | string)[] {
					const tabListeners = getTabListeners(tabbed, tab);
					const nodes = [ h('div.tab-label', { onclick: tabListeners.onclickTabListener }, [ tab.state.label ]) ];
					if (tab.state.closeable) {
						nodes.push(h('div.tab-close', { onclick: tabListeners.onclickTabCloseListener }, [ 'X' ]));
					}
					return nodes;
				}

						h('div.tab-close', { onclick: tabListeners.onclickTabCloseListener }, [ 'X' ])
					];
				}

				/* We need to generate a set of VDom the represents the buttons */
				/* TODO: Allow the location of the tab bar to be set (top/left/bottom/right) */
				const tabs: VNode[] = [];
				const childrenNodes: VNode[] = [];
				tabbed.children.forEach((tab, key) => {
					if (tab === activeTab) {
						const activeTabVNode = tab.render();
						activeTabVNode.properties.classes['visible'] = true;
						childrenNodes.push(activeTabVNode);
						tabs.push(h(tabbed.tagNames.tab + '.active', { key: tab }, getTabChildVNode(tab)));
					}
					else {
						/* TODO: Having trouble changing the classes on the subnodes, so once visible always visible,
						 * The only choice was to just omit non visible nodes from the VDom, though I am not sure
						 * this makes a lot of sense, because with a big render, it is a lot of DOM to add and remove
						 */
						tabs.push(h(tabbed.tagNames.tab, { key: tab }, getTabChildVNode(tab)));
					}
				});

				return [ h(tabbed.tagNames.tabBar, tabs), ...childrenNodes ];
			}
		}
	}) as TabbedMixinFactory;

export default createTabbedMixin;

	Attached = 1,
	Detached
};

interface ProjectorData {
	projector?: MaquetteProjector;
	root?: Element;
	state?: ProjectorState;
	attachHandle?: Handle;
	boundRender?: () => VNode;
}

const projectorDataMap = new WeakMap<Projector, ProjectorData>();

const noopHandle = { destroy() { } };
const emptyVNode = h('div');
const noopVNode = function(): VNode { return emptyVNode; };

export const createProjector: ProjectorFactory = compose<any, ProjectorOptions>({
		getNodeAttributes(overrides?: VNodeProperties): VNodeProperties {
			/* TODO: This is the same logic as createCachedRenderMixin, merge somehow */
			const projector: Projector = this;
			const props: VNodeProperties = {};
			for (let key in projector.listeners) {
				props[key] = projector.listeners[key];
			}
			const classes: { [index: string]: boolean; } = {};
			if (projector.classes) {
				projector.classes.forEach((c) => classes[c] = true);
			}
			props.classes = classes;

						h('div.tab-close', { onclick: tabListeners.onclickTabCloseListener }, [ 'X' ])
					];
				}

				/* We need to generate a set of VDom the represents the buttons */
				/* TODO: Allow the location of the tab bar to be set (top/left/bottom/right) */
				const tabs: VNode[] = [];
				const childrenNodes: VNode[] = [];
				tabbed.children.forEach((tab, key) => {
					if (tab === activeTab) {
						const activeTabVNode = tab.render();
						activeTabVNode.properties.classes['visible'] = true;
						childrenNodes.push(activeTabVNode);
						tabs.push(h(tabbed.tagNames.tab + '.active', { key: tab }, getTabChildVNode(tab)));
					}
					else {
						/* TODO: Having trouble changing the classes on the subnodes, so once visible always visible,
						 * The only choice was to just omit non visible nodes from the VDom, though I am not sure
						 * this makes a lot of sense, because with a big render, it is a lot of DOM to add and remove
						 */
						tabs.push(h(tabbed.tagNames.tab, { key: tab }, getTabChildVNode(tab)));
					}
				});

				return [ h(tabbed.tagNames.tabBar, tabs) ].concat(childrenNodes);
			}
		}
	});

export default createTabbedMixin;

function render(): VNode {
	return h('dojo-panel-tabbed', {
		id: 'tabbed-panel'
	}, [
		h('ul', {}, [
			h('li', { classes: { active: false }, key: panel1 }, [ h('div.tab-label', [ 'tab 1' ]), h('div.tab-close', [ 'X' ]) ]),
			h('li', { classes: { active: closed }, key: panel2 }, [ h('div.tab-label', [ 'tab 2' ]), h('div.tab-close', [ 'X' ]) ]),
			h('li', { classes: { active: false }, key: panel3 }, [ h('div.tab-label', [ 'tab 3' ]), h('div.tab-close', [ 'X' ]) ]),
			closed
				? undefined
				: h('li', { classes: { active: !closed }, key: panel4 }, [ h('div.tab-label', [ 'tab 4' ]), h('div.tab-close', [ 'X' ]) ])
		]),
		h('div.panels', [
			undefined,
			closed
				? h('dojo-panel', { classes: { visible: true }, key: panel2 }, [ h('div#bar', [ 'tab 2' ]) ])
				: undefined,
			undefined,
			closed
				? undefined
				: h('dojo-panel', { classes: { visible: true }, key: panel4 }, [ h('div#bar', [ 'tab 4' ]) ])
		])
	]);
}

	parent?: ParentMixin<Renderable>;
}

export type Renderable = Destroyable & RenderableMixin;

export interface RenderableFactory extends ComposeFactory<Renderable, RenderableOptions> { }

export function isRenderable(value: any): value is Renderable {
	return value && typeof value.render === 'function';
}

const createRenderable: RenderableFactory = compose<RenderableMixin, RenderableOptions>({
		render() {
			const renderable: Renderable = this;
			return h(renderable.tagName);
		},

		tagName: 'div'
	}, (instance, options) => {
		if (options) {
			const { tagName, render, parent } = options;
			instance.tagName = tagName || instance.tagName;
			instance.render = render || instance.render;
			if (parent) {
				parent.append(instance);
			}
		}
	})
	.mixin(createDestroyable);

		renderable.render = () => {
			return h('h1', [ 'Greetings' ]);
		};