Use smaller React pragmas to minimise the amount of data passed between iframes

src/Playroom/Frames/Frames.tsx

@@ -1,7 +1,11 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import flatMap from 'lodash/flatMap';
 import Iframe from './Iframe';
-import { compileJsx } from '../../utils/compileJsx';
+import {
+  compileJsx,
+  openFragmentTag,
+  closeFragmentTag,
+} from '../../utils/compileJsx';
 import type { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
@@ -16,8 +20,6 @@ interface FramesProps {
   widths: PlayroomProps['widths'];
 }
 
-let renderCode = '<React.Fragment></React.Fragment>';
-
 export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
 
@@ -29,9 +31,16 @@ export default function Frames({ code, themes, widths }: FramesProps) {
     }))
   );
 
-  try {
-    renderCode = compileJsx(code);
-  } catch (e) {}
+  const [renderCode, setRenderCode] = useState(
+    () => `${openFragmentTag}${closeFragmentTag}`
+  );
+
+  useEffect(() => {
+    try {
+      const newCode = compileJsx(code);
+      setRenderCode(newCode);
+    } catch (e) {}
+  }, [code]);
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>

src/Playroom/RenderCode/RenderCode.js

@@ -4,10 +4,17 @@ import scopeEval from 'scope-eval';
 // eslint-disable-next-line import/no-unresolved
 import useScope from '__PLAYROOM_ALIAS__USE_SCOPE__';
 
+import {
+  ReactCreateElementPragma,
+  ReactFragmentPragma,
+} from '../../utils/compileJsx';
+
 export default function RenderCode({ code, scope }) {
   return scopeEval(code, {
     ...(useScope() ?? {}),
     ...scope,
     React,
+    [ReactCreateElementPragma]: React.createElement,
+    [ReactFragmentPragma]: React.Fragment,
   });
 }

src/utils/compileJsx.ts

@@ -1,11 +1,22 @@
 import { transform } from '@babel/standalone';
 
-export const openFragmentTag = '<React.Fragment>';
-export const closeFragmentTag = '</React.Fragment>';
+export const ReactFragmentPragma = 'R_F';
+export const ReactCreateElementPragma = 'R_cE';
+
+export const openFragmentTag = '<>';
+export const closeFragmentTag = '</>';
 
 export const compileJsx = (code: string) =>
-  transform(`${openFragmentTag}${code.trim() || ''}${closeFragmentTag}`, {
-    presets: ['react'],
+  transform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
+    presets: [
+      [
+        'react',
+        {
+          pragma: ReactCreateElementPragma,
+          pragmaFrag: ReactFragmentPragma,
+        },
+      ],
+    ],
   }).code;
 
 export const validateCode = (code: string) => {