Over the past few weeks, we’ve been working on several large improvements to widget authoring and theming with Dojo 2.
This gives us several primary benefits for how themes are applied to widgets within Dojo 2:
- Local scoping by default and obfuscated class names prevent class name collisions across widgets and from top level CSS rules
- Full autocomplete/Intellisense for widget authoring, which extends to how CSS class names are specified. Only the locally scoped widget class names are available, which is very powerful
- Users can import fully supported Dojo 2 theme variables into their custom widgets
- CSS authoring is fully built into the Dojo 2 cli
Overall we believe this will provide a complete end-to-end authoring experience that makes theming much easier for TypeScript developers.
This work has either landed in master or is currently under review as PRs.
Simplifying widget state and property handling
Via our widget API, we promote the reactive principles of “properties in, events out”. By default, Dojo 2 widgets are stateless. Widgets are passed properties and implement a render function. Through refactoring to reduce and simplify the surface area of widgets, we have removed state from the widget API. This simplifies the authoring experience of widgets, leaving us with a very simple public API for widgets: `render` and `diffProperties`. Both functions have sensible default implementations.
We also provide capabilities for more advanced widget authoring, such as diff-ing single properties if needed, and adding behavioral traits via functional composition.
Usage of Dojo 2 widgets is documented in the widget-core readme.
Beyond our usage of Custom Elements for all Dojo 2 widgets, we have been working on support for making any Dojo 2 widget easy to export as a web component to use within other environments that support web components. While a web component will not have all of the benefits of using a widget inside a Dojo 2 environment, this will make it much easier to include a Dojo 2 widget within a non-Dojo application. For example, say you want to make dgrid available for use in non-Dojo applications? This will now be much easier to do with Dojo 2 widgets.
Initial support for web component utilities landed recently in widget-core. Support for exporting a single widget as a web component, and installing via npm, is currently under development.
Dojo 2 roadmap
As January draws to a close, we’re continuing updates on the Dojo 2 roadmap.