Can you transpile ts to js directyly in Quarto using Deno?

[Cotswoldsmaker]

Description

Hi all. Many thanks to everyone that has built and is actively maintaining Quarto, it is a great system. I started using Quarto in March of this year and now run pretty much all of my static sites off of it (there are a few). I have been adding more complex details and functionality to my sites, and of course some ts / js for frontend reactivity is a must. I have just run my first ts file for pre-render, and that works well. What I want to do next is create some code in TypeScript and transpile to JavaScript, which can then be used directly in the web browser. I cannot seem to figure out how to do this on Quarto. I see that Deno has an emit library that allows you to transpile, although the documentation states that the library is likely to change over time and may be unstable.

Is a transpile option available on Quarto?

[mcanouil]

Not that I am aware of.
Deno is not really forwarded to users besides via quarto run currently (as far as I know).

[cscheid]

The answer is yes, you actually can, in some limited settings.

It's a little-known feature of the ojs runtime in Quarto: you can import directly from .ts files, and Quarto will even type-check the code for you. There are a number of caveats:

• Most importantly, the code in the ojs block is not typescript and will not be typechecked.
• It currently leaves a lot of .js garbages in the working directory, and this is something that will take a long time to fix.
• This doesn't use the Deno runtime - the code is simply compiled into Typescript and imported into the page from the OJS runtime; you can inspect the resulting generated .js files.
• I believe this feature has exactly 1 user -- myself -- so you should expect rough edges. With that said, I use the feature in my own websites, want the feature to continue working, and will work to fix bugs in it as I learn of it!

Try this:

test.qmd

---
format: html
---

```{ojs}
import { hello } from "./f1.ts";
hello("world");
```

f1.ts

export function hello(word: string): string {
  return "Hello " + word + "!";
}

output

[jimjam-slam]

This isn't a feature I currently use, but it wouldn't surprise me if I use it in the future!