Better SSR support

[gabro]

To use Bento in an SSR environment, the consumer needs to wrap the app in SSRProvider from react-aria. However, react-aria is an implementation detail, and we don't document this anywhere.

This PR:

• re-exports SSRProvider from react-aria
• adds a ssr prop to BentoProvider to that the provider can be applied automatically (without even knowing about react-aria)
• adds some docs about this

[gabro]

This is the same approach as react-spectrum. I don't think we need necessarily need this export, but in case someone composes their provider differently, I think it makes sense to expose it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
bento-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 17, 2023 at 3:37PM (UTC)
bento-playroom	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 17, 2023 at 3:37PM (UTC)

[bvkimball]

@gabro bento also needs a check to see if it is SSR so that it knows to skip any reference to document, which can be found anywhere a portal is created.

bento-design-system/packages/bento-design-system/src/util/createPortal.ts

Line 6 in 8b2413a

return createReactPortal(children, document.body);

bento-design-system/packages/bento-design-system/src/Menu/NestedMenu.tsx

Line 76 in 8b2413a

portalRef.current ?? document.body

bento-design-system/packages/bento-design-system/src/SelectField/SelectField.tsx

Line 101 in 8b2413a

const menuPortalTarget = useMemo(() => document.createElement("div"), []);

bento-design-system/packages/bento-design-system/src/DateField/Day.tsx

Line 95 in 8b2413a

document.activeElement !== props.inputRef.current

bento-design-system/packages/bento-design-system/src/Table/Table.tsx

Line 207 in 8b2413a

(id) => document.getElementById(`header-cell-${id}`)!.clientWidth

I think this is just for the docs but for completeness

bento-design-system/packages/bento-design-system/src/useComponentsShowcase.tsx

Line 64 in 8b2413a

const nodes = [...document.head.querySelectorAll("*")].map((x) => x.cloneNode(true));

[gabro]

Thank you @bvkimball for spotting these! I'm not super familiar with SSR myself, but it seems most of them are inside useEffect, which should only execute client-side, so they should be ok, does it sound right to you?

I'll take a look at the ones that are not and figure out a strategy.

[bvkimball]

@gabro Yes that does sound right, I have only gotten the error when using "SelectField" because of the useMemo. I will confirm, I did not see it anywhere else. I was just looking for the use of document.

[gabro]

@bvkimball ok, thanks for confirming, I've updated the PR to fix the outstanding cases. I'll take a second pass tomorrow and merge it

[veej]

Just a minor doubt, but 👍

[veej]

is there a specific reason not to use useCreatePortal here instead of useIsSSR and manual check?

[gabro]

this createPortal is not our createPortal utility but the standard one from react-dom. Not sure exactly why it wasn't implemented like that, @federico-ercoles may know, but that's the reason why I'm using isSRR here