Skip to content
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

Web-components: Fix source decorator to handle document fragments #22513

Merged

Conversation

bashmish
Copy link
Contributor

What I did

I'm migrating our company's setup from Storybook 6 to Storybook 7 and ran into the issue with one of our decorators. Let me explain what it does first.

We have a custom decorator to allow rendering stories explicitly with Lit 1 and Lit 2 to help in migration for Lit 1 -> 2.

export const withLitCompat = render =>
  makeDecorator({
    name: 'withLitCompat',
    parameterName: 'litCompat',
    wrapper: (getStory, context) => {
      const fragment = document.createDocumentFragment();
      render(getStory(context), fragment);
      return fragment;
    },
  });

Then you can configure what lit version you want your stories to be rendered with, e.g.:

// preview.js
import { render } from 'my-design-system/lit-1.js';
import { withLitCompat } from 'path/to/with-lit-compat.js';

export const decorators = [
  withLitCompat(render),
];

Storybook 7 changed the order of decorators, so the sourceDecorator is executed after our custom decorators, which results in the following bug:

  • document fragment with child nodes containing the story is passed from withLitCompat to sourceDecorator
  • document fragment gets rendered in sourceDecorator by Lit which moves its child nodes to the new div, leaving it empty
  • document fragment (now empty) is passed further to the renderToCanvas which renders empty document fragment

This fix makes sure to clone the document fragment to prevent moving of the child nodes which fixes this bug.

How to test

Unit test is provided to verify correct document fragment handling.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

@bashmish
Copy link
Contributor Author

I made a PR into main, although the default was into next. I tried to find some guidance on that, but could't, so made a decision myself in favor of main, as next seemed a bit further away from now. But I'm fine to change this and make a PR into next if necessary.

@shilman
Copy link
Member

shilman commented May 11, 2023

Thanks so much for this @bashmish ! Please target next and we'll patch bugfixes back to main.

@shilman shilman added bug patch:yes Bugfix & documentation PR that need to be picked to main branch addon: docs block: source web-components labels May 11, 2023
@shilman shilman changed the title Fix WC source decorator to handle document fragment correctly Web-components: Fix source decorator to handle document fragments May 11, 2023
@bashmish bashmish force-pushed the fix/wc-source-decorator-document-fragment branch from 986a525 to 7eb6f35 Compare May 11, 2023 08:54
@bashmish bashmish changed the base branch from main to next May 11, 2023 08:54
@bashmish
Copy link
Contributor Author

@shilman sure, done :)

@shilman shilman merged commit b0877c7 into storybookjs:next May 11, 2023
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label May 12, 2023
shilman added a commit that referenced this pull request May 12, 2023
…ent-fragment

Web-components: Fix source decorator to handle document fragments
@shilman shilman mentioned this pull request May 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: docs block: source bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch web-components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants