[docs-infra] Improve StackBlitz support

[oliviertassinari]

Problem

CodeSandbox is changing its pricing, see https://www.codesandbox.community/c/api-billing-updates/upcoming-pricing-billing-changes. Developers who want to report a bug or edit demos might hit a paywall. Sandboxes are paid after 20. This limit at 20 could be annoying for some of the developers browsing the docs. This can also be a problem for bug reproduction on GitHub. Community members might not be able to easily them if its on CodeSandbox, so increasing the odd for reproduction to be on StackBlitz is likely a win.

Context

Today, CodeSandbox is 70% of the use while StackBlitz is 30%:

https://analytics.google.com/analytics/web/#/analysis/p353089763/edit/KctZ977QSou7VoMyBQMaqw

StackBlitz is up 76% from 6 months ago 83% / 17%. It's not StackBlitz that is used more but rather it seems to be that CodeSandbox is used less frequently as developers learn they can use the live edit feature of our demos in the docs. My assumption is that developers were defaulting to the easier-to-reach icon.

Solution

This PR makes using StackBlitz less friction for users to adopt:

Before:

After:

I think we need to point the community to the least friction code edition experience. It seems that StackBlitz % of use should be higher than 30%:

• Equivalent load time than Codesandbox. I suspect StackBlitz is from time to time slower, but not so easy to produce.
• It feels like StackBlitz is investing more in the in-browser dev experience. Codesandbox is more focused on the VM market, closer to Replit. For instance, they support Next.js without a server running, so cost-saving in terms of VM credits. Because we have client-side-only API, StackBlitz's focus is a bit better aligned with our audience.
• A higher limit for free in-browser apps in StackBlitz, making it less likely to create friction for new developers
• Fetching packages directly from the npm registry means a massive cost saving in terms of infra cost for StackBlitz to deliver this UX, something Codesandbox can't deliver as they build on the server, so they have huge bandwidth use.

hence the PR to better balance it.

---

I noticed a small bug along the way that I reported codesandbox/codesandbox-client#8299.

[mui-bot]

Netlify deploy preview

https://deploy-preview-40832--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against fc29a0e

[oliviertassinari]

This solves a bug on other repositories using docs-infra, e.g. https://deploy-preview-11848--material-ui-x.netlify.app/x/react-data-grid/editing/#full-featured-crud StackBlitz is broken, CodeSandbox works, this is because of stackblitz/core#437

[CompuIves]

One thing I do want to note on this:

Fetching packages directly from the npm registry means a massive cost saving in terms of infra cost for StackBlitz to deliver this UX, something Codesandbox can't deliver as they build on the server, so they have huge bandwidth use.

We won't deprecate our sandboxes experience, we'll improve it in the future as well (VSCode extension marketplace support being the next feature we'll release). Ultimately, we want to use the best tool for the job and for examples it's best to run in the browser when that's smoothly possible. That said, our time is spent mostly on making CodeSandbox a great place to do development.

In our sandbox solution, we also load NPM dependencies directly from the registry. The majority of our bandwidth comes from serving the web app and the preview resources (xxx.csb.app).

[oliviertassinari]

@CompuIves Thanks for the context! I have updated the reasoning to be more accurate, this feel balanced ⚖️