Support TypeScript assets

[musjj]

It would be nice if Trunk can automatically compile TypeScript to JavaScript, so that they can be inlined. Currently, the following:

<link data-trunk rel="inline" href="index.ts" />

Will cause an error:

unknown `type="ts"` value for <link data-trunk rel="inline" .../> attr; please ensure the value is lowercase and is a supported content type

[ctron]

Trunk doesn't compile anything at the moment. It only orchestrates the build. For JavaScript, it will directly use the provided JS file, without any compilation.

You can use the hooks, to trigger an npm build (or whatever you prefer) and then include that .js file instead.

Assuming you'd want to do this without npm, the question would be, what trunk would need to do to achieve the same?

[musjj]

You don't need npm to compile TypeScript, the tsc compiler should be enough. Trunk can do the same thing it already does for Tailwind and SASS assets: by auto-downloading the tsc CLI, or locating them from the user's environment:

trunk/src/tools.rs

Lines 19 to 28 in 512c5b1

	pub enum Application {
	/// sass for generating css
	Sass,
	/// tailwindcss for generating css
	TailwindCss,
	/// wasm-bindgen for generating the JS bindings.
	WasmBindgen,
	/// wasm-opt to improve performance and size of the output file further.
	WasmOpt,
	}

[ctron]

So assuming you had an index.ts file. What else would be required, and what would trunk need to do?

[musjj]

For the simplest case: tsc index.ts, then inline the JS output:

$ echo 'const foo: number = 5; console.log(foo);' >index.ts

$ tsc index.ts

$ cat index.js
var foo = 5;
console.log(foo);

But maybe you can also include additional compiler options, like with rel="rust": https://trunkrs.dev/assets/#rust

[ctron]

I do recall that there may be a tsconfig? Is that a thing?

[musjj]

tsconfig.json is only used when compiling a multi-file project: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. So they won't be used if you're only compiling individual files.

If projects are to be supported, you can use the --project flag: tsc --project /path/to/project. Since tsc can't bundle TypeScript projects into a single file, you'd need to use the browser's native module system: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules. Which means that you need to have the user choose an entry point that will be inlined in the html, while the rest of the modules are served from the dist directory.

If you want to support bundling, there's https://github.com/egoist/tsup, which makes inlining multi-file projects easier.

[ctron]

Thanks for all the explanations! That really helps.

So I think a good first step might be to just add tsc support, right?

[musjj]

Yeah, simple tsc support would be great for someone just looking for a ts equivalent of inlining a type="js" asset!

[nalply]

Heads up! tsc is complicated to configure.

Currently I use rollup because I use a large TypeScript library and compile that in a hook.

I am afraid, just using tsc would cover only "getting started" usecases and soon people will give up and switch to bundling like I did with rollup. I hate bundling but I had to swallow that pill and move on.