How to use TypeScript with Eleventy?

[d2s]

Are there examples of how to use TypeScript with Eleventy?

Would like to be able to use TS with 11ty.

[Ryuno-Ki]

Have you tried it yourself, yet?
If so, where did you get stuck?
(I'm not a fan of TypeScript, personally).

[hdoro]

As far as I understand, the only current way to do so is through using the --watch flag that will transpile the code whenever there's a change; eleventy then picks up on these changes through its own --watch and rebuilds corresponding part of the website.

In theory, this works fine, but it presents a huge burden on our workload, as you now have to wait for 2 processes to happen in sequence before you can see any change propagate. I've recently gotten into the same situation when trying to use Svelte as a template engine for specific parts of my site, and would love to know if there's any specific implementation that mitigates this problem.

My current implementation is as follow:

1. Have Rollup bundle my Svelte app with a Server (SSR) and a Client (with hydration) configuration;
2. Set it to watch changes to my Svelte directory, which triggers a new Rollup build;
3. Then inside my .11ty.js template I import the Server.js bundle, run the SvelteApp.render() method that return an html string, which I then return in the Eleventy layout;
4. For client-side hydration, I also include a <script src="svelteApp.js" defer> that refers to the client bundle generated by Rollup;
5. This client bundle is generated inside a mid-way dist folder that Eleventy then picks up through addPassthroughCopy;
6. Finally, I run eleventy --serve and hope for the best.

Problems:

• Every little change has to go through Rollup and Eleventy. This is not a problem with a small codebase like the one I'm fiddling with, but it could become one for full-blown projects;
• For some strange reason, .11ty.js templates don't update until I run eleventy --serve again, even though Eleventy does notice a change and rebuilds the website, very odd behavior. This makes testing the SSR impossible while developing, as changes to the Server.js don't get reflected in the browser;
• And, most importantly, the above problem would suck for developing Typescript .11ty.ts templates, as they simply wouldn't change. Worth the shot, though!

NOTE: I know this is not related directly to Typescript, but as I'm dealing with transpilation much like you'd with TS, this might be of help. If needed, I can transfer the svelte discussion somewhere else 🤗

[jevets]

Hmm, stabbing in the dark here, but a few things that might stoke the fire:

• eleventy --watch: bring your own dev server and Eleventy will rebuild to eleventyConfig.dir.output

• Another thing to consider: put all your .ts files into _includes; Eleventy will automatically watch all files in _includes and rebuild. Not ideal. (I end up sometimes putting static files into _includes just for the sake of triggering a rebuild when running eleventy --serve|watch)

• Maybe take advantage of the new(ish) JS dependencies watch config flag. Maybe there's a way you could generate a file that require()s your typescript files somehow, which could instruct Eleventy to spider into your .ts files, thereby buying you free watching.

• Or you could even require them from .eleventy.js and not even consume them, again simply to trigger rebuilds and free watch.

• Even more food for thought: Eleventy can write template files into _includes and avoid writing them to eleventyConfig.dir.output, which has its (albeit sparse) uses.

---

For some strange reason, .11ty.js templates don't update until I run eleventy --serve again...

That's odd, I haven't noticed this. Maybe I experience the same and simply haven't noticed, or maybe there's something else going on.

[Ryuno-Ki]

I end up sometimes putting static files into _includes

I symlinked some :-)

[jevets]

@Ryuno-Ki good call!

Ultimately, it'll be much easier handling .ts when #117 comes up

[zachleat]

Wow #117 has 53 upvotes!

[zachleat]

I would definitely say this is dependent on #117 but I’ll go ahead and put this into the enhancement queue since it’s kind of a standalone thing.

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[hdoro]

@jevets Thanks for the thought process, I ended up settling for parallel Rollup and PostCSS processes that paste files in a folder that Eleventy picks up with pass-through copy. It's working nicely, but the 11ty.js updating problem is still a reality, I even filed an issue on this #596 😔

Would be amazing if you could try reproducing it o/

[chriskrycho]

In addition to the other tweaks with --watch suggested above, I found that using ts-node and just registering it at the top of the .eleventy.js file works quite nicely.

Alas, it does not trigger rebuilds for changes to the config (I think that's expected?), but it does build everything correctly… and you can use one small hack to be able to watch for changes to .ts files in the main app area without needing to drive it through a separate watcher. Instead of making a .11ty.js file which has all the implementation, have a .11ty.ts file which the .11ty.js file imports and then simply re-exports.

(That blog post will probably be late this week or sometime next week; feel free to just poke at the source in the meantime. It includes type defs for most of the API surface of Eleventy! I plan to get those on DefinitelyTyped by the end of the year.)

[spacedentist]

I plan to get those on DefinitelyTyped by the end of the year.

That would be much much appreciated, @chriskrycho !

[chriskrycho]

I’ll see if I can get them up. Just as I’m moving off of 11ty to my own thing! (Not 11ty’s fault. Just finally getting a handle on doing exactly what I’ve wanted to for half a decade!)