Importing Mustache template files directly into a TypeScript-based Worker? Cloudflare #workers-help

Importing Mustache template files directly into a ...

VirtualWolf

04/25/2023, 12:12 PM

Hi everyone! I'm just starting to muck around a bit with Workers and itty-router and Mustache, ultimately what I'm trying to do is to have my Mustache templates as individual files straight in my repository (so I can get nice syntax highlighting in my IDE) and do essentially something like

import * as template from './templates/template.mustache

for use with the Mustache library itself. I've come across the workaround of loading the templates from R2 or KV, but I'd like to avoid that if at all possible. Really all I need is just to get them in as a string, I've seen things like this https://stackoverflow.com/questions/46503615/import-html-from-typescript-with-webpack but they're all based on mucking around with Webpack configuration. Given I'm new to all this ideally I'd like to be able to have it working locally with Wrangler2 as well. My understanding is that Wrangler2 uses

esbuild

under the covers, is there some customisation I can do with that to make this happen? 🙂 Or something other method that would allow this to work? Any thoughts or insights are greatly appreciated. ❤️

Skye

04/25/2023, 12:14 PM

I think is what you're looking for

VirtualWolf

04/25/2023, 12:18 PM

👀

VirtualWolf

04/25/2023, 12:18 PM

I'll be damned, that worked PERFECTLY.

VirtualWolf

04/25/2023, 12:19 PM

Thanks so much!! 😄

VirtualWolf

04/25/2023, 12:22 PM

I should note for any future readers that to keep TypeScript happy I had to add a definition file:

Copy code

declare module '*.mustache' {
    const content: string;
    export default content;
}

And tell TypeScript about it at the top of the file I'm importing into:

Copy code

/// <reference path="mustache.d.ts"/>

Skye

04/25/2023, 12:23 PM

You should also be able to add that to your tsconfig to avoid needing to reference it like that

VirtualWolf

04/25/2023, 12:23 PM

Oooo, I will look into that.

VirtualWolf

04/25/2023, 12:23 PM

Thanks so much again!!

VirtualWolf

04/26/2023, 5:13 AM

Hmmmm, would you happen to know off the top of your head which specific option in

tsconfig.json

I'd be setting for that? I haven't been able to figure it out thus far. 😦

Skye

04/26/2023, 6:40 AM

Did some googling, looks like it should just take your d.ts file without needing a reference actually 🤔

VirtualWolf

04/26/2023, 8:55 AM

Hrmmmmm! Clearly I'm doing something wrong then, haha.

VirtualWolf

04/26/2023, 8:58 AM

Might be time to post on Stack Overflow, I reckon.

VirtualWolf

04/26/2023, 9:00 AM

OOOooooh!

VirtualWolf

04/26/2023, 9:00 AM

Got it! The

.d.ts

file has to be named the same as the module I'm declaring (i.e. I changed it to

mustache.d.ts

and everything works). 🎉

Skye

04/26/2023, 9:13 AM

Ah, great

2 Views

Previous Next