Using @deepkit/type with vite and esbuild

[jelib3an]

Hi there, we are interesting in trying out @deepkit/type. Our application is bundled with vite (which uses esbuild to transpile TS) and we have no idea how to get started. Is there any way we can use the type compiler with vite?

We've looked into @rollup/plugin-typescript but it is extremely slow and we'd like to take advantage of the speed performance of esbuild.

If anyone has any pointers, it'd be greatly appreciated. Thanks!

[AisonSu]

I read a little of the source code of type-compiler, and it is seems to work based on the typescript compiler procedure to get type meta information with inject tsc.js, and esbuild didn't offer any api to provide that(type information). so i think it is possible to need the esbuild to change their code or lib,or the deepkit to work more with esbuild? I don't know. so i think it would not be a easy work in nowadays.

[uinz]

import { Plugin } from "vite";
import { transformer, declarationTransformer } from "@deepkit/type-compiler";
import { transpileModule } from "typescript";

export interface Options {
  test: RegExp;
}

export function deepkitType(options: Options): Plugin {
  return {
    name: "deepkit-type",
    enforce: "pre",
    transform(code, fileName) {
      if (!options.test.test(fileName)) return;

      const transformed = transpileModule(code, {
        fileName,
        transformers: {
          before: [transformer],
          after: [declarationTransformer],
        },
      });

      return {
        code: transformed.outputText,
        map: transformed.sourceMapText,
      };
    },
  };
}

the transpileModule not work yet, but owner said it will be fixed.

obviously, if all ts files are compiled in this way, they will not enjoy the performance advantages of esbuild. My own project considers adding a file suffix to deal with it.
similar to {filename}.type.ts

[lionelhorn]

Here is my vite.config.ts that got me started.

I added compiler options so the transpiler outputed ESM to use with the devserver.

import { defineConfig, Plugin } from "vite";
import react from "@vitejs/plugin-react";
import { ModuleKind, ScriptTarget, transpileModule, } from "typescript";
import { declarationTransformer, transformer } from "@deepkit/type-compiler";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), deepkitType({ test: /\/kds\/src\/.*\.(tsx|ts)/ })],
  build: {
    rollupOptions: {
      external: ["@deepkit/core"]
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      minify: false,
      plugins: []
    }
  }
});

export interface Options {
  test: RegExp;
}

export function deepkitType(options: Options): Plugin {
  return {
    name: "deepkit-type",
    enforce: "pre",
    transform(code, fileName) {
      try {
        if (!options.test.test(fileName)) {
          return;
        }

        const transformed = transpileModule(code, {
          compilerOptions: {
            module: ModuleKind.ES2022,
            target: ScriptTarget.ES2022
          },
          fileName: fileName,
          transformers: {
            before: [transformer],
            after: [declarationTransformer]
          }
        });

        return {
          code: transformed.outputText,
          map: transformed.sourceMapText
        };
      } catch (e: any) {
        console.error(e);
      }
    }
  };
}