diff --git a/packages/runtime-core/__tests__/apiApp.spec.ts b/packages/runtime-core/__tests__/apiApp.spec.ts index a559f5ed..3eb34020 100644 --- a/packages/runtime-core/__tests__/apiApp.spec.ts +++ b/packages/runtime-core/__tests__/apiApp.spec.ts @@ -270,7 +270,7 @@ describe('api: createApp', () => { const handler = (app.config.warnHandler = jest.fn( (msg, instance, trace) => { - expect(msg).toMatch(`Component is missing render function`) + expect(msg).toMatch(`Component is missing template or render function`) expect(instance).toBe(ctx.renderProxy) expect(trace).toMatch(`Hello`) } diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 0b6da59c..c0583746 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -348,37 +348,40 @@ function finishComponentSetup( const Component = instance.type as ComponentOptions if (!instance.render) { if (__RUNTIME_COMPILE__ && Component.template && !Component.render) { - if (compile) { - 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) - } + // __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) } - }) - } else if (__DEV__) { + } + }) + } + if (__DEV__ && !Component.render) { + /* istanbul ignore if */ + 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 ` + `full build or pre-compile the template using Vue CLI.` ) + } else { + warn( + `Component is missing${ + __RUNTIME_COMPILE__ ? ` template or` : `` + } render function.` + ) } } - if (__DEV__ && !Component.render) { - warn( - `Component is missing render function. Either provide a template or ` + - `return a render function from setup().` - ) - } instance.render = (Component.render || NOOP) as RenderFunction } diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts index d121360d..b6676b1f 100644 --- a/packages/vue/__tests__/index.spec.ts +++ b/packages/vue/__tests__/index.spec.ts @@ -1,42 +1,48 @@ import { createApp } from '../src' +import { mockWarn } from '@vue/runtime-test' -it('should support on-the-fly template compilation', () => { - const container = document.createElement('div') - const App = { - template: `{{ count }}`, - data() { - return { - count: 0 +describe('compiler + runtime integration', () => { + mockWarn() + + it('should support on-the-fly template compilation', () => { + const container = document.createElement('div') + const App = { + template: `{{ count }}`, + data() { + return { + count: 0 + } } } - } - createApp().mount(App, container) - expect(container.innerHTML).toBe(`0`) -}) + createApp().mount(App, container) + expect(container.innerHTML).toBe(`0`) + }) -it('should correctly normalize class with on-the-fly template compilation', () => { - const container = document.createElement('div') - const App = { - template: `
`, - data() { - return { - demoValue: true - } + it('should warn template compilation errors with codeframe', () => { + const container = document.createElement('div') + const App = { + template: `