-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue: Improve generated code snippets #27194
base: main
Are you sure you want to change the base?
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit a7d29c3. 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 targetsSent with 💌 from NxCloud. |
Relates to #1078, #414 - simplified some Stories - refactor oynx icon import code transformer to work globally so we don't need to add it to every component that uses icons - temporarily copy over improved source code generation until it is released in Storybook itself (see storybookjs/storybook#27194)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job, @larsrickert! I had some old TODOs regarding slots because the generated code wasn't handling edge cases properly.
import { extractArgTypes } from './docs/extractArgTypes'; | ||
import { sourceCodeDecorator } from './docs/source-code-generator'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
@larsrickert Should be Let me now when you are finished with this! |
relates to #26691
the PR is targeted to the
main
branch, is this correct or should it benext
?What I did
I created a new improved Vue source code generator that has several improvements compared to the current one:
my-prop
instead of:my-prop="true"
my-prop='"I am double quoted"'
, useful if e.g. passing SVG icon content as props:my-props="['a', 'b']"
), currently they are generated as object (:my-prop="{0:'a',1: 'b'}"
) which is incorrect<template #default>
for default slot without bindingsThe most important feature of this PR: Support source code for slots that use VNodes / custom Vue components:
Currently you can already use Vue's
h()
function to pass custom Vue components or HTML content to slots which are then rendered in the Story. This is very useful since you don't need to use a custom render function then which uses atemplate
string (no type-safety, intellisense etc.).Check the below example of a nav bar that we are currently working on for the onyx design system where the nav items are passed as slot.
However, the generated source code previously looked like this which is unusable:
With the new source code generator, all VNodes including nested children are generated as expected like this:
As reference, here is the Story source for the above example:
*Current limitations / open TODOs (some could be done in follow up PRs)*:
:my-prop="() => 42"
or@click="() => ({})"
<script lang="ts" setup>
and e.g. automatically place complex values like objects and arrays there instead of inlining them in<template>
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
yarn task --task sandbox --start-from auto --template vue3-vite/default-ts
code/renderers/vue3/src/entry-preview-docs.ts
and changing thecodeSnippetType
tolegacy
code code && yarn build vue3
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal
,ci:merged
orci:daily
GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/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>