diff --git a/packages/runtime-core/src/apiOptions.ts b/packages/runtime-core/src/apiOptions.ts index 80e15884..a3aad5df 100644 --- 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 8fbd81e8..6da844d6 100644 --- 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 17b77dfd..2d45378f 100644 --- 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 = 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 })