-
Notifications
You must be signed in to change notification settings - Fork 7.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Splitting sandpack from main bundle (#4256)
* Initial Commit * play with it * oops * easier repro * import type * remove `suspense: true` * Add patch for next * Patch package * Add fallback * Enable flag * Fixes local dev env and adds better fallback for codeblock * Adds fallback for sandpack (should work fine) * turn off concurrentFeatures * Revert "turn off concurrentFeatures" This reverts commit 50158ecbd33969e707a2a91a54e822e90c2ebfde. * Update SandpackWrapper.tsx * Removed flags and setTimeouts * add timeouts and promise again * Adds bottom bezel and scroll to sandpack fallback * tinker bottombezel and remove console * Update CodeBlock.tsx * Update SandpackWrapper.tsx * removing overflows to avoid explicit scrolls * upgrade nextjs to canary * Rm patch * Fix TS * Bump Next * No more CSS jumping * Reverts the canary to use the latest Next.js `12.0.10` Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@me.com>
- Loading branch information
3 people
committed
Feb 16, 2022
1 parent
0209e1b
commit 2979d0c
Showing
14 changed files
with
357 additions
and
262 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.