chore: annotate generated slot flag

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

@@ -29,7 +29,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
     default: _withId(() => [
       _createVNode(\\"div\\")
     ]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 })"
 `;
@@ -41,7 +41,7 @@ const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 }, [
+  return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
           name: \\"foo\\",
@@ -76,7 +76,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
     bar: _withId(() => [
       _createVNode(\\"div\\")
     ]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 })"
 `;

packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap

@@ -247,7 +247,7 @@ return function render(_ctx, _cache) {
       default: _withCtx(({ foo }) => [
         _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
       ]),
-      _: 1
+      _: 1 /* STABLE */
     }))
   }
 }"

packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap

@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     [_ctx.two]: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
-    _: 2
+    _: 2 /* DYNAMIC */
   }, 1024 /* DYNAMIC_SLOTS */))
 }"
 `;
@@ -24,7 +24,7 @@ return function render(_ctx, _cache) {
     default: _withCtx(() => [
       _createVNode(\\"div\\")
     ]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 }"
 `;
@@ -35,7 +35,7 @@ exports[`compiler: transform component slots named slot with v-for w/ prefixIden
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
+  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     _renderList(_ctx.list, (name) => {
       return {
         name: name,
@@ -52,7 +52,7 @@ exports[`compiler: transform component slots named slot with v-if + prefixIdenti
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
+  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
           name: \\"one\\",
@@ -72,7 +72,7 @@ return function render(_ctx, _cache) {
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
+    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
             name: \\"one\\",
@@ -101,7 +101,7 @@ return function render(_ctx, _cache) {
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
+    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
             name: \\"one\\",
@@ -128,7 +128,7 @@ return function render(_ctx, _cache) {
         \\"bar\\",
         _createVNode(\\"span\\")
       ]),
-      _: 1
+      _: 1 /* STABLE */
     }))
   }
 }"
@@ -145,14 +145,14 @@ return function render(_ctx, _cache) {
     default: _withCtx(({ foo }) => [
       _createVNode(_component_Inner, null, {
         default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
-        _: 2
+        _: 2 /* DYNAMIC */
       }, 1024 /* DYNAMIC_SLOTS */),
       \\" \\",
       _toDisplayString(foo),
       _toDisplayString(_ctx.bar),
       _toDisplayString(_ctx.baz)
     ]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 }"
 `;
@@ -165,7 +165,7 @@ return function render(_ctx, _cache) {
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
-    _: 2
+    _: 2 /* DYNAMIC */
   }, 1024 /* DYNAMIC_SLOTS */))
 }"
 `;
@@ -178,7 +178,7 @@ return function render(_ctx, _cache) {
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 }"
 `;
@@ -191,7 +191,7 @@ return function render(_ctx, _cache) {
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 }"
 `;
@@ -205,7 +205,7 @@ return function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_component_Comp, null, {
     one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
-    _: 1
+    _: 1 /* STABLE */
   }))
 }"
 `;

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

@@ -329,13 +329,13 @@ describe('compiler: element transform', () => {
               fallback: {
                 type: NodeTypes.JS_FUNCTION_EXPRESSION
               },
-              _: `[1]`
+              _: `[1 /* STABLE */]`
             })
           : createObjectMatcher({
               default: {
                 type: NodeTypes.JS_FUNCTION_EXPRESSION
               },
-              _: `[1]`
+              _: `[1 /* STABLE */]`
             })
       })
     }
@@ -389,7 +389,7 @@ describe('compiler: element transform', () => {
           default: {
             type: NodeTypes.JS_FUNCTION_EXPRESSION
           },
-          _: `[1]`
+          _: `[1 /* STABLE */]`
         })
       })
     }

packages/compiler-core/__tests__/transforms/vSlot.spec.ts

@@ -70,7 +70,10 @@ function createSlotMatcher(obj: Record<string, any>, isDynamic = false) {
       })
       .concat({
         key: { content: `_` },
-        value: { content: isDynamic ? `2` : `1`, isStatic: false }
+        value: {
+          content: isDynamic ? `2 /* DYNAMIC */` : `1 /* STABLE */`,
+          isStatic: false
+        }
       })
   }
 }
@@ -531,7 +534,7 @@ describe('compiler: transform component slots', () => {
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2]`
+          _: `[2 /* DYNAMIC */]`
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -573,7 +576,7 @@ describe('compiler: transform component slots', () => {
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2]`
+          _: `[2 /* DYNAMIC */]`
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -622,7 +625,7 @@ describe('compiler: transform component slots', () => {
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2]`
+          _: `[2 /* DYNAMIC */]`
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -681,7 +684,7 @@ describe('compiler: transform component slots', () => {
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2]`
+          _: `[2 /* DYNAMIC */]`
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -730,7 +733,7 @@ describe('compiler: transform component slots', () => {
         },
         {
           key: { content: `_` },
-          value: { content: `3` } // forwarded
+          value: { content: `3 /* FORWARDED */` }
         }
       ]
     })

packages/compiler-core/src/transforms/vSlot.ts

@@ -33,7 +33,7 @@ import {
 } from '../utils'
 import { CREATE_SLOTS, RENDER_LIST, WITH_CTX } from '../runtimeHelpers'
 import { parseForExpression, createForLoopParams } from './vFor'
-import { SlotFlags } from '@vue/shared'
+import { SlotFlags, slotFlagsText } from '@vue/shared'
 
 const defaultFallback = createSimpleExpression(`undefined`, false)
 
@@ -334,7 +334,10 @@ export function buildSlots(
         `_`,
         // 2 = compiled but dynamic = can skip normalization, but must run diff
         // 1 = compiled and static = can skip normalization AND diff as optimized
-        createSimpleExpression('' + slotFlag, false)
+        createSimpleExpression(
+          slotFlag + (__DEV__ ? ` /* ${slotFlagsText[slotFlag]} */` : ``),
+          false
+        )
       )
     ),
     loc

packages/compiler-ssr/__tests__/ssrComponent.spec.ts

@@ -59,7 +59,7 @@ describe('ssr: components', () => {
                 ]
               }
             }),
-            _: 1
+            _: 1 /* STABLE */
           }, _parent))
         }"
       `)
@@ -84,7 +84,7 @@ describe('ssr: components', () => {
                 ]
               }
             }),
