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

import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';
import TimePicker from '@dojo/widgets/time-picker';

const factory = create({ icache });

export default factory(function Basic({ middleware: { icache } }) {
	const { get, set } = icache;
	return (
		('date')}
			onValue={(value) => set('date', value)}
			step={1800}
		/>
	);
});

import { create, tsx } from '@dojo/framework/core/vdom';
import Button from '@dojo/widgets/button';

const factory = create();

export default factory(function Basic() {
	return <button>Basic Button</button>;
});

import { create, tsx } from "@dojo/framework/core/vdom";
import { Link } from "@dojo/framework/routing/Link";

import { ArticleItem } from "../interfaces";

export interface ArticlePreviewProperties {
	article: ArticleItem;
	favoriteArticle: () => void;
}

const factory = create({}).properties();

export const ArticlePreview = factory(function ArticlePreview({ properties }) {
	const {
		favoriteArticle,
		article,
		article: { author, favorited, slug }
	} = properties();

	let buttonClasses = ["btn", "btn-outline-primary", "btn-sm", "pull-xs-right"];
	if (favorited) {
		buttonClasses = ["btn", "btn-primary", "btn-sm", "pull-xs-right"];
	}

	return (
		<div>
			<div></div></div>

import { create, w, v } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';
import Button from '@dojo/widgets/button';
import Dialog from '@dojo/widgets/dialog';

const factory = create({ icache });

export default factory(function DialogPane({ middleware: { icache } }) {
	const open = icache.get('open') || false;

	return v('div', [
		w(
			Button,
			{
				pressed: open,
				onClick: () => {
					icache.set('open', !open);
				}
			},
			['Show / Hide Dialog']
		),
		w(

export interface ConstrainedInputProperties
	extends Exclude<
		TextInputProperties,
		'onValidate' | 'valid' | 'helperText' | 'customValidator'
	> {
	/** Validation rules applied to this input */
	rules: ValidationRules;
	/** Callback fired when the input validation changes */
	onValidate?: (valid?: boolean) => void;
}

export interface ConstrainedInputState {
	valid: { valid?: boolean; message?: string } | undefined;
}

const factory = create({
	icache: createICacheMiddleware(),
	validation,
	theme
}).properties();
export const ConstrainedInput = factory(function ConstrainedInput({
	middleware: { icache, validation, theme },
	properties
}) {
	const { rules, onValidate, ...props } = properties();
	const valid = icache.get('valid');

	const validator = validation(rules);

	const handleValidation = (valid?: boolean, message?: string) => {
		icache.set('valid', { valid, message });

onActive(dimensions: DimensionResults): void;
	/** When set to true, the item will set `scrollIntoView` on it's root dom node */
	scrollIntoView?: boolean;
	/** Property to set the disabled state of the item */
	disabled?: boolean;
	/** The id to apply to this widget top level for a11y */
	widgetId: string;
}

interface ListBoxItemICache {
	active: boolean;
}

const icache = createICacheMiddleware();

const factory = create({ dimensions, icache, theme }).properties();

export const ListBoxItem = factory(function({
	properties,
	children,
	middleware: { dimensions, icache, theme }
}) {
	const {
		onSelect,
		active = false,
		onRequestActive,
		onActive,
		scrollIntoView = false,
		selected = false,
		disabled = false,
		widgetId
	} = properties();

id: 'middleName',
		title: 'Middle Name'
	},
	{
		id: 'lastName',
		title: 'Last Name',
		filterable: true
	},
	{
		id: 'otherName',
		title: 'Other Name'
	}
];

const fetcher = createFetcher(createData());
const factory = create();

export default factory(function ColumnResize() {
	return ;
});

onOver?(): void;
	/** Handler for when the value of the widget changes */
	onValue?(checked: boolean): void;
	/** Makes the checkbox readonly (it may be focused but not changed) */
	readOnly?: boolean;
	/** Sets the checkbox input as required to complete the form */
	required?: boolean;
	/** Toggles the invalid/valid states of the Checkbox affecting how it is displayed */
	valid?: boolean;
	/** The current value */
	value?: string;
	/** The id used for the form input element */
	widgetId?: string;
}

const factory = create({ coreTheme, focus }).properties();

export const Checkbox = factory(function Checkbox({
	properties,
	middleware: { coreTheme, focus }
}) {
	const _uuid = uuid();
	const {
		aria = {},
		checked = false,
		classes,
		disabled,
		label,
		labelHidden,
		name,
		onBlur,
		onFocus,

import { create, w, v } from '@dojo/framework/core/vdom';
import cache from '@dojo/framework/core/middleware/cache';
import Progress from '@dojo/widgets/progress';
import * as css from '../../styles/tabs.m.css';

const factory = create({ cache });

export default factory(function ProgressTab({ middleware: { cache } }) {
	const customOutputMax = cache.get('output-max') || 750;

	return v('div', { classes: css.root }, [
		v('h2', ['Progress Bars']),
		v('div', [
			v('h3', {}, ['value: 50%']),
			w(Progress, { value: 50 }),
			v('h3', {}, ['value: 0.3, max: 1']),
			w(Progress, { value: 0.3, max: 1 }),
			v('h3', {}, ['value: 250, custom output function']),
			w(Progress, {
				value: 250,
				max: customOutputMax,
				output: (value: number, percent: number) => {

import { create, w, v } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';
import { getListItems } from '../listItemGenerator';
import InfiniteList from './InfiniteList';

import * as css from './styles/app.m.css';

const factory = create({ icache });

export default factory(function App({ middleware: { icache }}) {
	const data = icache.getOrSet<{ title: string; summary: string }[]>('data', getListItems);
	const isLoading = icache.get('loading') || false;

	return v('div', { classes: css.root }, [
		v('h1', { classes: css.title }, ['Infinite Scrolling List']),
		data && w(InfiniteList, { isLoading, data, onRequestItems: async () => {
			icache.set('loading', true);
			const newData = await getListItems();
			const data = icache.get('data');
			icache.set('loading', false);
			icache.set('data', [ ...data, ...newData ]);
		}})
	]);
});