3 Minutes with Kent

Introducing MDX-Bundler

02.17.2021 - By Kent C. DoddsPlay

Download our free app to listen on your phone

Download on the App StoreGet it on Google Play

Hey there friends. I'm just out doing some shopping and I thought I'd

record today so right now I just want to talk about MDX Bundler. This is a

open source library that I just created. Yeah a couple days ago and it's

pretty cool. Basically a lot of packages and things that you have for

compiling MDX.

Oh actually if you have never heard of MDX, it's like marked down except it

allows you to import react components and render those and what's awesome

about that does it means that you.Get all the benefits of easy content

creation and and management with markdown because it's just such a nice

syntax for that.

But then you get all of the flexibility of react components and so you can

have really cool demos and things that are kind of interleaved with all the

content that you've got. So MDX Bundler.Is kind of unique because it

enables you to bundle all the dependencies for a particular post because

what with MDX what you're looking at is actually like JavaScript.

That's what it needs to get compiled into. And JavaScript often has to

benefit. So, of course, it'll have react as it dependency because this it's

going to render react components. But then like maybe you're rendering a D3

chart and so then you've got D3 in there, and maybe you're using some sort

of library to like load ash or something like that.

So you've got,Dependencies and most MDX compilers won't handle those. But

like, I mean, you've got Gatsby and everything and next like pretty much

everywhere it ends up being put together in tandem with a another framework

or something but this is totally meta framework agnostic where you're able

to have it generate the code and you have control over whether certain

things are considered global variables or whatever and so you generate this

code either during build time or on the server you send that to your client

or even ifIt's server side rendered then you'd send it to the client which

is being rendered on the server.

And and then you'd provide any of those libraries as quote unquote global

variables. They're not actually globally because you're actually passing

them as variables. Anyway, the example in the readme is a pretty

straightforward hopefully so if if that didn't make any sense you can go

take a look at that.

But I'm excited about NDX Bendler. I'm gonna be using it for my blog that

I'm rebuilding in Remix and it just makes things really quite

nice.Actually. So go ahead and give that a look. It's MDX Bundler on my

github, and I hope that's interesting. Bye.

More episodes from 3 Minutes with Kent