Add option to disable esbuild plugin in vite

[haoleanh]

Is your feature request related to a problem? Please describe.
We managed to make Vite works with Vue 2 tsx (via babel plugin using @babel/preset-typescript and @vue/babel-preset-jsx). The problem is that Vite esbuild plugin always transform the code before it goes to our custom transformation.

Describe the solution you'd like
A setting in vite config or cli flag to disable esbuild plugin

Describe alternatives you've considered
We modified vite server source code to disable esbuild plugin and it works well for us

Additional context
Disable esbuild plugin

And here is the result :)

[underfin]

In theory, the esbuild is already do same thing with @babel/preset-typescript and @vue/babel-preset-jsx, so you don't rely on them.I don't konw the reason which you use them instead of esbuild, can you explain it in detail?

[haoleanh]

@underfin it's related to render function. In Vue 3 the render function has different format to props data (https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md). I think esbuild by default will transform jsx syntax to similar react format which vue 2's render function isnt compatible with.
The main reason why we need Vue 2 render function format is to reuse Vue 2 library (in this case is Vuetify 2)

[Aaron-Pool]

@haoleanh just coming across this and I was curious if the frontend build pipeline you mentioned was open sourced anywhere? I'm interested in using vite for my team's vue 2 app, but I'm running into the tsx roadblock as well.

[haoleanh]

@Aaron-Pool we wrote a custom build based on babel and vite pipeline. The idea is to disable default Esbuild in Vite and use existing babel plugins to transform tsx to Vue 2 render format. Here is our code, its been a while since I used Vite (its more like experiment for us to try esm build) so Im not sure if this still works in latest Vite version.

Custom transformer

import path from "path";
import * as babel from "@babel/core";
import { Transform } from "vite";

export const vue2TsxTransformer: Transform = {
    test: (ctx) => path.basename(ctx.path).endsWith(".tsx") || path.basename(ctx.path).endsWith(".ts"),
    transform: async (ctx) => {
        try {
            const fileName = path.basename(ctx.path);
            const isTsx = fileName.endsWith(".tsx");
            const result = await babel.transformAsync(ctx.code, {
                filename: fileName,
                presets: isTsx ?
                    [
                        "vca-jsx",
                        "@vue/babel-preset-jsx",
                        ["@babel/preset-typescript", {
                            allowNamespaces: true
                        }]
                    ] :
                    [
                        ["@babel/preset-typescript", {
                            allowNamespaces: true
                        }]
                    ]
            });

            return result.code;
        }
        catch (ex) {
            console.log("ERROR: " + ex);
        }
    }
}

Custom resolver

import { Resolver } from "vite";

export const vue2Resolver: Resolver = {
    alias: {
        "vue": "vue/dist/vue.runtime.esm.js",
        "@vue/composition-api": "@vue/composition-api/dist/vue-composition-api.esm.js"
    }
}

Custom server plugin

import { ServerPlugin } from "vite";

export const vue2ServerPlugin: ServerPlugin = (ctx) => {
    ctx.app.use(async (ctx, next) => {
        await next();
        if (ctx.path.includes('/@modules/vue/dist/vue.runtime.esm.js')) {
            ctx.body = `
            // <<HMR Hack Start>>
            window.process = { env: { NODE_ENV: 'development' }};
            // <<HMR Hack End>>\n\n` + ctx.body;
        }
    });
}

Serve config (build config is similar)

function createServerConfig(projectConfig): ServerConfig {
    return {
        enableEsbuild: false,
        transforms: [
            Transformers.vue2TsxTransformer
        ],
        resolvers: [
            Resolvers.vue2Resolver,
        ],
        configureServer: [
            ServerPlugins.vue2ServerPlugin
        ],
        ...projectConfig,
    }
}

[Aaron-Pool]

@haoleanh Great! Thanks! 👍