feat(compiler): emit lazy getter for scoped slot props

Author: Mini-ghost

packages-private/template-explorer/src/options.ts

@@ -22,6 +22,7 @@ export const defaultOptions: CompilerOptions = {
     setupConst: BindingTypes.SETUP_CONST,
     setupLet: BindingTypes.SETUP_LET,
     setupMaybeRef: BindingTypes.SETUP_MAYBE_REF,
+    setupComputed: BindingTypes.SETUP_COMPUTED,
     setupProp: BindingTypes.PROPS,
     vMySetupDir: BindingTypes.SETUP_CONST,
   },

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

@@ -2,15 +2,15 @@
 
 exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = `
 "(_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.props) + " " + _toDisplayString(_unref(setup)) + " " + _toDisplayString(setupConst) + " " + _toDisplayString(_ctx.data) + " " + _toDisplayString(_ctx.options) + " " + _toDisplayString(isNaN.value), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.props) + " " + _toDisplayString(_unref(setup)) + " " + _toDisplayString(setupConst) + " " + _toDisplayString(_ctx.data) + " " + _toDisplayString(_ctx.options) + " " + _toDisplayString(isNaN.value) + " " + _toDisplayString(setupComputed.value), 1 /* TEXT */))
 }"
 `;
 
 exports[`compiler: expression transform > bindingMetadata > non-inline mode 1`] = `
 "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN) + " " + _toDisplayString($setup.setupComputed), 1 /* TEXT */))
 }"
 `;
 

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

@@ -110,6 +110,27 @@ describe('compiler: element transform', () => {
     expect(node.tag).toBe(`_unref(Example)`)
   })
 
+  test('resolve component from setup bindings (SETUP_COMPUTED)', () => {
+    const { root, node } = parseWithElementTransform(`<Example/>`, {
+      bindingMetadata: {
+        Example: BindingTypes.SETUP_COMPUTED,
+      },
+    })
+    expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
+    expect(node.tag).toBe(`$setup["Example"]`)
+  })
+
+  test('resolve component from setup bindings (SETUP_COMPUTED inline)', () => {
+    const { root, node } = parseWithElementTransform(`<Example/>`, {
+      inline: true,
+      bindingMetadata: {
+        Example: BindingTypes.SETUP_COMPUTED,
+      },
+    })
+    expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
+    expect(node.tag).toBe(`_unref(Example)`)
+  })
+
   test('resolve component from setup bindings (inline const)', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       inline: true,
@@ -1028,6 +1049,30 @@ describe('compiler: element transform', () => {
       expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
     })
 
+    test('script setup inline mode template ref (SETUP_COMPUTED binding)', () => {
+      const { node } = parseWithElementTransform(`<input ref="input"/>`, {
+        inline: true,
+        bindingMetadata: {
+          input: BindingTypes.SETUP_COMPUTED,
+        },
+      })
+      expect(node.props).toMatchObject({
+        type: NodeTypes.JS_OBJECT_EXPRESSION,
+        properties: [
+          {
+            type: NodeTypes.JS_PROPERTY,
+            key: { content: 'ref_key', isStatic: true },
+            value: { content: 'input', isStatic: true },
+          },
+          {
+            type: NodeTypes.JS_PROPERTY,
+            key: { content: 'ref', isStatic: true },
+            value: { content: 'input', isStatic: false },
+          },
+        ],
+      })
+    })
+
     test('script setup inline mode template ref (binding exists)', () => {
       const { node } = parseWithElementTransform(`<input ref="input"/>`, {
         inline: true,

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

@@ -618,6 +618,7 @@ describe('compiler: expression transform', () => {
       reactive: BindingTypes.SETUP_REACTIVE_CONST,
       literal: BindingTypes.LITERAL_CONST,
       isNaN: BindingTypes.SETUP_REF,
+      setupComputed: BindingTypes.SETUP_COMPUTED,
     }
 
     function compileWithBindingMetadata(
@@ -633,11 +634,12 @@ describe('compiler: expression transform', () => {
 
     test('non-inline mode', () => {
       const { code } = compileWithBindingMetadata(
-        `<div>{{ props }} {{ setup }} {{ data }} {{ options }} {{ isNaN }}</div>`,
+        `<div>{{ props }} {{ setup }} {{ data }} {{ options }} {{ isNaN }} {{ setupComputed }}</div>`,
       )
       expect(code).toMatch(`$props.props`)
       expect(code).toMatch(`$setup.setup`)
       expect(code).toMatch(`$setup.isNaN`)
+      expect(code).toMatch(`$setup.setupComputed`)
       expect(code).toMatch(`$data.data`)
       expect(code).toMatch(`$options.options`)
       expect(code).toMatch(`_ctx, _cache, $props, $setup, $data, $options`)
@@ -646,7 +648,7 @@ describe('compiler: expression transform', () => {
 
     test('inline mode', () => {
       const { code } = compileWithBindingMetadata(
-        `<div>{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }} {{ isNaN }}</div>`,
+        `<div>{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }} {{ isNaN }} {{ setupComputed }}</div>`,
         { inline: true },
       )
       expect(code).toMatch(`__props.props`)
@@ -655,6 +657,7 @@ describe('compiler: expression transform', () => {
       expect(code).toMatch(`_ctx.data`)
       expect(code).toMatch(`_ctx.options`)
       expect(code).toMatch(`isNaN.value`)
+      expect(code).toMatch(`setupComputed.value`)
       expect(code).toMatchSnapshot()
     })