Why is this story not being excluded from the sidebar?

[DEfusion]

Summary

In trying to get multiple stories rendering nicely in a single Canvas I came up with this solution:

const elementTypes = {
  anchor: { as: 'a', label: 'Anchor' },
  button: { as: 'button', label: 'Button' },
  inputSubmit: { as: 'input', type: 'submit', label: 'Submit input' },
  inputReset: { as: 'input', type: 'reset', label: 'Reset input' },
};

export const AllElementTypes = {
  render: () => html`${Object.values(elementTypes).map((d) => ButtonElement(d))}`,
  tags: ['!dev', '!test'],
};

export const Anchor = elementTypes.anchor;
export const Button = elementTypes.button;
export const InputSubmit = elementTypes.inputSubmit;
export const InputReset = elementTypes.inputReset;

Which works fine, and the AllElementTypes story is not included in the sidebar. However I then created a simple utility to do this:

const multiStory = ({ source, component }) => {
  return {
    render: () => html`${Object.values(source).map((d) => component(d))}`,
    tags: ['!dev', '!test'],
  };
};

But when I use that instead like so it now is not filtered from the sidebar:

export const AllElementTypes = multiStory({ source: elementTypes, component: ButtonElement });

The tags are present in the object so I'm not really sure what the difference is.

Additional information

No response

Create a reproduction

No response

[shilman]

Tags need to be statically analyzable, so not returned from a function. So you should do:

export const AllElementTypes = {
  ...multiStory({ source: elementTypes, component: ButtonElement }),
  tags: ['!dev', '!test'],
}

[DEfusion]

That makes sense, thanks for clarifying things, I thought I was going crazy...