refactor: move runtime compile error handling to vue

diff --git a/packages/runtime-core/src/apiOptions.ts b/packages/runtime-core/src/apiOptions.ts
index 80e158849f1fc33fd2c0f8402796a0627d0d191e..a3aad5df365ac9884d39ba67034c2f37e6286ac6 100644 (file)
--- a/packages/runtime-core/src/apiOptions.ts
+++ b/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`.

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 8fbd81e82adc435397eb7dd5d169e0cfe54e4222..6da844d63d9a682b626e430c517c3fc8df28cf4b 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/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 {

diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 17b77dfd2edd971620b39cd5d3afa8872a4c20b9..2d45378ffb5eb655bf51fb90fb33ced218eb8dec 100644 (file)
--- a/packages/vue/src/index.ts
+++ b/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
   })