Giter Club home page Giter Club logo

interop's Introduction

@dojo/interop

Package that provides various bindings to enable interoperability for external libraries and Dojo 2 packages.

Features

DijitWrapper

DijitWrapper is a mixin class that can convert a Dojo 1 based Dijit and allow it to integrate to the Dojo 2 widgeting 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 a Dojo 2 App widget would look something like this:

import * as CalendarDijit from 'dijit/Calendar';
import DijitWrapper from '@dojo/interop/dijit/DijitWrapper';
import { v, w } from '@dojo/widget-core/d';
import WidgetBase from '@dojo/widget-core/WidgetBase';

const Calendar = DijitWrapper(CalendarDijit);

class App extends WidgetBase {
  private _onCalendarChange = (date: Date) => {
    console.log('Date selected:', date);
  }

  render() {
    return v('div', { key: 'root' }, [
      w(Calendar, {
        key: 'calendar1',
        id: 'calendar1',
        onChange: this._onCalendarChange
      })
    ]);
  }
}

export 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 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 widgeting 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

Coming Soon

How do I use this package?

To use @dojo/interop, install the package using npm:

npm install @dojo/interop

How do I contribute?

We appreciate your interest! Please see the Dojo 2 Meta Repository for the Contributing Guidelines and Style Guide.

Testing

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

Licensing information

TODO: If third-party code was used to write this library, make a list of project names and licenses here

© JS Foundation & contributors. New BSD and Apache 2.0 licenses.

interop's People

Contributors

agubler avatar kitsonk avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.