-            _: 1
+            _: 1 /* STABLE */
           }, _parent))
         }"
       `)
@@ -122,7 +122,7 @@ describe('ssr: components', () => {
                 ]
               }
             }),
-            _: 1
+            _: 1 /* STABLE */
           }, _parent))
         }"
       `)
@@ -140,7 +140,7 @@ describe('ssr: components', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           const _component_foo = _resolveComponent(\\"foo\\")
 
-          _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 }, [
+          _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             (_ctx.ok)
               ? {
                   name: \\"named\\",
@@ -172,7 +172,7 @@ describe('ssr: components', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           const _component_foo = _resolveComponent(\\"foo\\")
 
-          _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 }, [
+          _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             _renderList(_ctx.names, (key) => {
               return {
                 name: key,
@@ -260,7 +260,7 @@ describe('ssr: components', () => {
                 ]
               }
             }),
-            _: 1
+            _: 1 /* STABLE */
           }, _parent))
         }"
       `)

packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts

@@ -106,7 +106,7 @@ describe('ssr: inject <style vars>', () => {
           default: () => {
             _push(\`<div\${_ssrRenderAttrs(_cssVars)}>ok</div>\`)
           },
-          _: 1
+          _: 1 /* STABLE */
         })
       }"
     `)

packages/compiler-ssr/__tests__/ssrScopeId.spec.ts

@@ -45,7 +45,7 @@ describe('ssr: scopeId', () => {
               ]
             }
           }),
-          _: 1
+          _: 1 /* STABLE */
         }, _parent))
       })"
     `)
@@ -75,7 +75,7 @@ describe('ssr: scopeId', () => {
               ]
             }
           }),
-          _: 1
+          _: 1 /* STABLE */
         }, _parent))
       })"
     `)
@@ -110,7 +110,7 @@ describe('ssr: scopeId', () => {
                     ]
                   }
                 }),
-                _: 1
+                _: 1 /* STABLE */
               }, _parent))
             } else {
               return [
@@ -119,12 +119,12 @@ describe('ssr: scopeId', () => {
                   default: _withId(() => [
                     _createVNode(\\"span\\")
                   ]),
-                  _: 1
+                  _: 1 /* STABLE */
                 })
               ]
             }
           }),
-          _: 1
+          _: 1 /* STABLE */
         }, _parent))
       })"
     `)

packages/compiler-ssr/__tests__/ssrSuspense.spec.ts

@@ -13,7 +13,7 @@ describe('ssr compile: suspense', () => {
           default: () => {
             _push(_ssrRenderComponent(_component_foo, null, null, _parent))
           },
-          _: 1
+          _: 1 /* STABLE */
         })
       }"
     `)
@@ -43,7 +43,7 @@ describe('ssr compile: suspense', () => {
           fallback: () => {
             _push(\` loading... \`)
           },
-          _: 1
+          _: 1 /* STABLE */
         })
       }"
     `)

packages/shared/src/slotFlags.ts

@@ -19,3 +19,12 @@ export const enum SlotFlags {
    */
   FORWARDED = 3
 }
+
+/**
+ * Dev only
+ */
+export const slotFlagsText = {
+  [SlotFlags.STABLE]: 'STABLE',
+  [SlotFlags.DYNAMIC]: 'DYNAMIC',
+  [SlotFlags.FORWARDED]: 'FORWARDED'
+}