From a2138f2e63afae65fba10219a0fccbfd80bc4768 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Wed, 16 Feb 2022 18:51:15 +0000
Subject: [PATCH] Nitpicks for code splitting (#4346)

---
 beta/src/components/MDX/MDXComponents.tsx     |  2 --
 .../{SandpackWrapper.tsx => SandpackRoot.tsx} | 21 +++++++--------
 beta/src/components/MDX/Sandpack/index.tsx    | 27 ++++++++++---------
 beta/src/components/MDX/Sandpack/utils.ts     |  3 +--
 4 files changed, 25 insertions(+), 28 deletions(-)
 rename beta/src/components/MDX/Sandpack/{SandpackWrapper.tsx => SandpackRoot.tsx} (81%)

diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
index 0e363744..74c3403a 100644
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -19,7 +19,6 @@ import Intro from './Intro';
 import Link from './Link';
 import {PackageImport} from './PackageImport';
 import Recap from './Recap';
-import dynamic from 'next/dynamic';
 import Sandpack from './Sandpack';
 import SimpleCallout from './SimpleCallout';
 import TerminalBlock from './TerminalBlock';
@@ -363,7 +362,6 @@ export const MDXComponents = {
   code: CodeBlock,
   // The code block renders <pre> so we just want a div here.
   pre: (p: JSX.IntrinsicElements['div']) => <div {...p} />,
-  // Scary: dynamic(() => import('./Scary')),
   APIAnatomy,
   AnatomyStep,
   CodeDiagram,
diff --git a/beta/src/components/MDX/Sandpack/SandpackWrapper.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
similarity index 81%
rename from beta/src/components/MDX/Sandpack/SandpackWrapper.tsx
rename to beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 099127a8..7b933e39 100644
--- a/beta/src/components/MDX/Sandpack/SandpackWrapper.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -2,14 +2,12 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import React from 'react';
-import {
-  SandpackProvider,
-  SandpackSetup,
-  SandpackFile,
-} from '@codesandbox/sandpack-react';
-
+import * as React from 'react';
+import {SandpackProvider} from '@codesandbox/sandpack-react';
 import {CustomPreset} from './CustomPreset';
+import {createFileMap} from './utils';
+
+import type {SandpackSetup} from '@codesandbox/sandpack-react';
 
 type SandpackProps = {
   children: React.ReactChildren;
@@ -17,7 +15,6 @@ type SandpackProps = {
   setup?: SandpackSetup;
   showDevTools?: boolean;
 };
-import {reducedCodeSnippet} from './utils';
 
 const sandboxStyle = `
 * {
@@ -65,13 +62,13 @@ ul {
 }
 `.trim();
 
-function SandpackWrapper(props: SandpackProps) {
+function SandpackRoot(props: SandpackProps) {
   let {children, setup, autorun = true, showDevTools = false} = props;
   const [devToolsLoaded, setDevToolsLoaded] = React.useState(false);
   let codeSnippets = React.Children.toArray(children) as React.ReactElement[];
   let isSingleFile = true;
 
-  const files = reducedCodeSnippet(codeSnippets);
+  const files = createFileMap(codeSnippets);
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
@@ -97,6 +94,6 @@ function SandpackWrapper(props: SandpackProps) {
   );
 }
 
-SandpackWrapper.displayName = 'Sandpack';
+SandpackRoot.displayName = 'Sandpack';
 
-export default SandpackWrapper;
+export default SandpackRoot;
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index 9c141732..cc800ee4 100644
--- a/beta/src/components/MDX/Sandpack/index.tsx
+++ b/beta/src/components/MDX/Sandpack/index.tsx
@@ -1,8 +1,14 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
 import * as React from 'react';
-import {reducedCodeSnippet} from './utils';
-const Sandpack = React.lazy(() => import('./SandpackWrapper'));
+import dynamic from 'next/dynamic';
+import {createFileMap} from './utils';
+
+const SandpackRoot = dynamic(() => import('./SandpackRoot'), {suspense: true});
 
-const SandpackFallBack = ({code}: {code: string}) => (
+const SandpackGlimmer = ({code}: {code: string}) => (
   <div className="sandpack-container my-8">
     <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
       <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
@@ -41,11 +47,10 @@ const SandpackFallBack = ({code}: {code: string}) => (
 );
 
 export default React.memo(function SandpackWrapper(props: any): any {
-  const codeSnippet = reducedCodeSnippet(
-    React.Children.toArray(props.children)
-  );
+  const codeSnippet = createFileMap(React.Children.toArray(props.children));
 
-  // To set the active file in the fallback we have to find the active file first. If there are no active files we fallback to App.js as default
+  // To set the active file in the fallback we have to find the active file first.
+  // If there are no active files we fallback to App.js as default.
   let activeCodeSnippet = Object.keys(codeSnippet).filter(
     (fileName) =>
       codeSnippet[fileName]?.active === true &&
@@ -59,10 +64,8 @@ export default React.memo(function SandpackWrapper(props: any): any {
   }
 
   return (
-    <>
-      <React.Suspense fallback={<SandpackFallBack code={activeCode} />}>
-        <Sandpack {...props} />
-      </React.Suspense>
-    </>
+    <React.Suspense fallback={<SandpackGlimmer code={activeCode} />}>
+      <SandpackRoot {...props} />
+    </React.Suspense>
   );
 });
diff --git a/beta/src/components/MDX/Sandpack/utils.ts b/beta/src/components/MDX/Sandpack/utils.ts
index abcb5c64..12bfd350 100644
--- a/beta/src/components/MDX/Sandpack/utils.ts
+++ b/beta/src/components/MDX/Sandpack/utils.ts
@@ -48,8 +48,7 @@ export const computeViewportSize = (
   return viewport;
 };
 
-//TODO: revisit to reduce this (moved this to utils from sandpackWrapper since it is being used for finding active file for fallBack too)
-export const reducedCodeSnippet = (codeSnippets: any) => {
+export const createFileMap = (codeSnippets: any) => {
   let isSingleFile = true;
 
   return codeSnippets.reduce(