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.5 MB	77.5 MB	32 B	1.34	0%
initSize	162 MB	162 MB	-172 B	0.65	0%
diffSize	85 MB	85 MB	-204 B	-0.16	0%
buildSize	7.57 MB	7.57 MB	0 B	-0.36	0%
buildSbAddonsSize	1.66 MB	1.66 MB	0 B	-	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.34 MB	2.34 MB	0 B	2	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.55 MB	4.55 MB	0 B	2	0%
buildPreviewSize	3.02 MB	3.02 MB	0 B	-2.86	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	5.7s	17.2s	11.5s	0.41	66.9%
generateTime	20.4s	19.5s	-980ms	-0.44	-5%
initTime	14.7s	15s	318ms	-0.44	2.1%
buildTime	11.3s	11.4s	46ms	0.12	0.4%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.1s	6.5s	446ms	-0.84	6.8%
devManagerResponsive	4s	4.3s	331ms	-0.96	7.6%
devManagerHeaderVisible	711ms	974ms	263ms	1.45	🔺27%
devManagerIndexVisible	752ms	1s	255ms	1.23	25.3%
devStoryVisibleUncached	1.1s	1.3s	249ms	-0.2	18.3%
devStoryVisible	754ms	1s	254ms	1.29	🔺25.2%
devAutodocsVisible	582ms	696ms	114ms	-0.43	16.4%
devMDXVisible	606ms	710ms	104ms	-0.24	14.6%
buildManagerHeaderVisible	625ms	658ms	33ms	-1.31	🔺5%
buildManagerIndexVisible	687ms	722ms	35ms	-0.92	4.8%
buildStoryVisible	688ms	720ms	32ms	-1.2	4.4%
buildAutodocsVisible	650ms	610ms	-40ms	-1.21	-6.6%
buildMDXVisible	611ms	570ms	-41ms	-1.29	🔰-7.2%

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]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a7d6a26. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[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.