refactor: remove deprecated scopeId codegen
BREAKING CHANGE: Output of SFC using `<style scoped>` generated by 3.2+ will be incompatible w/ runtime <3.2.
This commit is contained in:
parent
1c7d737cc8
commit
f596e008ef
@ -2,14 +2,13 @@
|
|||||||
|
|
||||||
exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
|
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\\"
|
"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\\")
|
_pushScopeId(\\"test\\")
|
||||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
|
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
|
||||||
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
|
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
|
||||||
_popScopeId()
|
_popScopeId()
|
||||||
|
|
||||||
export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
|
export function render(_ctx, _cache) {
|
||||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||||
_hoisted_1,
|
_hoisted_1,
|
||||||
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
|
_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`] = `
|
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\\"
|
"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\\")
|
const _component_Child = _resolveComponent(\\"Child\\")
|
||||||
|
|
||||||
return (_openBlock(), _createBlock(_component_Child, null, {
|
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`] = `
|
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\\"
|
"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\\")
|
const _component_Child = _resolveComponent(\\"Child\\")
|
||||||
|
|
||||||
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
|
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`] = `
|
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\\"
|
"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\\")
|
const _component_Child = _resolveComponent(\\"Child\\")
|
||||||
|
|
||||||
return (_openBlock(), _createBlock(_component_Child, null, {
|
return (_openBlock(), _createBlock(_component_Child, null, {
|
||||||
|
@ -234,14 +234,7 @@ export function generate(
|
|||||||
? args.map(arg => `${arg}: any`).join(',')
|
? args.map(arg => `${arg}: any`).join(',')
|
||||||
: args.join(', ')
|
: args.join(', ')
|
||||||
|
|
||||||
if (genScopeId && !isSetupInlined) {
|
if (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) {
|
|
||||||
push(`(${signature}) => {`)
|
push(`(${signature}) => {`)
|
||||||
} else {
|
} else {
|
||||||
push(`function ${functionName}(${signature}) {`)
|
push(`function ${functionName}(${signature}) {`)
|
||||||
@ -390,14 +383,7 @@ function genModulePreamble(
|
|||||||
genScopeId: boolean,
|
genScopeId: boolean,
|
||||||
inline?: boolean
|
inline?: boolean
|
||||||
) {
|
) {
|
||||||
const {
|
const { push, newline, optimizeImports, runtimeModuleName } = context
|
||||||
push,
|
|
||||||
newline,
|
|
||||||
optimizeImports,
|
|
||||||
runtimeModuleName,
|
|
||||||
scopeId,
|
|
||||||
helper
|
|
||||||
} = context
|
|
||||||
|
|
||||||
if (genScopeId) {
|
if (genScopeId) {
|
||||||
ast.helpers.push(WITH_SCOPE_ID)
|
ast.helpers.push(WITH_SCOPE_ID)
|
||||||
@ -446,18 +432,6 @@ function genModulePreamble(
|
|||||||
newline()
|
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)
|
genHoists(ast.hoists, context)
|
||||||
newline()
|
newline()
|
||||||
|
|
||||||
|
@ -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`] = `
|
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\\"
|
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId } from \\"vue\\"
|
||||||
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxxx\\")
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -476,32 +476,6 @@ defineExpose({ foo: 123 })
|
|||||||
expect(content).toMatch(`ssrInterpolate`)
|
expect(content).toMatch(`ssrInterpolate`)
|
||||||
assertCode(content)
|
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', () => {
|
describe('with TypeScript', () => {
|
||||||
|
@ -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 scopeId = options.id ? options.id.replace(/^data-v-/, '') : ''
|
||||||
const cssVars = sfc.cssVars
|
const cssVars = sfc.cssVars
|
||||||
const scriptLang = script && script.lang
|
const scriptLang = script && script.lang
|
||||||
|
@ -12,9 +12,8 @@ describe('ssr: scopeId', () => {
|
|||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
"import { withScopeId as _withScopeId } from \\"vue\\"
|
"import { withScopeId as _withScopeId } from \\"vue\\"
|
||||||
import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\"
|
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>\`)
|
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
|
||||||
})"
|
})"
|
||||||
`)
|
`)
|
||||||
@ -30,9 +29,8 @@ describe('ssr: scopeId', () => {
|
|||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode, withScopeId as _withScopeId } from \\"vue\\"
|
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode, withScopeId as _withScopeId } from \\"vue\\"
|
||||||
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
|
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_foo = _resolveComponent(\\"foo\\")
|
||||||
|
|
||||||
_push(_ssrRenderComponent(_component_foo, _attrs, {
|
_push(_ssrRenderComponent(_component_foo, _attrs, {
|
||||||
@ -60,9 +58,8 @@ describe('ssr: scopeId', () => {
|
|||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
|
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
|
||||||
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
|
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_foo = _resolveComponent(\\"foo\\")
|
||||||
|
|
||||||
_push(_ssrRenderComponent(_component_foo, _attrs, {
|
_push(_ssrRenderComponent(_component_foo, _attrs, {
|
||||||
@ -90,9 +87,8 @@ describe('ssr: scopeId', () => {
|
|||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
|
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
|
||||||
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
|
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_foo = _resolveComponent(\\"foo\\")
|
||||||
const _component_bar = _resolveComponent(\\"bar\\")
|
const _component_bar = _resolveComponent(\\"bar\\")
|
||||||
|
|
||||||
|
@ -552,8 +552,8 @@ export function validateCompatConfig(
|
|||||||
warn(
|
warn(
|
||||||
`Deprecation config "${key}" is compiler-specific and you are ` +
|
`Deprecation config "${key}" is compiler-specific and you are ` +
|
||||||
`running a runtime-only build of Vue. This deprecation should be ` +
|
`running a runtime-only build of Vue. This deprecation should be ` +
|
||||||
`configured via compiler options in your build setup instead.`
|
`configured via compiler options in your build setup instead.\n` +
|
||||||
// TODO link to migration build docs on build setup
|
`Details: https://v3.vuejs.org/guide/migration/migration-build.html`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user