camomeui/camome

Add "use client" to `FormField`

sabigara opened this issue · 0 comments

  • "use client" in TS files are removed by esbuild.
  • Below plugin (from this issue) can add it as a banner.
  • However, with tsup's treeshake: false option enabled, Module level directives cause errors when bundled warning is thrown by Rollup.
import fs from "fs/promises";

import { Plugin } from "esbuild";

interface ESBuildUseClientOptions {
  filter?: RegExp;
}

export const esbuildUseClient = ({
  filter = /\.client\.tsx$/,
}: ESBuildUseClientOptions = {}): Plugin => ({
  name: "use-client",
  setup(build): void {
    build.onLoad({ filter }, async (args) => {
      const source = await fs.readFile(args.path, "utf8");
      const loader = args.path.endsWith(".tsx") ? "tsx" : "ts";

      const data = await build.esbuild.transform(source, {
        loader,
        banner: '"use client";',
      });

      return {
        warnings: data.warnings,
        contents: data.code + `//# sourceMappingURL=${data.map}`,
      };
    });
  },
});