Skip to content

[Beta] Upgrade Sandpack #5033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 10, 2022
Merged

[Beta] Upgrade Sandpack #5033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
77394e0
Revert "Revert "[beta] upgrade sandpack and refactor sandpack.css (#4…
gaearon Sep 10, 2022
9e17aed
Fix tabbing
gaearon Sep 10, 2022
adf24e7
Fixes
gaearon Sep 10, 2022
72525e6
More bump
gaearon Sep 10, 2022
3592165
Bump bundler
gaearon Sep 10, 2022
866960a
Fix overflows
gaearon Sep 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion beta/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"check-all": "npm-run-all prettier lint:fix tsc"
},
"dependencies": {
"@codesandbox/sandpack-react": "v0.19.8-experimental.7",
"@codesandbox/sandpack-react": "1.7.2",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@headlessui/react": "^1.7.0",
Expand Down
37 changes: 0 additions & 37 deletions beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
View file
Open in desktop

This file was deleted.

36 changes: 21 additions & 15 deletions beta/src/components/MDX/CodeBlock/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import cn from 'classnames';
import {
SandpackCodeViewer,
SandpackProvider,
SandpackThemeProvider,
} from '@codesandbox/sandpack-react';
import rangeParser from 'parse-numeric-range';
import {CustomTheme} from '../Sandpack/Themes';
Expand Down Expand Up @@ -68,27 +67,34 @@ const CodeBlock = function CodeBlock({
const decorators = getDecoratedLineInfo();
return (
<div
translate="no"
key={
// HACK: There seems to be a bug where the rendered result
// "lags behind" the edits to it. For now, force it to reset.
process.env.NODE_ENV === 'development' ? children : ''
}
className={cn(
'sandpack sandpack--codeblock',
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
!noMargin && 'my-8'
)}>
<SandpackProvider
files={{
[filename]: {
code: children.trimEnd(),
},
}}
customSetup={{
entry: filename,
files: {
[filename]: {
code: children.trimEnd(),
},
},
}}>
<SandpackThemeProvider theme={CustomTheme}>
<SandpackCodeViewer
key={children.trimEnd()}
showLineNumbers={false}
decorators={decorators}
/>
</SandpackThemeProvider>
}}
options={{
initMode: 'immediate',
}}
theme={CustomTheme}>
<SandpackCodeViewer
key={children.trimEnd()}
showLineNumbers={false}
decorators={decorators}
/>
</SandpackProvider>
</div>
);
Expand Down
124 changes: 59 additions & 65 deletions beta/src/components/MDX/Sandpack/CustomPreset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,16 @@ import {
useSandpack,
useActiveCode,
SandpackCodeEditor,
SandpackThemeProvider,
SandpackReactDevTools,
// SandpackReactDevTools,
SandpackLayout,
} from '@codesandbox/sandpack-react';
import cn from 'classnames';

import {IconChevron} from 'components/Icon/IconChevron';
import {NavigationBar} from './NavigationBar';
import {Preview} from './Preview';
import {CustomTheme} from './Themes';
import {useSandpackLint} from './useSandpackLint';

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

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

const {activePath} = sandpack;
if (!lineCountRef.current[activePath]) {
lineCountRef.current[activePath] = code.split('\n').length;
const {activeFile} = sandpack;
if (!lineCountRef.current[activeFile]) {
lineCountRef.current[activeFile] = code.split('\n').length;
}
const lineCount = lineCountRef.current[activePath];
const lineCount = lineCountRef.current[activeFile];
const isExpandable = lineCount > 16 || isExpanded;

return (
Expand All @@ -52,64 +49,61 @@ export function CustomPreset({
className="shadow-lg dark:shadow-lg-dark rounded-lg"
ref={containerRef}>
<NavigationBar providedFiles={providedFiles} />
<SandpackThemeProvider theme={CustomTheme}>
<div
ref={sandpack.lazyAnchorRef}
className={cn(
'sp-layout sp-custom-layout',
showDevTools && devToolsLoaded && 'sp-layout-devtools',
isExpanded && 'sp-layout-expanded'
)}>
<SandpackCodeEditor
showLineNumbers
showInlineErrors
showTabs={false}
showRunButton={false}
extensions={lintExtensions}
extensionsKeymap={emptyArray}
/>
<Preview
className="order-last xl:order-2"
isExpanded={isExpanded}
lintErrors={lintErrors}
/>
{isExpandable && (
<button
translate="yes"
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"
onClick={() => {
const nextIsExpanded = !isExpanded;
flushSync(() => {
setIsExpanded(nextIsExpanded);
});
if (!nextIsExpanded && containerRef.current !== null) {
<SandpackLayout
className={cn(
showDevTools && devToolsLoaded && 'sp-layout-devtools',
!isExpandable && 'rounded-b-lg overflow-hidden',
isExpanded && 'sp-layout-expanded'
)}>
<SandpackCodeEditor
showLineNumbers
showInlineErrors
showTabs={false}
showRunButton={false}
extensions={lintExtensions}
/>
<Preview
className="order-last xl:order-2"
isExpanded={isExpanded}
lintErrors={lintErrors}
/>
{isExpandable && (
<button
translate="yes"
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"
onClick={() => {
const nextIsExpanded = !isExpanded;
flushSync(() => {
setIsExpanded(nextIsExpanded);
});
if (!nextIsExpanded && containerRef.current !== null) {
// @ts-ignore
if (containerRef.current.scrollIntoViewIfNeeded) {
// @ts-ignore
if (containerRef.current.scrollIntoViewIfNeeded) {
// @ts-ignore
containerRef.current.scrollIntoViewIfNeeded();
} else {
containerRef.current.scrollIntoView({
block: 'nearest',
inline: 'nearest',
});
}
containerRef.current.scrollIntoViewIfNeeded();
} else {
containerRef.current.scrollIntoView({
block: 'nearest',
inline: 'nearest',
});
}
}}>
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
<IconChevron
className="inline mr-1.5 text-xl"
displayDirection={isExpanded ? 'up' : 'down'}
/>
{isExpanded ? 'Show less' : 'Show more'}
</span>
</button>
)}
</div>

{showDevTools && (
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
}
}}>
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
<IconChevron
className="inline mr-1.5 text-xl"
displayDirection={isExpanded ? 'up' : 'down'}
/>
{isExpanded ? 'Show less' : 'Show more'}
</span>
</button>
)}
</SandpackThemeProvider>
</SandpackLayout>

{/* {showDevTools && (
// @ts-ignore TODO(@danilowoz): support devtools
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
)} */}
</div>
</>
);
Expand Down
33 changes: 19 additions & 14 deletions beta/src/components/MDX/Sandpack/NavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
// By default, show the dropdown because all tabs may not fit.
// We don't know whether they'll fit or not until after hydration:
const [showDropdown, setShowDropdown] = React.useState(true);
const {openPaths, clients, setActiveFile, activePath} = sandpack;
const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;
const clientId = Object.keys(clients)[0];
const {refresh} = useSandpackNavigation(clientId);
const isMultiFile = openPaths.length > 1;
const isMultiFile = visibleFiles.length > 1;
const hasJustToggledDropdown = React.useRef(false);

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

return (
<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">
<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">
<div className="flex-1 grow min-w-0 px-4 lg:px-6">
<Listbox value={activePath} onChange={setActiveFile}>
<Listbox value={activeFile} onChange={setActiveFile}>
<div ref={containerRef}>
<div className="relative overflow-hidden">
<div
Expand All @@ -105,12 +105,12 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
)}>
<FileTabs />
</div>
<Listbox.Button className="contents">
<Listbox.Button as={React.Fragment}>
{({open}) => (
// If tabs don't fit, display the dropdown instead.
// The dropdown is absolutely positioned inside the
// space that's taken by the (invisible) tab list.
<div
<button
className={cn(
'absolute top-0 left-0',
!showDropdown && 'invisible'
Expand All @@ -120,7 +120,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
'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'
)}
style={{maxWidth: '160px'}}>
{getFileName(activePath)}
{getFileName(activeFile)}
{isMultiFile && (
<span className="ml-2">
<IconChevron
Expand All @@ -129,22 +129,27 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
</span>
)}
</span>
</div>
</button>
)}
</Listbox.Button>
</div>
</div>
{isMultiFile && showDropdown && (
<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">
{openPaths.map((filePath: string) => (
{visibleFiles.map((filePath: string) => (
<Listbox.Option
key={filePath}
value={filePath}
className={cn(
'text-md mx-2 my-4 cursor-pointer',
filePath === activePath && 'text-link dark:text-link-dark'
)}>
{getFileName(filePath)}
as={React.Fragment}>
{({active}) => (
<li
className={cn(
'text-md mx-2 my-4 cursor-pointer',
active && 'text-link dark:text-link-dark'
)}>
{getFileName(filePath)}
</li>
)}
</Listbox.Option>
))}
</Listbox.Options>
Expand Down
Loading