{"id":19973769,"url":"https://github.com/dojo/interop","last_synced_at":"2025-10-28T00:03:00.858Z","repository":{"id":24070519,"uuid":"99810594","full_name":"dojo/interop","owner":"dojo","description":"Provides bindings and interoperability between Dojo packages and other libraries","archived":false,"fork":false,"pushed_at":"2022-12-02T02:46:48.000Z","size":889,"stargazers_count":1,"open_issues_count":8,"forks_count":14,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-06-16T13:11:27.758Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dojo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-09T13:19:25.000Z","updated_at":"2023-04-28T14:53:14.000Z","dependencies_parsed_at":"2023-01-14T00:21:35.560Z","dependency_job_id":null,"html_url":"https://github.com/dojo/interop","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/dojo/interop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dojo%2Finterop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dojo%2Finterop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dojo%2Finterop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dojo%2Finterop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dojo","download_url":"https://codeload.github.com/dojo/interop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dojo%2Finterop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264752858,"owners_count":23658733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T03:12:47.743Z","updated_at":"2025-10-28T00:02:55.783Z","avatar_url":"https://github.com/dojo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @dojo/interop\n\n\u003c!-- TODO: change and uncomment\n[![Build Status](https://travis-ci.org/dojo/interop.svg?branch=master)](https://travis-ci.org/dojo/interop)\n[![codecov](https://codecov.io/gh/dojo/interop/branch/master/graph/badge.svg)](https://codecov.io/gh/dojo/interop)\n[![npm version](https://badge.fury.io/js/dojo-\u003c\u003c package-name \u003e\u003e.svg)](http://badge.fury.io/js/%40dojo%2Finterop)\n--\u003e\n\nA package that provides various bindings to enable interoperability for external libraries and Dojo packages.\n\nNote: the term \"legacy Dojo\" refers to 1.x versions of the Dojo Toolkit.\n\n-----\n\n- [Installation](#installation)\n- [Features](#features)\n  - [DijitWrapper](#dijitwrapper)\n  - [ReduxInjector](#reduxinjector)\n  - [DgridWrapper](#dgridwrapper)\n- [How Do I Contribute?](#how-do-i-contribute)\n  - [Code Style](#code-style)\n- [Testing](#testing)\n- [Licensing Information](#licensing-information)\n\n## Installation\n\nTo use `@dojo/interop`, install the package using npm:\n\n```shell\nnpm install @dojo/interop\n```\n\n## Features\n\n### DijitWrapper\n\n`DijitWrapper` is a mixin class that can convert a legacy Dojo based Dijit and allows it to integrate with the Dojo widget system.\n\nThe wrapper takes a Dijit constructor function as its input and returns a Dojo widget.  For example, to take the `dijit/Calendar`\nand place it in a Dojo `App` widget would look something like this:\n\n```ts\nimport * as CalendarDijit from 'dijit/Calendar';\nimport DijitWrapper from '@dojo/interop/dijit/DijitWrapper';\nimport { v, w } from '@dojo/framework/widget-core/d';\nimport WidgetBase from '@dojo/framework/widget-core/WidgetBase';\n\nconst Calendar = DijitWrapper(CalendarDijit);\n\nclass App extends WidgetBase {\n  private _onCalendarChange(date: Date) {\n    console.log('Date selected:', date);\n  }\n\n  protected render() {\n    return v('div', { key: 'root' }, [\n      w(Calendar, {\n        key: 'calendar1',\n        id: 'calendar1',\n        onChange: this._onCalendarChange\n      })\n    ]);\n  }\n}\n\nexport default App;\n```\n\nThe 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.\n\nIt is also possible to use a Dijit container, like `dijit/layout/ContentPane`, but children of a wrapped Dijit widget can only be other\nwrapped Dijits.  You cannot place virtual DOM children (nodes from `v()`) or other non-Dijit widgets as children.\n\nThe `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`.\n\nFor most existing legacy Dojo Dijits, the TypeScript typings can be found at [dojo/typings](https://github.com/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.\n\n### ReduxInjector\n\n`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:\n\n* `store` - the actual Redux store passed as the first argument to the `ReduxInjector` constructor.\n* `extraOptions` - an additional options object that can be passed as an optional second argument to the `ReduxInjector` constructor.\n\nAn 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.\n\n```typescript\nimport global from '@dojo/framework/shim/global';\nimport ProjectorMixin from '@dojo/framework/widget-core/mixins/Projector';\nimport ReduxInjector from '@dojo/interop/redux/ReduxInjector';\nimport Registry from '@dojo/framework/widget-core/Registry';\n\nimport TodoAppContainer from './containers/TodoAppContainer';\nimport { createStore } from 'redux';\nimport { todoReducer } from './reducers';\n\nconst defaultState = {\n\ttodos: [],\n\tcurrentTodo: '',\n\tactiveCount: 0,\n\tcompletedCount: 0\n};\n\nconst registry = new Registry();\nconst store = createStore(todoReducer, defaultState);\nregistry.defineInjector('application-state', new ReduxInjector(store));\n\nconst Projector = ProjectorMixin(TodoAppContainer);\nconst projector = new Projector();\nprojector.setProperties({ registry });\nprojector.append();\n```\n\n### DgridWrapper\n\n`DgridWrapper` is a Dojo widget that wraps [dgrid](https://github.com/SitePen/dgrid) widgets. This allows you to use \ndgrid widgets, which rely on legacy Dojo, in a Dojo application.\n \nBecause of the depencies on legacy Dojo, there is some special setup and configuration needed in your application. Run \nthe following commands to add legacy Dojo dependencies to your project:\n\n```bash\nnpm install --save dojo\nnpm install --save dgrid\nnpm install --save dojo-dstore\nnpm install --save-dev @types/dojo\n```\n\nTo make the legacy Dojo modules availabe to your application, add the following \n`build-app` configuration to your `.dojorc` file:\n\n```json\n{\n   \"build-app\": {\n      \"externals\": {\n         \"dependencies\": [\n            { \"from\": \"node_modules/@dojo/interop/dgrid/loaderConfig.js\", \"inject\": true },\n            { \"from\": \"node_modules/dojo\", \"to\": \"dojo\", \"name\": \"dojo\", \"inject\": \"dojo.js\", \"type\": \"umd\" },\n            { \"from\": \"node_modules/dijit\", \"to\": \"dijit\", \"name\": \"dijit\", \"type\": \"umd\" },\n            { \"from\": \"node_modules/dgrid\", \"to\": \"dgrid\", \"name\": \"dgrid\", \"inject\": \"css/dgrid.css\", \"type\": \"umd\" },\n            { \"from\": \"node_modules/dojo-dstore\", \"to\": \"dstore\", \"name\": \"dstore\", \"type\": \"umd\" }\n         ]\n      }\n   }\n}\n```\n\nThe `loaderConfig.js` file contains configuration options for the legacy Dojo loader.  If you want change that \nconfiguration, make a copy of 'node_modules/@dojo/interop/dgrid/loaderConfig.js' and update your .dojorc to reference \nthe copy.\n\nYou are ready to use `DgridWrapper` in your application.  \n\n```typescript\nimport WidgetBase from '@dojo/framework/widget-core/WidgetBase';\nimport { w } from '@dojo/framework/widget-core/d';\nimport DgridWrapper from '@dojo/interop/dgrid/DgridWrapper';\n\nclass SampleGrid extends WidgetBase {\n\tprivate data = [\n\t\t{ first: 'Bob', last: 'Thomson', id: 1, hasChildren: true },\n\t\t{ first: 'Tom', last: 'Bobson', id: 2, hasChildren: true }\n\t];\n\t\n\tprivate columns = {\n\t\tfirst: 'First',\n\t\tlast: 'Last'\n\t};\n\t\n\tprotected render() {\n\t\treturn w(DgridWrapper, {\n\t\t\tfeatures: {\n\t\t\t\tkeyboard: true,\n\t\t\t\tselection: true,\n\t\t\t},\n\t\t\tdata: this.data,\n\t\t\tcolumns: this.columns,\n\t\t});\n\t}\n}\n```\n`DgridWrapper` accepts the items to be rendered as an array of objects set in the `data` property. Refer to \n[DgridWrapperProperties](src/dgrid/DgridWrapper.ts) to see the other properties that `DgridWrapper` \nsupports.  Use the `features` property to activate different dgrid mixins.  The properties in \n`DgridWrapperProperties` are passed to the dgrid widgets and mixins and the property names match the dgrid property \nnames.  Refer to the [dgrid documentation]\n(https://github.com/SitePen/dgrid/tree/master/doc) for information on each dgrid configuration property. \n\nThe `DgridWrapper` supports a subset of all dgrid features. Currently the features supported include:\n* [Pagination](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/Pagination.md)\n* [Keyboard](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/mixins/Keyboard.md)\n* [Selection](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/mixins/Selection.md)\n* [Selector](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/mixins/Selector.md)\n* [Tree](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/mixins/Tree.md)\n* [ColumnHider](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/ColumnHider.md)\n* [ColumnReorder](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/ColumnReorder.md)\n* [ColumnResizer](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/ColumnResizer.md)\n* [CompoundColumns](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/CompoundColumns.md)\n* [ColumnSets](https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/mixins/ColumnSet.md)\n\n## How do I contribute?\n\nWe appreciate your interest!  Please see the [Dojo Meta Repository](https://github.com/dojo/meta#readme) for the\nContributing Guidelines.\n\n### Code Style\n\nThis repository uses [`prettier`](https://prettier.io/) 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`.\n\nAn additional npm script to run `prettier` (with write set to `true`) against all `src` and `test` project files is available by running:\n\n```bash\nnpm run prettier\n```\n\n## Testing\n\nTest cases MUST be written using [Intern](https://theintern.github.io) using the Object test interface and Assert assertion interface.\n\n90% branch coverage MUST be provided for all code submitted to this repository, as reported by istanbul’s combined coverage results for all supported platforms.\n\nTo test locally in node run:\n\n`grunt test`\n\nTo test against browsers with a local selenium server run:\n\n`grunt test:local`\n\nTo test against BrowserStack or Sauce Labs run:\n\n`grunt test:browserstack`\n\nor\n\n`grunt test:saucelabs`\n\n## Licensing information\n\n© 2018 [JS Foundation](https://js.foundation/) \u0026 contributors. [New BSD](http://opensource.org/licenses/BSD-3-Clause) and [Apache 2.0](https://opensource.org/licenses/Apache-2.0) licenses.\n\n\u003c!-- doc-viewer-config\n{\n\t\"api\": \"docs/api.json\"\n}\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdojo%2Finterop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdojo%2Finterop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdojo%2Finterop/lists"}