Skip to content

Commit 1ef61b4

Browse files
authored
[Beta] Upgrade Sandpack (#5033)
* Revert "Revert "[beta] upgrade sandpack and refactor sandpack.css (#4843)" (#4959)" This reverts commit da6a06e. * Fix tabbing * Fixes * More bump * Bump bundler * Fix overflows
1 parent 8f8bcb9 commit 1ef61b4

File tree

13 files changed

+578
-405
lines changed

13 files changed

+578
-405
lines changed

beta/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"check-all": "npm-run-all prettier lint:fix tsc"
2323
},
2424
"dependencies": {
25-
"@codesandbox/sandpack-react": "v0.19.8-experimental.7",
25+
"@codesandbox/sandpack-react": "1.7.2",
2626
"@docsearch/css": "3.0.0-alpha.41",
2727
"@docsearch/react": "3.0.0-alpha.41",
2828
"@headlessui/react": "^1.7.0",

beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch

Lines changed: 0 additions & 37 deletions
This file was deleted.

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

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import cn from 'classnames';
66
import {
77
SandpackCodeViewer,
88
SandpackProvider,
9-
SandpackThemeProvider,
109
} from '@codesandbox/sandpack-react';
1110
import rangeParser from 'parse-numeric-range';
1211
import {CustomTheme} from '../Sandpack/Themes';
@@ -68,27 +67,34 @@ const CodeBlock = function CodeBlock({
6867
const decorators = getDecoratedLineInfo();
6968
return (
7069
<div
71-
translate="no"
70+
key={
71+
// HACK: There seems to be a bug where the rendered result
72+
// "lags behind" the edits to it. For now, force it to reset.
73+
process.env.NODE_ENV === 'development' ? children : ''
74+
}
7275
className={cn(
76+
'sandpack sandpack--codeblock',
7377
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
7478
!noMargin && 'my-8'
7579
)}>
7680
<SandpackProvider
81+
files={{
82+
[filename]: {
83+
code: children.trimEnd(),
84+
},
85+
}}
7786
customSetup={{
7887
entry: filename,
79-
files: {
80-
[filename]: {
81-
code: children.trimEnd(),
82-
},
83-
},
84-
}}>
85-
<SandpackThemeProvider theme={CustomTheme}>
86-
<SandpackCodeViewer
87-
key={children.trimEnd()}
88-
showLineNumbers={false}
89-
decorators={decorators}
90-
/>
91-
</SandpackThemeProvider>
88+
}}
89+
options={{
90+
initMode: 'immediate',
91+
}}
92+
theme={CustomTheme}>
93+
<SandpackCodeViewer
94+
key={children.trimEnd()}
95+
showLineNumbers={false}
96+
decorators={decorators}
97+
/>
9298
</SandpackProvider>
9399
</div>
94100
);

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

Lines changed: 59 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,16 @@ import {
77
useSandpack,
88
useActiveCode,
99
SandpackCodeEditor,
10-
SandpackThemeProvider,
11-
SandpackReactDevTools,
10+
// SandpackReactDevTools,
11+
SandpackLayout,
1212
} from '@codesandbox/sandpack-react';
1313
import cn from 'classnames';
1414

1515
import {IconChevron} from 'components/Icon/IconChevron';
1616
import {NavigationBar} from './NavigationBar';
1717
import {Preview} from './Preview';
18-
import {CustomTheme} from './Themes';
19-
import {useSandpackLint} from './useSandpackLint';
2018

21-
// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
22-
const emptyArray: Array<any> = [];
19+
import {useSandpackLint} from './useSandpackLint';
2320

2421
export function CustomPreset({
2522
showDevTools,
@@ -39,11 +36,11 @@ export function CustomPreset({
3936
const {code} = useActiveCode();
4037
const [isExpanded, setIsExpanded] = React.useState(false);
4138

42-
const {activePath} = sandpack;
43-
if (!lineCountRef.current[activePath]) {
44-
lineCountRef.current[activePath] = code.split('\n').length;
39+
const {activeFile} = sandpack;
40+
if (!lineCountRef.current[activeFile]) {
41+
lineCountRef.current[activeFile] = code.split('\n').length;
4542
}
46-
const lineCount = lineCountRef.current[activePath];
43+
const lineCount = lineCountRef.current[activeFile];
4744
const isExpandable = lineCount > 16 || isExpanded;
4845

4946
return (
@@ -52,64 +49,61 @@ export function CustomPreset({
5249
className="shadow-lg dark:shadow-lg-dark rounded-lg"
5350
ref={containerRef}>
5451
<NavigationBar providedFiles={providedFiles} />
55-
<SandpackThemeProvider theme={CustomTheme}>
56-
<div
57-
ref={sandpack.lazyAnchorRef}
58-
className={cn(
59-
'sp-layout sp-custom-layout',
60-
showDevTools && devToolsLoaded && 'sp-layout-devtools',
61-
isExpanded && 'sp-layout-expanded'
62-
)}>
63-
<SandpackCodeEditor
64-
showLineNumbers
65-
showInlineErrors
66-
showTabs={false}
67-
showRunButton={false}
68-
extensions={lintExtensions}
69-
extensionsKeymap={emptyArray}
70-
/>
71-
<Preview
72-
className="order-last xl:order-2"
73-
isExpanded={isExpanded}
74-
lintErrors={lintErrors}
75-
/>
76-
{isExpandable && (
77-
<button
78-
translate="yes"
79-
className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
80-
onClick={() => {
81-
const nextIsExpanded = !isExpanded;
82-
flushSync(() => {
83-
setIsExpanded(nextIsExpanded);
84-
});
85-
if (!nextIsExpanded && containerRef.current !== null) {
52+
<SandpackLayout
53+
className={cn(
54+
showDevTools && devToolsLoaded && 'sp-layout-devtools',
55+
!isExpandable && 'rounded-b-lg overflow-hidden',
56+
isExpanded && 'sp-layout-expanded'
57+
)}>
58+
<SandpackCodeEditor
59+
showLineNumbers
60+
showInlineErrors
61+
showTabs={false}
62+
showRunButton={false}
63+
extensions={lintExtensions}
64+
/>
65+
<Preview
66+
className="order-last xl:order-2"
67+
isExpanded={isExpanded}
68+
lintErrors={lintErrors}
69+
/>
70+
{isExpandable && (
71+
<button
72+
translate="yes"
73+
className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
74+
onClick={() => {
75+
const nextIsExpanded = !isExpanded;
76+
flushSync(() => {
77+
setIsExpanded(nextIsExpanded);
78+
});
79+
if (!nextIsExpanded && containerRef.current !== null) {
80+
// @ts-ignore
81+
if (containerRef.current.scrollIntoViewIfNeeded) {
8682
// @ts-ignore
87-
if (containerRef.current.scrollIntoViewIfNeeded) {
88-
// @ts-ignore
89-
containerRef.current.scrollIntoViewIfNeeded();
90-
} else {
91-
containerRef.current.scrollIntoView({
92-
block: 'nearest',
93-
inline: 'nearest',
94-
});
95-
}
83+
containerRef.current.scrollIntoViewIfNeeded();
84+
} else {
85+
containerRef.current.scrollIntoView({
86+
block: 'nearest',
87+
inline: 'nearest',
88+
});
9689
}
97-
}}>
98-
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
99-
<IconChevron
100-
className="inline mr-1.5 text-xl"
101-
displayDirection={isExpanded ? 'up' : 'down'}
102-
/>
103-
{isExpanded ? 'Show less' : 'Show more'}
104-
</span>
105-
</button>
106-
)}
107-
</div>
108-
109-
{showDevTools && (
110-
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
90+
}
91+
}}>
92+
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
93+
<IconChevron
94+
className="inline mr-1.5 text-xl"
95+
displayDirection={isExpanded ? 'up' : 'down'}
96+
/>
97+
{isExpanded ? 'Show less' : 'Show more'}
98+
</span>
99+
</button>
111100
)}
112-
</SandpackThemeProvider>
101+
</SandpackLayout>
102+
103+
{/* {showDevTools && (
104+
// @ts-ignore TODO(@danilowoz): support devtools
105+
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
106+
)} */}
113107
</div>
114108
</>
115109
);

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

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
4040
// By default, show the dropdown because all tabs may not fit.
4141
// We don't know whether they'll fit or not until after hydration:
4242
const [showDropdown, setShowDropdown] = React.useState(true);
43-
const {openPaths, clients, setActiveFile, activePath} = sandpack;
43+
const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;
4444
const clientId = Object.keys(clients)[0];
4545
const {refresh} = useSandpackNavigation(clientId);
46-
const isMultiFile = openPaths.length > 1;
46+
const isMultiFile = visibleFiles.length > 1;
4747
const hasJustToggledDropdown = React.useRef(false);
4848

4949
// Keep track of whether we can show all tabs or just the dropdown.
@@ -88,9 +88,9 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
8888
};
8989

9090
return (
91-
<div className="bg-wash 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">
91+
<div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg text-lg">
9292
<div className="flex-1 grow min-w-0 px-4 lg:px-6">
93-
<Listbox value={activePath} onChange={setActiveFile}>
93+
<Listbox value={activeFile} onChange={setActiveFile}>
9494
<div ref={containerRef}>
9595
<div className="relative overflow-hidden">
9696
<div
@@ -105,12 +105,12 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
105105
)}>
106106
<FileTabs />
107107
</div>
108-
<Listbox.Button className="contents">
108+
<Listbox.Button as={React.Fragment}>
109109
{({open}) => (
110110
// If tabs don't fit, display the dropdown instead.
111111
// The dropdown is absolutely positioned inside the
112112
// space that's taken by the (invisible) tab list.
113-
<div
113+
<button
114114
className={cn(
115115
'absolute top-0 left-0',
116116
!showDropdown && 'invisible'
@@ -120,7 +120,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
120120
'h-full py-2 px-1 mt-px -mb-px flex border-b text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate'
121121
)}
122122
style={{maxWidth: '160px'}}>
123-
{getFileName(activePath)}
123+
{getFileName(activeFile)}
124124
{isMultiFile && (
125125
<span className="ml-2">
126126
<IconChevron
@@ -129,22 +129,27 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
129129
</span>
130130
)}
131131
</span>
132-
</div>
132+
</button>
133133
)}
134134
</Listbox.Button>
135135
</div>
136136
</div>
137137
{isMultiFile && showDropdown && (
138138
<Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
139-
{openPaths.map((filePath: string) => (
139+
{visibleFiles.map((filePath: string) => (
140140
<Listbox.Option
141141
key={filePath}
142142
value={filePath}
143-
className={cn(
144-
'text-md mx-2 my-4 cursor-pointer',
145-
filePath === activePath && 'text-link dark:text-link-dark'
146-
)}>
147-
{getFileName(filePath)}
143+
as={React.Fragment}>
144+
{({active}) => (
145+
<li
146+
className={cn(
147+
'text-md mx-2 my-4 cursor-pointer',
148+
active && 'text-link dark:text-link-dark'
149+
)}>
150+
{getFileName(filePath)}
151+
</li>
152+
)}
148153
</Listbox.Option>
149154
))}
150155
</Listbox.Options>

0 commit comments

Comments
 (0)