MWF has its own JavaScript library. This library is built using TypeScript and provides the following advantages:

• Better support of SPA by observing DOM changes.
• Added support for AMD, Common, and Global namespaces, as well as UMD.
• Uses factory pattern to enable component initialization at any time.
• Allows auto-initialization if you want to initialize components automatically.

Given the flexibility of JavaScript (or TypeScript) and the availability of almost limitless implementation methodologies, we've focused on a few common design features as requested by our partners.

Library versions

Use the static manifest file to determine the correct library version and use its file name as appropriate for your application. Read this article for more about using manifests. Two library varients are offered for each version: a Standard version where application code must initialize each component or module, and an Auto-initialized version where components or modules are initialized at creation. Currently available libraries are listed here.

Example use cases

MWF libraries use a Factory pattern to create and initialize new component or module objects. Here is an example on how to create a new component:

The newly created FactoryInput object has the following properties:

Example 1

Creating two components with default selectors.

    ComponentFactory.create([
        {'component': Carousel},
        {'component': Slider}
    ]);
    

Example 2

Creating two components with unique selectors.

    ComponentFactory.create([
         {'component': Carousel,
         selector: '#myCarousel'},
         {'component': Slider,
         selector: '#mySlider'}
    ]);
    
    

Example 3

Creating a component with a unique selector and a callback function.

    function setSliderMax(slider) {
         slider.setValue(120);
    }
    ComponentFactory.create([
         {'component': Slider,
         selector: '#myslider',
         callback: setSliderMax}
    ]);
    

Example 4

Binding the creation of a component to a specific event.

By default, components are initialized after onLoad for performance reason. But you can also initialize them at DOMContentLoaded as shown here.

    ComponentFactory.create([
         {'component': Slider,
         selector: '#myslider',
         eventToBind: DOMContentLoaded}
    ]);
    

Example 5

Creating a component for an existing element.

    ComponentFactory.create([{
        'component': Slider,
        eventToBind: 'DOMContentLoaded',
        elements: [this.myslider],
        callback: setSliderMax}
    ]);
    @returns {void}
    

Dependencies

There are two additional library dependencies bundled into the MWF distribution. There are:

It is highly recommended that you use the bundled MWF distribution "as is" because it is fully tested and verified to work with these libraries. Adding these libraries seperately cannot guarantee full MWF functionality. However, if this is a problem for your project, you can contact the MWF team to arrange for access to a distribution that excludes these dependency libraries. Including those libraries in your project will then be your responsibility as well as resolving any functionality issues. This can be a major undertaking and that is why we discourage that option.

Libraries

How you use a ComponentFactory is different based upon which library package you use. The following examples demonstrate how partners would use different libraries:

Example 1: As a global variable

Add this script as a block in the page head.

    <script src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.var.min.js"></script>
    

After the script has successfully loaded the mwf library, you can bind a slider component to your markup by using the following:

    mwf.ComponentFactory.Create([
        {'component': mwf.Slider}
    ]);
    

Example 2: AMD with async

You can add the library package as async in the HTML page head and then you can load using a require function.

    <script async="async"  src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.amd.min.js" crossorigin="anonymous"></script><noscript></noscript>
    

And then, to create and initialize the component:

    require(['mwf'], function(mwf){
        mwf.ComponentFactory.Create([
            {'component': mwf.Slider}
        ]);
    });
    

Example 3: CommonJS

You can add the library package to the HTML page head and then you can create a new component using a global require variable.

    <script async="async"  src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.commonjs2.min.js" crossorigin="anonymous"></script><noscript></noscript>
    

And then, to create and initialize the component:

    var mwf = require('mwf');
    mwf.ComponentFactory.Create([
        {'component': mwf.Slider}
    ]);