Fixtures conflicts with controls on Vue

[j-a-m-l]

Hi!

I can't get both controls and fixtures working at the same time on Vue. The example doesn't include that, so how could tht be done? I've tried several ideas but none of them worked.

My code is something like:

const Template = (args, { argTypes, fixture }) => {
  return {
    component: Table,
    props: Object.keys(argTypes),
    template: '<Table v-bind="$props" />'
  }
}

export const SomeRows = Template.bind({})
SomeRows.args = {
  rows: [
    { text: 'Value 1' },
    { text: 'Value 2' }
  ]
}
SomeRows.parameters = {
  fixtures: {
    __singleTab: true,
    realExamples: {
      'Some real values': {
        rows: [
          { text: 'Real Value 1' },
          { text: 'Real Value 2' }
        ]
      },
      'Other real values': {
        rows: [
          { text: 'Other value 1' },
          { text: 'Other value 2' }
        ]
      }
    }
  }
}

[tyom]

Hey @j-a-m-l. Thanks for the bug report.

The add-on has been devised before Storybook introduced its args and controls, and most of the use cases are now covered by that native add-on. However, there are still valid cases for the fixtures add-on, and I'd like to get it fixed. They can work together.

Unfortunately, there is a problem in the logic, which checks for the presence of the features in the query and assumes an isolated view if it's found in it. Some of the recent Storybook updates now passes the query from the preview to the parent window when using api.setQueryParams (it's used to set preview URLs for when going to isolated mode so that the story fixtures can be loaded from the URL).

I'm trying to come up with a fix, but it's not trivial as I need to find a way to avoid Storybook updating the parent window URL with iframe source query on initial load, where the fixtures query param is set. Hopefully, I can get it fixed fairly soon.

[j-a-m-l]

Thanks @tyom for your detailed feedback. I also hope that you find a way to fix it.

[tyom]

@j-a-m-l I've released v0.9.0. Give it a go. I'm still seeing some oddities with state management (it's using both local storage and URL) for historical reasons. I'd like to simplify it with just URL state but it in the meantime it may solve your immediate issue.

An isolated example of a story with fixtures and args set. You can play with it in Storybook.

[j-a-m-l]

Thank you.

[tyom]

I hope the latest version fixes your issue. However, there's still an issue with how the package works with the latest Storybook updates in how it syncs the args with the URL query. Unfortunately, the chosen method has some side effects in the current implementation and I'm still trying to find a way to fully resolve the issue. There are some use cases where it doesn't work properly. Look out for further updates.

[tyom]

I've published a new version of the package which should fix some of the issues I've discovered with certain edge cases. Let me know if you have any issues.