From b2e0481843aec6575301488bd8cd3fb1b80c1040 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 16 Nov 2021 15:24:08 +0000 Subject: [PATCH] feat(sandpack): split bundle --- beta/package.json | 2 +- .../components/MDX/Sandpack/CustomPreset.tsx | 25 +- .../MDX/Sandpack/SandpackCodeEditorLazy.tsx | 3 + beta/src/components/MDX/Sandpack/index.tsx | 2 + beta/yarn.lock | 630 +++++++----------- 5 files changed, 276 insertions(+), 386 deletions(-) create mode 100644 beta/src/components/MDX/Sandpack/SandpackCodeEditorLazy.tsx diff --git a/beta/package.json b/beta/package.json index a6c6bedb0b9..394c6085f9f 100644 --- a/beta/package.json +++ b/beta/package.json @@ -20,7 +20,7 @@ "postinstall": "is-ci || (cd .. && husky install beta/.husky)" }, "dependencies": { - "@codesandbox/sandpack-react": "^0.1.20", + "@codesandbox/sandpack-react": "0.3.8-alpha.4", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.3.0", diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index c4b72601fc4..26cb184a622 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -8,9 +8,10 @@ import {flushSync} from 'react-dom'; import { useSandpack, useActiveCode, - SandpackCodeEditor, SandpackThemeProvider, } from '@codesandbox/sandpack-react'; +import { SandpackCodeEditor } from "@codesandbox/sandpack-react/dist/components/CodeEditor" + import scrollIntoView from 'scroll-into-view-if-needed'; import {IconChevron} from 'components/Icon/IconChevron'; @@ -18,6 +19,8 @@ import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; import {CustomTheme} from './Themes'; +// const SandpackCodeEditor = React.lazy(() => import('@codesandbox/sandpack-react/dist/components/CodeEditor').then(module => module.SandpackCodeEditor) as any) + export function CustomPreset({ isSingleFile, onReset, @@ -60,15 +63,17 @@ export function CustomPreset({ // There has to be some better way to do this... minHeight: 216, }}> - + {code}}> + +