Monolithic Browser Build

[curran]

It would be great to have a monolithic browser build of VX. If that existed, VX examples could run in browser-based coding/publishing environments like CodePen, Blockbuilder, and bl.ocks.org.

Currently, each package has its own browser build that appends properties to the vx global. While this partially solves the puzzle, one needs to include many <script> tags to get it to work, and they need to be in topological order of the dependencies between them (if there are any). Also, these builds do not bundle smaller dependencies like classnames.

Ideally, users could pull in all the VX packages with a single <script> tag.

One subtle thing is that the browser build should ideally bundle the smaller dependencies like classnames and prop-types, while excluding the larger ones like react and d3 (and instead pull them in from browser globals).

As @pedroapfilho mentioned in a separate discussion:

it’s a lerna project, to create this monolith the only thing you should do is to create another package and put everything together in one build.

This seems like a good approach to me! The monolith index could look something like that of D3: https://github.com/d3/d3/blob/master/index.js

Related to Code Sandbox(or something similar) for all examples in gallery. #432

[hshoff]

@vx/vx exists for these purposes. Is it not working for your use case? It was added a couple of years ago: #131

[curran]

Ah amazing! Somehow I missed that. Thanks for pointing it out. It looks like a great starting point, but doesn't actually solve the issue I'd like to solve, namely the ability to load it in a <script> tag and have the global vz be populated with all the packages.

Having a look at that "UMD" build, I see it's not actually UMD https://unpkg.com/@vx/vx@0.0.191/dist/vx-vx.umd.js

That build appears to support AMD and CommonJS, but does not populate a browser global with the "meat" of the packages.

It would be amazing if that build were tweaked such that:

• A global were populated with the content of all packages, and
• Small dependencies were included in the bundle (e.g. classnames)
• Large dependencies were excluded from the bundle (e.g. React, D3)

I'm not sure where the build settings are defined in this project, but these are the desired outcomes.

I would know how to set this up with Rollup. Need to investigate further, where the UMD build is configured. At first glance it seems that maybe the build is using Babel defaults? Not sure.

I'd guess one of these is creating vx-vx.umd.js (from root level package.json):

    "babel:cjs": "nimbus babel --clean --workspaces=\"@vx/!(demo)\"",
    "babel:esm": "nimbus babel --clean --workspaces=\"@vx/!(demo)\" --esm",