Using the Markdown Plugin

[00:00:00]
>> All right, so theoretically, again, talking and typing, we don't know what happened, but I feel good, I'm feeling pretty good. At this point, I think, since I started from Mannequin, I've got to at least script. We'll say type module, sweet, and then we'll say src is .srcindex.js.

[00:00:31]
And then in there real quick, let's just do a console log. So we'll import john.biographies/john. What am I doing? I'm doing Paul. He's my favorite Beatle. Don't ask me. Cool, and then we'll do the console log here. Cool, so let's pull in. So now, could we just pull in a markdown file in an ECMAScript app?

[00:01:02]
Like I said, barring mistakes of me typing and talking at the same time. Let's find out together. npm run dev. That's looking great. Yeah, that's not in there. What I started back from me and I kept that file on there. So we have no images. We're not doing that.

[00:01:22]
Sweet, new problem is that I didn't delete it from up here. All right, but it should be a string. That's still good. Let's see what we got. It's blowing up at the parse piece. So whenever I said out loud, we've got content Cuz that's a promise Now you can see that it actually converted to HTML, right, on the fly as part of my build process, right?

[00:02:06]
And this library turns into HTML, I guess that remark will turn into a JavaScript object, you can theoretically as long as you turn like ESTree is the AST while it's a lot of letters in a row. ESTree is a abstract syntax tree that has, as long as you return to that Vite we'll figure out the rest.

[00:02:30]
But this will return to a string if I wanted to pull apart that HTML and just get the name and turn it into a JavaScript object that I wanted to use, that's totally doable as well, right? It is basically just evaling effectively whatever string I put out here.

[00:02:48]
And again, there are other hooks. There are ways to, the regular transform will allow you to also put a source map in there as well. But you can take any file that you want and basically do anything with it because every single import require. Whether or not Vite actually supports it, right, you will get a chance to step in and turn it into something that Vite does support cuz at the end of the day, I took a markdown file and I turned it into, yeah, the world's worst piece of JavaScript.

[00:03:17]
But if we go ahead and we look in the sources, right, we can see source will see biographies, right? It turned into effectively JavaScript, right? Yeah, kind of ridiculous JavaScript but JavaScript nonetheless, and like I said for the most part, when you need it is either for we spin up our open source server.

[00:03:39]
That's not the way that a lot of other apps work, you usually have to talk to some remote server. I happen to have an open-source server that I talk to. So we spin it up at the same time. If you need to parse some unique file type for your company or you just wanna manipulate, you wanna take a given a given JavaScript type, or do something with the JSX, you can do that, right?

[00:04:06]
If you wanna strip out all your data attributes, right? Your test data, only on build. So you can say, if we go, I'm gonna turn this to TypeScript real quick for a reason you'll see in a second. TypeScript and we'll say file as a string. What I wanna do is it's gonna return a plugin.

[00:04:33]
That'll just give me a little bit more type help in a second here. You can say, There's a whole bunch, I'm trying to look. So we can say apply build, for instance, right? This is kinda more of an example, apply build. So this will be only on build, right, which means you're building for production.

[00:05:02]
You could theoretically grab every single file and be like, all those data-test.ids that we have in there for Playwright or Cypress or whatever, I don't wanna ship those to production, right? Strip them all out. Just literally use a regex, right, and strip out all of the data attributes, right?

[00:05:23]
Or I guarantee you there is a plug-in that exists for this, go find every console log and get rid of it. So I don't ship those to production cuz, who has shipped a what console log into production? I have, [LAUGH] thank God it wasn't a curse word. But if you haven't done it, you will, eventually, and if the plugin doesn't exist, maybe you'll use console log.

[00:05:53]
Maybe there's an abstraction over it that you only want in certain conditions. You can theoretically strip that out, or you can choose to add stuff as part of the build process. There will be unique things for you. Most of the common one is don't write your own plugin, right?

[00:06:08]
Go use a plugin that's at least been vetted by yeah, not the best use of your time. But there are probably at some point or another you could, if you think about it ES Build has its own JSX parser where you can write your own function, right? You could theoretically if one got bored during a holiday break or whatever write your own front-end framework right?

[00:06:30]
Using probably just Vite, some plugins, and some transformations, right, effectively, that's what's Feltz doing roll up, right? You could theoretically do something along those lines. Should you? Maybe not, right? But if you had, I have a workshop from a few years ago, to build your own programming language, right?

[00:06:49]
It would be fun. At one point, I could take that programming language and convert it back into JavaScript and then pull in Dropbear, which is the main programming language, apparently in Australia. There's a myth that bears hide in trees and try to belly-flop on you as you're walking through the woods.

[00:07:05]
I could make Vite support for my own custom programming language. Should I? Absolutely, [LAUGH] but you could do these various different things with a Vite plug and I think that's what again, it starts out with hey, all you need is an index.html file and you're good to go.

[00:07:22]
And maybe you throw a script tag in there, you want some JavaScript to, all right, cool you wanna host modules somewhere else and pull them in remotely or build a library or parse your own programming language? Right on, it's just like a function added in there, right? And that's kind of line from incredibly simple all the way to incredibly powerful but still not that complicated, right?

[00:07:47]
This looks a little squirrely in the very beginning but once you begin to wrap your head around it, especially if you cheat wouldn't have the types in there. I learn as I write JavaScript for you all day, how reliant I am on, being able to option click into the types and read all the things that thing has without even having to open the docs.

[00:08:08]
Because if you look too, it's like, I love it, right? For various different pieces, you can kinda get a sense, Of what everything does and what it takes what to expect. But yeah, so there's a wide range of really powerful parts.