How to use the @dojo/framework/core/vdom.w function in @dojo/framework

		const h = harness(() => w(Tags, {}), { middleware: [[store, mockStore]] });
		const expected = v("div", { classes: ["col-md-3"] }, [

export default factory(function Accordion({ middleware: { icache } }) {
	const openKeys = icache.getOrSet>('keys', new Set())!;

	return w(
		AccordionPane,
		{
			onRequestOpen: (key: string) => {
				const keys = icache.get>('keys')!;
				keys.add(key);
				icache.set('keys', keys);
			},
			onRequestClose: (key: string) => {
				const keys = icache.get>('keys')!;
				keys.delete(key);
				icache.set('keys', keys);
			},
			openKeys: from(openKeys)
		},
		[
			w(

export default factory(function App({ middleware: { i18n, invalidator, icache } }) {
	const { messages } = i18n.localize(nlsBundle);
	let localeDetails = i18n.get();
	if (!localeDetails || !localeDetails.locale) {
		let rtl = isRtl(i18nCore.locale);
		localeDetails = { locale: i18nCore.locale, rtl };
		i18n.set(localeDetails);
	}
	const multiple = icache.get('multiple') || false;
	const date = new Date();

	return w(
		GlobalEvent,
		{
			document: {
				visibilitychange: () => {
					if (!document.hidden) {
						invalidator();
					}
				}
			}
		},
		[
			v(
				'div',
				{
					lang: localeDetails.locale,
					dir: localeDetails.rtl ? 'rtl' : 'ltr'

this.invalidate();
				},
				onFocus: () => {
					this._state.eventFocus = true;
					this.invalidate();
				},
				onBlur: () => {
					this._state.eventFocus = false;
					this.invalidate();
				},
				value: { min: this._state.eventMin, max: this._state.eventMax },
				label: 'event example'
			}),
			v('div', {}, [`Focused: ${this._state.eventFocus}, Clicks: ${this._state.eventClick}`]),
			v('h3', {}, ['Validation']),
			w(RangeSlider, {
				key: 'disabled',
				label: 'Disabled',
				disabled: true,
				value: { min: this._state.disabledMin, max: this._state.disabledMax },
				onValue: ({ min, max }) => {
					this._state.disabledMin = min;
					this._state.disabledMax = max;
					this.invalidate();
				}
			}),
			w(RangeSlider, {
				key: 'required',
				label: 'Required',
				value: { min: this._state.requiredMin, max: this._state.requiredMax },
				required: true,
				name: 'required',

height: '500px',
			maxWidth: '1000px',
			border: '1px solid rgba(170, 170, 170, 0.5)'
		};

		const { width } = this.meta(Dimensions).get('example-column').size;

		return v(
			'div',
			{
				styles: {
					padding: '50px'
				}
			},
			[
				w(GlobalEvent, { key: 'global', window: { resize: this._onResize } }),
				v('h1', ['SplitPane Examples']),
				v('h3', ['Column']),
				v('div', { styles: { marginBottom: '10px' } }, [
					v('div', { styles: { marginBottom: '5px' } }, [
						`Current Collapse Width: ${this._collapseWidth}`
					]),
					v('div', { styles: { marginBottom: '5px' } }, [`Current Size: ${width}`]),
					v('button', { onclick: this._changeCollapseWidth }, [
						`Change collapse width to ${this._collapseWidth === 600 ? '350' : '600'}`
					]),
					v('button', { onclick: this._changeToRow }, ['Change to row'])
				]),
				v(
					'div',
					{
						key: 'example-column',

export default factory(function Tabs({ middleware: { icache } }) {
	const activeIndex = icache.get('active') || 0;

	return w(
		TabController,
		{
			alignButtons: Align.top,
			activeIndex: activeIndex,
			onRequestTabChange: (index: number) => {
				icache.set('active', index);
			}
		},
		[
			w(
				Tab,
				{
					key: 'button-tab',
					label: 'Basic Form Widgets'
				},
				[w(BasicFormTab, {})]
			),
			w(
				Tab,
				{
					key: 'input-tab',
					label: 'Text Input Widgets'
				},
				[w(TextInputTab, {})]
			),
			w(

protected renderDateCell(
		dateObj: Date,
		index: number,
		selected: boolean,
		currentMonth: boolean,
		today: boolean
	): DNode {
		const { minDate, maxDate } = this.properties;

		const date = dateObj.getDate();
		const { theme, classes } = this.properties;
		const outOfRange = isOutOfDateRange(dateObj, minDate, maxDate);
		const focusable = currentMonth && date === this._focusedDay;

		return w(CalendarCell, {
			classes,
			key: `date-${index}`,
			callFocus: this._callDateFocus && focusable,
			date,
			outOfRange,
			focusable,
			disabled: !currentMonth,
			selected,
			theme,
			today,
			onClick: outOfRange ? undefined : this._onDateClick,
			onFocusCalled: this._onDateFocusCalled,
			onKeyDown: this._onDateKeyDown
		});
	}

protected render(): DNode {
		const { heading } = this.properties;

		const hasActions = this.children && this.children.length;

		return v(
			'div',
			{
				key: 'root',
				classes: [
					fixedCss.rootFixed,
					...this.theme([css.root, this._collapsed ? css.collapsed : null])
				]
			},
			[
				w(GlobalEvent, { key: 'global', window: { resize: this._collapseIfNecessary } }),
				heading
					? v(
							'div',
							{
								classes: this.theme(css.title)
							},
							[heading]
					  )
					: null,
				hasActions ? this.renderActions() : null,
				hasActions && this._collapsed ? this.renderButton() : null
			]
		);
	}
}

themes.map((theme, index) => {
						return w(Radio, {
							key: theme.label.concat(index.toString()),
							checked: this._theme === theme.label,
							value: theme.label,
							label: theme.label,
							onValue: (checked) => {
								if (checked) {
									this._onThemeChange(theme.label);
								}
							}
						});
					})
				)

protected renderPagingButtonContent(type: Paging, labels: CalendarMessages): DNode[] {
		const { theme, classes } = this.properties;
		const iconType = type === Paging.next ? 'rightIcon' : 'leftIcon';
		const labelText = type === Paging.next ? labels.nextMonth : labels.previousMonth;

		return [
			w(Icon, { type: iconType, theme, classes }),
			v('span', { classes: [baseCss.visuallyHidden] }, [labelText])
		];
	}