refactor: move runtime compile error handling to vue

packages/runtime-core/src/apiOptions.ts

@@ -55,7 +55,7 @@ export interface ComponentOptionsBase<
     ctx: SetupContext
   ) => RawBindings | RenderFunction | void
   name?: string
-  template?: string | object // can be a direct DOM node
+  template?: string
   // Note: we are intentionally using the signature-less `Function` type here
   // since any type with signature will cause the whole inference to fail when
   // the return expression contains reference to `this`.

packages/runtime-core/src/component.ts

@@ -24,11 +24,10 @@ import {
   isObject,
   NO,
   makeMap,
-  isPromise,
-  generateCodeFrame
+  isPromise
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
-import { CompilerError, CompilerOptions } from '@vue/compiler-core'
+import { CompilerOptions } from '@vue/compiler-core'
 import { currentRenderingInstance } from './componentRenderUtils'
 
 export type Data = { [key: string]: unknown }
@@ -343,7 +342,7 @@ export function handleSetupResult(
 }
 
 type CompileFunction = (
-  template: string,
+  template: string | object,
   options?: CompilerOptions
 ) => RenderFunction
 
@@ -363,20 +362,7 @@ function finishComponentSetup(
     if (__RUNTIME_COMPILE__ && Component.template && !Component.render) {
       // __RUNTIME_COMPILE__ ensures `compile` is provided
       Component.render = compile!(Component.template, {
-        isCustomElement: instance.appContext.config.isCustomElement || NO,
-        onError(err: CompilerError) {
-          if (__DEV__) {
-            const message = `Template compilation error: ${err.message}`
-            const codeFrame =
-              err.loc &&
-              generateCodeFrame(
-                Component.template!,
-                err.loc.start.offset,
-                err.loc.end.offset
-              )
-            warn(codeFrame ? `${message}\n${codeFrame}` : message)
-          }
-        }
+        isCustomElement: instance.appContext.config.isCustomElement || NO
       })
     }
 
@@ -385,7 +371,7 @@ function finishComponentSetup(
       if (!__RUNTIME_COMPILE__ && Component.template) {
         warn(
           `Component provides template but the build of Vue you are running ` +
-            `does not support on-the-fly template compilation. Either use the ` +
+            `does not support runtime template compilation. Either use the ` +
             `full build or pre-compile the template using Vue CLI.`
         )
       } else {

packages/vue/src/index.ts

@@ -1,9 +1,9 @@
 // This package is the "full-build" that includes both the runtime
 // and the compiler, and supports on-the-fly compilation of the template option.
-import { compile, CompilerOptions } from '@vue/compiler-dom'
+import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'
 import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
-import { isString, NOOP } from '@vue/shared'
+import { isString, NOOP, generateCodeFrame } from '@vue/shared'
 
 const compileCache: Record<string, RenderFunction> = Object.create(null)
 
@@ -37,6 +37,19 @@ function compileToFunction(
   const { code } = compile(template, {
     hoistStatic: true,
     cacheHandlers: true,
+    onError(err: CompilerError) {
+      if (__DEV__) {
+        const message = `Template compilation error: ${err.message}`
+        const codeFrame =
+          err.loc &&
+          generateCodeFrame(
+            template as string,
+            err.loc.start.offset,
+            err.loc.end.offset
+          )
+        warn(codeFrame ? `${message}\n${codeFrame}` : message)
+      }
+    },
     ...options
   })