refactor: remove deprecated scopeId codegen

BREAKING CHANGE: Output of SFC using `<style scoped>` generated by 3.2+ will be incompatible w/ runtime <3.2.
vuejs · Jul 16, 2021 · f596e00 · f596e00
1 parent 1c7d737
commit f596e00
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 82 deletions.
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -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, {

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
@@ -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()
 

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -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 {

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -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', () => {

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -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

diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
@@ -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\\")
 

diff --git a/packages/runtime-core/src/compat/compatConfig.ts b/packages/runtime-core/src/compat/compatConfig.ts
@@ -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 {