Use new sandpack

packages/scrollycoding/package.json

@@ -22,8 +22,8 @@
     "@code-hike/mini-browser": "^0.3.0-next.0",
     "@code-hike/mini-editor": "^0.3.0-next.0",
     "@code-hike/scroller": "^0.3.0-next.0",
+    "@codesandbox/sandpack-react": "^0.0.1",
     "object-hash": "^2.1.1",
-    "react-smooshpack": "1.0.0-alpha-31",
     "server-side-media-queries-for-react": "^0.0.5"
   },
   "peerDependencies": {

packages/scrollycoding/src/code.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { MiniEditorWithState } from "@code-hike/mini-editor"
 import { CodeProps } from "./hike-context"
-import { useCodeSandboxLink } from "react-smooshpack"
+import { useCodeSandboxLink } from "@codesandbox/sandpack-react"
 
 export { Code }
 

packages/scrollycoding/src/demo-context.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react"
 import {
   SandpackFiles,
   SandpackProvider,
-} from "react-smooshpack"
+} from "@codesandbox/sandpack-react"
 import {
   CodeFiles,
   CodeProps,

packages/scrollycoding/src/hike-context.tsx

@@ -4,7 +4,7 @@ import { StatefulEditorProps } from "@code-hike/mini-editor"
 import {
   SandpackPredefinedTemplate,
   SandpackSetup,
-} from "react-smooshpack"
+} from "@codesandbox/sandpack-react"
 import React from "react"
 
 export interface Preset {

packages/scrollycoding/src/index.scss

@@ -6,11 +6,6 @@
   --sp-colors-fg-default: #999999;
 }
 
-.ch-hike .sp-preview-frame {
-  height: 100%;
-  display: flex;
-}
-
 .ch-hike-fluid {
   display: flex;
   --sticker-height: 650px;
@@ -110,3 +105,46 @@
 }
 
 @import "focus.scss";
+@import "preview-loader.scss";
+
+// sandpack
+
+.ch-hike .sp-preview-frame {
+  height: 100%;
+  display: flex;
+}
+
+.ch-hike .sp-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: 0;
+  overflow: auto;
+  height: 100%;
+  z-index: 3;
+}
+
+.ch-hike .sp-loading {
+  display: none;
+}
+
+.ch-hike .sp-error {
+  box-sizing: border-box;
+  padding: 16px;
+  white-space: pre-wrap;
+  font-family: "Fira Mono", "DejaVu Sans Mono", Menlo,
+    Consolas, "Liberation Mono", Monaco, "Lucida Console",
+    monospace;
+  background-color: rgb(255, 205, 202);
+}
+
+.ch-hike .sp-error-message {
+  color: #811e18;
+  font-size: 0.75em;
+}
+
+.ch-hike .sp-preview-iframe {
+  min-height: unset;
+}

packages/scrollycoding/src/preview-loader.scss

