Module tips and tricks

Community Help
1

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

2

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)
3

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

4

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

5

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.

6

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

7

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

8

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

9

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

10

Dear @mbostock

Thanks! The following works.

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

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")