+
+ }>
+
+
+ );
+});
diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
index fae4eb976f9..0e363744506 100644
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -19,6 +19,7 @@ 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';
diff --git a/beta/src/components/MDX/PackageImport.tsx b/beta/src/components/MDX/PackageImport.tsx
index edb2b6d0f48..83ae74f8a67 100644
--- a/beta/src/components/MDX/PackageImport.tsx
+++ b/beta/src/components/MDX/PackageImport.tsx
@@ -18,6 +18,7 @@ export function PackageImport({children}: PackageImportProps) {
return (
+
+ setDevToolsLoaded(true)}
+ devToolsLoaded={devToolsLoaded}
+ />
+
+
+ );
+}
+
+SandpackWrapper.displayName = 'Sandpack';
+
+export default SandpackWrapper;
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index b0e6cee45e5..9c141732da4 100644
--- a/beta/src/components/MDX/Sandpack/index.tsx
+++ b/beta/src/components/MDX/Sandpack/index.tsx
@@ -1,146 +1,68 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-import React from 'react';
-import {
- SandpackProvider,
- SandpackSetup,
- SandpackFile,
-} from '@codesandbox/sandpack-react';
-
-import {CustomPreset} from './CustomPreset';
-
-type SandpackProps = {
- children: React.ReactChildren;
- autorun?: boolean;
- setup?: SandpackSetup;
- showDevTools?: boolean;
-};
-
-const sandboxStyle = `
-* {
- box-sizing: border-box;
-}
-
-body {
- font-family: sans-serif;
- margin: 20px;
- padding: 0;
-}
-
-h1 {
- margin-top: 0;
- font-size: 22px;
-}
-
-h2 {
- margin-top: 0;
- font-size: 20px;
-}
-
-h3 {
- margin-top: 0;
- font-size: 18px;
-}
-
-h4 {
- margin-top: 0;
- font-size: 16px;
-}
-
-h5 {
- margin-top: 0;
- font-size: 14px;
-}
-
-h6 {
- margin-top: 0;
- font-size: 12px;
-}
-
-ul {
- padding-left: 20px;
-}
-`.trim();
-
-function Sandpack(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 = codeSnippets.reduce(
- (result: Record, codeSnippet: React.ReactElement) => {
- if (codeSnippet.props.mdxType !== 'pre') {
- return result;
- }
- const {props} = codeSnippet.props.children;
- let filePath; // path in the folder structure
- let fileHidden = false; // if the file is available as a tab
- let fileActive = false; // if the file tab is shown by default
-
- if (props.metastring) {
- const [name, ...params] = props.metastring.split(' ');
- filePath = '/' + name;
- if (params.includes('hidden')) {
- fileHidden = true;
- }
- if (params.includes('active')) {
- fileActive = true;
- }
- isSingleFile = false;
- } else {
- if (props.className === 'language-js') {
- filePath = '/App.js';
- } else if (props.className === 'language-css') {
- filePath = '/styles.css';
- } else {
- throw new Error(
- `Code block is missing a filename: ${props.children}`
- );
- }
- }
- if (result[filePath]) {
- throw new Error(
- `File ${filePath} was defined multiple times. Each file snippet should have a unique path name`
- );
- }
- result[filePath] = {
- code: (props.children as string).trim(),
- hidden: fileHidden,
- active: fileActive,
- };
+import * as React from 'react';
+import {reducedCodeSnippet} from './utils';
+const Sandpack = React.lazy(() => import('./SandpackWrapper'));
+
+const SandpackFallBack = ({code}: {code: string}) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {code}
+
+
+
+
+
+
+
+
+
+
+ {code.split('\n').length > 16 && (
+
+ )}
+
+
+
+
+);
- return result;
- },
- {}
+export default React.memo(function SandpackWrapper(props: any): any {
+ const codeSnippet = reducedCodeSnippet(
+ React.Children.toArray(props.children)
);
- files['/styles.css'] = {
- code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
- hidden: true,
- };
+ // 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 &&
+ codeSnippet[fileName]?.hidden === false
+ );
+ let activeCode;
+ if (!activeCodeSnippet.length) {
+ activeCode = codeSnippet['/App.js'].code;
+ } else {
+ activeCode = codeSnippet[activeCodeSnippet[0]].code;
+ }
return (
-