A package that provides various bindings to enable interoperability for external libraries and Dojo packages.
Note: the term "legacy Dojo" refers to 1.x versions of the Dojo Toolkit.
- How Do I Contribute?
- Licensing Information
@dojo/interop, install the package using npm:
npm install @dojo/interop
DijitWrapper is a mixin class that can convert a legacy Dojo based Dijit and allows it to integrate with the Dojo widget system.
The wrapper takes a Dijit constructor function as its input and returns a Dojo widget. For example, to take the
and place it in a Dojo
App widget would look something like this:
The result, when displayed through a projector, is a Dijit Calendar which will log the new date to the console every time the date is changed.
It is also possible to use a Dijit container, like
dijit/layout/ContentPane, but children of a wrapped Dijit widget can only be other
wrapped Dijits. You cannot place virtual DOM children (nodes from
v()) or other non-Dijit widgets as children.
DijitWrapper takes an optional second argument,
tagName, which should be used when the widget system needs to create a DOM node to root a widget. By default it uses
For most existing legacy Dojo Dijits, the TypeScript typings can be found at dojo/typings and can be installed via npm via
npm install dojo-typings. User-created Dijits may be used with the
DijitWrapper provide they adhere to the minimum interface described in the
/dijit/interfaces.d.ts that is part of this package.
ReduxInjector can be used to bind a redux store and Dojo widgets using the
registry. The value returned by
getProperties is an object containing two properties:
store- the actual Redux store passed as the first argument to the
extraOptions- an additional options object that can be passed as an optional second argument to the
An injector can be defined in the registry, which is then provided to the
Projector as one of its properties. This is demonstrated in the example below.
;;;;;;;;;;registry.defineInjector'application-state', new ReduxInjectorstore;;;projector.setProperties;projector.append;
DgridWrapper is a Dojo widget that wraps dgrid widgets. This allows you to use
dgrid widgets, which rely on legacy Dojo, in a Dojo application.
Because of the depencies on legacy Dojo, there is some special setup and configuration needed in your application. Run the following commands to add legacy Dojo dependencies to your project:
npm install --save dojonpm install --save dgridnpm install --save dojo-dstorenpm install --save-dev @types/dojo
To make the legacy Dojo modules availabe to your application, add the following
build-app configuration to your
loaderConfig.js file contains configuration options for the legacy Dojo loader. If you want change that
configuration, make a copy of 'node_modules/@dojo/interop/dgrid/loaderConfig.js' and update your .dojorc to reference
You are ready to use
DgridWrapper in your application.
DgridWrapper accepts the items to be rendered as an array of objects set in the
data property. Refer to
DgridWrapperProperties to see the other properties that
supports. Use the
features property to activate different dgrid mixins. The properties in
DgridWrapperProperties are passed to the dgrid widgets and mixins and the property names match the dgrid property
names. Refer to the dgrid documentation for information on each dgrid configuration property.
DgridWrapper supports a subset of all dgrid features. Currently the features supported include:
How do I contribute?
We appreciate your interest! Please see the Dojo Meta Repository for the Contributing Guidelines.
This repository uses
prettier for code styling rules and formatting. A pre-commit hook is installed automatically and configured to run
prettier against all staged files as per the configuration in the project's
An additional npm script to run
prettier (with write set to
true) against all
test project files is available by running:
npm run prettier
Test cases MUST be written using Intern using the Object test interface and Assert assertion interface.
90% branch coverage MUST be provided for all code submitted to this repository, as reported by istanbul’s combined coverage results for all supported platforms.
To test locally in node run:
To test against browsers with a local selenium server run:
To test against BrowserStack or Sauce Labs run: