fbpx

ES6 Modules in Widget Creator

Modules are the mechanism available to us in Javascript in order to split the code logic into separate files. This becomes increasingly important when your codebase increases.



Possible use cases for ES6 modules:  #

 

  • Widget with a lot of JS code: 

 

Instead of including all of your Javascript inside the JS Tab of the widget creator, you can split your code into logical pieces within one or more separate files in your Widget Asset Folder and then consume those modules from the JS Tab. This will help you unclutter the JS Tab and results in a codebase that is more easily maintainable and extendible.

 

  • Code Reuse

If you have some utility functions or custom code that you regularly copy/paste into the 

JS Tab on your widgets. It makes sense to turn that common logic into modules. If you

need to make a change to that code in the future, you only have to change the module

and upload the new version to the widgets that use it. The alternative would be to 

search every widget that uses it, locate the relevant code in the JS Tab and then replace

it.

 

  • Third-party requirement

 

Some libraries, open-source or otherwise, only come in the form of ES6 modules.

 

One free benefit of using modules is you reduce the amount of JS that is loaded when you have more than one instance of the same custom widget on the same page since all widgets use the same module(s). And if you are using the same widget on different pages, on the subsequent pages, the module(s) will be loaded from the browser cache instead of downloading it again from the server.

How to Include ES6 Modules: #

Modules can be imported Statically or Dynamically depending on the requirement of the code you are working with. 

Static Imports:

  • Using JS/CSS Includes Tab 
 

Using the JS/CSS Include tab, you can access the option to include the js file as a

module via the include settings. 

  • Using the JS Tab 

 

You can include modules in the JS tab using the import statement at the beginning of the     

Editor.

Code sample for copy/paste conveniene: Click To Download

Dynamic Imports:
  • Using the JS Tab

      You can import modules dynamically using the Import() function.

There are 2 ways to do so. With “load as module” checked, or without.

The static way requires the ‘load as module’ at the bottom to be checked.

The dynamic way doesn’t

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!