Adds `node` front matter type for node.js JavaScript front matter.

[Evan Sheehan]

There’s an example of configuring a custom JavaScript format for frontmatter in the official demos. It adds functionality that is fairly similar to the component scripts in Astro.

It strikes me as something that might be nice to add to the pre-configured frontmatter formats that are shipped with Eleventy. But I have a couple of reservations as well…

First, based on the demo, it looks like it does add a dependency to core: node-retrieve-globals.

Second, there’s already the js format which allows you to specify frontmatter as a single JavaScript object. It’s not exactly the same as the javascript format in the demo, but it’s similar enough that I can imagine the difference being confusing. I’m not sure why a person might expect that js lets you define a single objects and javascript lets you write a script where all of the variable are exported to the template context.

Still, it’s not hard for me to imagine that this would be useful to people. I know a lot of people like the component scripts in Astro.

[Zach Leatherman]

This is shipping with 3.0 as the node front matter type in core.

[Zach Leatherman]

For those curious, this is using https://github.com/zachleat/node-retrieve-globals

[Zach Leatherman]

If you have opinions on the name, please let me know!

We can’t use js or javascript due to existing aliasing in the gray-matter dependency: https://github.com/jonschlinkert/gray-matter/blob/ce67a86dba419381db0dd01cc84e2d30a1d1e6a5/lib/engine.js#L14

[Zach Leatherman]

TIL there is also an existing feature to override the default front matter syntax project-wide:

eleventyConfig.setFrontMatterParsingOptions({
	language: "node"
});

Now this nunjucks file will use node front matter by default (instead of yaml):

---
const hi = "hi";
---
{{ hi }}

Docs for this shipping here: https://www.11ty.dev/docs/data-frontmatter/#change-the-default-format-project-wide

[Evan Sheehan]

Node’s not bad, in my opinion. A thought occurred looking at this again: Astro calls these “component scripts”, so maybe this could be just “script”.

---script
const greeting = "howdy";
---

I dunno if I think this is better, just wanted to put it up for debate.

[Zach Leatherman]

I don’t actually prefer this but it’s worth noting that server might be an option that has some caché to it, given React’s "use server" directive. 🫣

[Evan Sheehan]

I dunno if I like server. Being unfamiliar with React, I don’t know what "use server" means.

One thought that does occur to me about node, though, is that some day, conceivably, there could be other JavaScript runtime that could be used to run Eleventy, and if you’re using something like Bun to run Eleventy, then calling this frontmatter type node seems a little weird. 🤔

[Tommy Williams]

lmao they both kinda stink 😅 not terrible tho
and i dont have a better suggestion 😓

and bun is aiming for near node compatibility

its strange the clarity of that perspective, serverside js being node called from the client