UI library gadget-ui updated with ES6 module support

I just published gadget-ui v. 6.0.0. There are no significant changes or additions to the library itself, but I have added ES6 modules exports to support importing the library, in whole or in part, using the ES6 import command. You can get gadget-ui from bower:

$ bower install gadget-ui

or from npm:

$ npm install gadget-ui

or by cloning the GitHub repo:

$ git clone https://github.com/robertdmunn/gadget-ui.git

 

For an example of how to implement imports for an application, check the test code in /test/fileuploader.htm in the library.

Here is the fileuploader example updated to use ES6 modules:

<!doctype html>
<html>

<head>
	<title>gadget-ui File Uploader Test</title>
	<!-- ES5 style loading -->
	<!-- 	<script src='../bower_components/modlazy/dist/modlazy.min.js'></script>
	<script>
		modlazy.load(
			[
				"fileuploader.js < ../dist/gadget-ui.js",
				"../dist/gadget-ui.css"
			],
			function() {
				console.log("All files have been loaded");
			}
		);
	</script> -->
	<link rel="stylesheet" href="/dist/gadget-ui.css"/>
	<script type="module">
	import {fileuploader,constructor} from '/dist/gadget-ui.es6.js';

	var options = {
	  uploadURI: "/test/fileuploader.upload.cfm",
	  tags: "file upload",
	  willGenerateThumbnails: true,
	  title: "Upload Files",
	  showUploadButton: false
	};

	var filedialog = constructor( fileuploader, [ document.querySelector("#fileUploadDiv"), options ]);

	</script>

	<style>
		body {
			font-size: 1em;
		}

		input,
		select,
		select option {
			font-size: 1em;
		}

		#fileUploadDiv {
			height: 500px;
			width: 500px;
			text-align: center;
			margin-top: auto;
			margin-bottom: auto;
		}
	</style>

</head>

<body>
	<p>Test the FileUploader control.</p>

	<div id="fileUploadDiv"></div>
</body>

</html>

You can see the original ES5-compatible code commented out in this listing. Below that, you can see the new, ES6 code. Note that the <script> tag must be marked type="module" and that the import statement must be at the top of the module block. Next, let's look at the import statement itself:

import {fileuploader,constructor} from '/dist/gadget-ui.es6.js';

This statement is loading the fileuploader and constructor exports from the library. By loading only these exports, you can create a reference to only what you need in the code. That changes how the FileUploader control is instantiated as well:

var filedialog = constructor( fileuploader, [ document.querySelector("#fileUploadDiv"), options ]);

Note that instead of using the top level reference gadgetui, we are using the imported references. Still, for purposes of backward compatibility, or simply for convenience, you may wish to import the entire library:

import {gadgetui} from '/dist/gadget-ui.es6.js';

By importing the top level reference, you can keep references to components as they were used previously, so this code will still work:

var filedialog = gadgetui.objects.Constructor( gadgetui.input.FileUploader, [ document.querySelector("#fileUploadDiv"), options ]);

 

ES6 support is contained in a separate /dist bundle from the ES5 code, note that the import statement calls 'gadget-ui.es6.js'.