Creating jQuery widgets components

Creating simple jQuery widgets components is pretty straightforward from a Magento point of view. The actual knowledge of building robust jQuery widgets depends on our knowledge of jQuery itself.

Let's assume our widget will be called welcome, and its purpose is to simply output Welcome %name% to the element, provided we passed on the name option during widget initialization.

We start by adding the mapping under our <MODULE_DIR>/view/frontend/requirejs-config.js file, as follows:

var config = {
  map: {
    '*': {
      welcome: 'Magelicious_Jsco/js/welcome'
    }
  }
};

We then define the widget itself, as part of the <MODULE_DIR>/view/frontend/web/js/welcome.js file, as follows:

define([
  'jquery',
  'mage/translate'
], function ($, $t) {
  'use strict';
  $.widget('magelicious.welcome...