code-hike · pomber · Jul 7, 2022 · Jul 7, 2022
diff --git a/packages/mdx/dev/content/test.mdx b/packages/mdx/dev/content/test.mdx
@@ -1,79 +1,51 @@
-### with width
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
-<CH.Code debug >
+<CH.Preview url="https://whatismyviewport.com/" />
 
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-```
-
-</CH.Code>
+## Bigger steps than code
 
-<CH.Code>
-
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-```
+<CH.Spotlight>
 
-</CH.Code>
+# Foo
 
-### with width
+bar
 
-<CH.Code debug style={{width: 400}}>
+<CH.Preview url="https://whatismyviewport.com/" />
 
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
+```js foo.js
+function foo() {
+  return "bar"
+}
 ```
 
-</CH.Code>
+---
 
-<CH.Code style={{width: 400}}>
+```js foo.js focus=1
 
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
 ```
 
-</CH.Code>
+Line 1
 
-### with zoom
+---
 
-<CH.Code debug maxZoom={0.7} minZoom={0.7}>
+```js foo.js focus=2
 
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
 ```
 
-</CH.Code>
+Line 2
 
-<CH.Code maxZoom={0.7} minZoom={0.7}>
+<CH.Preview>
 
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-```
+Line 2
 
-</CH.Code>
+</CH.Preview>
 
-### with line numbers
+---
 
-<CH.Code debug lineNumbers>
+```js foo.js focus=3
 
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
 ```
 
-</CH.Code>
-
-<CH.Code lineNumbers>
-
-```js
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-const = "hello" + "hello" + "hello" + "hello" + "hello" + "hello"+ "hello" + "goodbye"
-```
+Line 3
 
-</CH.Code>
+</CH.Spotlight>
diff --git a/packages/mdx/src/mdx-client/scrollycoding.tsx b/packages/mdx/src/mdx-client/scrollycoding.tsx
@@ -4,6 +4,7 @@ import { InnerCode, updateEditorStep } from "./code"
 import { Scroller, Step as ScrollerStep } from "../scroller"
 import { Preview, PresetConfig } from "./preview"
 import { LinkableSection } from "./section"
+import { extractPreviewSteps } from "./steps"
 
 export function Scrollycoding({
   children,
@@ -13,6 +14,7 @@ export function Scrollycoding({
   start = 0,
   className,
   style,
+  hasPreviewSteps,
   ...rest
 }: {
   children: React.ReactNode
@@ -22,8 +24,12 @@ export function Scrollycoding({
   presetConfig?: PresetConfig
   className?: string
   style?: React.CSSProperties
+  hasPreviewSteps?: boolean
 }) {
-  const stepsChildren = React.Children.toArray(children)
+  const { stepsChildren, previewChildren } =
+    extractPreviewSteps(children, hasPreviewSteps)
+
+  const withPreview = presetConfig || hasPreviewSteps
 
   const [state, setState] = React.useState({
     stepIndex: start,
@@ -61,7 +67,7 @@ export function Scrollycoding({
   return (
     <section
       className={`ch-scrollycoding ${
-        presetConfig ? "ch-scrollycoding-with-preview" : ""
+        withPreview ? "ch-scrollycoding-with-preview" : ""
       } ${className || ""}`}
       style={style}
     >
@@ -100,14 +106,19 @@ export function Scrollycoding({
           codeConfig={codeConfig}
           onTabClick={onTabClick}
         />
-        {presetConfig && (
+        {presetConfig ? (
           <Preview
             className="ch-scrollycoding-preview"
             files={tab.files}
             presetConfig={presetConfig}
             codeConfig={codeConfig}
           />
-        )}
+        ) : hasPreviewSteps ? (
+          <Preview
+            className="ch-scrollycoding-preview"
+            {...previewChildren[state.stepIndex]["props"]}
+          />
+        ) : null}
       </div>
     </section>
   )

diff --git a/packages/mdx/src/mdx-client/slideshow.tsx b/packages/mdx/src/mdx-client/slideshow.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { EditorProps, EditorStep } from "../mini-editor"
 import { InnerCode, updateEditorStep } from "./code"
 import { Preview, PresetConfig } from "./preview"
+import { extractPreviewSteps } from "./steps"
 
 export function Slideshow({
   children,
@@ -11,6 +12,7 @@ export function Slideshow({
   code,
   className,
   style,
+  hasPreviewSteps,
   ...rest
 }: {
   children: React.ReactNode
@@ -20,8 +22,11 @@ export function Slideshow({
   code?: EditorProps["codeConfig"]
   className?: string
   style?: React.CSSProperties
+  hasPreviewSteps?: boolean
 }) {
-  const stepsChildren = React.Children.toArray(children)
+  const { stepsChildren, previewChildren } =
+    extractPreviewSteps(children, hasPreviewSteps)
+  const withPreview = presetConfig || hasPreviewSteps
 
   const hasNotes = stepsChildren.some(
     (child: any) => child.props?.children
@@ -45,7 +50,7 @@ export function Slideshow({
   return (
     <div
       className={`ch-slideshow ${
-        presetConfig ? "ch-slideshow-with-preview" : ""
+        withPreview ? "ch-slideshow-with-preview" : ""
       } ${className || ""}`}
       style={style}
     >
@@ -59,14 +64,19 @@ export function Slideshow({
           }}
           onTabClick={onTabClick}
         />
-        {presetConfig && (
+        {presetConfig ? (
           <Preview
             className="ch-slideshow-preview"
             files={tab.files}
             presetConfig={presetConfig}
             codeConfig={codeConfig}
           />
-        )}
+        ) : hasPreviewSteps ? (
+          <Preview
+            className="ch-slideshow-preview"
+            {...previewChildren[state.stepIndex]["props"]}
+          />
+        ) : null}
       </div>
 
       <div className="ch-slideshow-notes">

diff --git a/packages/mdx/src/mdx-client/spotlight.tsx b/packages/mdx/src/mdx-client/spotlight.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { EditorProps, EditorStep } from "../mini-editor"
 import { InnerCode, updateEditorStep } from "./code"
 import { Preview, PresetConfig } from "./preview"
+import { extractPreviewSteps } from "./steps"
 
 export function Spotlight({
   children,
@@ -11,6 +12,7 @@ export function Spotlight({
   presetConfig,
   className,
   style,
+  hasPreviewSteps,
   ...rest
 }: {
   children: React.ReactNode
@@ -20,13 +22,18 @@ export function Spotlight({
   presetConfig?: PresetConfig
   className?: string
   style?: React.CSSProperties
+  hasPreviewSteps?: boolean
 }) {
-  const stepsChildren = React.Children.toArray(children)
+  const { stepsChildren, previewChildren } =
+    extractPreviewSteps(children, hasPreviewSteps)
+
+  const withPreview = presetConfig || hasPreviewSteps
 
   const [state, setState] = React.useState({
     stepIndex: start,
     step: editorSteps[start],
   })
+
   const tab = state.step
 
   function onTabClick(filename: string) {
@@ -44,7 +51,7 @@ export function Spotlight({
   return (
     <section
       className={`ch-spotlight ${
-        presetConfig ? "ch-spotlight-with-preview" : ""
+        withPreview ? "ch-spotlight-with-preview" : ""
       } ${className || ""}`}
       style={style}
     >
@@ -79,14 +86,19 @@ export function Spotlight({
           codeConfig={codeConfig}
           onTabClick={onTabClick}
         />
-        {presetConfig && (
+        {presetConfig ? (
           <Preview
             className="ch-spotlight-preview"
             files={tab.files}
             presetConfig={presetConfig}
             codeConfig={codeConfig}
           />
-        )}
+        ) : hasPreviewSteps ? (
+          <Preview
+            className="ch-spotlight-preview"
+            {...previewChildren[state.stepIndex]["props"]}
+          />
+        ) : null}
       </div>
     </section>
   )

diff --git a/packages/mdx/src/mdx-client/steps.tsx b/packages/mdx/src/mdx-client/steps.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+export function extractPreviewSteps(
+  children: React.ReactNode,
+  hasPreviewSteps?: boolean
+) {
+  const allChildren = React.Children.toArray(children)
+
+  const stepsChildren = hasPreviewSteps
+    ? allChildren.slice(0, allChildren.length / 2)
+    : allChildren
+
+  const previewChildren = hasPreviewSteps
+    ? allChildren.slice(allChildren.length / 2)
+    : undefined
+
+  return { stepsChildren, previewChildren }
+}
diff --git a/packages/mdx/src/remark/steps.tsx b/packages/mdx/src/remark/steps.tsx
@@ -2,10 +2,9 @@ import { EditorStep } from "../mini-editor"
 import { isEditorNode, mapAnyCodeNode } from "./code"
 import { reduceStep } from "./code-files-reducer"
 import { CodeHikeConfig } from "./config"
-import { SuperNode } from "./nodes"
+import { JsxNode, SuperNode } from "./nodes"
 
 // extract step info
-
 export async function extractStepsInfo(
   parent: SuperNode,
   config: CodeHikeConfig,
@@ -15,6 +14,7 @@ export async function extractStepsInfo(
 ) {
   const steps = [] as {
     editorStep?: EditorStep
+    previewStep?: JsxNode
     children: SuperNode[]
   }[]
 
@@ -29,6 +29,7 @@ export async function extractStepsInfo(
 
     steps[stepIndex] = steps[stepIndex] || { children: [] }
     const step = steps[stepIndex]
+
     if (!step.editorStep && isEditorNode(child, config)) {
       const editorStep = await mapAnyCodeNode(
         { node: child, parent, index: i },
@@ -53,6 +54,13 @@ export async function extractStepsInfo(
           filter
         )
       }
+    } else if (
+      child.type === "mdxJsxFlowElement" &&
+      child.name === "CH.Preview" &&
+      // only add the preview if we have a preview in step 0
+      (stepIndex === 0 || steps[0].previewStep != null)
+    ) {
+      step.previewStep = child
     } else {
       step.children.push(child)
     }
@@ -66,7 +74,27 @@ export async function extractStepsInfo(
     }
   })
 
-  return steps.map(step => step.editorStep)
+  const hasPreviewSteps = steps[0].previewStep !== undefined
+  // if there is a CH.Preview in the first step
+  // build the previewStep list
+  if (hasPreviewSteps) {
+    const previewSteps = steps.map(step => step.previewStep)
+    // fill empties with previous step
+    previewSteps.forEach((previewStep, i) => {
+      if (!previewStep) {
+        previewSteps[i] =
+          merge === "merge steps with header"
+            ? previewSteps[0]
+            : previewSteps[i - 1]
+      }
+    })
+    parent.children = parent.children.concat(previewSteps)
+  }
+
+  return {
+    editorSteps: steps.map(step => step.editorStep),
+    hasPreviewSteps,
+  }
 }
 
 /**