diff --git a/next.config.js b/next.config.js index f8ec196e131..0d55bd200c7 100644 --- a/next.config.js +++ b/next.config.js @@ -19,6 +19,36 @@ const nextConfig = { scrollRestoration: true, reactCompiler: true, }, + async headers() { + return [ + { + source: '/(.*)', + headers: [ + { + key: 'Cross-Origin-Embedder-Policy', + value: 'require-corp', + }, + { + key: 'Cross-Origin-Opener-Policy', + value: 'same-origin', + }, + ], + }, + { + source: '/images/content/(.*)', + headers: [ + { + key: 'Cross-Origin-Resource-Policy', + value: 'cross-origin', + }, + { + key: 'Access-Control-Allow-Origin', + value: '*', + }, + ], + }, + ]; + }, async rewrites() { return { beforeFiles: [ diff --git a/package.json b/package.json index 359f30d3e21..3a7ebef2c6a 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,7 @@ "scripts": { "analyze": "ANALYZE=true next build", "dev": "next-remote-watch ./src/content", - "prebuild:rsc": "node scripts/buildRscWorker.mjs", - "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs", + "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs", "lint": "next lint && eslint \"src/content/**/*.md\"", "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix", "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", @@ -27,11 +26,11 @@ "test:eslint-local-rules": "yarn --cwd eslint-local-rules test" }, "dependencies": { - "@codesandbox/sandpack-react": "2.13.5", "@docsearch/css": "^3.8.3", "@docsearch/react": "^3.8.3", "@headlessui/react": "^1.7.0", "@radix-ui/react-context-menu": "^2.1.5", + "@webcontainer/react": "^0.0.3", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", "debounce": "^1.2.1", @@ -77,7 +76,7 @@ "eslint-plugin-local-rules": "link:eslint-local-rules", "eslint-plugin-react": "7.x", "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112", - "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215", + "eslint-plugin-react-hooks": "^5.2.0", "fs-extra": "^9.0.1", "globby": "^11.0.1", "gray-matter": "^4.0.2", diff --git a/public/images/content/abdus-salam-s.jpg b/public/images/content/abdus-salam-s.jpg new file mode 100644 index 00000000000..a15a897eaa8 Binary files /dev/null and b/public/images/content/abdus-salam-s.jpg differ diff --git a/public/images/content/aklilu-lemma-m.jpg b/public/images/content/aklilu-lemma-m.jpg new file mode 100644 index 00000000000..9fe8f63076f Binary files /dev/null and b/public/images/content/aklilu-lemma-m.jpg differ diff --git a/public/images/content/aklilu-lemma-s.jpg b/public/images/content/aklilu-lemma-s.jpg new file mode 100644 index 00000000000..fb3cf212ce6 Binary files /dev/null and b/public/images/content/aklilu-lemma-s.jpg differ diff --git a/public/images/content/aklilu-lemma.jpg b/public/images/content/aklilu-lemma.jpg new file mode 100644 index 00000000000..67393f31ea4 Binary files /dev/null and b/public/images/content/aklilu-lemma.jpg differ diff --git a/public/images/content/alan-l-hart-s.jpg b/public/images/content/alan-l-hart-s.jpg new file mode 100644 index 00000000000..2bfa8ab8251 Binary files /dev/null and b/public/images/content/alan-l-hart-s.jpg differ diff --git a/public/images/content/aureole-m.jpg b/public/images/content/aureole-m.jpg new file mode 100644 index 00000000000..a96c5c03c83 Binary files /dev/null and b/public/images/content/aureole-m.jpg differ diff --git a/public/images/content/big-bellies-m.jpg b/public/images/content/big-bellies-m.jpg new file mode 100644 index 00000000000..735c29cd563 Binary files /dev/null and b/public/images/content/big-bellies-m.jpg differ diff --git a/public/images/content/bilbao-spain.jpg b/public/images/content/bilbao-spain.jpg new file mode 100644 index 00000000000..42a0a00efad Binary files /dev/null and b/public/images/content/bilbao-spain.jpg differ diff --git a/public/images/content/blue-nana-m.jpg b/public/images/content/blue-nana-m.jpg new file mode 100644 index 00000000000..b81b83d2177 Binary files /dev/null and b/public/images/content/blue-nana-m.jpg differ diff --git a/public/images/content/bo-kaap-cape-town-l.jpg b/public/images/content/bo-kaap-cape-town-l.jpg new file mode 100644 index 00000000000..03894f397a3 Binary files /dev/null and b/public/images/content/bo-kaap-cape-town-l.jpg differ diff --git a/public/images/content/burano-italy-l.jpg b/public/images/content/burano-italy-l.jpg new file mode 100644 index 00000000000..f333607292f Binary files /dev/null and b/public/images/content/burano-italy-l.jpg differ diff --git a/public/images/content/cavaliere-m.png b/public/images/content/cavaliere-m.png new file mode 100644 index 00000000000..5f482def6c5 Binary files /dev/null and b/public/images/content/cavaliere-m.png differ diff --git a/public/images/content/chefchaouen-morocco-l.jpg b/public/images/content/chefchaouen-morocco-l.jpg new file mode 100644 index 00000000000..4a0b3dc3bd8 Binary files /dev/null and b/public/images/content/chefchaouen-morocco-l.jpg differ diff --git a/public/images/content/creola-katherine-johnson-m.jpg b/public/images/content/creola-katherine-johnson-m.jpg new file mode 100644 index 00000000000..53287dd0205 Binary files /dev/null and b/public/images/content/creola-katherine-johnson-m.jpg differ diff --git a/public/images/content/creola-katherine-johnson-s.jpg b/public/images/content/creola-katherine-johnson-s.jpg new file mode 100644 index 00000000000..43244d0c5e8 Binary files /dev/null and b/public/images/content/creola-katherine-johnson-s.jpg differ diff --git a/public/images/content/eternal-presence.jpg b/public/images/content/eternal-presence.jpg new file mode 100644 index 00000000000..00e09d093b9 Binary files /dev/null and b/public/images/content/eternal-presence.jpg differ diff --git a/public/images/content/floralis-generica-m.jpg b/public/images/content/floralis-generica-m.jpg new file mode 100644 index 00000000000..056f8d52b6a Binary files /dev/null and b/public/images/content/floralis-generica-m.jpg differ diff --git a/public/images/content/floralis-generica.jpg b/public/images/content/floralis-generica.jpg new file mode 100644 index 00000000000..f50c7e348c5 Binary files /dev/null and b/public/images/content/floralis-generica.jpg differ diff --git a/public/images/content/gamcheon-culture-village-busan-l.jpg b/public/images/content/gamcheon-culture-village-busan-l.jpg new file mode 100644 index 00000000000..5c9e249bd0a Binary files /dev/null and b/public/images/content/gamcheon-culture-village-busan-l.jpg differ diff --git a/public/images/content/gregorio-y-zara-s.jpg b/public/images/content/gregorio-y-zara-s.jpg new file mode 100644 index 00000000000..5da6b45f15a Binary files /dev/null and b/public/images/content/gregorio-y-zara-s.jpg differ diff --git a/public/images/content/hedy-lamarr-s.jpg b/public/images/content/hedy-lamarr-s.jpg new file mode 100644 index 00000000000..0a326951053 Binary files /dev/null and b/public/images/content/hedy-lamarr-s.jpg differ diff --git a/public/images/content/hippos.jpg b/public/images/content/hippos.jpg new file mode 100644 index 00000000000..941563f8d10 Binary files /dev/null and b/public/images/content/hippos.jpg differ diff --git a/public/images/content/homenaje-a-la-neurocirugia.jpg b/public/images/content/homenaje-a-la-neurocirugia.jpg new file mode 100644 index 00000000000..ee41fbbaf21 Binary files /dev/null and b/public/images/content/homenaje-a-la-neurocirugia.jpg differ diff --git a/public/images/content/kampung-pelangi-indonesia.jpeg b/public/images/content/kampung-pelangi-indonesia.jpeg new file mode 100644 index 00000000000..cd8b4e5568f Binary files /dev/null and b/public/images/content/kampung-pelangi-indonesia.jpeg differ diff --git a/public/images/content/katsuko-saruhashi-m.jpg b/public/images/content/katsuko-saruhashi-m.jpg new file mode 100644 index 00000000000..ba2168f8588 Binary files /dev/null and b/public/images/content/katsuko-saruhashi-m.jpg differ diff --git a/public/images/content/katsuko-saruhashi-s.jpg b/public/images/content/katsuko-saruhashi-s.jpg new file mode 100644 index 00000000000..19ef15704ff Binary files /dev/null and b/public/images/content/katsuko-saruhashi-s.jpg differ diff --git a/public/images/content/lin-lanying-s.jpg b/public/images/content/lin-lanying-s.jpg new file mode 100644 index 00000000000..0bc3a6f4049 Binary files /dev/null and b/public/images/content/lin-lanying-s.jpg differ diff --git a/public/images/content/lin-lanying.jpg b/public/images/content/lin-lanying.jpg new file mode 100644 index 00000000000..630b91bd28d Binary files /dev/null and b/public/images/content/lin-lanying.jpg differ diff --git a/public/images/content/lisbon-portugal.jpg b/public/images/content/lisbon-portugal.jpg new file mode 100644 index 00000000000..fe1d74040fc Binary files /dev/null and b/public/images/content/lisbon-portugal.jpg differ diff --git a/public/images/content/ljubljana-slovenia.jpg b/public/images/content/ljubljana-slovenia.jpg new file mode 100644 index 00000000000..e93d8c80299 Binary files /dev/null and b/public/images/content/ljubljana-slovenia.jpg differ diff --git a/public/images/content/lunar-landscape-m.jpg b/public/images/content/lunar-landscape-m.jpg new file mode 100644 index 00000000000..3c7afe1f9c1 Binary files /dev/null and b/public/images/content/lunar-landscape-m.jpg differ diff --git a/public/images/content/macromural-de-pachuca-l.jpg b/public/images/content/macromural-de-pachuca-l.jpg new file mode 100644 index 00000000000..a9dba869c39 Binary files /dev/null and b/public/images/content/macromural-de-pachuca-l.jpg differ diff --git a/public/images/content/maria-sklodowska-curie-s.jpg b/public/images/content/maria-sklodowska-curie-s.jpg new file mode 100644 index 00000000000..fc3c342606a Binary files /dev/null and b/public/images/content/maria-sklodowska-curie-s.jpg differ diff --git a/public/images/content/mario-jose-molina-pasquel-henriquez-s.jpg b/public/images/content/mario-jose-molina-pasquel-henriquez-s.jpg new file mode 100644 index 00000000000..e369df8c5fa Binary files /dev/null and b/public/images/content/mario-jose-molina-pasquel-henriquez-s.jpg differ diff --git a/public/images/content/moai-m.jpg b/public/images/content/moai-m.jpg new file mode 100644 index 00000000000..4d7d0b6dfd8 Binary files /dev/null and b/public/images/content/moai-m.jpg differ diff --git a/public/images/content/penang-malaysia.jpg b/public/images/content/penang-malaysia.jpg new file mode 100644 index 00000000000..433fc3503e0 Binary files /dev/null and b/public/images/content/penang-malaysia.jpg differ diff --git a/public/images/content/percy-lavon-julian-s.jpg b/public/images/content/percy-lavon-julian-s.jpg new file mode 100644 index 00000000000..af912e34b97 Binary files /dev/null and b/public/images/content/percy-lavon-julian-s.jpg differ diff --git a/public/images/content/prague-czechia.jpg b/public/images/content/prague-czechia.jpg new file mode 100644 index 00000000000..05aa061ea90 Binary files /dev/null and b/public/images/content/prague-czechia.jpg differ diff --git a/public/images/content/rainbow-village-taichung-l.jpg b/public/images/content/rainbow-village-taichung-l.jpg new file mode 100644 index 00000000000..7313ffdb27d Binary files /dev/null and b/public/images/content/rainbow-village-taichung-l.jpg differ diff --git a/public/images/content/schwyz-switzerland.jpg b/public/images/content/schwyz-switzerland.jpg new file mode 100644 index 00000000000..a59002bca17 Binary files /dev/null and b/public/images/content/schwyz-switzerland.jpg differ diff --git a/public/images/content/selaron-staircase-rio-de-janeiro-l.jpg b/public/images/content/selaron-staircase-rio-de-janeiro-l.jpg new file mode 100644 index 00000000000..3b535b07214 Binary files /dev/null and b/public/images/content/selaron-staircase-rio-de-janeiro-l.jpg differ diff --git a/public/images/content/subrahmanyan-chandrasekhar-s.jpg b/public/images/content/subrahmanyan-chandrasekhar-s.jpg new file mode 100644 index 00000000000..bc0708bd094 Binary files /dev/null and b/public/images/content/subrahmanyan-chandrasekhar-s.jpg differ diff --git a/public/images/content/terracotta-army-m.jpg b/public/images/content/terracotta-army-m.jpg new file mode 100644 index 00000000000..ac0a5f6c30c Binary files /dev/null and b/public/images/content/terracotta-army-m.jpg differ diff --git a/public/images/content/ultimate-form-m.jpg b/public/images/content/ultimate-form-m.jpg new file mode 100644 index 00000000000..ecc8ab39483 Binary files /dev/null and b/public/images/content/ultimate-form-m.jpg differ diff --git a/public/images/content/valparaiso-chile.jpg b/public/images/content/valparaiso-chile.jpg new file mode 100644 index 00000000000..8d44e4fed09 Binary files /dev/null and b/public/images/content/valparaiso-chile.jpg differ diff --git a/scripts/buildRscWorker.mjs b/scripts/buildRscWorker.mjs deleted file mode 100644 index b02cb8f432b..00000000000 --- a/scripts/buildRscWorker.mjs +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import * as esbuild from 'esbuild'; -import fs from 'fs'; -import path from 'path'; -import {fileURLToPath} from 'url'; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const root = path.resolve(__dirname, '..'); -const sandboxBase = path.resolve( - root, - 'src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src' -); - -// 1. Bundle the server Worker runtime (React server build + RSDW/server.browser + Sucrase → IIFE) -// Minified because this runs inside a Web Worker (not parsed by Sandpack's Babel). -const workerOutfile = path.resolve(sandboxBase, 'worker-bundle.dist.js'); -await esbuild.build({ - entryPoints: [path.resolve(sandboxBase, 'rsc-server.js')], - bundle: true, - format: 'iife', - platform: 'browser', - conditions: ['react-server', 'browser'], - outfile: workerOutfile, - define: {'process.env.NODE_ENV': '"production"'}, - minify: true, -}); - -// Post-process worker bundle: -// Prepend the webpack shim so __webpack_require__ (used by react-server-dom-webpack) -// is defined before the IIFE evaluates. The shim sets globalThis.__webpack_require__, -// which is accessible as a bare identifier since globalThis IS the Worker's global scope. -let workerCode = fs.readFileSync(workerOutfile, 'utf8'); - -const shimPath = path.resolve(sandboxBase, 'webpack-shim.js'); -const shimCode = fs.readFileSync(shimPath, 'utf8'); -workerCode = shimCode + '\n' + workerCode; - -fs.writeFileSync(workerOutfile, workerCode); diff --git a/src/components/Icon/IconBolt.tsx b/src/components/Icon/IconBolt.tsx new file mode 100644 index 00000000000..e2537d97b22 --- /dev/null +++ b/src/components/Icon/IconBolt.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; +import type {SVGProps} from 'react'; + +export const IconBolt = memo>(function IconBolt(props) { + return ( + + + + ); +}); diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx index 625b1c365b4..f86cc1345fd 100644 --- a/src/components/MDX/Sandpack/Console.tsx +++ b/src/components/MDX/Sandpack/Console.tsx @@ -12,11 +12,8 @@ import cn from 'classnames'; import {useState, useRef, useEffect} from 'react'; import {IconChevron} from 'components/Icon/IconChevron'; -import { - SandpackCodeViewer, - useSandpack, -} from '@codesandbox/sandpack-react/unstyled'; -import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client'; +import {SandpackCodeViewer, useSandpack} from '@webcontainer/react'; +import type {SandpackMessageConsoleMethods} from '@webcontainer/react'; const getType = ( message: SandpackMessageConsoleMethods diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx index 3ff1beae620..4d69845f347 100644 --- a/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/src/components/MDX/Sandpack/CustomPreset.tsx @@ -15,7 +15,7 @@ import { useActiveCode, SandpackCodeEditor, SandpackLayout, -} from '@codesandbox/sandpack-react/unstyled'; +} from '@webcontainer/react'; import cn from 'classnames'; import {IconChevron} from 'components/Icon/IconChevron'; @@ -26,10 +26,10 @@ import {useSandpackLint} from './useSandpackLint'; export const CustomPreset = memo(function CustomPreset({ providedFiles, - showOpenInCodeSandbox = true, + showOpenInStackBlitz = true, }: { providedFiles: Array; - showOpenInCodeSandbox?: boolean; + showOpenInStackBlitz?: boolean; }) { const {lintErrors, lintExtensions} = useSandpackLint(); const {sandpack} = useSandpack(); @@ -48,7 +48,7 @@ export const CustomPreset = memo(function CustomPreset({ lintErrors={lintErrors} lintExtensions={lintExtensions} isExpandable={isExpandable} - showOpenInCodeSandbox={showOpenInCodeSandbox} + showOpenInStackBlitz={showOpenInStackBlitz} /> ); }); @@ -58,13 +58,13 @@ const SandboxShell = memo(function SandboxShell({ lintErrors, lintExtensions, isExpandable, - showOpenInCodeSandbox, + showOpenInStackBlitz, }: { providedFiles: Array; lintErrors: Array; lintExtensions: Array; isExpandable: boolean; - showOpenInCodeSandbox: boolean; + showOpenInStackBlitz: boolean; }) { const containerRef = useRef(null); const [isExpanded, setIsExpanded] = useState(false); @@ -78,7 +78,7 @@ const SandboxShell = memo(function SandboxShell({ }}> ): React.ReactNode | null => { const loadingOverlayState = useLoadingOverlayState( - clientId, dependenciesLoading, forceLoading ); @@ -39,18 +32,11 @@ export const LoadingOverlay = ({ return (
- Unable to establish connection with the sandpack bundler. Make sure - you are online or try again later. If the problem persists, please - report it via{' '} + Unable to start the sandbox. Make sure you are online or try again + later. If the problem persists, please submit an issue on{' '} - email - {' '} - or submit an issue on{' '} - GitHub. @@ -70,9 +56,7 @@ export const LoadingOverlay = ({ opacity: stillLoading ? 1 : 0, transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`, }}> -
- {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */} - +
@@ -89,7 +73,6 @@ export const LoadingOverlay = ({ }; const useLoadingOverlayState = ( - clientId: string, dependenciesLoading: boolean, forceLoading: boolean ): LoadingOverlayState => { @@ -100,9 +83,6 @@ const useLoadingOverlayState = ( setState('LOADING'); } - /** - * Sandpack listener - */ const sandpackIdle = sandpack.status === 'idle'; useEffect(() => { const unsubscribe = listen((message) => { @@ -111,12 +91,12 @@ const useLoadingOverlayState = ( return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN'; }); } - }, clientId); + }); return () => { unsubscribe(); }; - }, [listen, clientId, sandpackIdle]); + }, [listen, sandpackIdle]); /** * Fading transient state diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 042f4b93a0e..73ee94f6322 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -22,8 +22,8 @@ import { FileTabs, useSandpack, useSandpackNavigation, -} from '@codesandbox/sandpack-react/unstyled'; -import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; +} from '@webcontainer/react'; +import {OpenInStackBlitzButton} from './OpenInStackBlitzButton'; import {ReloadButton} from './ReloadButton'; import {ClearButton} from './ClearButton'; import {DownloadButton} from './DownloadButton'; @@ -50,10 +50,10 @@ const getFileName = (filePath: string): string => { export function NavigationBar({ providedFiles, - showOpenInCodeSandbox = true, + showOpenInStackBlitz = true, }: { providedFiles: Array; - showOpenInCodeSandbox?: boolean; + showOpenInStackBlitz?: boolean; }) { const {sandpack} = useSandpack(); const containerRef = useRef(null); @@ -61,9 +61,8 @@ export function NavigationBar({ // 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] = useState(true); - const {activeFile, setActiveFile, visibleFiles, clients} = sandpack; - const clientId = Object.keys(clients)[0]; - const {refresh} = useSandpackNavigation(clientId); + const {activeFile, setActiveFile, visibleFiles} = sandpack; + const {refresh} = useSandpackNavigation(); const isMultiFile = visibleFiles.length > 1; const hasJustToggledDropdown = useRef(false); @@ -110,17 +109,9 @@ export function NavigationBar({ }, [isMultiFile, onContainerResize]); const handleClear = () => { - /** - * resetAllFiles must come first, otherwise - * the previous content will appear for a second - * when the iframe loads. - * - * Plus, it should only prompt if there's any file changes - */ if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { sandpack.resetAllFiles(); } - refresh(); }; const handleReload = () => { @@ -146,7 +137,6 @@ export function NavigationBar({ 'w-[fit-content]', showDropdown ? 'invisible' : '' )}> - {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
{/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} @@ -204,7 +194,7 @@ export function NavigationBar({ - {showOpenInCodeSandbox && } + {showOpenInStackBlitz && } {activeFile.endsWith('.tsx') && ( { +export const OpenInStackBlitzButton = () => { return ( - - + - Fork - + StackBlitz + ); }; diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index ead9341b6e3..b2464fe5103 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -11,8 +11,8 @@ // eslint-disable-next-line react-compiler/react-compiler /* eslint-disable react-hooks/exhaustive-deps */ -import {useRef, useState, useEffect, useMemo, useId} from 'react'; -import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled'; +import {useRef, useState, useEffect, useMemo} from 'react'; +import {useSandpack, SandpackStack} from '@webcontainer/react'; import cn from 'classnames'; import {ErrorMessage} from './ErrorMessage'; import {SandpackConsole} from './Console'; @@ -50,15 +50,7 @@ export function Preview({ null ); - let {error: rawError, registerBundler, unregisterBundler} = sandpack; - - if ( - rawError && - rawError.message === '_csbRefreshUtils.prelude is not a function' - ) { - // Work around a noisy internal error. - rawError = null; - } + let {error: rawError, previewUrl} = sandpack; // When throwing a new Error in Sandpack - we want to disable the dev error dialog // to show the Error Boundary fallback @@ -92,20 +84,8 @@ export function Preview({ // It changes too fast, causing flicker. const error = useDebounced(rawError); - const clientId = useId(); const iframeRef = useRef(null); - const sandpackIdle = sandpack.status === 'idle'; - - useEffect(function createBundler() { - const iframeElement = iframeRef.current!; - registerBundler(iframeElement, clientId); - - return () => { - unregisterBundler(clientId); - }; - }, []); - useEffect( function bundlerListener() { let timeout: ReturnType; @@ -118,11 +98,6 @@ export function Preview({ setBundlerIsReady(false); } - /** - * The spinner component transition might be longer than - * the bundler loading, so we only show the spinner if - * it takes more than 500s to load the bundler. - */ timeout = setTimeout(() => { setShowLoading(true); }, 500); @@ -131,7 +106,7 @@ export function Preview({ setShowLoading(false); clearTimeout(timeout); } - }, clientId); + }); return () => { clearTimeout(timeout); @@ -140,7 +115,7 @@ export function Preview({ unsubscribe(); }; }, - [sandpackIdle] + [listen] ); // WARNING: @@ -158,7 +133,8 @@ export function Preview({ // - It should work on mobile. // The best way to test it is to actually go through some challenges. - const hideContent = error || !iframeComputedHeight || !bundlerIsReady; + const hideContent = + error || !iframeComputedHeight || !bundlerIsReady || !previewUrl; const iframeWrapperPosition = (): CSSProperties => { if (hideContent) { @@ -185,6 +161,7 @@ export function Preview({