I sat down to write about a rendering technique I use to quickly wrap random D3 code in React components. I call them "blackbox components" because they're a black box.
Then I thought, "This is dumb. People shouldn't keep rewriting this. It should be an npm module."
So, I started making a library.
So, I went to copy config files from an old transition library I did. But the files were old and out of date. Possibly copied from a 0.2.x version of
So I looked for a
create-react-lib because the
-app version creates too much stuff that libraries don't need. Like all the setup for
index.html and assets and webpack dev and webpack prod and eslint and jest and a default app page and…
Couldn't find one. Used
create-react-app, ejected, copied config files, removed the parts I don't need.
30 minutes in: no post, no library, but I’ve got the config I need to get started.
So, I copied the code from CodePe, cleaned it up, and added some imports & exports. Made it Real Code.
Then I thought, "You know, this technique can work for things that aren't SVG. There's plenty of stuff people might wanna use."
So I added a version that uses
<div> instead of
Then I compiled.
node_modules/babel-cli/bin/babel.js src --out-dir lib. It worked!
Now, how do I test this?
So, I started writing an example project. Create react app and all of that.
npm link to use unpublished library. Neat trick, that.
I started with the same axis example from CodePen.
import BlackboxSvgHOC, use it to make an
Axis component, render in an
Error. Files not found.
Investigate, find a typo in the filename, fix, reload, renders default React app.
Waitaminute! Where's my example axis? How am I gonna add more awesome examples if I can't even load an axis?
Sigh. There's a nasty error in the console. Pretty sure I've never seen this one before.
How do you even debug that?
So I went to play Dirt3 for 20 minutes.
Then I wrote this story. And I wish I was kidding, but it took me an hour. Twitter is distracting.
Three hours after I started: no article, no library, no working code, no example project.
This is yak shaving. Don't do this.
You should follow me on twitter, here.