From a7996534b56342da50883b4355ac2ac07bdc174f Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 11 Mar 2022 15:48:04 +0000 Subject: [PATCH 01/11] add new bundle for testing --- .nvmrc | 2 +- .../MDX/Sandpack/NewBundlerToggle.tsx | 30 +++++++++++++++++++ beta/src/components/MDX/Sandpack/Preview.tsx | 1 + .../components/MDX/Sandpack/SandpackRoot.tsx | 7 ++++- beta/src/pages/sandpack.mdx | 26 ++++++++++++++++ 5 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx create mode 100644 beta/src/pages/sandpack.mdx diff --git a/.nvmrc b/.nvmrc index 66df3b7ab2d..898e643b005 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -12.16.1 +12.22.0 diff --git a/beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx b/beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx new file mode 100644 index 00000000000..2d2fa894dca --- /dev/null +++ b/beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx @@ -0,0 +1,30 @@ +import {useEffect, useState} from 'react'; + +/** + * Temp component: testing purposes only + */ +export const NewBundlerToggle = () => { + const [state, setState] = useState(false); + + useEffect(() => { + setState(window.localStorage.getItem('sandpack-new-bundler') === 'true'); + }, []); + + const onChange = () => { + const value = window.localStorage.getItem('sandpack-new-bundler'); + + window.localStorage.setItem( + 'sandpack-new-bundler', + value === 'true' ? 'false' : 'true' + ); + + window.location.reload(); + }; + + return ( + + ); +}; diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index 232682f3b69..7078d302d28 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -81,6 +81,7 @@ export function Preview({ function bundlerListener() { const unsubscribe = listen((message: any) => { if (message.type === 'resize') { + console.log(message); setComputedAutoHeight(message.height); } else if (message.type === 'start') { if (message.firstLoad) { diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 7b933e39807..80400fa3107 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -82,7 +82,12 @@ function SandpackRoot(props: SandpackProps) { customSetup={{...setup, files: files}} autorun={autorun} initMode="user-visible" - initModeObserverOptions={{rootMargin: '1400px 0px'}}> + initModeObserverOptions={{rootMargin: '1400px 0px'}} + bundlerURL={ + window.localStorage.getItem('sandpack-new-bundler') === 'true' + ? 'https://sandpack-next.pages.dev' + : 'https://0-14-0-sandpack.codesandbox.io/' + }> + + + +```js +function Profile() { + return Katherine Johnson; +} + +export default function Gallery() { + return ( +
+

Amazing scientists

+ + + +
+ ); +} +``` + + From 3538e011e719ba57745d5b4da5c47a08bdab43ed Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 11 Mar 2022 16:11:36 +0000 Subject: [PATCH 02/11] add timer --- beta/package.json | 3 ++- .../components/MDX/Sandpack/CustomPreset.tsx | 27 ++++++++++++++++++- .../components/MDX/Sandpack/NavigationBar.tsx | 9 ++++++- beta/src/pages/sandpack.mdx | 14 +++++----- beta/yarn.lock | 5 ++++ 5 files changed, 48 insertions(+), 10 deletions(-) diff --git a/beta/package.json b/beta/package.json index 59857cf5773..40e56b2ed35 100644 --- a/beta/package.json +++ b/beta/package.json @@ -38,7 +38,8 @@ "react": "experimental", "react-collapsed": "3.1.0", "react-dom": "experimental", - "scroll-into-view-if-needed": "^2.2.25" + "scroll-into-view-if-needed": "^2.2.25", + "use-timer": "^2.0.1" }, "devDependencies": { "@mdx-js/loader": "^1.6.16", diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index eae75221107..cae8925723e 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -13,6 +13,7 @@ import { SandpackReactDevTools, } from '@codesandbox/sandpack-react'; import scrollIntoView from 'scroll-into-view-if-needed'; +import {useTimer} from 'use-timer'; import cn from 'classnames'; @@ -20,6 +21,28 @@ import {IconChevron} from 'components/Icon/IconChevron'; import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; import {CustomTheme} from './Themes'; +import {ReturnValue} from 'use-timer/lib/types'; + +/** + * Temp component: testing purposes only + */ +const Timer: React.FC<{timer: ReturnValue}> = ({timer}) => { + const {listen} = useSandpack(); + + React.useEffect(() => { + const unsub = listen((message) => { + if (message.type === 'start') { + timer.start(); + } else if (message.type === 'done') { + timer.pause(); + } + }); + + return () => unsub(); + }, []); + + return <>{timer.time}ms; +}; export function CustomPreset({ isSingleFile, @@ -32,6 +55,7 @@ export function CustomPreset({ devToolsLoaded: boolean; onDevToolsLoad: () => void; }) { + const timer = useTimer({interval: 1}); const lineCountRef = React.useRef<{[key: string]: number}>({}); const containerRef = React.useRef(null); const {sandpack} = useSandpack(); @@ -47,10 +71,11 @@ export function CustomPreset({ return ( <> + Time to load:
- +
void; +}) { const {sandpack} = useSandpack(); const [dropdownActive, setDropdownActive] = React.useState(false); const {openPaths, clients} = sandpack; @@ -44,6 +50,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) { const handleReset = () => { sandpack.resetAllFiles(); refresh(); + onReset(); }; return ( diff --git a/beta/src/pages/sandpack.mdx b/beta/src/pages/sandpack.mdx index c5603f54bb1..feefd29154e 100644 --- a/beta/src/pages/sandpack.mdx +++ b/beta/src/pages/sandpack.mdx @@ -7,17 +7,17 @@ import {NewBundlerToggle} from '../components/MDX/Sandpack/NewBundlerToggle'; ```js -function Profile() { - return Katherine Johnson; +function Text() { + return

Lorem ipsum

; } -export default function Gallery() { +export default function App() { return (
-

Amazing scientists

- - - +

Test

+ + +
); } diff --git a/beta/yarn.lock b/beta/yarn.lock index 17a7178db0c..287c504ab0e 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -5044,6 +5044,11 @@ use-subscription@1.5.1: dependencies: object-assign "^4.1.1" +use-timer@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/use-timer/-/use-timer-2.0.1.tgz#eef400a83e3fa4af9896fdd6d07d34f676e9373c" + integrity sha512-ESFkDYZluJZ+G/CaoOBFxg0TjuG7kgNFNhIFZhqv14ho2WIZwuxkRnEURhyLm9I4vNz+ea9ZowNaOkExDAM+6Q== + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From 44d2b8db8da9688410eddf8be2a1a057d5c9b2f5 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Sun, 13 Mar 2022 17:06:34 +0000 Subject: [PATCH 03/11] update url --- beta/src/components/MDX/Sandpack/Preview.tsx | 1 - beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index 7078d302d28..232682f3b69 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -81,7 +81,6 @@ export function Preview({ function bundlerListener() { const unsubscribe = listen((message: any) => { if (message.type === 'resize') { - console.log(message); setComputedAutoHeight(message.height); } else if (message.type === 'start') { if (message.firstLoad) { diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 80400fa3107..23d77a84486 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -85,7 +85,7 @@ function SandpackRoot(props: SandpackProps) { initModeObserverOptions={{rootMargin: '1400px 0px'}} bundlerURL={ window.localStorage.getItem('sandpack-new-bundler') === 'true' - ? 'https://sandpack-next.pages.dev' + ? 'https://sandpack-bundler.pages.dev/' : 'https://0-14-0-sandpack.codesandbox.io/' }> Date: Thu, 21 Apr 2022 11:09:53 +0100 Subject: [PATCH 04/11] update bundler version --- beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 23d77a84486..6d74600f657 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -85,7 +85,7 @@ function SandpackRoot(props: SandpackProps) { initModeObserverOptions={{rootMargin: '1400px 0px'}} bundlerURL={ window.localStorage.getItem('sandpack-new-bundler') === 'true' - ? 'https://sandpack-bundler.pages.dev/' + ? 'https://cf56a978.sandpack-bundler.pages.dev' : 'https://0-14-0-sandpack.codesandbox.io/' }> Date: Sat, 7 May 2022 17:47:17 +0100 Subject: [PATCH 05/11] Remove temporary code --- beta/package.json | 3 +- .../components/MDX/Sandpack/CustomPreset.tsx | 26 +--------------- .../components/MDX/Sandpack/NavigationBar.tsx | 9 +----- .../MDX/Sandpack/NewBundlerToggle.tsx | 30 ------------------- .../components/MDX/Sandpack/SandpackRoot.tsx | 6 +--- beta/src/pages/sandpack.mdx | 26 ---------------- beta/yarn.lock | 5 ---- 7 files changed, 4 insertions(+), 101 deletions(-) delete mode 100644 beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx delete mode 100644 beta/src/pages/sandpack.mdx diff --git a/beta/package.json b/beta/package.json index 40e56b2ed35..59857cf5773 100644 --- a/beta/package.json +++ b/beta/package.json @@ -38,8 +38,7 @@ "react": "experimental", "react-collapsed": "3.1.0", "react-dom": "experimental", - "scroll-into-view-if-needed": "^2.2.25", - "use-timer": "^2.0.1" + "scroll-into-view-if-needed": "^2.2.25" }, "devDependencies": { "@mdx-js/loader": "^1.6.16", diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index cae8925723e..d2e3434230f 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -13,7 +13,6 @@ import { SandpackReactDevTools, } from '@codesandbox/sandpack-react'; import scrollIntoView from 'scroll-into-view-if-needed'; -import {useTimer} from 'use-timer'; import cn from 'classnames'; @@ -23,27 +22,6 @@ import {Preview} from './Preview'; import {CustomTheme} from './Themes'; import {ReturnValue} from 'use-timer/lib/types'; -/** - * Temp component: testing purposes only - */ -const Timer: React.FC<{timer: ReturnValue}> = ({timer}) => { - const {listen} = useSandpack(); - - React.useEffect(() => { - const unsub = listen((message) => { - if (message.type === 'start') { - timer.start(); - } else if (message.type === 'done') { - timer.pause(); - } - }); - - return () => unsub(); - }, []); - - return <>{timer.time}ms; -}; - export function CustomPreset({ isSingleFile, showDevTools, @@ -55,7 +33,6 @@ export function CustomPreset({ devToolsLoaded: boolean; onDevToolsLoad: () => void; }) { - const timer = useTimer({interval: 1}); const lineCountRef = React.useRef<{[key: string]: number}>({}); const containerRef = React.useRef(null); const {sandpack} = useSandpack(); @@ -71,11 +48,10 @@ export function CustomPreset({ return ( <> - Time to load:
- +
void; -}) { +export function NavigationBar({showDownload}: {showDownload: boolean}) { const {sandpack} = useSandpack(); const [dropdownActive, setDropdownActive] = React.useState(false); const {openPaths, clients} = sandpack; @@ -50,7 +44,6 @@ export function NavigationBar({ const handleReset = () => { sandpack.resetAllFiles(); refresh(); - onReset(); }; return ( diff --git a/beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx b/beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx deleted file mode 100644 index 2d2fa894dca..00000000000 --- a/beta/src/components/MDX/Sandpack/NewBundlerToggle.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import {useEffect, useState} from 'react'; - -/** - * Temp component: testing purposes only - */ -export const NewBundlerToggle = () => { - const [state, setState] = useState(false); - - useEffect(() => { - setState(window.localStorage.getItem('sandpack-new-bundler') === 'true'); - }, []); - - const onChange = () => { - const value = window.localStorage.getItem('sandpack-new-bundler'); - - window.localStorage.setItem( - 'sandpack-new-bundler', - value === 'true' ? 'false' : 'true' - ); - - window.location.reload(); - }; - - return ( - - ); -}; diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 6d74600f657..5dfecf603be 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -83,11 +83,7 @@ function SandpackRoot(props: SandpackProps) { autorun={autorun} initMode="user-visible" initModeObserverOptions={{rootMargin: '1400px 0px'}} - bundlerURL={ - window.localStorage.getItem('sandpack-new-bundler') === 'true' - ? 'https://cf56a978.sandpack-bundler.pages.dev' - : 'https://0-14-0-sandpack.codesandbox.io/' - }> + bundlerURL="https://cf56a978.sandpack-bundler.pages.dev"> - - - -```js -function Text() { - return

Lorem ipsum

; -} - -export default function App() { - return ( -
-

Test

- - - -
- ); -} -``` - - diff --git a/beta/yarn.lock b/beta/yarn.lock index 287c504ab0e..17a7178db0c 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -5044,11 +5044,6 @@ use-subscription@1.5.1: dependencies: object-assign "^4.1.1" -use-timer@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/use-timer/-/use-timer-2.0.1.tgz#eef400a83e3fa4af9896fdd6d07d34f676e9373c" - integrity sha512-ESFkDYZluJZ+G/CaoOBFxg0TjuG7kgNFNhIFZhqv14ho2WIZwuxkRnEURhyLm9I4vNz+ea9ZowNaOkExDAM+6Q== - util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From 0e4a3d8156683741abde02d69f8f2cf1709a4bd3 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 7 May 2022 17:49:30 +0100 Subject: [PATCH 06/11] Fix lint --- beta/src/components/MDX/Sandpack/CustomPreset.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index d2e3434230f..eae75221107 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -20,7 +20,6 @@ import {IconChevron} from 'components/Icon/IconChevron'; import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; import {CustomTheme} from './Themes'; -import {ReturnValue} from 'use-timer/lib/types'; export function CustomPreset({ isSingleFile, From 488924526c2b8ea84f0766c3181c5c5b9932ab47 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 10 May 2022 10:38:44 +0200 Subject: [PATCH 07/11] why? --- beta/src/components/MDX/Sandpack/Preview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index 232682f3b69..9d3539818f1 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -80,6 +80,7 @@ export function Preview({ React.useEffect( function bundlerListener() { const unsubscribe = listen((message: any) => { + console.log(message); if (message.type === 'resize') { setComputedAutoHeight(message.height); } else if (message.type === 'start') { From df862bd3e20b4439a4fdd5ee320c825cdafaca90 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 10 May 2022 10:44:31 +0200 Subject: [PATCH 08/11] testing bundler url --- beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 5dfecf603be..40403b9544b 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -83,7 +83,7 @@ function SandpackRoot(props: SandpackProps) { autorun={autorun} initMode="user-visible" initModeObserverOptions={{rootMargin: '1400px 0px'}} - bundlerURL="https://cf56a978.sandpack-bundler.pages.dev"> + bundlerURL="https://8r8rls-1234.preview.csb.app"> Date: Wed, 11 May 2022 09:41:59 +0200 Subject: [PATCH 09/11] uncaught exception handling --- beta/src/components/MDX/Sandpack/Preview.tsx | 1 - beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index 9d3539818f1..232682f3b69 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -80,7 +80,6 @@ export function Preview({ React.useEffect( function bundlerListener() { const unsubscribe = listen((message: any) => { - console.log(message); if (message.type === 'resize') { setComputedAutoHeight(message.height); } else if (message.type === 'start') { diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 40403b9544b..b9857854108 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -83,7 +83,7 @@ function SandpackRoot(props: SandpackProps) { autorun={autorun} initMode="user-visible" initModeObserverOptions={{rootMargin: '1400px 0px'}} - bundlerURL="https://8r8rls-1234.preview.csb.app"> + bundlerURL="https://5c3ec808.sandpack-bundler.pages.dev"> Date: Mon, 16 May 2022 21:53:52 +0100 Subject: [PATCH 10/11] catch global errors on new bundler --- beta/package.json | 2 +- .../components/MDX/Sandpack/SandpackRoot.tsx | 4 +- beta/yarn.lock | 55 ++++--------------- 3 files changed, 16 insertions(+), 45 deletions(-) diff --git a/beta/package.json b/beta/package.json index 59857cf5773..d2fe90cb02d 100644 --- a/beta/package.json +++ b/beta/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "v0.14.3-experimental.1", + "@codesandbox/sandpack-react": "v0.19.8-experimental.0", "@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/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index b9857854108..e3bf22c4db9 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import {SandpackProvider} from '@codesandbox/sandpack-react'; +import {SandpackLogLevel} from '@codesandbox/sandpack-client'; import {CustomPreset} from './CustomPreset'; import {createFileMap} from './utils'; @@ -83,7 +84,8 @@ function SandpackRoot(props: SandpackProps) { autorun={autorun} initMode="user-visible" initModeObserverOptions={{rootMargin: '1400px 0px'}} - bundlerURL="https://5c3ec808.sandpack-bundler.pages.dev"> + bundlerURL="https://8b1efa4b.sandpack-bundler.pages.dev" + logLevel={SandpackLogLevel.None}> Date: Wed, 18 May 2022 22:30:25 +0100 Subject: [PATCH 11/11] Try latest bundler --- beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index e3bf22c4db9..444776e1bc5 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -84,7 +84,7 @@ function SandpackRoot(props: SandpackProps) { autorun={autorun} initMode="user-visible" initModeObserverOptions={{rootMargin: '1400px 0px'}} - bundlerURL="https://8b1efa4b.sandpack-bundler.pages.dev" + bundlerURL="https://22530bfe.sandpack-bundler.pages.dev" logLevel={SandpackLogLevel.None}>