Run a transform hook before JSX is compiled but after TypeScript syntax is removed

[aleclarson]

My transform hook needs access to the JSX AST, but the parser does not support TypeScript syntax, so I need to wedge my transformer between the two compilers if possible.

Can this be done in Vite?

[aleclarson]

It appears that using vite.transformWithEsbuild within my transform hook is the best approach. Since my transform hook produces a sourcemap of its own, I've had to split my plugin into two plugins (each with its own transform hook) so that Vite combines the sourcemap I produce with the one transformWithEsbuild produces.

// Remove any TypeScript syntax but preserve JSX.
if (id.endsWith('.tsx')) {
  const transformed = await vite.transformWithEsbuild(code, id, {
    jsx: 'preserve',
    loader: 'tsx',
  })
  return {
    code: transformed.code,
    map: transformed.map,
    meta: { isFoo: true },
  }
}
return {
  meta: { isFoo: true },
}

In the second plugin's transform hook, I call this.getModuleInfo(id) and check for moduleInfo?.meta.isFoo to determine if it's a module that's been processed by the first plugin.

Also important is that the transform hook needs to be an "object hook" with order: "pre" or else it won't run before the TypeScript/JSX is compiled.