Constructs an asset Bundler for .ts and .tsx files. This uses Deno's runtime compiler API under the hood, which requires the --unstable flag. (https://deno.land/manual/typescript/runtime)

Bundles are cached into temporary files on disk, which requires the --allow-write flag. The temporary files are removed from disk when the server process is asked to shut down gracefully.

Files that get bundled will have themselves and their dependencies watched for file changes using Deno.watchFs(). If changes are made and the file is still present, its cached bundle will be rebuilt. If problems occur during re-bundling, the cached bundle will be evicted and the bundle will be rebuilt the next time it's requested.

Bundled typescript can be imported with module script tags in HTML, like this: <script type="module" src="/bundle.ts"></script>. The mime type will be correctly served as "application/javascript", despite the extension. The "lib" typescript option while bundling is equivalent to using the following deno.json config:

{
  "compilerOptions": {
    "lib": [
     "dom",
     "dom.iterable",
     "dom.asynciterable",
     "esnext"
    ]
  }
}

The typescript assets can be thought of as "gateways" into your client-side application code. They can import from anywhere, not just the assets folder, and all dependencies will be bundled into the served file. Take this into account when thinking about code splitting; having multiple typescript asset files include the same dependency means that dependency will be served multiple times to the client, which will waste bandwidth. A good standard practice would be to have just one bundle.ts file in your assets folder which imports/exports everything the browser application needs.

To avoid bundling a dependency, you can import it asynchronously using the import() function. Dependencies imported this way will not be bundled in the served file, but remember the importing happens inside the browser, which follows different resolution rules; you won't be able to import files from outside the assets folder like you can with regular imports. Tip: Top-level await works in Deno, making it easy to import non-bundled dependencies in the same place you import bundled dependencies. Like this:

// <root>/assets/bundle.ts
import { bundled1 } from "../outside/assets.ts";
import { bundled2 } from "https://null1.localhost/remote.ts";
const { notBundled1 } = await import("./inside/assets.ts");
const { notBundled2 } = await import("https://null2.localhost/remote.js");
// ... the rest of your browser code ...

Here's a list of every flag required for this to work:

• --unstable (required for Deno.emit(), which does the bundling)
• --allow-net (required by all of Cav)
• --allow-read (required whenever assets are served)
• --allow-write (required for writing the bundles to temporary files)