From 1161a78f137c1d4ed48f5ca7bf2bbd4a01e61e3a Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Sun, 30 Jan 2022 13:00:09 +0530 Subject: [PATCH 01/28] Initial Commit --- beta/src/components/MDX/MDXComponents.tsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index ccd3518f6c1..ab3d6a51a0f 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -3,7 +3,7 @@ */ import * as React from 'react'; - +import {SandpackSetup} from '@codesandbox/sandpack-react'; import {APIAnatomy, AnatomyStep} from './APIAnatomy'; import CodeBlock from './CodeBlock'; import {CodeDiagram} from './CodeDiagram'; @@ -18,7 +18,10 @@ import Intro from './Intro'; import Link from './Link'; import {PackageImport} from './PackageImport'; import Recap from './Recap'; -import Sandpack from './Sandpack'; +import dynamic from 'next/dynamic'; +const Sandpack = dynamic(() => import('./Sandpack'), { + suspense: true, +}); import SimpleCallout from './SimpleCallout'; import TerminalBlock from './TerminalBlock'; import YouWillLearnCard from './YouWillLearnCard'; @@ -366,7 +369,21 @@ export const MDXComponents = { PackageImport, Recap, Recipes, - Sandpack, + Sandpack: (props: { + children: React.ReactChildren; + autorun?: boolean; + setup?: SandpackSetup; + showDevTools?: boolean; + }) => ( + +
+ + }> + + + ), TerminalBlock, YouWillLearn, YouWillLearnCard, From c4574eeea8ee1b5b4414e1ecb49ecbc758f73363 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Feb 2022 05:09:06 +0000 Subject: [PATCH 02/28] play with it --- beta/src/components/MDX/CodeBlock/CodeBlock.tsx | 2 ++ beta/src/components/MDX/CodeBlock/index.tsx | 17 +++++++++++++++-- beta/src/components/MDX/Sandpack/index.tsx | 2 ++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx index e36cb1d901e..c1f3135da85 100644 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -20,6 +20,8 @@ interface InlineHiglight { endColumn: number; } +console.log('--- actually loaded codeblock ----'); + const CodeBlock = function CodeBlock({ children, className = 'language-js', diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index 12c2da98113..0b56e3daf04 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -2,6 +2,19 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import CodeBlock from './CodeBlock'; +import * as React from 'react'; +import dynamic from 'next/dynamic'; +const CodeBlock = dynamic(() => import('./CodeBlock'), { + suspense: true, +}); -export default CodeBlock; +export default function (props) { + +
+ + }> + + ; +} diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx index 5c6744bbaab..7676cc95ec2 100644 --- a/beta/src/components/MDX/Sandpack/index.tsx +++ b/beta/src/components/MDX/Sandpack/index.tsx @@ -18,6 +18,8 @@ type SandpackProps = { showDevTools?: boolean; }; +console.log('--- actually loaded sandpack ----'); + const sandboxStyle = ` * { box-sizing: border-box; From 4cd4e3187cec362820510e5cd6a5d2a356a8839d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Feb 2022 05:11:40 +0000 Subject: [PATCH 03/28] oops --- beta/src/components/MDX/CodeBlock/index.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index 0b56e3daf04..439331e8e27 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -8,13 +8,15 @@ const CodeBlock = dynamic(() => import('./CodeBlock'), { suspense: true, }); -export default function (props) { - -
- - }> - - ; +export default function CodeBlockWrapper(props: any): any { + return ( + +
+ + }> + + + ); } From 3e9d486eb517ea4c6c3e03f4e20d406ff3bd1410 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Feb 2022 11:05:37 +0000 Subject: [PATCH 04/28] easier repro --- beta/src/components/MDX/CodeBlock/index.tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index 439331e8e27..16de4b36497 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -3,12 +3,21 @@ */ import * as React from 'react'; -import dynamic from 'next/dynamic'; -const CodeBlock = dynamic(() => import('./CodeBlock'), { - suspense: true, -}); +const CodeBlock = React.lazy( + () => + import('./CodeBlock').then( + (x) => + new Promise((resolve) => { + setTimeout(() => resolve(x), 3000); + }) + ), + { + suspense: true, + } +); -export default function CodeBlockWrapper(props: any): any { +export default React.memo(function CodeBlockWrapper(props: any): any { + console.log('- render', props); return ( ); -} +}); From 023a64c01b55818229a00b69356d29778ce73113 Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Tue, 1 Feb 2022 18:10:01 +0530 Subject: [PATCH 05/28] import type --- beta/src/components/MDX/MDXComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index ab3d6a51a0f..a92bfd79505 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -3,7 +3,7 @@ */ import * as React from 'react'; -import {SandpackSetup} from '@codesandbox/sandpack-react'; +import type {SandpackSetup} from '@codesandbox/sandpack-react'; import {APIAnatomy, AnatomyStep} from './APIAnatomy'; import CodeBlock from './CodeBlock'; import {CodeDiagram} from './CodeDiagram'; From a6b219be694d95e8ac14f0d52c483230179ef0d8 Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Tue, 1 Feb 2022 18:33:59 +0530 Subject: [PATCH 06/28] remove `suspense: true` --- beta/src/components/MDX/CodeBlock/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index 16de4b36497..c0d26847155 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -10,10 +10,7 @@ const CodeBlock = React.lazy( new Promise((resolve) => { setTimeout(() => resolve(x), 3000); }) - ), - { - suspense: true, - } + ) as any ); export default React.memo(function CodeBlockWrapper(props: any): any { From dc9bf58bbf7848e19def959bf25df3aa6df9e71e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Feb 2022 13:27:01 +0000 Subject: [PATCH 07/28] Add patch for next --- beta/patches/next+12.0.9.patch | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 beta/patches/next+12.0.9.patch diff --git a/beta/patches/next+12.0.9.patch b/beta/patches/next+12.0.9.patch new file mode 100644 index 00000000000..1188752c310 --- /dev/null +++ b/beta/patches/next+12.0.9.patch @@ -0,0 +1,31 @@ +diff --git a/node_modules/next/dist/client/index.js b/node_modules/next/dist/client/index.js +index e04b9ef..52b18bb 100644 +--- a/node_modules/next/dist/client/index.js ++++ b/node_modules/next/dist/client/index.js +@@ -382,6 +382,7 @@ function _initNext() { + domainLocales, + isPreview + }); ++ routerInst = (0, _router1).makePublicRouterInstance(router); + const renderCtx = { + App: CachedApp, + initial: true, +@@ -561,7 +562,9 @@ function clearMarks() { + ].forEach((mark)=>performance.clearMarks(mark) + ); + } ++ let routerInst + function AppContainer({ children }) { ++ + return(/*#__PURE__*/ _react.default.createElement(Container, { + fn: (error)=>renderError({ + App: CachedApp, +@@ -569,7 +572,7 @@ function AppContainer({ children }) { + }).catch((err)=>console.error('Error rendering page: ', err) + ) + }, /*#__PURE__*/ _react.default.createElement(_routerContext.RouterContext.Provider, { +- value: (0, _router1).makePublicRouterInstance(router) ++ value: routerInst + }, /*#__PURE__*/ _react.default.createElement(_headManagerContext.HeadManagerContext.Provider, { + value: headManager + }, children)))); From 2593bb6464662430a1db8dd3cac266b16d1f38af Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Feb 2022 13:29:12 +0000 Subject: [PATCH 08/28] Patch package --- beta/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/package.json b/beta/package.json index 564b2036d36..9d7a7678e10 100644 --- a/beta/package.json +++ b/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": { From 34e4f804ed85bf3daf574012cca8136da3f63378 Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Tue, 1 Feb 2022 19:44:12 +0530 Subject: [PATCH 09/28] Add fallback --- beta/src/components/MDX/CodeBlock/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index c0d26847155..3f6a63553cf 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -18,9 +18,11 @@ export default React.memo(function CodeBlockWrapper(props: any): any { return ( -
- + 
+          

+            {props.children}
+          

+
}> From b0815684bcdf1d0539de769a6b56acd1607b0b0b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Feb 2022 22:42:51 +0000 Subject: [PATCH 10/28] Enable flag --- beta/next.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/next.config.js b/beta/next.config.js index 3a2747ace8e..96d1d6fb244 100644 --- a/beta/next.config.js +++ b/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: true, 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', From 38e36f381dc5f7b49fcb5ca4cebab2c47eb899c0 Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Wed, 2 Feb 2022 10:32:22 +0530 Subject: [PATCH 11/28] Fixes local dev env and adds better fallback for codeblock --- beta/src/components/MDX/APIAnatomy.tsx | 6 +++- beta/src/components/MDX/CodeBlock/index.tsx | 19 ++++++++--- beta/src/components/MDX/PackageImport.tsx | 1 + beta/src/pages/_document.tsx | 36 ++++++++++----------- 4 files changed, 37 insertions(+), 25 deletions(-) diff --git a/beta/src/components/MDX/APIAnatomy.tsx b/beta/src/components/MDX/APIAnatomy.tsx index 452a91dcd1d..8965b436a32 100644 --- a/beta/src/components/MDX/APIAnatomy.tsx +++ b/beta/src/components/MDX/APIAnatomy.tsx @@ -59,7 +59,11 @@ export function APIAnatomy({children}: APIAnatomyProps) { break; case 'pre': acc.code = ( - + ); break; } diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index 3f6a63553cf..b32c01a174d 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -1,7 +1,7 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ - +import cn from 'classnames'; import * as React from 'react'; const CodeBlock = React.lazy( () => @@ -13,14 +13,23 @@ const CodeBlock = React.lazy( ) as any ); -export default React.memo(function CodeBlockWrapper(props: any): any { +export default React.memo(function CodeBlockWrapper(props: { + isFromAPIAnatomy: boolean; + isFromPackageImport: boolean; + children: string; +}): any { console.log('- render', props); + const {children, isFromAPIAnatomy, isFromPackageImport} = props; return ( -
- {props.children} + 
+          

+            
{children}
}> 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 ( - - -