close
The Wayback Machine - https://web.archive.org/web/20210608010244/https://github.com/storybookjs/storybook/issues/13950
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

BigInt support in TeleJSON #13950

Open
JesusTheHun opened this issue Feb 18, 2021 · 3 comments
Open

BigInt support in TeleJSON #13950

JesusTheHun opened this issue Feb 18, 2021 · 3 comments

Comments

@JesusTheHun
Copy link

@JesusTheHun JesusTheHun commented Feb 18, 2021

Currently is you set a component property to an object carrying a BigInt the entire storybook stops functioning. The console logs show an error trying to serialize this object.

Uncaught TypeError: Do not know how to serialize a BigInt
    at JSON.stringify (<anonymous>)
    (...)

Code sample to help you get the context :

const invitations = {
  isLoading: false,
  entities: [{
    id: 'd25b99c9-4908-44c6-8ce4-d73768b967c6',
    revision: BigInt(1602168054734520320),
    firstName: 'Foo',
    lastName: 'Bar',
    email: 'foo.bar@provider.com',
  }]
};

export default {
  title: 'Acme/Modules/Invitations/InvitationsList',
  component: InvitationsList,
} as Meta;

const Template: Story<InvitationsListProps> = (args) => <InvitationsList {...args} />;

export const Default = Template.bind({});
Default.args = {
  invitations
};

Switching to json-bigint which is a drop-in replacement would solve this issue in a blink.

@phated
Copy link
Contributor

@phated phated commented Feb 22, 2021

@shilman want me to add this to telejson? I think it can just be a toString and then put it back into a BigInt on parse

@shilman
Copy link
Member

@shilman shilman commented Feb 25, 2021

@phated sure! 🙏

@ghengeveld ghengeveld changed the title BigInt support for template args BigInt support in TeleJSON Feb 26, 2021
@gaetanmaisse gaetanmaisse assigned gaetanmaisse and unassigned phated May 13, 2021
@j-m
Copy link

@j-m j-m commented May 24, 2021

The referenced telejson merge was shipped in version 5.3.0 and storybook comes with 5.3.3, I'm still experiencing this issue.

Most of my components have bigint in them, so I can't use Storybook until this is fixed :/


I don't know anything about storybook dev, but from a quick look this issue stems from the stringify here

defaultValue={value === null ? '' : JSON.stringify(value, null, 2)}

which would need to include something like

JSON.stringify(value, (key, value) => 
  typeof value === "bigint" ? value.toString() + "n" : value
, 2);

which stops everything from crashing


I imagine the parse in the same file as above

if (raw) onChange(JSON.parse(raw));

needs updating to

JSON.parse(raw, (key, value) => {
  if (typeof value === "string" && /^\d+n$/.test(value)) {
    return BigInt(value.substr(0, value.length - 1));
  }
  return value;
});

There are a few parses and stringifys in storybook, but not too many :)


unfortunately, the REJT (React Editable JSON tree) doesn't render the bigints - it looks like REJT limits it's datatypes and, instead of attempting to .toString() the value, just defaults to rendering nothing.


+1 to the json-bigint recommendation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants