Remove Browserify-Shim transform from package.json in all Chiasm subprojects

[curran]

There is a problem now with bundling Chiasm applications using Browserify. When a project requires Chiasm as a dependency, and uses Browserify to bundle the application, the fact that browserify-shim is listed in the transforms in the package.json of Chiasm and each component causes Browserify to try running those transforms in the outer project that requires Chiasm as a dependency. I didn't realize this would happen, I added the browserify-shim transform with the idea that it would only apply locally, and not when the package is a dependency. For example, model.js should not be shimmed in the parent project (which may want model.js included in the bundle), but should be shimmed in the Browser build of Chiasm (which is for use in bl.ocks.org examples and should not have model.js in the bundle).

To remedy this situation, the package.json of all Chiasm subprojects needs to be changed such that there are no browserify transforms listed. For example, consider the following package.json:

{
  "name": "chiasm",
...
  "scripts": {
    "pretest": "browserify -o chiasm.js -s Chiasm src/index.js",
    "test": "mocha"
  },
...
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "lodash": "global:_",
    "model-js": "global:Model"
  }
}

This needs to be changed around such that the transforms are specified in the Browserify command rather than the "browserify" field in package.json. After the change, it looks like this:

{
  "name": "chiasm",
...
  "scripts": {
    "pretest": "browserify -t browserify-shim -o chiasm.js -s Chiasm src/index.js",
    "test": "mocha"
  },
 ...
  "browserify-shim": {
    "lodash": "global:_",
    "model-js": "global:Model"
  }
}

After this change is made, new NPM releases must be made so the changes come through when adding Chiasm as a dependency.

[curran]

Done for Chiasm itself in 154c130

Needs to be done in:

• chiasm-component
• chiasm-layout
• chiasm-links
• chiasm-dsvDataset
• chiasm-dataReduction

[curran]

Done for chiasm-component in chiasm-project/chiasm-component@775401f

Done for chiasm-layout in chiasm-project/chiasm-layout@75262fc

[curran]

Done for chiasm-links in chiasm-project/chiasm-links@fc25ae7

[curran]

Done for chiasm-dsv-dataset in chiasm-project/chiasm-dataset-loader@7c33b2f

[curran]

Done for chiasm-data-reduction in chiasm-project/chiasm-data-reduction@639c879

[curran]

chiasm-component is still being shimmed out for some reason. I think this is because the components are depending on an older version and need to be updated. I'm going to make one more pass through all the modules and update their dependencies to the latest using npm-check-updates.

[curran]

Here's the sequence of commands used to upgrade dependencies for a package and push out a new version.

Step 1. Upgrade dependencies and ensure tests pass:

ncu --upgradeAll
git diff
npm install
npm test

Some tests may fail - watch out for the jsdom package, which needs to be pegged at version 3.1.2 because it is has some funky Node.js version compatibility issues.

Step 2. If everything looks good, publish a new version:

git commit -m "Upgrade dependencies" -a
npm version patch
git push && git push --tags
npm publish

After doing this for all modules, I see the following beautiful upgrade set for the Magic Bar Chart (Browserified) example.

$ ncu --upgradeAll
 chiasm                 ^0.2.2  →  ^0.2.3 
 chiasm-component       ^0.2.2  →  ^0.2.3 
 chiasm-data-reduction  ^0.2.1  →  ^0.2.2 
 chiasm-dsv-dataset     ^0.2.1  →  ^0.2.2 
 chiasm-layout          ^0.2.3  →  ^0.2.4 
 chiasm-links           ^0.2.2  →  ^0.2.3 

[curran]

The shim situation is horrible using browserify-shim. The top-level package being bundled cannot specify the set of modules to be shimmed. This is because browserify-shim looks in the package.json of all dependency packages to find out which modules to be shimmed.

Example scenario - I want to have a UMD bundle that has a bunch of Chiasm modules AND model.js included, but has D3 and Lodash shimmed out. If the top-level package only specifies D3 and Lodash to be shimmed, model.js is also shimmed, because it is configured to be shimmed out within one of the chiasm modules. This is so frustrating - I want to be able to include model.js in the bundle, but it seems there is no way to get browserify-shim to include it if any dependencies want to shim it out in their own browser builds.

Rollup seems to have a better story in terms of specifying shims. I think all of this will go away after adopting Rollup #54

[Hypercubed]

Can you quickly explain the reason the shim transform is needed? I was going to bump lodash v4 and thought it might be a good idea also replace each require with the specific lodash module. For example var keys = require('lodash/keys'). But I found that the bundle got bigger... which might be due to browserify-shim always including lodash as a global.

Also, related, what is your target for chiasm. Object.keys has pretty good browser and node support now. Can we start using this? How about string literal templates (to replace _.template)?

[Hypercubed]

Perhaps I have that backwords? The browserify-shim ensures that lodash is not included in the bundle?

[curran]

Ahh yes. The reason why these were included in the first place is to exclude D3 and Lodash from the bundles. The target here was a Rails app, which included D3 and Lodash separately through the Rails asset pipeline. We wanted to be able to just include one copy of D3 and Lodash for the entire app, rather than have two copies, one in the Chiasm bundle (not exposed globally) and one via the Rails asset pipeline.

We can definitely make use of Object.keys and string literal templates. I was just not aware of them at the time of writing Chiasm.