[docs] Live demos v2

[oliviertassinari]

This is a continuation of #34454 (comment). The first commit is from the initial PR, the second commit is what I could make as a step forwards. I have tried to fix all the bugs but I'm stuck on point 6. I might not have the time to carry it further.

1. ✅ 1 render in dev mode, 2 renders in prod for performance
2. ✅ https://deploy-preview-34870--material-ui.netlify.app/versions
3. ✅ https://deploy-preview-34870--material-ui.netlify.app/material-ui/material-icons/?selected=AcUnit
4. ✅ https://deploy-preview-34870--material-ui.netlify.app/joy-ui/getting-started/templates/
5. ✅ https://deploy-preview-34870--material-ui.netlify.app/material-ui/getting-started/templates/
6. ✅ https://deploy-preview-34870--material-ui.netlify.app/material-ui/react-drawer/#swipeable-edge
7. ✅ https://deploy-preview-34870--material-ui.netlify.app/material-ui/react-box/#the-sx-prop

Performance-wise, it seems that these changes reduce the regression: https://www.webpagetest.org/video/compare.php?tests=221106_BiDcE6_7GV,221106_AiDcGG_7EA,221106_BiDcTA_7GW

---

Problem solved

@nihgwu For 6. we need to pass a prop/argument to the code that is executed. This demo https://mui.com/material-ui/react-drawer/#swipeable-edge runs inside an iframe, we normally pass it the window of the iframe as an argument for the demo:

material-ui/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx

Lines 42 to 43 in 639224a

	export default function SwipeableEdgeDrawer(props: Props) {
	const { window } = props;

I have tried this:

material-ui/docs/src/modules/components/ReactRunner.tsx

Lines 42 to 54 in 36ce47e

	const { element, error } = useRunner({
	code,
	scope,
	});
	React.useEffect(() => {
	onError(error);
	}, [error, onError]);
	// TODO:
	// if (Object.keys(forwardProps).length > 0) {
	// console.log('forwardProps', element);
	// return React.cloneElement(element, forwardProps);

but there is an intermediary element in react runner that prevents cloneElement to forward the window. What would you advise? The only alternative I can think of is to create a new demo option to disable live edits for some of the demos (it's already done by default when hideToolbar is used).

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34870--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 6e049cd

[oliviertassinari]

I did another iteration, I can't spot any opportunities for further improvement. Open for reviews/open to be improved on

[nihgwu]

disableLiveEdit?

[oliviertassinari]

I think that hiding the toolbar is more relevant in this context. The developers should probably not be able to open it on codesandbox too if process is accessed. disableLiveEdit would work but would miss more improvement opportunities.

[nihgwu]

Actually there is ErrorBoundary in react-runner, I left it as it is for minimal change

[bharatkashyap]

LGTM!

[oliviertassinari]

I saw these issues with this implementation:

• 1. If the first edit is wrong, it crashes without the cache, e.g. make a first wrong change, the layout moves too much https://deploy-preview-34870--material-ui.netlify.app/material-ui/react-alert/#basic-alerts [docs] Fix layout jump on first mistake #35215
• 2. When expending the code, the demo resets, e.g. toggle a switch and expand https://deploy-preview-34870--material-ui.netlify.app/material-ui/react-switch/#basic-switches Fix: [docs] Fix bugs with live edit demos #35106
• 3. The ad is not correctly positioned at the bottom. Compare the margin with https://631f4503cb19a90009794dfc--material-ui-docs.netlify.app/material-ui/react-alert/#basic-alerts Fix: [docs] Fix code editor styles mismatches #35108
• 4. The code display on mobile is relatively broken, compare with https://631f4503cb19a90009794dfc--material-ui-docs.netlify.app/material-ui/react-alert/#basic-alerts. Fix: [docs] Fix code editor styles mismatches #35108

I will fix it this weekend, It should be pretty quick. I have something working for 2, and 1 might be about triggering the live env when the editor is focused.

[bharatkashyap]

I saw issues with this implementation:

• 5. Noticed from the docs feedback that scrolling on expanded demos was broken. I've created a fix for it [docs] Fix scroll issue on expanded live demos #35064

[oliviertassinari]

A few more opportunities for improvements that we saw:

• 6. Import syntax [docs] Support demos with side effect imports #35177
• 7. The a11y label for the textbox is wrong. Upstream dependency on Feat/add textarea label wcag 2.1 react-simple-code-editor/react-simple-code-editor#104

• 8. Some undo/redo strange behaviors.

It seems that we are pretty much done :). I will take care of 7. 8 is more of the realm of react-simple-code-editor.