Experiment: TypeScript and JSX Support 🗿

[nomi-san]

There are two transpilers could be used to transpile TS code within the browser.

• @babel/standalone
• sucrase

Sucrase is blazing fast and commonly is used to replace ts-node for nodejs runtime, it just transpiles your code into JS and ignores all types (alse does type checks). Sucrase is built without nodejs deps, that means it should work fine in browser env.

plugins/
  |__plugin-1/
    |__index.ts  👈 entry
    |__.cache     ? cache transpiled if needed

How about import and ESM?

We already have CSS modules, so TS module is not impossible. That's actually what Vite did in dev mode. But there will have some troubles with named exports.

graph LR
A[index.ts] --> B["assets handler"] --> C["module [JS code]"]

How about JSX?

If you take Deno long enough, you will see that the code below is pretty familiar.

import { h, render } from 'https://esm.sh/[email protected]'

export function load() {
  const root = /*...*/
  render(root, () => <div>Some text</div>)
}