Include es6 module format for dat/gui/GUI in build/

All modern browsers now include native es6 modules (except for chrome which will land shortly we hope).

Your repo already supports es6 imports, but uses module.exports = GUI rather than export default GUI.

Could you include an es6 module?

[backspaces]

TL;DR: I’ve got two versions of dat.gui as modules, one making 4 modifications to the source such that rollup can build a module, the other using a “wrapper”. May be of use to you or your users.

Details: Sorry for being chatty! I definitely do not want to dominate the discussion! But I’ve now got dat.gui running as a module for my repo using one of two methods:

1 - convert to module: several dependencies are already in module form but don’t expose it. dat.gui, for example was easily converted to a module via a bash script of 4 modifications of the dat.gui source, with rollup. 2 - wrapper: for dat.gui and other repos, I have a “wraplib” node script that takes in the legacy form (foo.min.js for example) and wraps it in a module having a function that executes it wrapped with its own window, module, ‘this’, and return value … and finds the resulting foo code, exporting it as export default foo

I’ve tested both of these with several dependencies I have. I prefer method 1, generally, because when the project converts to modules, my project can easily use it. Method 2 has the advantage that it “just works” for all the libraries I’ve tried. dat.gui works fine using either with my small set of tests. I’ll soon push this into all my demos, so should show any problems.

Details of the two stunts. Feel free to ask about details. … The dat.gui module bash script looks like

#!/usr/bin/env sh
cd dat.gui/src/dat
# convert raw html/css to export default of template string.
sed '
  1s/^/export default `/
  $s/$/`/
' < gui/saveDialogue.html > gui/saveDialogue.js
sed '
  1s/^/export default `/
  $s/$/`/
' < ../../build/dat.gui.css > gui/style.css.js

# Convert module.exports to js export default
cp utils/css.js utils/css0.js
sed '
  s/module.exports =/export default/
' < utils/css0.js > utils/css.js

# update GUI.js to new names
cp gui/GUI.js gui/GUI0.js
sed '
  /import saveDialogueContents/s/.html//
  /import styleSheet/s/scss/css.js/
' < gui/GUI0.js > gui/GUI.js

rollup -f es index.js > ../../../libs/dat.gui.module.js

… The dat.gui wrapper created by the node wraplib.js looks like:

// Programmatically created by wraplib.js
const exports = {}
const module = {}
const window = {}
const self = {}
let returnVal

function wrap () {

returnVal =
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof
.. and a lot more ..

}
wrap.call(self)
const result = self.dat || window.dat || module.exports || returnVal
if (!result) throw Error("wrapper failed, file: libs/dat.gui.min.js name: dat")
export default result

[backspaces]

In my experience, the best migration to modules, and still support legacy, is:

• Convert the project to es6 modules
• Use Rollup to create a bundle of several formats: iife, cjs, amd, umd, and so on.

This results in a simple modules based core, and conversion to any existing module type.