Name: interop
Owner: Dojo
Description: Provides bindings and interoperability between Dojo 2 packages and other libraries
Created: 2017-08-09 13:19:25.0
Updated: 2018-05-02 14:06:30.0
Pushed: 2018-05-02 14:06:28.0
Homepage: null
Size: 365
Language: TypeScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A package that provides various bindings to enable interoperability for external libraries and Dojo 2 packages.
To use @dojo/interop, install the package using npm:
install @dojo/interop
DijitWrapper is a mixin class that can convert a Dojo 1 based Dijit and allows it to integrate with the Dojo 2 widget system.
The wrapper takes a Dijit constructor function as its input and returns a Dojo 2 widget. For example, to take the dijit/Calendar
and place it in a Dojo 2 App widget would look something like this:
rt * as CalendarDijit from 'dijit/Calendar';
rt DijitWrapper from '@dojo/interop/dijit/DijitWrapper';
rt { v, w } from '@dojo/widget-core/d';
rt WidgetBase from '@dojo/widget-core/WidgetBase';
t Calendar = DijitWrapper(CalendarDijit);
s App extends WidgetBase {
ivate _onCalendarChange(date: Date) {
console.log('Date selected:', date);
otected render() {
return v('div', { key: 'root' }, [
w(Calendar, {
key: 'calendar1',
id: 'calendar1',
onChange: this._onCalendarChange
})
]);
rt default App;
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.
The 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 div.
For most existing Dojo 1 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 2 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 ReduxInjector constructor.extraOptions - an additional options object that can be passed as an optional second argument to the ReduxInjector constructor.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.
rt global from '@dojo/shim/global';
rt ProjectorMixin from '@dojo/widget-core/mixins/Projector';
rt ReduxInjector from '@dojo/interop/redux/ReduxInjector';
rt Registry from '@dojo/widget-core/Registry';
rt TodoAppContainer from './containers/TodoAppContainer';
rt { createStore } from 'redux';
rt { todoReducer } from './reducers';
t defaultState = {
todos: [],
currentTodo: '',
activeCount: 0,
completedCount: 0
t registry = new Registry();
t store = createStore(todoReducer, defaultState);
stry.defineInjector('application-state', new ReduxInjector(store));
t Projector = ProjectorMixin(TodoAppContainer);
t projector = new Projector();
ector.setProperties({ registry });
ector.append();
We appreciate your interest! Please see the Dojo 2 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 package.json.
An additional npm script to run prettier (with write set to true) against all src and test project files is available by running:
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:
grunt test
To test against browsers with a local selenium server run:
grunt test:local
To test against BrowserStack or Sauce Labs run:
grunt test:browserstack
or
grunt test:saucelabs
© 2018 JS Foundation & contributors. New BSD and Apache 2.0 licenses.