[beta] Sandpack - new bundler

.nvmrc

@@ -1 +1 @@
-12.16.1
+12.22.0

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",

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

@@ -13,13 +13,36 @@ import {
   SandpackReactDevTools,
 } from '@codesandbox/sandpack-react';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import {useTimer} from 'use-timer';
 
 import cn from 'classnames';
 
 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<HTMLDivElement>(null);
   const {sandpack} = useSandpack();
@@ -47,10 +71,11 @@ export function CustomPreset({
 
   return (
     <>
+      Time to load: <Timer timer={timer} />
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar showDownload={isSingleFile} />
+        <NavigationBar showDownload={isSingleFile} onReset={timer.reset} />
         <SandpackThemeProvider theme={CustomTheme}>
           <div
             ref={sandpack.lazyAnchorRef}

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

@@ -13,7 +13,13 @@ import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
 import {FilesDropdown} from './FilesDropdown';
 
-export function NavigationBar({showDownload}: {showDownload: boolean}) {
+export function NavigationBar({
+  showDownload,
+  onReset,
+}: {
+  showDownload: boolean;
+  onReset: () => 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 (

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 (
+    <label>
+      <input onChange={onChange} checked={state} type="checkbox" /> Active new
+      bundler (for all pages)
+    </label>
+  );
+};

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-bundler.pages.dev/'
+            : 'https://0-14-0-sandpack.codesandbox.io/'
+        }>
         <CustomPreset
           isSingleFile={isSingleFile}
           showDevTools={showDevTools}

beta/src/pages/sandpack.mdx

@@ -0,0 +1,26 @@
+import {NewBundlerToggle} from '../components/MDX/Sandpack/NewBundlerToggle';
+
+# New Sandpack bundler testing
+
+<NewBundlerToggle />
+
+<Sandpack>
+
+```js
+function Text() {
+  return <p>Lorem ipsum</p>;
+}
+
+export default function App() {
+  return (
+    <section>
+      <h1>Test</h1>
+      <Text />
+      <Text />
+      <Text />
+    </section>
+  );
+}
+```
+
+</Sandpack>

beta/yarn.lock

@@ -5044,6 +5044,11 @@ [email protected]:
   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"