Refactoring Autocomplete JS & CSS

I have a question regarding JS/jQuery plugins written correctly (like bootstrap) and "badly" (like autocomplete.js): I checked out the bootstrap source code and found out (as I understood) that bootstrap uses a <strong>getjQuery()</strong> util function to get jQuery and attach plugin functionality to it:

// In file .../alert.js
import {
  getjQuery, // <--- Imports getjQuery
  TRANSITION_END,
  emulateTransitionEnd,
  getElementFromSelector,
  getTransitionDurationFromElement
} from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import SelectorEngine from './dom/selector-engine'

// ... And uses it to define the plugin:

const $ = getjQuery()

/**
 * ------------------------------------------------------------------------
 * jQuery
 * ------------------------------------------------------------------------
 * add .alert to jQuery only if jQuery is present
 */

/* istanbul ignore if */
if ($) {
  const JQUERY_NO_CONFLICT = $.fn[NAME]
  $.fn[NAME] = Alert.jQueryInterface
  $.fn[NAME].Constructor = Alert
  $.fn[NAME].noConflict = () => {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return Alert.jQueryInterface
  }
}

// ... 

// ----------------------------------------

// In file .../util/index.js
const getjQuery = () => {
  const { jQuery } = window

  if (jQuery && !document.body.hasAttribute('data-no-jquery')) {
    return jQuery
  }

  return null
}

But here you clearly see that <strong>getjQuery</strong> only checks for jQuery to be available on window...
How does then the final transpiled/built bootstrap (the one we import in our code using <strong>import 'bootstrap'</strong>, i.e. "dist/js/bootstrap.js")
know that it has to attach the jQuery plugin to the "local" jQuery peer dependency we installed with <strong>yarn add jquery --dev</strong> if the bootstrap's source only uses jQuery through the getjQuery() util function and therefore through window? Hope I correctly formulated my question.

I mean, I have written a jQuery plugin called jquery-multiselect-checkbox (you can check it out here: https://github.com/tonix-tuft/jquery-multiselect-checkbox/), and there in my index.js source file I explicitly do <strong>import $ from 'jquery'</strong> (which I marked as a peer dep in package.json) and I also check for window.jQuery and attach my plugin to both if available (if the imported $ is different from window.$, i.e. <strong>$ !== window.jQuery</strong>). But maybe this is not the way to do it when authoring libraries. I don't know...

Hey Anton Bagdatyev

That's a good question :)
I would recommend you to check how other Jquery plugins do it. What I've seen is that they check for a couple of things, like for example this

if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = factory(require('jquery'));
}

That's checking if the code is being executed in a Node.js environment. I hope this helps a bit

Cheers!

Thank you for you reply, Diego!

Yes, what you say is correct, but your example is the final dist/bundle code generated by Webpack.

Whereas, I was thinking about the way plugin authors import jQuery in their sources before they modify <strong>$</strong> so that it works in all environments (UMD, i.e. CommonJS, AMD as well as global/window object)...

I think you agree with me that library authors won't write code like this anymore nowadays:

<br />(function (global, factory) {<br /> typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('popper.js')) :<br /> typeof define === 'function' && define.amd ? define(['exports', 'jquery', 'popper.js'], factory) :<br /> (global = global || self, factory(global.bootstrap = {}, global.jQuery, global.Popper));<br />}(this, (function (exports, $, Popper) { 'use strict';<br />...<br />

That's the result of Webpack/Rollup's transpiling process.

I just checked the source code of Bootstrap again and I found out that I was looking at the wrong version. I was looking at the master branch, whereas this Webpack Encore project uses version 4.4.1.

Indeed, if you look at the sources of that tag, you will see code like this (e.g. https://github.com/twbs/bootstrap/blob/v4.4.1/js/src/alert.js):

`
...
import $ from 'jquery'

...

$.fn[NAME] = Alert._jQueryInterface
$.fn[NAME].Constructor = Alert
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Alert._jQueryInterface
}

export default Alert
`

They import jQuery and just use it, so I guess that's enough when using peer dependencies as Webpack (in their case Rollup) takes care of the rest (but have to play a bit with my jQuery plugin in order to be sure).

Otherwise I don't know which kind of black magic they are using yet.

Thanks!

> so I guess that's enough when using peer dependencies as Webpack

As far as I know, yes, Webpack takes care of the rest. You just have to import the dependencies you want to work with and that would be it