fix(init-mode): reset bundler state on unmount

codesandbox · Jan 27, 2022 · c43baa9 · c43baa9
1 parent 2ab3dee
commit c43baa9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 85 deletions.
diff --git a/sandpack-react/src/components/Preview/index.tsx b/sandpack-react/src/components/Preview/index.tsx
@@ -105,7 +105,6 @@ export const SandpackPreview = ({
       customStyle={{
         ...customStyle,
         ...viewportStyle,
-        display: status !== "idle" ? "flex" : "none",
       }}
     >
       {showNavigator ? (

diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -256,7 +256,7 @@ class SandpackProvider extends React.PureComponent<
 
     const observerOptions = {
       rootMargin: "600px 0px",
-      threshold: 0.2,
+      threshold: 0.4,
     };
 
     if (this.intersectionObserver && this.lazyAnchorRef.current) {
@@ -484,6 +484,8 @@ class SandpackProvider extends React.PureComponent<
     } else {
       delete this.preregisteredIframes[clientId];
     }
+
+    this.setState({ sandpackStatus: "idle" });
   };
 
   /**

diff --git a/sandpack-react/src/hooks/useLoadingOverlayState.ts b/sandpack-react/src/hooks/useLoadingOverlayState.ts
@@ -45,8 +45,7 @@ export const useLoadingOverlayState = (
       clearTimeout(innerHook);
       unsub();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [clientId, sandpack.status === "idle"]);
 
   if (sandpack.status === "timeout") {
     return "timeout";

diff --git a/sandpack-react/src/presets/Playground.stories.tsx b/sandpack-react/src/presets/Playground.stories.tsx
@@ -1,95 +1,27 @@
 import {
+  Sandpack,
+  SandpackPreview,
   SandpackProvider,
-  SandpackCodeViewer,
-  SandpackThemeProvider,
+  SandpackLayout,
 } from "../";
 
 export default {
   title: "Playground",
 };
 
-const decorators = [
-  { className: "highlight", line: 1 },
-  { className: "highlight", line: 9 },
-  {
-    className: "widget",
-    elementAttributes: { "data-id": "1" },
-    line: 12,
-    startColumn: 26,
-    endColumn: 38,
-  },
-  {
-    className: "widget",
-    elementAttributes: { "data-id": "2" },
-    line: 13,
-    startColumn: 8,
-    endColumn: 17,
-  },
-];
-
 export const Main = (): JSX.Element => {
   return (
     <>
-      <style>
-        {`.highlight {
-        background: #1ea7fd2b;
-        border-radius: 4px;
-      }
-      .widget {
-        border: 1px solid #1ea7fd;
-        border-radius: 2px;
-        padding: 2px 4px 2px 12px;
-        margin-left: 6px;
-        position: relative;
-        cursor: pointer;
-      }
-
-      .widget:before {
-        content: attr(data-id);
-        background: #1ea7fd;
-        border-radius: 100%;
-        position: absolute;
-        width: 16px;
-        display: block;
-        height: 16px;
-        left: -8px;
-        top: 2px;
-        font-size: 11px;
-        text-align: center;
-        color: white;
-        line-height: 17px;
-      }
-      `}
-      </style>
-
-      <SandpackProvider
-        customSetup={{
-          entry: "index.js",
-          files: {
-            "index.js": `const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-}];
-
-export default function List() {
-  const [text, setText] = useState("")
-  const listItems = people.map(person =>
-    <li>{person}</li>
-  );
-  return <ul>{listItems}</ul>;
-}`,
-          },
-        }}
-      >
-        <SandpackThemeProvider>
-          <SandpackCodeViewer decorators={decorators} showLineNumbers={false} />
-        </SandpackThemeProvider>
-      </SandpackProvider>
+      {new Array(30).fill(" ").map(() => {
+        return (
+          <SandpackProvider initMode="user-visible">
+            <SandpackLayout>
+              <SandpackPreview />
+            </SandpackLayout>
+          </SandpackProvider>
+        );
+        return <Sandpack options={{ initMode: "lazy" }} />;
+      })}
     </>
   );
 };
diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx
@@ -151,3 +151,17 @@ export const RunnableComponent = (): React.ReactElement => (
     template="react"
   />
 );
+
+export const InitModeUserVisible: React.FC = () => {
+  return (
+    <>
+      {new Array(30).fill(" ").map(() => {
+        return (
+          <div style={{ marginBottom: 200 }}>
+            <Sandpack options={{ initMode: "user-visible" }} />
+          </div>
+        );
+      })}
+    </>
+  );
+};