Allow Custom templates to alias to an existing template engine (JSX, TS, TSX templates in Eleventy)

[pspeter3]

Is your feature request related to a problem? Please describe.
Allow users to run eleventy through Babel, TypeScript, ESBuild, or others without registering a custom template engine.

Describe the solution you'd like
Add 11ty.js, 11ty.ts, and 11ty.tsx to the TemplateEngineManager. https://github.com/11ty/eleventy/blob/master/src/TemplateEngineManager.js#L26.

Describe alternatives you've considered
Allow users to add entries to the extension map. This would also work just fine.

[pspeter3]

I am willing to submit a PR for this if the maintainers are open to this suggestion.

[pspeter3]

This idea from @zachleat seems like a great alternative as well https://twitter.com/zachleat/status/1473036576468918279.

[zachleat]

I am so sorry for the super-late reply here.

This is almost possible today in Eleventy 1.x using current APIs:

eleventyConfig.addExtension("11ty.tsx", {
	key: "11ty.js",
	read: false,
});

I don’t consider needing read: false to be great there so I did push a fix that will inherit this from the upstream alias (shipping in 2.0.0-canary.19). That said, I tested the above on your excellent gist and it does write the file and the HTML looks okay.

> build
> node --require esbuild-register node_modules/.bin/eleventy

[11ty] Writing _site/index.html from ./index.11ty.tsx
[11ty] Wrote 1 file in 0.03 seconds (v2.0.0-canary.18)

There is one big problem, it isn’t fetching the data out of the file for the data cascade.

I’m going to continue this one tomorrow, I think configuration-enabled aliasing will be useful so I don’t have to be the arbiter of these aliases moving forward.

---

Aside, I do think it’s worthwhile to allow multiple aliases in a single command, so I added that to 2.0.0-canary.19:

// v2.0.0-canary.19 or newer
eleventyConfig.addExtension([ "11ty.jsx", "11ty.ts", "11ty.tsx" ], {
	key: "11ty.js"
});

[pspeter3]

Thanks!

There is one big problem, it isn’t fetching the data out of the file for the data cascade.

That's what I was trying to solve for with this suggestion.

[zachleat]

Updated your gist with the new API: https://gist.github.com/zachleat/b274ee939759b032bc320be1a03704a2

[zachleat]

Docs are building to https://www.11ty.dev/docs/languages/custom/#aliasing-an-existing-template-language

This will ship with 2.0.0-canary.19

[pspeter3]

This is amazing, thanks!

[pauleveritt]

@pspeter3 I just gave this a try, works with .23 just nicely, including a template data file.

I wrote a Vitest test for my component. Thought I would have to wedge the esbuild-register chant into a Vitest config file, but didn't have to. ESM, TS, TSX, in Eleventy+Vite. Fun times.

[zachleat]

Official template syntax docs for TypeScript and JSX just shipped here:

https://www.11ty.dev/docs/languages/jsx/
https://www.11ty.dev/docs/languages/typescript/