theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: remove deprecated scopeId codegen

Browse Source 
BREAKING CHANGE: Output of SFC using `<style scoped>` generated by 3.2+
will be incompatible w/ runtime <3.2.
This commit is contained in:
Evan You 2021-07-14 10:04:35 -04:00
parent 1c7d737cc8
commit f596e008ef
7 changed files with 12 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
View File

@ -2,14 +2,13 @@
exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
_pushScopeId(\\"test\\")
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
_popScopeId()
export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
@ -20,9 +19,8 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
exports[`scopeId compiler support should wrap default slot 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, {
@ -36,9 +34,8 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
exports[`scopeId compiler support should wrap dynamic slots 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
@ -64,9 +61,8 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
exports[`scopeId compiler support should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, {

30
packages/compiler-core/src/codegen.ts
View File

@ -234,14 +234,7 @@ export function generate(
? args.map(arg => `${arg}: any`).join(',')
: args.join(', ')
if (genScopeId && !isSetupInlined) {
// root-level _withId wrapping is no longer necessary after 3.0.8 and is
// a noop, it's only kept so that code compiled with 3.0.8+ can run with
// runtime < 3.0.8.
// TODO: consider removing in 3.1
push(`const ${functionName} = ${PURE_ANNOTATION}${WITH_ID}(`)
}
if (isSetupInlined || genScopeId) {
if (isSetupInlined) {
push(`(${signature}) => {`)
} else {
push(`function ${functionName}(${signature}) {`)
@ -390,14 +383,7 @@ function genModulePreamble(
genScopeId: boolean,
inline?: boolean
) {
const {
push,
newline,
optimizeImports,
runtimeModuleName,
scopeId,
helper
} = context
const { push, newline, optimizeImports, runtimeModuleName } = context
if (genScopeId) {
ast.helpers.push(WITH_SCOPE_ID)
@ -446,18 +432,6 @@ function genModulePreamble(
newline()
}
// we technically don't need this anymore since `withCtx` already sets the
// correct scopeId, but this is necessary for backwards compat
// TODO: consider removing in 3.1
if (genScopeId) {
push(
`const ${WITH_ID} = ${PURE_ANNOTATION}${helper(
WITH_SCOPE_ID
)}("${scopeId}")`
)
newline()
}
genHoists(ast.hoists, context)
newline()

1
packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View File

@ -326,7 +326,6 @@ return (_ctx, _cache) => {
exports[`SFC compile <script setup> inlineTemplate mode should not wrap render fn with withId when having scoped styles 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxxx\\")
export default {

26
packages/compiler-sfc/__tests__/compileScript.spec.ts
View File

@ -476,32 +476,6 @@ defineExpose({ foo: 123 })
expect(content).toMatch(`ssrInterpolate`)
assertCode(content)
})
// _withId is only generated for backwards compat and is a noop when called
// in module scope.
// when inside setup(), currentInstance will be non-null and _withId will
// no longer be noop and cause scopeId errors.
// TODO: this test should no longer be necessary if we remove _withId
// codegen in 3.1
test('should not wrap render fn with withId when having scoped styles', async () => {
const { content } = compile(
`
<script setup>
const msg = 1
</script>
<template><h1>{{ msg }}</h1></template>
<style scoped>
h1 { color: red; }
</style>
`,
{
inlineTemplate: true
}
)
expect(content).toMatch(`return (_ctx, _cache`)
expect(content).not.toMatch(`_withId(`)
assertCode(content)
})
})
describe('with TypeScript', () => {

9
packages/compiler-sfc/src/compileScript.ts
View File

@ -148,15 +148,6 @@ export function compileScript(
)
}
// TODO remove on 3.2
if (sfc.template && sfc.template.attrs['inherit-attrs'] === 'false') {
warnOnce(
`Experimental support for <template inherit-attrs="false"> support has ` +
`been removed. Use a <script> block with \`export default\` to ` +
`declare options.`
)
}
const scopeId = options.id ? options.id.replace(/^data-v-/, '') : ''
const cssVars = sfc.cssVars
const scriptLang = script && script.lang

12
packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
View File

@ -12,9 +12,8 @@ describe('ssr: scopeId', () => {
).toMatchInlineSnapshot(`
"import { withScopeId as _withScopeId } from \\"vue\\"
import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
})"
`)
@ -30,9 +29,8 @@ describe('ssr: scopeId', () => {
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode, withScopeId as _withScopeId } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
@ -60,9 +58,8 @@ describe('ssr: scopeId', () => {
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
@ -90,9 +87,8 @@ describe('ssr: scopeId', () => {
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")

4
packages/runtime-core/src/compat/compatConfig.ts
View File

@ -552,8 +552,8 @@ export function validateCompatConfig(
warn(
`Deprecation config "${key}" is compiler-specific and you are ` +
`running a runtime-only build of Vue. This deprecation should be ` +
`configured via compiler options in your build setup instead.`
// TODO link to migration build docs on build setup
`configured via compiler options in your build setup instead.\n` +
`Details: https://v3.vuejs.org/guide/migration/migration-build.html`
)
}
} else {