@@ -0,0 +1,94 @@
+.ch-hike-loading {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: 0;
+  overflow: auto;
+  height: 100%;
+
+  background-color: #f8f9fb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 15;
+}
+
+.ch-hike-loading-cubes {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.ch-hike-loading-cubes div {
+  position: absolute;
+  top: 32px;
+  width: 12px;
+  height: 12px;
+  background: #757678;
+  -webkit-animation-timing-function: cubic-bezier(
+    0,
+    1,
+    1,
+    0
+  );
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.ch-hike-loading-cubes div:first-child {
+  left: 8px;
+  -webkit-animation: ch-hike-grow 0.6s infinite;
+  animation: ch-hike-grow 0.6s infinite;
+}
+
+.ch-hike-loading-cubes div:nth-child(2) {
+  left: 8px;
+}
+
+.ch-hike-loading-cubes div:nth-child(2),
+.ch-hike-loading-cubes div:nth-child(3) {
+  -webkit-animation: ch-hike-move 0.6s infinite;
+  animation: ch-hike-move 0.6s infinite;
+}
+
+.ch-hike-loading-cubes div:nth-child(3) {
+  left: 32px;
+}
+
+.ch-hike-loading-cubes div:nth-child(4) {
+  left: 56px;
+  -webkit-animation: ch-hike-shrink 0.6s infinite;
+  animation: ch-hike-shrink 0.6s infinite;
+}
+
+@keyframes ch-hike-grow {
+  0% {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes ch-hike-shrink {
+  0% {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(0);
+  }
+}
+
+@keyframes ch-hike-move {
+  0% {
+    transform: translate(0);
+  }
+
+  to {
+    transform: translate(24px);
+  }
+}

packages/scrollycoding/src/preview-loader.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { useLoadingOverlayState } from "@codesandbox/sandpack-react"
+import { useClasser } from "@code-hike/classer"
+
+export function LoadingOverlay() {
+  const c = useClasser("ch-hike")
+  const loadingOverlayState = useLoadingOverlayState()
+  return loadingOverlayState === "visible" ? (
+    <div className={c("loading")}>
+      <div className={c("loading-cubes")}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  ) : null
+}

packages/scrollycoding/src/preview.tsx

@@ -2,27 +2,31 @@ import * as React from "react"
 import {
   SandpackPreview,
   useCodeSandboxLink,
-} from "react-smooshpack"
+} from "@codesandbox/sandpack-react"
 import { MiniBrowser } from "@code-hike/mini-browser"
 import { PreviewProps } from "./hike-context"
+import { LoadingOverlay } from "./preview-loader"
 
 export { Preview, PreviewProps }
 
 function Preview({ filesHash, ...props }: PreviewProps) {
   const link = useCodeSandboxLink()
   const preview = React.useMemo(() => {
     return (
-      <SandpackPreview
-        showNavigator={false}
-        showRefreshButton={false}
-        showOpenInCodeSandbox={false}
-        customStyle={{
-          minHeight: "unset",
-          height: "100%",
-          border: 0,
-          margin: 0,
-        }}
-      />
+      <>
+        <LoadingOverlay />
+        <SandpackPreview
+          showNavigator={false}
+          showRefreshButton={false}
+          showOpenInCodeSandbox={false}
+          customStyle={{
+            minHeight: "unset",
+            height: "100%",
+            border: 0,
+            margin: 0,
+          }}
+        />
+      </>
     )
   }, [link])
 

packages/storybook/src/assets/scrollycoding.basic.mdx

@@ -60,6 +60,18 @@ export default function App() {
 
 Nullam ut massa ut tortor pellentesque fringilla at ut massa. Nunc ut suscipit ipsum. Curabitur eu nunc lobortis, gravida sem ac, aliquet lorem. Vestibulum semper urna in erat placerat dictum. Nulla posuere odio sed accumsan accumsan. <Focus on="2" >Integer aliquet</Focus> lectus sit amet turpis feugiat, vel elementum velit condimentum. Proin sit amet augue rutrum, auctor risus aliquam, varius quam. Praesent turpis nunc, dictum quis placerat vel, tempor ac tortor. <Focus on="3" >Aenean `sollicitudin`</Focus> tortor efficitur, volutpat ligula id, semper lectus. Curabitur vel nibh maximus, sodales erat id, consectetur ex. Fusce convallis vitae quam vitae venenatis.
 
+<StepHead focus="1[16:29]">
+
+```jsx
+export default function App() {
+  return thisShouldFail
+}
+```
+
+</StepHead>
+
+Nullam ut massa ut tortor pellentesque fringilla at ut massa. Nunc ut suscipit ipsum. Curabitur eu nunc lobortis, gravida sem ac, aliquet lorem. Vestibulum semper urna in erat placerat dictum. Nulla posuere odio sed accumsan accumsan. <Focus on="2" >Integer aliquet</Focus> lectus sit amet turpis feugiat, vel elementum velit condimentum. Proin sit amet augue rutrum, auctor risus aliquam, varius quam. Praesent turpis nunc, dictum quis placerat vel, tempor ac tortor. <Focus on="3" >Aenean `sollicitudin`</Focus> tortor efficitur, volutpat ligula id, semper lectus. Curabitur vel nibh maximus, sodales erat id, consectetur ex. Fusce convallis vitae quam vitae venenatis.
+
 </Hike>
 
 # Goodbye