[Feature]: make v9 codesandbox demos fast

[Hotell]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

ATM when opening docsite demos on codesandbox, loading time of codesandbox is quite long which provides subpar DX and also bad look on v9 library.

instead of instant demo this is what user sees. Try some of the Menu demos for example https://react.fluentui.dev/?path=/docs/components-menu-menu--default

The loadtime tends to be more than 10 seconds ( depends on how many components are involved in particular demo. in general more components = slower start )

Have you discussed this feature with our team

@microsoft/fluentui-react-build

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

Normal

[Hotell]

I did some research on this and here are the results:

why is current Browser codesandbox version so slow ?

• because CRA is using babel which is X times slower than swc/esbuild
• because react-components exports all v9 apis from 1 barrel / which is slow to parse for old CRA webpack/babel combo ( not for swc/esbuild )

potential solutions:

1. new codesandbox cloud boxes ( Docker containers ) looks like it could resolve all our issues

I created 2 container templates:

• using CRA (current) https://codesandbox.io/p/sandbox/github/Hotell/fluentui/tree/hotell%2Fcodesandbox-demos-prototype/packages/react-components/react-storybook-addon-codesandbox/templates/cra?file=%2Ftsconfig.json%3A10%2C1
• using Vite https://codesandbox.io/p/sandbox/github/Hotell/fluentui/tree/hotell%2Fcodesandbox-demos-prototype/packages/react-components/react-storybook-addon-codesandbox/templates/vite?file=%2Fsrc%2Fexample.tsx%3A1%2C1

As we can see, loading them is almost instant. Can we use those for our demos?

NO

Why:

Every DEMO* is dynamically generated via define API.

Switching to Container boxes is possible, unfortunately it would be much slower than Browser boxes because every demo would be brand new container, which means on every demo click:

• creating container from scratch
• installing all dependencies from scratch ( slow yarn v1 isn't helping here as well )
• running server ( fast )

DEMO*:

Summary:

To make our demos blazing fast we need to use combination of synced templates that use Codesandbox containers + ability to dynamically add files to them via define API. This functionality is currently not supported codesandbox/codesandbox-importers#151.

TODO:

• explore undocumented PUT REST API / Update an existing sandbox codesandbox/codesandbox-importers#151 (comment)

[Hotell]

what about Stackblitz: ?

Issues:

• Browser:
  • Error in /turbo_modules/[email protected] after upgrading and downgrading "react" in "package.json" stackblitz/core#2530 - no go for us
• Web-Container
  • RangeError: WebAssembly.instantiate(): Out of memory: Cannot allocate Wasm memory for new instance stackblitz/webcontainer-core#908

Web-containers are significantly faster than codesandbox containers ! Thus having "open in stackblitz" using web-container + vite under the hood provides quite good DX.

I've implemented an MVP where folks can test it out

• clone and fetch this branch https://github.com/hotell/fluentui/tree/hotell/codesandbox-demos-prototype
• yarn
• yarn workspace @fluentui/react-text storybook

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[Hotell]

Closing as implemented by:

• we implemented various providers within our storybook via feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality #29536
• switched to stackblitz as codesanbox became unusable for any OSS needs with their new pricing model docs: switch to Stackblitz export #30613