ES6/UMD module

[madwizard-thomas]

Would you consider writing the module as an ES6 module (with export statements) and transform it into an UMD module (for example with rollup) to allow it to be used in all common environments?

[apowers313]

Great idea and I'm totally supportive of it, but I need some education on which tools to use and how to set them up (e.g. - webpack vs. rollup vs. browserify vs. parcel vs. babel).

Shooting from the hip, I'd probably pick webpack on the browser side since it seems to have browser support; or pick babel on the node.js side (which would go away when import becomes more stable in node.js).

Thoughts?

[madwizard-thomas]

I'm not an expert either, but from what I've seen browser wise webpack and browserify are mostly used in the final end project to collect or bundle all the libraries and convert it to whatever. Rollup is commonly used to build libraries, but webpack can be used to build libraries as well (it has a section in the manual). Babel is usually used as a plugin for these tools to transpile code.

For the ES6 module you can remove the anonymous function around your code, then at the end add:

 export let WebAuthnHelpers = {
       ...
    };

    export {
        Msg,
        ServerResponse,
        ...
    }

Or just prefix the classes itself with export. Add a module : "filename.js" to your package.json and it will work automatically with users using webpack and rollup using ES6 syntax (import {ServerResponse} from 'webauthn-simple-app';). Note that while the import/export syntax is ES6, usually the rest of the code should target your target browsers so if you use modern features like async (or even class is not supported by IE11 I think) you should probably transpile them using babel (would require to build the ES6 source file as well, otherwise you can just use your source as is).

For the UMD module rollup works pretty easy. Having the ES6 source code, run: rollup webauthn-simple-app.js --format umd --name WebAuthnSimpleApp --file webauthn-simple-app-umd.js The output is a module compatible with CommonJS, AMD or browser globals (when included in a plain script tag the library will be available via window.WebAuthnSimpleApp). CommonJS should work with nodeJS as well I assume.

Also for typescript users a type declaration file would be nice (index.d.ts).

[apowers313]

Ok, your post above and doing a bit more reading on rollup convinced me.

Any suggestions for how to do distribution? e.g. - create a build directory, store the build results in GitHub, and distribute them through RawGit?

Let me know if you'd enjoy doing a PR for this. :) If not, it will probably be a couple weeks before I get to it since I'm currently playing around with Dockerizing the server.

[madwizard-thomas]

I'll see if I can create a PR. One thing that would change is that when used with a plain script tag in the browser the individual exports will be put inside a single object (e.g window.WebAuthSimpleApp.Msg rather than window.Msg). Though that probably is a good thing.

I think rawgit would work fine with when the dist files are committed. It would require the build results to be committed (npm would not need that). Unpkg is also an option though I think it only supports UMD modules.