search

erikbrinkman / d3-dag

Layout algorithms for visualizing directed acyclic graphs
https://erikbrinkman.github.io/d3-dag/
MIT License
1.45k stars 87 forks source link

Providing other build flavors #6

Closed plouc closed 4 years ago

plouc commented 6 years ago

Currently you only provide an UMD build, you could also consider providing an ES module build.

erikbrinkman commented 6 years ago

I'll admit that I'm not that knowledgeable about modern js functionality. As far as I know this is written using ES6 modules, so you shouldn't need to build it. That's a little false because the dependencies aren't a valid ES6.

All of the build rules that I have are copied from the other d3 modules, so that this could fit nicely under the d3 umbrella. If you want to point me to more detailed resources about what you want the result to be, or better yet submit a PR, I'd be happy to move forward with providing alternate build flavors.

plouc commented 6 years ago

Yep, I can probably make a PR, I have that kind of setup on several projects. If you're curious, the Rollup page explains the advantages of it ("Why are ES modules better than CommonJS modules?").

erikbrinkman commented 6 years ago

I read it, but I didn't see an obvious way to just build an ES6, other than using webpack to transpile the build umd.

plouc commented 6 years ago

You can have an array of configs in your rollup config file, here is my configuration for all nivo packages.

erikbrinkman commented 6 years ago

Unless I'm mistaken, that config only compiles cjs and umd, but umd should be sufficient for any cjs use case. Either way, I'm interested to see what you're going for in the PR / the general enthusiasm towards making this more approachable for everyone.

plouc commented 6 years ago

Yes, you're rightn it was more about the multi config :)

erikbrinkman commented 4 years ago

The module was originally written in es6 syntax, and now that it's moved to typescript, the generated code is still es6. The problem is that I use some cjs dependencies. I tried googling, but didn't find a good way to allows es6 style imports of a library with some cjs dependencies.

So you can now do something like:

import { mean } from "https://unpkg.com/d3-dag@0.4.4/src/sugiyama/twolayer/mean.js";

and that seems to work as long as you don't require anything with a node dependency, because it doesn't know how to find those.

As for es6 syntax in node, this might be possible just by setting your project to use es6 modules, but also the appropriate syntax for this seems problematic, it's only experimental in node, and typescript wants to omit the extensions in compiled code, which makes node complain that it can't find the import.

Long story short, it seems like this should be easy, but there seem to be technical and configuration hurdles. They seem like they should get figured out eventually, but I'll keep this open since it doesn't seem like support really exists.

erikbrinkman commented 4 years ago

There is now a single esm file. It's not my favorite solution, but it should work well enough in the short term.