@dojo/widget-core

• Reactive & unidirectional: widget-core follows core reactive principles to ensure predictable, consistent behavior.
• Encapsulated Widgets: Create independent encapsulated widgets that can be wired together to create complex and beautiful user interfaces.
• DOM Abstractions: widget-core provides API abstractions to avoid needing to access or manipulate the DOM outside of the reactive render life-cycle.
• I18n & Themes: widget-core provides core mixins to enable internationalization and theming support for your widgets.

- [Basic Widgets](#basic-widgets)
   - [Rendering a Widget in the DOM](#rendering-a-widget-in-the-dom)
   - [Widgets and Properties](#widgets-and-properties)
   - [Composing Widgets](#composing-widgets)
   - [Decomposing Widgets](#decomposing-widgets)
    - [Mixins](#mixins)
    - [Animation](#animation)
    - [Styling & Theming](#styling--theming)
    - [Internationalization](#internationalization)

• Key Principles
• Advanced Concepts

- [Handling Focus](#handling-focus)
- [Advanced Properties](#advanced-properties)
- [Registry](#registry)
- [Decorator Lifecycle Hooks](#decorator-lifecycle-hooks)
- [Method Lifecycle Hooks](#method-lifecycle-hooks)
- [Containers](#containers--injectors)
- [Decorators](#decorators)
- [Meta Configuration](#meta-configuration)
- [Inserting DOM Nodes Into The VDom Tree](#inserting-dom-nodes-into-the-vdom-tree)
- [JSX Support](#jsx-support)
- [Web Components](#web-components)

• How Do I Contribute?

- [Setup Installation](#setup-installation)
- [Testing](#testing)

• Licensing Information

Installation

npm install @dojo/widget-core

# peer dependencies
npm install @dojo/has
npm install @dojo/shim
npm install @dojo/core
npm install @dojo/i18n

Features

Basic Widgets

v('div', [ 'Hello, Dojo 2!' ])

class HelloDojo extends WidgetBase {
    protected render() {
        return v('div', [ 'Hello, Dojo 2!' ]);
    }
}

Rendering a Widget in the DOM

const Projector = ProjectorMixin(HelloDojo);
const projector = new Projector();

projector.append();

<div id="my-app"></div>

const root = document.getElementById('my-app');
const Projector = ProjectorMixin(HelloDojo);
const projector = new Projector();

projector.append(root);

Widgets and Properties

interface MyProperties extends WidgetProperties {
    name: string;
}

class Hello extends WidgetBase<MyProperties> {
    protected render() {
        const { name } = this.properties;

        return v('div', [ `Hello, ${name}` ]);
    }
}

Composing Widgets

class App extends WidgetBase {
    protected render() {
        return v('div', [
            w(Hello, { name: 'Bill' }),
            w(Hello, { name: 'Bob' }),
            w(Hello, { name: 'Flower pot men' })
        ]);
    }
}

const Projector = ProjectorMixin(App);
const projector = new Projector();

projector.append();

Decomposing Widgets

interface ListProperties {
    items: {
        id: string;
        content: string;
        highlighted: boolean;
    };
}

class List extends WidgetBase<ListProperties> {
    protected render() {
        const { items } = this.properties;

        return v('ul', { classes: 'list' }, items.map((item) => {
            const { id, highlighted, content } = item;
            const classes = [ highlighted ? 'highlighted' : null ];

            return v('li', { key: id, classes }, [ content ]);
        });
    }
}

interface ListProperties {
    items: {
        id: string;
        content: string;
        highlighted: boolean;
    };
    onItemClick: (id: string) => void;
}

interface ListItemProperties {
    id: string;
    content: string;
    highlighted: boolean;
    onItemClick: (id: string) => void;
}

class ListItem extends WidgetBase<ListItemProperties> {

    protected onClick(event: MouseEvent) {
        const { id } = this.properties;

        this.properties.onItemClick(id);
    }

    protected render() {
        const { id, content, highlighted } = this.properties;
        const classes = [ highlighted ? 'highlighted' : null ];

        return v('li', { key: id, classes, onclick: this.onClick }, [ content ]);
    }
}

interface ListProperties {
    items: {
        id: string;
        content: string;
        highlighted: boolean;
    };
    onItemClick: (id: string) => void;
}

class List extends WidgetBase<ListProperties> {
    protected render() {
        const { onItemClick, items } = this.properties;

        return v('ul', { classes: 'list' }, items.map(({ id, content, highlighted }) => {
            return w(ListItem, { key:id, content, highlighted, onItemClick });
        });
    }
}

Mixins

// interface for the extended API
interface StateMixin {
    readonly state: Readonly<any>;
    setState(state: any): void;
}

// function that accepts a class that extends `WidgetBase` and returns the extended class with the `StateMixin`
// behavior
function StateMixin<T extends new(...args: any[]) => WidgetBase>(Base: T): T & (new(...args: any[]) => StateMixin) {
    return class extends Base {
        private _state: any;

        public setState(state: any): void {
            // shallow copy of the state
            this._state = { ...this._state, ...state };
            // invalidate the widget
            this.invalidate();
        }

        public get state(): any {
            return this._state;
        }
    };
}

Animation

Basic Example

export default class AnimatedWidget extends WidgetBase {
    protected render() {
        const animate = {
            id: 'rootAnimation',
            effects: [
                { height: '10px' },
                { height: '100px' }
            ],
            controls: {
                play: true
            }
        };

        this.meta(WebAnimation).animate('root', animate);

        return v('div', {
            key: 'root'
        });
    }
}

Changing Animation

export default class AnimatedWidget extends WidgetBase {
    private _open = false;

    protected render() {
        const animate = this._open ? {
            id: 'upAnimation',
            effects: [
                { height: '100px' },
                { height: '0px' }
            ],
            controls: {
                play: true
            }
        } : {
            id: 'downAnimation',
            effects: [
                { height: '0px' },
                { height: '100px' }
            ],
            controls: {
                play: true
            }
        };

        this.meta(WebAnimation).animate('root', animate);

        return v('div', {
            key: 'root'
        })
    }
}

Passing an effects function

export default class AnimatedWidget extends WidgetBase {
    private _getEffect() {
        const { scroll } = this.meta(Dimensions).get('content');

        return [
            { height: '0px' },
            { height: `${scroll.height}px` }
        ];
    }

    protected render() {
        const animate = {
            id: 'upAnimation',
            effects: this._getEffect(),
            controls: {
                play: true
            }
        };

        this.meta(WebAnimation).animate('root', animate);

        return v('div', {
            key: 'root'
        })
    }
}

Get animation info

export default class AnimatedWidget extends WidgetBase {
    protected render() {
        const animate = {
            id: 'rootAnimation',
            effects: [
                { height: '10px' },
                { height: '100px' }
            ],
            controls: {
                play: true
            }
        };

        this.meta(WebAnimation).animate('root', animate);

        const info = this.meta(WebAnimation).get('rootAnimation');

        return v('div', {
            key: 'root'
        });
    }
}

Styling & Theming

Overview

export const classNameOne: string;
export const classNameTwo: string;

import * as css from './styles/myWidget.m.css';
import { ThemedMixin, theme } from '@dojo/widget-core/mixins/Themed';

@theme(css)
export default class MyWidget extends ThemedMixin(WidgetBase) {
    protected render() {
        return v('div', { classes: [ this.theme(css.root), css.rootFixed ] });
    }
}

Writing a theme

/* myTheme/styles/myWidget.m.css */
.root {
    color: blue;
}

// myTheme/theme.ts
import * as myWidget from './styles/myWidget.m.css';

export default {
    'myWidget': myWidget
}

Applying a theme

// app.ts
import myTheme from './myTheme/theme';

// ...
render() {
    return w(TabPanel, { theme: myTheme } });
}

Passing extra classes

/* app.m.css */
.tabPanel {
    position: absolute;
    left: 50px;
    top: 50px;
}

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

// ...
render() {
    return w(TabPanel, { extraClasses: { 'root': appCss.tabPanel } });
}

Internationalization

• messages: An object containing the localized message key-value pairs. If the messages have not yet loaded, then messages will be either a blank bundle or the default messages, depending upon how localizeBundle was called.
• isPlaceholder: a boolean property indicating whether the returned messages are the actual locale-specific messages (false) or just the placeholders used while waiting for the localized messages to finish loading (true). This is useful to prevent the widget from rendering at all if localized messages have not yet loaded.
• format(key: string, replacements: { [key: string]: string }): a method that accepts a message key as its first argument and an object of replacement values as its second. For example, if the bundle contains greeting: 'Hello, {name}!', then calling format('greeting', { name: 'World' }) would return 'Hello, World!'.

const MyWidgetBase = I18nMixin(WidgetBase);

class I18nWidget extends MyWidgetBase<I18nWidgetProperties> {
    render() {
        // Load the "greetings" messages for the current locale. If the locale-specific
        // messages have not been loaded yet, then the default messages are returned,
        // and the widget will be invalidated once the locale-specific messages have
        // loaded.
        const { format, isPlaceholder, messages } = this.localizeBundle(greetingsBundle);

        // In many cases it makes sense to postpone rendering until the locale-specific messages have loaded,
        // which can be accomplished by returning early if `isPlaceholder` is `true`.
        if (isPlaceholder) {
            return;
        }

        return v('div', { title: messages.hello }, [
            w(Label, {
                // Passing a message string to a child widget.
                label: messages.purchaseItems
            }),
            w(Button, {
                // Passing a formatted message string to a child widget.
                label: format('itemCount', { count: 2 })
            })
        ]);
    }
}

import { Bundle } from '@dojo/i18n/i18n';

// A complete bundle to replace WidgetA's message bundle
import overrideBundleForWidgetA from './nls/widgetA';

// Bundles for WidgetB
import widgetB1 from 'third-party/nls/widgetB1';
import overrideBundleForWidgetB from './nls/widgetB';

// WidgetB uses multiple bundles, but only `thirdy-party/nls/widgetB1` needs to be overridden
const overrideMapForWidgetB = new Map<Bundle<any>, Bundle<any>>();
map.set(widgetB1, overrideBundleForWidgetB);

export class MyWidget extends WidgetBase {
	protected render() {
		return [
			w(WidgetA, {
				i18nBundle: overrideBundleForWidgetA
			}),
			w(WidgetB, {
				i18nBundle: overrideMapForWidgetB
			}),
		];
	}
}

Key Principles

1. The widget's __render__, __setProperties__, __setChildren__ functions should never be called or overridden.

- These are the internal methods of the widget APIs and their behavior can change in the future, causing regressions in your application.

1. Except for projectors, you should never need to deal directly with widget instances

- The Dojo 2 widget system manages all instances required including caching and destruction, trying to create and manage other widgets will cause issues and will not work as expected.

1. Never update properties within a widget instance, they should be considered pure.

- Properties are considered read-only and should not be updated within a widget instance, updating properties could cause unexpected behavior and introduce bugs in your application.

1. Hyperscript should always be written using the @dojo/widget-core/d#v() function.

- The widget-core abstraction for Hyperscript is the only type of vdom that widget-core can process for standard DOM elements, any other mechanism will not work properly or at all.

Advanced Concepts

Handling Focus

// Call focus for the node on the only first render
v('input', { type: 'text', focus: true })

// Call focus for the node on every render
v('input', { type: 'text', focus: () => true) })

interface FocusInputChildProperties {
	onFocus: () => void;
}

class FocusInputChild extends Focus(WidgetBase)<FocusInputChildProperties> {
	protected render() {
		// the child widget's `this.shouldFocus` is passed directly to the input nodes focus property
		return v('input', { onfocus: this.properties.onFocus, focus: this.shouldFocus });
	}
}

class FocusParent extends Focus(WidgetBase) {
	private _focusedInputKey = 0;

	private _onFocus(key: number) {
		this._focusedInputKey = key;
		this.invalidate();
	}

	private _previous() {
		if (this._focusedInputKey === 0) {
			this._focusedInputKey = 4;
		} else {
			this._focusedInputKey--;
		}
		// calling focus resets the widget so that `this.shouldFocus`
		// will return true on its next use
		this.focus();
	}

	private _next() {
		if (this._focusedInputKey === 4) {
			this._focusedInputKey = 0;
		} else {
			this._focusedInputKey++;
		}
		// calling focus resets the widget so that `this.shouldFocus`
		// will return true on its next use
		this.focus();
	}

	protected render() {
		return v('div', [
			v('button', { onclick: this._previous }, ['Previous']),
			v('button', { onclick: this._next }, ['Next']),
			// `this.shouldFocus` is passed to the child that requires focus based on
			// some widget logic. If the child is a widget it can then deal with that
			// however is necessary. The widget may also have internal logic and pass
			// its own `this.shouldFocus` down further or could apply directly to a
			// VNode child.
			w(FocusInputChild, {
				key: 0,
				focus: this._focusedInputKey === 0 ? this.shouldFocus : undefined,
				onFocus: () => this._onFocus(0)
			}),
			w(FocusInputChild, {
				key: 1,
				focus: this._focusedInputKey === 1 ? this.shouldFocus : undefined,
				onFocus: () => this._onFocus(1)
			}),
			w(FocusInputChild, {
				key: 2,
				focus: this._focusedInputKey === 2 ? this.shouldFocus : undefined,
				onFocus: () => this._onFocus(2)
			}),
			w(FocusInputChild, {
				key: 3,
				focus: this._focusedInputKey === 3 ? this.shouldFocus : undefined,
				onFocus: () => this._onFocus(3)
			}),
			v('input', {
				key: 4,
				focus: this._focusedInputKey === 4 ? this.shouldFocus : undefined,
				onfocus: () => this._onFocus(4)
			})
		]);
	}
}

Advanced Properties

// using a diff function provided by widget-core#diff
@diffProperty('title', reference)
class MyWidget extends WidgetBase<MyProperties> { }

//custom diff function; A pure function with no side effects.
function customDiff(previousProperty: string, newProperty: string): PropertyChangeRecord {
    return {
        changed: previousProperty !== newProperty,
        value: newProperty
    };
}

// using a custom diff function
@diffProperty('title', customDiff)
class MyWidget extends WidgetBase<MyProperties> { }

Property Diffing Reactions

class MyWidget extends WidgetBase<MyProperties> {

    @diffProperty('title', auto)
    protected onTitleChange(previousProperties: any, newProperties: any): void {
        this._previousTitle = previousProperties.title;
    }
}

class MyWidget extends WidgetBase<MyProperties> {

    @diffProperty('title', auto)
    @diffProperty('subtitle', auto)
    protected onTitleOrSubtitleChange(previousProperties: any, newProperties: any): void {
        this._titlesUpdated = true;
    }
}

class MyWidget extends WidgetBase {

    constructor() {
        super();
        diffProperty('foo', auto, this.diffFooReaction)(this);
    }

    diffFooReaction(previousProperty: any, newProperty: any) {
        // do something to reaction to a diff of foo
    }
}

Registry

import { Registry } from '@dojo/widget-core/Registry';

import { MyWidget } from './MyWidget';
import { MyAppContext } from './MyAppContext';

const registry = new Registry();
registry.define('my-widget', MyWidget);
registry.defineInjector('my-injector', (invalidator) => {
	const appContext = new MyAppContext(invalidator);
	return () => appContext;
});
// ... Mixin and create Projector ...

projector.setProperties({ registry });

Registry Decorator

// single entry
@registry('loading', LoadingWidget)
class MyWidget extends WidgetBase {
    render() {
        if (this.properties) {
            const LoadingWidget = this.registry.get('loading', true);
            return w(LoadingWidget, {});
        }
        return w(MyActualChildWidget, {});
    }
}

// multiple entries
@registry('loading', LoadingWidget)
@registry('heading', () => import('./HeadingWidget'))
class MyWidget extends WidgetBase {
    render() {
        if (this.properties) {
            const LoadingWidget = this.registry.get('loading', true);
            return w(LoadingWidget, {});
        }
        return w(MyActualChildWidget, {}, [
            w('heading', {})
        ]);
    }
}

Loading esModules

@registry('Button', () => import('./Button')) // default export
@registry('Table', async () => {
    const module = await import('./HeadingWidget');
    return module.table;
})
class MyWidget extends WidgetBase {}

Decorator Lifecycle Hooks

class MyClass extends WidgetBase<MyClassProperties> {

    @beforeProperties()
    protected myBeforeProperties(properties: MyClassProperties): MyClassProperties {
        if (properties.type === 'myType') {
            return { extraProperty: 'foo' };
        }
        return {};
    }
}

@alwaysRender()
class MyClass extends WidgetBase {}

class MyClass extends WidgetBase {

    @beforeRender()
    protected myBeforeRender(renderFunc: () => DNode, properties: any, children: DNode[]): () => DNode {
        // decorate/manipulate properties or children.
        properties.extraAttribute = 'foo';
        // Return or replace the `render` function
        return () => {
            return v('my-replaced-attribute');
        };
    }
}

class MyBaseClass extends WidgetBase<WidgetProperties> {
    @afterRender()
    myAfterRender(result: DNode): DNode {
        // do something with the result
        return result;
    }
}

class MyClass extends WidgetBase {
    onAttach() {
        // do things when attached to the DOM
    }
}

class MyClass extends WidgetBase {
    onDetach() {
        // do things when removed from the DOM
    }
}

registry.defineInjector('my-injector', () => {
    return () => ({ foo: 'bar' });
});

registry.defineInjector('my-injector', (invalidator) => {
    // This could be a store, but for this example it is simply an instance
    // that accepts the `invalidator` and calls it when any of its internal
    // state has changed.
    const appContext = new AppContext(invalidator);
    return () => appContext;
});

import { Container } from '@dojo/widget-core/Container';
import { MyWidget } from './MyWidget';

function getProperties(payload: any, properties: any) {
    return {
        foo: payload.foo
    };
}

export const MyWidgetContainer = Container(MyWidget, 'my-injector', getProperties);

// import { MyWidget } from './MyWidget';
import { MyWidgetContainer } from './MyWidgetContainer';

interface AppProperties {
    foo: string;
}

class App extends WidgetBase<AppProperties> {
    render() {
        return v('div', {}, [
            // w(MyWidget, { foo: 'bar' })
            w(MyWidgetContainer, {})
        ]);
    }
}

constructor() {
    beforeProperties(this.myBeforeProperties)(this);
    beforeRender(myBeforeRender)(this);
    afterRender(this.myAfterRender)(this);
    diffProperty('myProperty', this.myPropertyDiff)(this);
}

class TestWidget extends WidgetBase<WidgetProperties> {
    render() {
        const dimensions = this.meta(Dimensions).get('root');

        return v('div', {
            key: 'root',
            innerHTML: `Width: ${dimensions.width}`
        });
    }
}

const dimensions = this.meta(Dimensions).get('root');

const hasRootBeenRendered = this.meta(Dimensions).has('root');

import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v, w } from '@dojo/widget-core/d';
import { DNode } from '@dojo/widget-core/interfaces';
import { Intersection } from '@dojo/widget-core/meta/Intersection';

// Add image URLs here to load
const images = [];

class Item extends WidgetBase<{ imageSrc: string }> {
	protected render() {
		const { imageSrc } = this.properties;
		const { isIntersecting } = this.meta(Intersection).get('root');
		let imageProperties: any = {
			key: 'root',
			styles: {
				height: '200px',
				width: '200px'
			}
		};

        // Only adds the image source if the node is in the viewport
		if (isIntersecting) {
			imageProperties = { ...imageProperties, src: imageSrc };
		}

		return v('img', imageProperties);
	}
}

class List extends WidgetBase {
	protected render() {
		let items: DNode[] = [];
		for (let i = 0; i < images.length; i++) {
			items.push(v('ul', { key: i }, [ w(Item, { key: i, imageSrc: images[i] }) ]));
		}

		return v('div', items);
	}
}

Animations

Drag

const dragResult = this.meta(Drag).get('root');

interface ExampleWidget extends WidgetBaseProperties {
    height: number;
    top: number;
    onScroll?(delta: number): void;
}

class VerticalScrollBar extends WidgetBase {
    protected render() {
        const { height, top, onScroll } = this.properties;
        const dragResult = this.meta(Drag).get('slider');
        onScroll && onScroll(dragResult.delta.y);
        return v('div', {
            classes: [ css.root, dragResult.isDragging ? css.dragging : null ],
            key: 'root'
        }, [
            v('div', {
                classes: [ css.slider ],
                key: 'slider',
                styles: {
                    height: `${height}px`,
                    top: `${top}px`
                }
            })
        ])
    }
}

class VerticalScrollBarController extends WidgetBase {
    private _top: 0;
    private _onScroll(delta: number) {
        this._top += delta;
        if (this._top < 0) {
            this._top = 0;
        }
        this.invalidate();
    }

    protected render() {
        return w(VerticalScrollBar, {
            top: this._top,
            width: 10,
            onScroll: this._onScroll
        });
    }
}

Focus

class MyWidget extends WidgetBase<WidgetProperties> {
    // ...
    render() {
        // run your meta
        const buttonFocus = this.meta(FocusMeta).get('button');
        return v('div', {
          w(Button, {
            key: 'button'
          }, [ 'Open Tooltip' ]),
          w(Tooltip, {
            content: 'Foo',
            open: buttonFocus.active
          }, [ 'modal content' ])
        });
    }
    // ...
}

class MyWidget extends WidgetBase<WidgetProperties> {
    // ...
    render() {
        // run your meta
        return v('div', {
          w(Button, {
            onClick: () => {
              this.meta(Focus).set('modal');
            }
          }, [ 'Open Modal' ]),
          v('div', {
            key: 'modal',
            tabIndex: -1
          }, [ 'modal content' ])
        });
    }
    // ...
}

Matches

const matches = this.meta(Matches).get('root', evt);

class TestWidget extends WidgetBase<WidgetProperties> {
    private _onclick(evt: MouseEvent) {
        if (this.meta(Matches).get('root', evt)) {
            console.log('The root node was clicked on.');
        }
    }

    render() {
        const dimensions = this.meta(Matches).get('root');

        return v('div', {
            key: 'root'
            onclick: this._onclick
        }, [
            v('div', {
                innerHTML: 'Hello World'
            })
        ]);
    }
}

Resize

function isMediumWidthPredicate(contentRect: ContentRect) {
    return contentRect.width < 500;
}

function isSmallHeightPredicate(contentRect: ContentRect) {
    return contentRect.height < 300;
}

class TestWidget extends WidgetBase<WidgetProperties> {
    render() {
        const { isMediumWidth, isSmallHeight } = this.meta(Resize).get('root', {
            isMediumWidth: isMediumWidthPredicate,
            isSmallHeight: isSmallHeightPredicate
        });

        return v('div', {
            key: 'root'
            classes: [
                isMediumWidth ? css.medium : css.large,
                isSmallHeight ? css.scroll : null
            ]
        }, [
            v('div', {
                innerHTML: 'Hello World'
            })
        ]);
    }
}

Implementing Custom Meta

import MetaBase from "@dojo/widget-core/meta/Base";

class HtmlMeta extends MetaBase {
    get(key: string): string {
        const node = this.getNode(key);
        return node ? node.innerHTML : '';
    }
}

class MyWidget extends WidgetBase<WidgetProperties> {
    // ...
    render() {
        // run your meta
        const html = this.meta(HtmlMeta).get('comment');

        return v('div', { key: 'comment', innerHTML: html });
    }
    // ...
}

• has - A method that accepts a key and returns a boolean to denote if the corresponding node exists in the rendered DOM.
• getNode - A method that accepts a key string to inform the widget it needs a rendered DOM element corresponding to that key. If one is available, it will be returned immediately. If not, a callback is created which will invalidate the widget when the node becomes available. This uses the underlying nodeHandler event system.
• invalidate - A method that will invalidate the widget.
• afterRender - This provides a hook into the widget afterRender lifecycle that can be used to clear up any resources that the meta has created. This is used, for instance, in the WebAnimation meta to clear down unused animations.

import MetaBase from "@dojo/widget-core/meta/Base";

interface IsTallMetaOptions {
    minHeight: number;
}

class IsTallMeta extends MetaBase {
    isTall(key: string, { minHeight }: IsTallMetaOptions = { minHeight: 300 }): boolean {
        const node = this.getNode(key);
        if (node) {
            return node.offsetHeight >= minHeight;
        }
        return false;
    }
}

Inserting DOM nodes into the VDom Tree

• none: This mode will always pass an empty object as the previous attributes and properties so the props and attrs passed to dom() will always be applied.
• dom: This mode uses the attributes and properties from the DOM node for the diff.
• vdom: This mode will use the previous VNode for the diff, this is the mode used normally during the vdom rendering.

const node = document.createElement('div');

const vnode = dom({
    node,
    props: {
        foo: 'foo',
        bar: 1
    },
    attrs: {
        baz: 'baz'
    },
    on: {
        click: () => { console.log('clicker'); }
    },
    diffType: 'none' | 'dom' | 'vdom'
});

JSX Support

"jsx": "react",
"jsxFactory": "tsx",

"include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
]

import { tsx } from '@dojo/widget-core/tsx';

class MyWidgetWithTsx extends Themed(WidgetBase)<MyProperties> {
    protected render(): DNode {
        const { clear, properties: { completed, count, activeCount, activeFilter } } = this;

        return (
            <footer classes={this.theme(css.footer)}>
                <span classes={this.theme(css.count)}>
                    <strong>{`${activeCount}`}</strong>
                    <span>{`${count}`}</span>
                </span>
                <TodoFilter activeFilter={activeFilter} />
                { completed ? ( <button onclick={clear} /> ) : ( null ) }
            </footer>
        );
    }
}

Web Components

interface MyWidgetProperties {
	onClick: (event: Event) => void;
	foo: string;
	bar: string;
}

@customElement<MyWidgetProperties>({
	tag: 'my-widget',
	attributes: [ 'foo', 'bar' ],
	events: [ 'onClick' ]
})
class MyWidget extends WidgetBase<MyWidgetProperties> {
// ...
}

Attributes

Properties

Events

{
    events: [ 'onChange' ]
}

textWidget.addEventListener('change', function (event) {
    // do something
});

Tag Name

Initialization

{
    initialization(properties) {
        const footer = this.getElementsByTagName('footer');
        if (footer) {
            properties.footer = footer;
        }

        const header = this.getElementsByTagName('header');
        if (header) {
            properties.header = header;
        }
    }
}

How Do I Contribute?

Code Style

npm run prettier

Setup Installation

Testing

Benchmarks

Licensing Information