Configuration of JSX Syntax for CRA Project Migration

[brendonmatos]

I'm migrating a large CRA project to Vite and I'm using this library to improve HMR and boot time.

In some projects (currently mine), files with JS extension with JSX syntax are still used. Would there be any way to configure this within the plugin currently? If not, do you think it would be interesting to have this possibility to facilitate the migration from CRA to VITE? (I'm also interested in working on it)

[ArnaudBarre]

Hi! You're not the fist one to have the issue. We decided to not add this option in this plugin, we think this a bad pattern because you need to always configure tools to use a JSX parser for .js files. Having the convention that .js contains standard JS syntax allow to just ship them directly to the browser without transformation.

@sodatea just gave me this link to help for the migration: https://gist.github.com/parties/90cdf35f9a3d05bea6df76dc83a69641

[brendonmatos]

So would it be more about breaking this bad pattern and taking advantage of the transformation "skip" in files that don't need to be transformed?

I asked because I did a test, but feel free to deny it. I want to show it just to make clear the idea I thought here:

type Options = {
  /**
   * Control where the JSX factory is imported from.
   * @default "react"
   */
  jsxImportSource?: string;
  /**
   * Enable TypeScript decorators. Requires experimentalDecorators in tsconfig.
   * @default false
   */
  tsDecorators?: boolean;
  /**
   * Use SWC plugins. Enable SWC at build time.
   * @default undefined
   */
  plugins?: [string, Record<string, any>][];

  /**
   * Configure the parser for each file extension. This is useful for enabling JSX in .js files.
   * @default {
   *  ".tsx": { syntax: "typescript", tsx: true, decorators },
   *  ".ts": { syntax: "typescript", tsx: false, decorators },
   *  ".jsx": { syntax: "ecmascript", jsx: true },
   *  ".js": { syntax: "ecmascript", jsx: false },
   * }
   * @example {
   *  ".js": { syntax: "ecmascript", jsx: true },
   * }
   */
  parser?: {
    [ext: string]: ParserConfig;
  };
};

[ArnaudBarre]

Yep I know this could seems easy to add as an option, but the goal of this plugin is also to enforce good practices so that it's easier to make improvements to the core without breaking exiting projects.

I prefer to understand well needs and fix them without config that having a big configuration surface.

A recent example is this commit: https://github.com/vitejs/vite-plugin-react-swc/commit/53596ebe543d27529a369e6db6971106e1bd3e45

[ArnaudBarre]

I'm closing the issue. I hope you will be able to migrate from CRA!

Some of my others plugins that you could use to get back some CRA features:

• https://github.com/nabla/vite-plugin-eslint
• https://github.com/ArnaudBarre/vite-plugin-tsc-watch
• https://github.com/ArnaudBarre/vite-plugin-fast-react-svg

And to get click to code in development: https://github.com/ArnaudBarre/vite-plugin-react-click-to-component