[beta] Sandpack: provide bare components and move styles (reactjs#5124)

* Update 6 files

* Update _document.tsx

* Update _document.tsx

* Update _document.tsx

* Update .env.production

* Update package.json and yarn.lock

* editor style

* file tab

* loading

* loading

* tweaks

* tweak

* bump sandpack

* remove test page

* Remove stitches from the bundle

* apply ios fix only for playground

Co-authored-by: Dan Abramov <[email protected]>

Author: danilowoz

beta/.env.development

@@ -0,0 +1 @@
+SANDPACK_BARE_COMPONENTS=true 

beta/.env.production

@@ -1 +1,2 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+SANDPACK_BARE_COMPONENTS=true 

beta/next.config.js

@@ -16,6 +16,9 @@ const nextConfig = {
     legacyBrowsers: false,
     browsersListForSwc: true,
   },
+  env: {
+    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
+  },
   async redirects() {
     return redirects.redirects;
   },
@@ -47,6 +50,10 @@ const nextConfig = {
 
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
+      new NormalModuleReplacementPlugin(
+        /^@stitches\/core$/,
+        require.resolve('./src/utils/emptyShim.js')
+      ),
       new NormalModuleReplacementPlugin(
         /^raf$/,
         require.resolve('./src/utils/rafShim.js')

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.11.0",
+    "@codesandbox/sandpack-react": "1.14.1",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",

beta/src/components/MDX/ConsoleBlock.tsx

@@ -38,7 +38,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4" translate="no">
+    <div className="mb-4 text-secondary" translate="no">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
         <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
           <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />

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

@@ -181,14 +181,14 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
         </button>
       </div>
       {isExpanded && (
-        <div className="w-full h-full border-y bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
+        <div className="w-full h-full border-t bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
           <div className="max-h-40 h-auto overflow-auto" ref={wrapperRef}>
             {logs.map(({data, id, method}) => {
               return (
                 <div
                   key={id}
                   className={cn(
-                    'last:border-none border-b dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
+                    'first:border-none border-t dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
                     `console-${getType(method)}`,
                     getColor(method)
                   )}>

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

@@ -111,7 +111,7 @@ const SandboxShell = memo(function SandboxShell({
                   }
                 }
               }}>
-              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
+              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark leading-[20px]">
                 <IconChevron
                   className="inline mr-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}

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

@@ -125,7 +125,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                   // space that's taken by the (invisible) tab list.
                   <button
                     className={cn(
-                      'absolute top-0 left-0',
+                      'absolute top-0 left-[2px]',
                       !showDropdown && 'invisible'
                     )}>
                     <span

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

@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ml-1 mr-1 relative"
+        className="inline ml-1 mr-1 relative top-[1px]"
         width="1em"
         height="1em"
       />

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

@@ -78,7 +78,7 @@ function SandpackRoot(props: SandpackProps) {
   };
 
   return (
-    <div className="sandpack sandpack--playground sandbox my-8">
+    <div className="sandpack sandpack--playground my-8">
       <SandpackProvider
         template="react"
         files={files}

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

@@ -8,7 +8,7 @@ import {createFileMap} from './createFileMap';
 const SandpackRoot = lazy(() => import('./SandpackRoot'));
 
 const SandpackGlimmer = ({code}: {code: string}) => (
-  <div className="sandpack sandpack--playground sandbox my-8">
+  <div className="sandpack sandpack--playground my-8">
     <div className="sp-wrapper">
       <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
         <div className="bg-wash h-10 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">

beta/src/pages/_app.tsx

@@ -20,8 +20,6 @@ if (typeof window !== 'undefined') {
   window.addEventListener(terminationEvent, function () {
     ga('send', 'timing', 'JS Dependencies', 'unload');
   });
-
-  disableAllRuntimeStyleInjection();
 }
 
 export default function MyApp({Component, pageProps}: AppProps) {
@@ -55,37 +53,3 @@ export default function MyApp({Component, pageProps}: AppProps) {
 
   return <Component {...pageProps} />;
 }
-
-// HACK(css-in-js): We use Sandpack, which uses Stitches (css-in-js lib).
-// This causes style recalc during hydration which is bad for perf.
-// Instead, let's rely on the SSR'd <style> tag defined in _document.tsx.
-// This is obviously quite fragile but hopefully it'll be solved upstream.
-let didWarn = false;
-function disableAllRuntimeStyleInjection() {
-  // Prevent Stitches from finding the <style> tag from the server:
-  Object.defineProperty(document, 'styleSheets', {
-    get() {
-      return [];
-    },
-  });
-  // It will try to create a new <style> tag and insert stuff there...
-  const realInsertRule = CSSStyleSheet.prototype.insertRule;
-  CSSStyleSheet.prototype.insertRule = function () {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!didWarn) {
-        console.warn(
-          'Something is trying to inject runtime CSS-in-JS.\n' +
-            'All <style> insertions will be ignored.',
-          arguments
-        );
-      }
-      didWarn = true;
-    }
-    // ... but we'll prevent it from affecting the document:
-    this.disabled = true;
-    // @ts-ignore
-    return realInsertRule.apply(this, arguments);
-  };
-  // We're not supposed to use any other library that inserts <style> tags.
-  // In longer term, ideally, Sandpack should offer a zero-runtime option.
-}