Function to convert/wrap Dijit constructors

[kitsonk]

@kitsonk commented on Thu Sep 08 2016

We currently have createDijit which allows the use of Dojo 1 Dijits (and other DOM based constructor functions) to integrate into the Dojo 2 virtual DOM. This currently requires configuration on creation of the createDijit factory. This might make it more difficult to really integrate and reuse Dijits in a Dojo 2 world.

We should create a function that converts/wraps the Dijit constructor function into a Dojo 2 factory as well as "binds" to the Dijit constructor for easier reuse in an application. For example, you would expect a developer to be able to "convert" a Dijit like this:

// createDijitButton.ts
import * as Button from 'dijit/form/Button';
import convertToWidgetFactory from 'dojo-widgets/util/convertToWidgetFactory';

const createDijitButton = convertToWidgetFactory(Button);
export default createDijitButton;

// myApp.ts
import projector from 'dojo-widgets/Projector';
import createDijitButton from './createDijitButton';

projector.append(createDijitButton({ }));

---

@kitsonk commented on Fri Apr 28 2017

We have evolved the widget-core. We still need something to make it easy to wrap Dijit. Using some sort of class factory might make the most sense. Something like this:

src/widgets/DijitButton.ts:

import * as Button from 'dijit/form/Button';
import createDijitClass from '@dojo/widget-core/util/createDijitClass';

const DijitButton = createDijitClass(Button);
export default DijitButton;

src/App.ts:

import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { WidgetProperties } from '@dojo/widget-core/interfaces';
import { v, w } from '@dojo/widget-core/d';
import DijitButton from './widgets/DijitButton';

export default class App extends WidgetBase<WidgetProperties> {
    render() {
        return v('div', [
            w(DijitButton, {
                /* meaningful to widget-core */
                key: 'button1',

                /* passed through to dijit/form/Button */
                label: "Click me!",
                onClick: function(){
                        // Do something:
                        dom.byId("result1").innerHTML += "Thank you! ";
                }
            });
        ]);
    }
}

We will have to mediate changes to the properties with the dijit, setting and unsetting properties after creation. We should have enough typing information in dojo/types though to be able to generate a pretty good "wrapped" conversion. I don't think that the two main widget properties key and bind will conflict with most of Dijit as far as I am aware. The behaviour of bind though may need to be considered.

---

@kitsonk commented on Mon Sep 11 2017

As part of dojo/dojo.io#153 I am going to attempt to provide a solution for this.