From 5913e01d6b7aa072eeed34e8100becd84eb87a5d Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 26 Apr 2021 12:21:36 -0400 Subject: [PATCH] wip: whitespace behavior compat --- .../runtime-core/src/compat/compatConfig.ts | 10 ++++ packages/runtime-core/src/compat/global.ts | 10 ++-- packages/vue-compat/src/createCompatVue.ts | 46 +++++++++++++++++++ packages/vue-compat/src/index.ts | 17 ++++--- packages/vue-compat/src/runtime.ts | 46 ++----------------- 5 files changed, 76 insertions(+), 53 deletions(-) create mode 100644 packages/vue-compat/src/createCompatVue.ts diff --git a/packages/runtime-core/src/compat/compatConfig.ts b/packages/runtime-core/src/compat/compatConfig.ts index f8a4b52e..e036be5f 100644 --- a/packages/runtime-core/src/compat/compatConfig.ts +++ b/packages/runtime-core/src/compat/compatConfig.ts @@ -24,6 +24,7 @@ export const enum DeprecationTypes { CONFIG_KEY_CODES = 'CONFIG_KEY_CODES', CONFIG_PRODUCTION_TIP = 'CONFIG_PRODUCTION_TIP', CONFIG_IGNORED_ELEMENTS = 'CONFIG_IGNORED_ELEMENTS', + CONFIG_WHITESPACE = 'CONFIG_WHITESPACE', INSTANCE_SET = 'INSTANCE_SET', INSTANCE_DELETE = 'INSTANCE_DELETE', @@ -162,6 +163,15 @@ const deprecationData: Record = { link: `https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-iscustomelement` }, + [DeprecationTypes.CONFIG_WHITESPACE]: { + // this warning is only relevant in the full build when using runtime + // compilation, so it's put in the runtime compatConfig list. + message: + `Vue 3 compiler's whitespace option will default to "condense" instead of ` + + `"preserve". To suppress this warning, provide an explicit value for ` + + `\`config.compilerOptions.whitespace\`.` + }, + [DeprecationTypes.INSTANCE_SET]: { message: `vm.$set() has been removed as it is no longer needed in Vue 3. ` + diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts index 45b9a2ad..16f3a9a5 100644 --- a/packages/runtime-core/src/compat/global.ts +++ b/packages/runtime-core/src/compat/global.ts @@ -141,13 +141,15 @@ export function createCompatVue( // copy over global config mutations isCopyingConfig = true for (const key in singletonApp.config) { + if (key === 'isNativeTag') continue if ( - key !== 'isNativeTag' && - !(key === 'isCustomElement' && isRuntimeOnly()) + isRuntimeOnly() && + (key === 'isCustomElement' || key === 'compilerOptions') ) { - // @ts-ignore - app.config[key] = singletonApp.config[key] + continue } + // @ts-ignore + app.config[key] = singletonApp.config[key] } isCopyingConfig = false diff --git a/packages/vue-compat/src/createCompatVue.ts b/packages/vue-compat/src/createCompatVue.ts new file mode 100644 index 00000000..c9c2b867 --- /dev/null +++ b/packages/vue-compat/src/createCompatVue.ts @@ -0,0 +1,46 @@ +// This entry exports the runtime only, and is built as +// `dist/vue.esm-bundler.js` which is used by default for bundlers. +import { initDev } from './dev' +import { + compatUtils, + createApp, + Transition, + TransitionGroup, + KeepAlive, + DeprecationTypes, + vShow, + vModelDynamic +} from '@vue/runtime-dom' +import { extend } from '@vue/shared' + +if (__DEV__) { + initDev() +} + +import * as runtimeDom from '@vue/runtime-dom' + +function wrappedCreateApp(...args: any[]) { + // @ts-ignore + const app = createApp(...args) + if (compatUtils.isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, null)) { + // register built-in components so that they can be resolved via strings + // in the legacy h() call. The __compat__ prefix is to ensure that v3 h() + // doesn't get affected. + app.component('__compat__transition', Transition) + app.component('__compat__transition-group', TransitionGroup) + app.component('__compat__keep-alive', KeepAlive) + // built-in directives. No need for prefix since there's no render fn API + // for resolving directives via string in v3. + app._context.directives.show = vShow + app._context.directives.model = vModelDynamic + } + return app +} + +export function createCompatVue() { + const Vue = compatUtils.createCompatVue(wrappedCreateApp) + extend(Vue, runtimeDom) + // @ts-ignore + Vue.createApp = wrappedCreateApp + return Vue +} diff --git a/packages/vue-compat/src/index.ts b/packages/vue-compat/src/index.ts index 6421b939..bcfb3b62 100644 --- a/packages/vue-compat/src/index.ts +++ b/packages/vue-compat/src/index.ts @@ -1,16 +1,15 @@ // This entry is the "full-build" that includes both the runtime // and the compiler, and supports on-the-fly compilation of the template option. -import { initDev } from './dev' +import { createCompatVue } from './createCompatVue' import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom' import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom' import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared' import { InternalRenderFunction } from 'packages/runtime-core/src/component' import * as runtimeDom from '@vue/runtime-dom' -import Vue from './runtime' - -if (__DEV__) { - initDev() -} +import { + DeprecationTypes, + warnDeprecation +} from '../../runtime-core/src/compat/compatConfig' const compileCache: Record = Object.create(null) @@ -45,11 +44,16 @@ function compileToFunction( template = el ? el.innerHTML : `` } + if (__DEV__ && !__TEST__ && (!options || !options.whitespace)) { + warnDeprecation(DeprecationTypes.CONFIG_WHITESPACE, null) + } + const { code } = compile( template, extend( { hoistStatic: true, + whitespace: 'preserve', onError: __DEV__ ? onError : undefined, onWarn: __DEV__ ? e => onError(e, true) : NOOP } as CompilerOptions, @@ -87,6 +91,7 @@ function compileToFunction( registerRuntimeCompiler(compileToFunction) +const Vue = createCompatVue() Vue.compile = compileToFunction export default Vue diff --git a/packages/vue-compat/src/runtime.ts b/packages/vue-compat/src/runtime.ts index 38ee5cff..76370b84 100644 --- a/packages/vue-compat/src/runtime.ts +++ b/packages/vue-compat/src/runtime.ts @@ -1,44 +1,9 @@ // This entry exports the runtime only, and is built as // `dist/vue.esm-bundler.js` which is used by default for bundlers. -import { initDev } from './dev' -import { - compatUtils, - createApp, - warn, - Transition, - TransitionGroup, - KeepAlive, - DeprecationTypes, - vShow, - vModelDynamic -} from '@vue/runtime-dom' -import { extend } from '@vue/shared' +import { createCompatVue } from './createCompatVue' +import { warn } from '@vue/runtime-core' -if (__DEV__) { - initDev() -} - -import * as runtimeDom from '@vue/runtime-dom' - -function wrappedCreateApp(...args: any[]) { - // @ts-ignore - const app = createApp(...args) - if (compatUtils.isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, null)) { - // register built-in components so that they can be resolved via strings - // in the legacy h() call. The __compat__ prefix is to ensure that v3 h() - // doesn't get affected. - app.component('__compat__transition', Transition) - app.component('__compat__transition-group', TransitionGroup) - app.component('__compat__keep-alive', KeepAlive) - // built-in directives. No need for prefix since there's no render fn API - // for resolving directives via string in v3. - app._context.directives.show = vShow - app._context.directives.model = vModelDynamic - } - return app -} - -const Vue = compatUtils.createCompatVue(wrappedCreateApp) +const Vue = createCompatVue() Vue.compile = (() => { if (__DEV__) { @@ -55,9 +20,4 @@ Vue.compile = (() => { } }) as any -extend(Vue, runtimeDom) - -// @ts-ignore -Vue.createApp = wrappedCreateApp - export default Vue