Vue: Improve generated code snippets

[larsrickert]

relates to #26691

What I did

I created a new improved Vue source code generator that has several improvements compared to the current one:

• use shorthand for truthy booleans: my-prop instead of :my-prop="true"
• Support double quoted strings like my-prop='"I am double quoted"', useful if e.g. passing SVG icon content as props
• use correct source code for arrays (:my-props="['a', 'b']"), currently they are generated as object (:my-prop="{0:'a',1: 'b'}") which is incorrect
• do not render "undefined / null" values
• support for BigInt in props and slots
• support for Symbol in props
• do not add unnecessary <template #default> for default slot without bindings
• improved source code generate when using slots with bindings
• support for <script lang="ts" setup> (automatically move arrays and objects there)
• support for v-models
• support for slots that use VNodes / custom Vue components

Here is an example which compares the most important features of this PR:

Old:

<template>
  <SourceCode
    foo="Example string"
    :bar="42"
    :array="{0:'A',1:'B',2:'C'}"
    :object="{a:'Test A',b:42}"
    model-value="Model value"
  >
    <template #default>Default slot content</template>
    <template #namedSlots="{foo}">
      {{["Plain text", h("div", {
      style: "color:red"
    }, ["Div child", h("span", foo)])]}}
    </template>
  </SourceCode>
</template>

New:

<script lang="ts" setup>
import { ref } from "vue";

const array = ["A","B","C"];

const modelValue = ref("Model value");

const object = {"a":"Test A","b":42};
</script>

<template>
  <SourceCode
    :array="array"
    :bar="42"
    foo="Example string"
    v-model="modelValue"
    :object="object"
  >
    Default slot content

    <template #namedSlots="{ foo }">
      Plain text
      <div style="color:red">
        Div child
        <span>{{ foo }}</span>
      </div>
    </template>
  </SourceCode>
</template>

As reference, here is the Story source for the above example:

export const Default = {
  args: {
    foo: 'Example string',
    bar: 42,
    array: ['A', 'B', 'C'],
    object: {
      a: 'Test A',
      b: 42,
    },
    modelValue: 'Model value',
    default: 'Default slot content',
    namedSlots: ({ foo }) => [
      'Plain text',
      h('div', { style: 'color:red' }, ['Div child', h('span', foo)]),
    ],
  },
} satisfies Story;

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, e.g. yarn task --task sandbox --start-from auto --template vue3-vite/default-ts
2. Open Storybook in your browser
3. Access http://localhost:6006/?path=/docs/stories-renderers-vue3-vue3-vite-default-ts-sourcecode--docs
4. Click on "Show code" to see the generated source code

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>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 22938b9. 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 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[chakAs3]

Great job, @larsrickert! I had some old TODOs regarding slots because the generated code wasn't handling edge cases properly.

[kasperpeulen]

@larsrickert Should be next indeed. I added patch:yes, so that it will automatically patched back to main as well.

Let me now when you are finished with this!

[larsrickert]

@kasperpeulen @chakAs3 This PR is done now from my side :) Would appreciate if you guys have some time to review it.

I have already copied over the changes of this PR into our onyx Storybook for a few weeks now and it works pretty fine so you can also check it out on a live Storybook there if you like.

[chakAs3]

@kasperpeulen @chakAs3 This PR is done now from my side :) Would appreciate if you guys have some time to review it.

I have already copied over the changes of this PR into our onyx Storybook for a few weeks now and it works pretty fine so you can also check it out on a live Storybook there if you like.

I explored the Onyx Storybook and was thoroughly impressed by the multitude of complex snippets. This is a killer feature improvement that sets it apart from other renderers. Plus, integrating this with the vue-component-meta makes the Docs page look incredibly rich. The StorybookVue community should definitely celebrate this achievement. Great job, @larsrickert! @larsrickert

[chakAs3]

The result is awesome, it works fabulously

[kasperpeulen]

Awesome, we will release this next for 8.2.1 :)
8.2.0 is already feature frozen

Could you resolve the conflicts @larsrickert ?

[larsrickert]

@chakAs3 Thanks a lot for the positive feedback! I also think that this is a very advanced feature for the Vue renderer 👍 Should we perhaps write a blog post that showcases the new features? I could collaborate with @joevaugh4n on this

@kasperpeulen Merge conflicts are resolved, feel free to release it whenever it fits your schedule :)

[chakAs3]

@larsrickert Personally, I still find it one of the most—if not the most—attractive features in Storybook, and a blog post about it would certainly highlight its appeal

However there still some conflicts

[kasperpeulen]

@larsrickert At this moment @shilman is managing the blog.

💯 Let's do a blog about this.

[kasperpeulen]

🎉

[kasperpeulen]

@larsrickert Could you check the CI failures?