feat(config): support configuring runtime compiler via app.config.compilerOptions

- `config.isCustomElement` is deprecated - use `app.config.compilerOptions.isCustomElement` instead.

packages/runtime-core/src/apiCreateApp.ts

@@ -69,7 +69,6 @@ export interface AppConfig {
   performance: boolean
   optionMergeStrategies: Record<string, OptionMergeFunction>
   globalProperties: Record<string, any>
-  isCustomElement: (tag: string) => boolean
   errorHandler?: (
     err: unknown,
     instance: ComponentPublicInstance | null,
@@ -80,6 +79,22 @@ export interface AppConfig {
     instance: ComponentPublicInstance | null,
     trace: string
   ) => void
+
+  /**
+   * @deprecated use config.compilerOptions.isCustomElement
+   */
+  isCustomElement?: (tag: string) => boolean
+
+  /**
+   * Options to pass to @vue/compiler-dom.
+   * *Only supported in runtime compiler build.*
+   */
+  compilerOptions: {
+    isCustomElement: (tag: string) => boolean
+    whitespace?: 'preserve' | 'condense'
+    comments?: boolean
+    delimiters?: [string, string]
+  }
 }
 
 export interface AppContext {
@@ -122,9 +137,11 @@ export function createAppContext(): AppContext {
       performance: false,
       globalProperties: {},
       optionMergeStrategies: {},
-      isCustomElement: NO,
       errorHandler: undefined,
-      warnHandler: undefined
+      warnHandler: undefined,
+      compilerOptions: {
+        isCustomElement: NO
+      }
     },
     mixins: [],
     components: {},

packages/runtime-core/src/component.ts

@@ -727,18 +727,22 @@ export function finishComponentSetup(
         if (__DEV__) {
           startMeasure(instance, `compile`)
         }
-        const compilerOptions: CompilerOptions = {
-          isCustomElement: instance.appContext.config.isCustomElement,
-          delimiters: Component.delimiters
-        }
+        const { isCustomElement, compilerOptions } = instance.appContext.config
+        const finalCompilerOptions: CompilerOptions = extend(
+          {
+            isCustomElement: isCustomElement || NO,
+            delimiters: Component.delimiters
+          },
+          compilerOptions
+        )
         if (__COMPAT__) {
           // pass runtime compat config into the compiler
-          compilerOptions.compatConfig = Object.create(globalCompatConfig)
+          finalCompilerOptions.compatConfig = Object.create(globalCompatConfig)
           if (Component.compatConfig) {
-            extend(compilerOptions.compatConfig, Component.compatConfig)
+            extend(finalCompilerOptions.compatConfig, Component.compatConfig)
           }
         }
-        Component.render = compile(template, compilerOptions)
+        Component.render = compile(template, finalCompilerOptions)
         if (__DEV__) {
           endMeasure(instance, `compile`)
         }

packages/runtime-dom/src/index.ts

@@ -58,7 +58,7 @@ export const createApp = ((...args) => {
 
   if (__DEV__) {
     injectNativeTagCheck(app)
-    injectCustomElementCheck(app)
+    injectCompilerOptionsCheck(app)
   }
 
   const { mount } = app
@@ -106,7 +106,7 @@ export const createSSRApp = ((...args) => {
 
   if (__DEV__) {
     injectNativeTagCheck(app)
-    injectCustomElementCheck(app)
+    injectCompilerOptionsCheck(app)
   }
 
   const { mount } = app
@@ -130,21 +130,40 @@ function injectNativeTagCheck(app: App) {
 }
 
 // dev only
-function injectCustomElementCheck(app: App) {
+function injectCompilerOptionsCheck(app: App) {
   if (isRuntimeOnly()) {
-    const value = app.config.isCustomElement
+    const isCustomElement = app.config.isCustomElement
     Object.defineProperty(app.config, 'isCustomElement', {
       get() {
-        return value
+        return isCustomElement
       },
       set() {
         warn(
-          `The \`isCustomElement\` config option is only respected when using the runtime compiler.` +
-            `If you are using the runtime-only build, \`isCustomElement\` must be passed to \`@vue/compiler-dom\` in the build setup instead` +
-            `- for example, via the \`compilerOptions\` option in vue-loader: https://vue-loader.vuejs.org/options.html#compileroptions.`
+          `The \`isCustomElement\` config option is deprecated. Use ` +
+            `\`compilerOptions.isCustomElement\` instead.`
         )
       }
     })
+
+    const compilerOptions = app.config.compilerOptions
+    const msg =
+      `The \`compilerOptions\` config option is only respected when using ` +
+      `a build of Vue.js that includes the runtime compiler (aka "full build"). ` +
+      `Since you are using the runtime-only build, \`compilerOptions\` ` +
+      `must be passed to \`@vue/compiler-dom\` in the build setup instead.\n` +
+      `- For vue-loader: pass it via vue-loader's \`compilerOptions\` loader option.\n` +
+      `- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\n` +
+      `- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom`
+
+    Object.defineProperty(app.config, 'compilerOptions', {
+      get() {
+        warn(msg)
+        return compilerOptions
+      },
+      set() {
+        warn(msg)
+      }
+    })
   }
 }
 

packages/template-explorer/src/options.ts

@@ -14,6 +14,7 @@ export const compilerOptions: CompilerOptions = reactive({
   inline: false,
   ssrCssVars: `{ color }`,
   compatConfig: { MODE: 3 },
+  whitespace: 'condense',
   bindingMetadata: {
     TestComponent: BindingTypes.SETUP_CONST,
     setupRef: BindingTypes.SETUP_REF,
@@ -83,6 +84,32 @@ const App = {
               h('label', { for: 'mode-function' }, 'function')
             ]),
 
+            // whitespace handling
+            h('li', { id: 'whitespace' }, [
+              h('span', { class: 'label' }, 'whitespace: '),
+              h('input', {
+                type: 'radio',
+                id: 'whitespace-condense',
+                name: 'whitespace',
+                checked: compilerOptions.whitespace === 'condense',
+                onChange() {
+                  compilerOptions.whitespace = 'condense'
+                }
+              }),
+              h('label', { for: 'whitespace-condense' }, 'condense'),
+              ' ',
+              h('input', {
+                type: 'radio',
+                id: 'whitespace-preserve',
+                name: 'whitespace',
+                checked: compilerOptions.whitespace === 'preserve',
+                onChange() {
+                  compilerOptions.whitespace = 'preserve'
+                }
+              }),
+              h('label', { for: 'whitespace-preserve' }, 'preserve')
+            ]),
+
             // SSR
             h('li', [
               h('input', {