Module tips and tricks

Hi all,

Are there any tips and tricks for non-UMD modules - in particular, any handy utilities to get the packages to play nicely with Observable? Here are a couple of examples:

https://github.com/keithwhor/NtSeq/blob/master/web/ntseq.js

https://github.com/mattbierbaum/zombies-usa/blob/master/js/binaryheap.js

Best,
Simon

Hey Simon,

Sure thing! These are both resolveable with one of the methods in my stubborn modules notebook - specifically the 'module that attaches a variable to the window but doesn’t implement UMD one - try

Nt = require('https://cdn.rawgit.com/keithwhor/NtSeq/master/web/ntseq.js').catch(()=>window.Nt)

and

binaryheap = require('https://cdn.rawgit.com/mattbierbaum/zombies-usa/ced65b13/js/binaryheap.js').catch(()=>window.binaryheap)

Dear Tom,

Thanks - I’ve looked through your modules notebook, but didn’t put 2 and 2 together in the case where one isn’t globbing on to another module (as in your notebook), rather just adding something to the global namespace.

Best
Simon

Dear Tom,

What about code that isn’t wrapped up in a module of any kind? e.g.

https://github.com/sanojian/cellauto/blob/master/dist/cellauto.js

Oops, this was a bug in d3-require, which is used by Observable to implement require! d3-require is supposed to ignore the names in asynchronous module definitions such as cellauto:

Instead, it thought that cellauto depended on various single-letter modules (“C”, “e”, “l”, ”l”, “A”, etc.). This has been fixed in d3-require 0.6.4 and will be deployed shortly to Observable.

Dear @mbostock @tom

Thanks! Is this also the reason I can’t load gpu.js?

https://raw.githubusercontent.com/gpujs/gpu.js/develop/bin/gpu.js

Best
Simon

there are quite a bunch of examples with gpu.js
https://beta.observablehq.com/search?query=gpu

Thanks @Fil - serves me right for not checking regularly! When I tried wzrd.in previously, I got an error…

As side issue is that searching for “gpu.js” doesn’t bring results

https://beta.observablehq.com/search?query=gpu.js => 0

https://beta.observablehq.com/search?query=gpu => lots

Dear @mbostock

Thanks! The following works.

CellAuto = require("https://cdn.rawgit.com/sanojian/cellauto/master/dist/cellauto.js").catch(()=>window.CellAuto)

Glad to hear it! That catch block shouldn’t be necessary anymore, since cellauto.js is a valid AMD. You can say:

CellAuto = require("https://cdn.rawgit.com/sanojian/cellauto/master/dist/cellauto.js")