isChromatic: officially support distinguishing Library from Capture Cloud/Snapshot

[jrencz]

Feature request

I propose for Chromatic to officially support helpers for detecting each of environments which detection is now inside chromatic/isChromatic:

• Library (where stories are rendered with chromatic=true)
• Capture Cloud/Snapshot (where User Agent has string Chromatic)

Proposed solution

Either 2 new modules (chromatic/isChromaticLibrary and chromatic/isChromaticCaptureCloud) or 2 named exports from module chromatic/isChromatic (preferred)

import isChromatic, {isChromaticLibrary, isChromaticCaptureCloud} from 'chromatic/isChromatic'

Alternative solutions

isChromaticLibrary might be named isLibrary and isChromaticCaptureCloud might be named isCaptureCloud if those are named exports:

import isChromatic, {isLibrary, isCaptureCloud} from 'chromatic/isChromatic'

as the module name gives enough context.

isChromaticCaptureCloud/isCaptureCloud may also be isChromaticSnapshot/isSnapshot or it can be exported under both names.

Additional context

My case for using solution, which I now propose to make official (i.e. I already use it, I now propose to make it officially supported) was that I wasn't able to rely on either of supported ways to ignore elements (https://www.chromatic.com/docs/ignoring-elements) because the ignored part in my case is inside Shadow DOM. It may not be needed to detect Capture Cloud/Snapshot if it did, but maybe there are other use cases where having such (official) capability may be beneficial

The node, which I had a need to exclude, is a container displaying date.
I use always up-to-date dates because component in which that node lives formats dates in 2 ways:

• Using Intl.RelativeTimeFormat if date is close enough to "now"
  that's the main use case and it is supposed to show constant visual output
• using Intl.DateTimeFormat if date is far from "now"
  that's minority of cases, yet that minority of cases constantly generate visual diff in some subset of stories.
  I need to have those dates relatively fresh rather than controlling the "now" in Library where I plan to let non-coders in, and I don't want for them to get confused with some fake dates (or dates way in the future or way in the past so they are effectively stable enough not to cause noise in visual regression).

I decided for a trade-off:

• in Library I have actual absolute dates
• on Snapshot it's a placeholder
• in snapshots of own stories of that component I use a constant, way-in-the-future date so it's stable

[ghengeveld]

Hi @jrencz, thanks for the suggestion and the context for why you need this. I think it's a pretty reasonable thing to do. I like this option:

import isChromatic, {isLibrary, isCaptureCloud} from 'chromatic/isChromatic'

Though I would rename to isLibrary to isLiveView, because we have more places where we display your stories in an iframe, besides the library.

If you're willing to open a PR for this, I'm happy to ship it.

[jrencz]

There might also be a way to distinguish Storybook deployed to Chromatic.

It's not something isChromatic does at the moment, but I can imagine one might want that in case Storybook is deployed to Chromatic platform and apart form that, somewhere else.

It can be done by looking for chromatic.com in url but thats naïve - if custom domain is attached then it will fail. Another sign might be that "back to Chromatic" button which gets added to bottom of sidebar, but it's rather that cause for it should be looked into, not presence of it