fix: properly interpret boolean values in define (#545)

Author: jh-leong

packages/plugin-vue-jsx/src/index.ts

@@ -53,17 +53,28 @@ function vueJsxPlugin(options: Options = {}): Plugin {
     name: 'vite:vue-jsx',
 
     config(config) {
+      const parseDefine = (v: unknown) => {
+        try {
+          return typeof v === 'string' ? JSON.parse(v) : v
+        } catch (err) {
+          return v
+        }
+      }
       return {
         // only apply esbuild to ts files
         // since we are handling jsx and tsx now
         esbuild: {
           include: /\.ts$/,
         },
         define: {
-          __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
-          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false,
+          __VUE_OPTIONS_API__:
+            parseDefine(config.define?.__VUE_OPTIONS_API__) ?? true,
+          __VUE_PROD_DEVTOOLS__:
+            parseDefine(config.define?.__VUE_PROD_DEVTOOLS__) ?? false,
           __VUE_PROD_HYDRATION_MISMATCH_DETAILS__:
-            config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ?? false,
+            parseDefine(
+              config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__,
+            ) ?? false,
         },
       }
     },

packages/plugin-vue/src/index.ts

@@ -245,22 +245,31 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
     },
 
     config(config) {
+      const parseDefine = (v: unknown) => {
+        try {
+          return typeof v === 'string' ? JSON.parse(v) : v
+        } catch (err) {
+          return v
+        }
+      }
       return {
         resolve: {
           dedupe: config.build?.ssr ? [] : ['vue'],
         },
         define: {
           __VUE_OPTIONS_API__:
             options.value.features?.optionsAPI ??
-            config.define?.__VUE_OPTIONS_API__ ??
+            parseDefine(config.define?.__VUE_OPTIONS_API__) ??
             true,
           __VUE_PROD_DEVTOOLS__:
             (options.value.features?.prodDevtools ||
-              config.define?.__VUE_PROD_DEVTOOLS__) ??
+              parseDefine(config.define?.__VUE_PROD_DEVTOOLS__)) ??
             false,
           __VUE_PROD_HYDRATION_MISMATCH_DETAILS__:
             (options.value.features?.prodHydrationMismatchDetails ||
-              config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__) ??
+              parseDefine(
+                config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__,
+              )) ??
             false,
         },
         ssr: {