Vue: Extend sourceDecorator to support v-bind and nested keys in slots

[JoCa96]

What I did

Improve code generation for destructured slot bindings:

• updated generateSingleChildSourceCode to use an ES proxy to track how a parameter is accessed by the child.
  • based on how a parameter is used, we can assume v-bind or property binding
• extended tests

Converts the following story tsx

export const Default: Story = {
  args: {
    default: ({ num }) => `Default slot: num=${num}`,
    named: ({ str }) => `Named slot: str=${str}`,
    vbind: ({ num, str, obj }) => [
      `Named v-bind slot: num=${num}, str=${str}, obj.title=${obj.title}`,
      h('br'),
      h('button', obj, 'button'),
      h('br'),
      h('button', { disabled: true, ...obj }, 'merged props'),
    ],
  },
};

into:

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox for template yarn task --task dev --template vue3-vite/default-ts --start-from auto
2. Open Storybook in your browser
3. Access TemplateSlots story (http://localhost:6006/?path=/docs/stories-renderers-vue3-vue3-vite-default-ts-component-meta-templateslots--docs)

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.8 MB	77.8 MB	0 B	1.14	0%
initSize	143 MB	143 MB	0 B	0.98	0%
diffSize	65.6 MB	65.6 MB	0 B	0.98	0%
buildSize	7.19 MB	7.19 MB	0 B	-0.72	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	-0.61	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	0.33	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.92 MB	3.92 MB	0 B	-0.61	0%
buildPreviewSize	3.28 MB	3.28 MB	0 B	-0.73	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.2s	6.9s	-271ms	-1.05	-3.9%
generateTime	19.9s	20.8s	969ms	-0.07	4.6%
initTime	13.9s	17.7s	3.8s	2.02	🔺21.6%
buildTime	8.1s	10s	1.8s	0.88	18.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.3s	4.6s	-2s -651ms	-0.63	-56.5%
devManagerResponsive	4.6s	3.4s	-1s -179ms	-0.69	-33.9%
devManagerHeaderVisible	706ms	608ms	-98ms	-0.17	-16.1%
devManagerIndexVisible	785ms	637ms	-148ms	-0.17	-23.2%
devStoryVisibleUncached	1.6s	1.9s	264ms	0.1	13.6%
devStoryVisible	787ms	643ms	-144ms	-0.19	-22.4%
devAutodocsVisible	642ms	533ms	-109ms	-0.14	-20.5%
devMDXVisible	685ms	515ms	-170ms	-0.43	-33%
buildManagerHeaderVisible	589ms	561ms	-28ms	-0.56	-5%
buildManagerIndexVisible	681ms	660ms	-21ms	-0.46	-3.2%
buildStoryVisible	570ms	550ms	-20ms	-0.48	-3.6%
buildAutodocsVisible	551ms	431ms	-120ms	-0.81	-27.8%
buildMDXVisible	566ms	439ms	-127ms	-0.78	-28.9%

Greptile Summary

Enhanced sourceDecorator to support v-bind and nested keys in Vue slots using ES proxy tracking.

• Updated code/renderers/vue3/src/docs/sourceDecorator.ts to include TRACKING_SYMBOL and TrackingProxy for parameter access tracking.
• Modified generateSlotChildrenSourceCode to utilize proxies for accurate slot bindings.
• Extended tests in code/renderers/vue3/src/docs/sourceDecorator.test.ts to cover new functionalities, ensuring correct source code generation for v-bind and nested keys in slots.

[greptile-apps]

LGTM

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[larsrickert]

LGTM :)

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 2c88aa2.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	15s	View ↗

---

☁️ Nx Cloud last updated this comment at 2024-12-24 17:28:00 UTC

[yannbf]

Hey @JoCa96 thanks a lot for your contribution! We are currently quite busy but will take a look as soon as we can. @kasperpeulen would you mind checking this out once you have time?

[kasperpeulen]

Sorry, for getting back so late. @JoCa96 Could you look at the lint failures? I enabled auto-merge when CI is green.