Using Mobiscroll components with ES6 modules

Using Mobiscroll packages as ES6 Modules prior to version 5.0.2 were only possible with "Complete" licenses or "Framework" licenses with the source code addon. By having access to the source code of the components, one could take advantage of the Modules and import only the things he needed.

Starting from Mobiscroll v5.0.2 we provide an ESM bundle with all packages, so they can be used as ES6 Modules. This way many bundlers (ex. Rollup, Webpack, etc...) can take advantage of the tree-shaking technique and eliminate dead code. This reduces the bundle size to only what is actually used in the application.

Using components

The Mobiscrol ESM bundle has all the components the regular bundle has, but it omits a few setup steps in order to be tree-shakeable. These steps are described below:

Manual vs. Auto initialization

All of the Mobiscroll components can be initialized manually

import $ from 'jquery';

$('#my-element').mobiscroll().eventcalendar(); // initialize the eventcalendar on the element with id 'my-element'

<button id="my-element" mbsc-button onclick="myOnClickFunction();"></button>
<!-- the mbsc-button attribute is used to auto-initialize the button component -->

To integrate Mobiscroll with jQuery, the functions that initialize components need to be registered. This will tell jQuery what functions can be called on elements.

When using an ESM bundle, these registrations are omitted by default, so unwanted components can be eliminated from the final bundle of the project. Therefore components that we want to include in the project's bundle need to be registered. For example, if we wanted to use the eventcalendar calling $('selector').mobiscroll().eventcalendar(), we can do so only after registering the eventcalendar with the registerComponent function. This registration should be done only once.

import $ from 'jquery';
import { 
    registerComponent, // import the registerComponent function used to register the components
    Eventcalendar, // import component classes that needed to be regitered
    Datepicker,
    Button, 
    Checkbox,
} from '@mobiscroll/jquery';

// register components for jQuery
registerComponent(Eventcalendar);
registerComponent(Datepicker);
registerComponent(Button);
registerComponent(Checkbox);

After registration, you can use the initialization functions using jQuery selectors:

$('#my-div').mobiscroll().eventcalendar();
$('#my-input').mobiscroll().datepicker();

You can also use attributes for form components to automatically enhance the elements:

<input mbsc-input type="text" />
<button mbsc-button>My Button</button>

Webpack

When using webpack to bundle your project's javascript, you can make use of the Mobiscroll CLI to install the Mobiscroll Package and then import in your files only what you need.

Here's the simplest example to start with:

/
|--dist/
    |--bundle.js
    |--index.html
|--node_modules/
|--src/
    |--index.js
|--package.json
|--webpack.config.js

If you are doing this from scratch, you will need to install webpack and the webpack cli, as well as the css and style loader plugin. The later two is needed for the css imports to work.

$ npm install webpack webpack-cli style-loader css-loader --save-dev

Obviously, if you don't have jquery installed yet, then you'll need to install it as well.

$ npm install jquery --save

After webpack and jquery is ready, we'll create a configuration file webpack.config.js in the root directory. This is standard configuration for webpack, to project the javascript to bundle.js and use the style and css loaders to import styles and icon packs (fonts) too. It will have the following content:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

The index html file will load only the bundle.js and will contain the markup for label and input elements:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <label>
      Datepicker
      <input id="myInput" mbsc-input type="text" />
    </label>
    <script src="bundle.js"></script>
  </body>
</html>

Next step is to install the Mobiscroll package via the CLI. Depending on what kind of license you have, you can have a package from the download page or you can have access to the NPM repository. Either way, you will have to use the mobiscroll config jquery command only with different options. If you have a package from the download page, please follow the guide there on how to install the package. If you have access to the npm package or you're on trial the following command will install it:

$ mobiscroll config jquery

The above command will install the mobiscroll package inside node_modules under @mobiscroll/jquery. All the components can be imported from there as follows:

import $ from 'jquery';
import { Datepicker, registerComponent, Input } from '@mobiscroll/jquery';
import '@mobiscroll/jquery/dist/css/mobiscroll.jquery.min.css';

$(function() {
    registerComponent(Datepicker);
    registerComponent(Input);

    $('#myInput').mobiscroll().datepicker({
        theme: 'ios'
    });
});

To build the bundle you can run the webpack binary by:

$ npx webpack

After that, opening the index.html file should show up with the datepicker working and the input enhanced by the mbsc-input attribute.