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

[chakAs3]

I appreciate your approach of preserving the previous code as legacy. However, it seems like your new code could be integrated as an improvement. Could you clarify why it's necessary to retain the legacy code since no major features appear to be overridden?

[larsrickert]

I think my point was about the <script setup> feature. Currently there is an opt-in parameter the user can set to move props to the <script> section.

My goal would be to automatically move complex props (object, arrays and functions) to the <script> section and keep primitive props (string, Boolean, number) inside the .

This is not breaking change on its own but it could break code snippets of projects that use custom source code transformers to e.g. add import statements etc. But if you say that’s not considered a breaking change for Storybook I am totally finde since it’s probably a rare edge case.

[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 I am basically done with this PR.
I only need to check one minor issue that the slot bindings are not generated correctly when running storybook build due to the JavaScript minification.
But thats just one small fix, you can already review the code :)