Splitting sandpack from main bundle

beta/next.config.js

@@ -11,7 +11,7 @@ module.exports = {
   experimental: {
     plugins: true,
     // TODO: this doesn't work because https://github.com/vercel/next.js/issues/30714
-    // concurrentFeatures: true,
+    concurrentFeatures: false,
     scrollRestoration: true,
   },
   async redirects() {
@@ -27,7 +27,7 @@ module.exports = {
   },
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
-      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+      const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
       config.plugins.push(
         new BundleAnalyzerPlugin({
           analyzerMode: 'static',

beta/package.json

@@ -18,7 +18,7 @@
     "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
     "tsc": "tsc --noEmit",
     "start": "next start",
-    "postinstall": "is-ci || (cd .. && husky install beta/.husky)",
+    "postinstall": "patch-package && (is-ci || (cd .. && husky install beta/.husky))",
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
@@ -32,7 +32,7 @@
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "^12.0.9",
+    "next": "^12.0.10",
     "parse-numeric-range": "^1.2.0",
     "react": "experimental",
     "react-collapsed": "3.1.0",

beta/src/components/MDX/APIAnatomy.tsx

@@ -59,7 +59,11 @@ export function APIAnatomy({children}: APIAnatomyProps) {
           break;
         case 'pre':
           acc.code = (
-            <CodeBlock {...child.props.children.props} noMargin={true} />
+            <CodeBlock
+              {...child.props.children.props}
+              noMargin={true}
+              isFromAPIAnatomy
+            />
           );
           break;
       }

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -4,14 +4,12 @@
 
 import cn from 'classnames';
 import {
-  ClasserProvider,
   SandpackCodeViewer,
   SandpackProvider,
   SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
-import styles from './CodeBlock.module.css';
 
 interface InlineHiglight {
   step: number;
@@ -86,16 +84,11 @@ const CodeBlock = function CodeBlock({
           },
         }}>
         <SandpackThemeProvider theme={CustomTheme}>
-          <ClasserProvider
-            classes={{
-              'sp-cm': styles.codeViewer,
-            }}>
-            <SandpackCodeViewer
-              key={children.trimEnd()}
-              showLineNumbers={false}
-              decorators={decorators}
-            />
-          </ClasserProvider>
+          <SandpackCodeViewer
+            key={children.trimEnd()}
+            showLineNumbers={false}
+            decorators={decorators}
+          />
         </SandpackThemeProvider>
       </SandpackProvider>
     </div>

beta/src/components/MDX/CodeBlock/index.tsx

@@ -1,7 +1,34 @@
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
+import cn from 'classnames';
+import * as React from 'react';
+const CodeBlock = React.lazy(() => import('./CodeBlock'));
 
-import CodeBlock from './CodeBlock';
-
-export default CodeBlock;
+export default React.memo(function CodeBlockWrapper(props: {
+  isFromAPIAnatomy: boolean;
+  isFromPackageImport: boolean;
+  children: string;
+  className?: string;
+  metastring: string;
+  noMargin?: boolean;
+  noMarkers?: boolean;
+}): any {
+  const {children, isFromAPIAnatomy, isFromPackageImport} = props;
+  return (
+    <React.Suspense
+      fallback={
+        <pre
+          className={cn(
+            'rounded-lg leading-6 h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg text-[13.6px] overflow-hidden',
+            !isFromPackageImport && !isFromAPIAnatomy && 'my-8'
+          )}>
+          <div className="py-[18px] pl-5 font-normal ">
+            <p className="sp-pre-placeholder overflow-hidden">{children}</p>
+          </div>
+        </pre>
+      }>
+      <CodeBlock {...props} />
+    </React.Suspense>
+  );
+});

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';

beta/src/components/MDX/PackageImport.tsx

@@ -18,6 +18,7 @@ export function PackageImport({children}: PackageImportProps) {
       return (
         <CodeBlock
           {...child.props.children.props}
+          isFromPackageImport
           key={i}
           noMargin={true}
           noMarkers={true}

beta/src/components/MDX/Sandpack/SandpackWrapper.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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;
+};
+import {reducedCodeSnippet} from './utils';
+
+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 SandpackWrapper(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);
+
+  files['/styles.css'] = {
+    code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
+    hidden: true,
+  };
+
+  return (
+    <div className="sandpack-container my-8" translate="no">
+      <SandpackProvider
+        template="react"
+        customSetup={{...setup, files: files}}
+        autorun={autorun}
+        initMode="user-visible"
+        initModeObserverOptions={{rootMargin: '1400px 0px'}}>
+        <CustomPreset
+          isSingleFile={isSingleFile}
+          showDevTools={showDevTools}
+          onDevToolsLoad={() => setDevToolsLoaded(true)}
+          devToolsLoaded={devToolsLoaded}
+        />
+      </SandpackProvider>
+    </div>
+  );
+}
+
+SandpackWrapper.displayName = 'Sandpack';
+
+export default SandpackWrapper;