Cannot use symbol as story argument property

Describe the bug

I was doing some dark magic to be able to test connected component and I wanted to use a symbol into the template arguments but it turns out they are stripped away :

Use case

export default {
  title: 'Acme/Pages/Settings/Invitations',
  component: InvitationsPage,
  decorators: [withDisconnectedStore(authenticatedCustomer)],
} as Meta;

// Then use
export const Default = Template.bind({});
Default.args = { [ConnectedStorePropsKey]: myStoreWhenPopulated };

export const Empty = Template.bind({});
Empty.args = { [ConnectedStorePropsKey]: myStoreWhenEmpty };

export const Loading = Template.bind({});
Loading.args = { [ConnectedStorePropsKey]: myStoreWhenLoading };

Description

export const ConnectedStorePropsKey = '$connectedStore'; // Here lies the issue
export type HaveConnectedProps = { [ConnectedStorePropsKey]: PreloadedState<RootState>}
export type WithConnectedProps<T> = T & HaveConnectedProps;

export const withDisconnectedStore = <T extends unknown>(sharedStoreState: PreloadedState<RootState>) => (story: () => StoryFnReactReturnType) => {
  const component = story();
  const props = component.props as HaveConnectedProps;
  const storeProps = props[ConnectedStorePropsKey];
  const initialState = _.merge({}, sharedStoreState, storeProps);
  const storeElements = buildDisconnectedStore(initialState);
  return <ProviderWrapper store={storeElements.store} history={storeElements.history}>{component}</ProviderWrapper>;
}

As you can read the const ConnectedStorePropsKey is currently a string: that’s my workaround. Initially I used a symbol (that was exported to be use in the stories) but it turns out it is striped away and the const component never carries it, Object.getOwnPropertySymbols(props).length === 0

Is there any particular reason why and is it a desired behavior ?

[ghengeveld]

This will be addressed in https://github.com/storybookjs/storybook/issues/13888

The gist is we’ll introduce a kind of “select” control for which keys are used as arg (which gets serialized/deserialized) rather than the value. That way the value can be anything, because it will stay within the scope of the preview and not need to be sent to the manager over the channel (which uses telejson).

Closing as duplicate.

[JesusTheHun]

@ghengeveld I’ve created a PR in telejson to truly support global symbols but it is simply impossible to have local symbols to be serialized, it’s a JS limitation that is also a feature.

Now regarding the serialization to the url, I don’t know where you need that but it’s very likely a bad solution. You could base64’ify the content to pass the data but then you run into browser url size limitation of 2048 chars.