Pass theme to mini-browser

Author: pomber

packages/mdx/src/client/preview.tsx

@@ -6,6 +6,7 @@ import {
   SandboxInfo,
 } from "@codesandbox/sandpack-client"
 import { EditorStep } from "@code-hike/mini-editor"
+import { EditorTheme } from "@code-hike/utils"
 
 export type PresetConfig = SandboxInfo
 export function Preview({
@@ -14,13 +15,15 @@ export function Preview({
   presetConfig,
   show,
   children,
+  codeConfig,
   ...rest
 }: {
   className: string
   files: EditorStep["files"]
   presetConfig?: PresetConfig
   show?: string
   children?: React.ReactNode
+  codeConfig: { theme: EditorTheme }
 }) {
   return (
     <div
@@ -30,11 +33,16 @@ export function Preview({
       {...rest}
     >
       {!presetConfig ? (
-        <MiniBrowser loadUrl={show} children={children} />
+        <MiniBrowser
+          loadUrl={show}
+          children={children}
+          theme={codeConfig.theme}
+        />
       ) : (
         <SandpackPreview
           files={files}
           presetConfig={presetConfig}
+          codeConfig={codeConfig}
         />
       )}
     </div>
@@ -44,9 +52,11 @@ export function Preview({
 function SandpackPreview({
   files,
   presetConfig,
+  codeConfig,
 }: {
   files: EditorStep["files"]
   presetConfig: PresetConfig
+  codeConfig: { theme: EditorTheme }
 }) {
   const iframeRef = React.useRef<HTMLIFrameElement>(null!)
   const clientRef = React.useRef<SandpackClient>(null!)
@@ -76,7 +86,8 @@ function SandpackPreview({
   }, [files])
 
   return (
-    <MiniBrowser>
+    // TODO only render iframe here, leave MiniBrowser for the parent component
+    <MiniBrowser theme={codeConfig.theme}>
       <iframe ref={iframeRef} />
     </MiniBrowser>
   )

packages/mdx/src/client/scrollycoding.tsx

@@ -80,6 +80,7 @@ export function Scrollycoding({
             className="ch-scrollycoding-preview"
             files={tab.files}
             presetConfig={presetConfig}
+            codeConfig={codeConfig}
           />
         )}
       </div>

packages/mdx/src/client/slideshow.tsx

@@ -60,6 +60,7 @@ export function Slideshow({
             className="ch-slideshow-preview"
             files={tab.files}
             presetConfig={presetConfig}
+            codeConfig={codeConfig}
           />
         )}
       </div>

packages/mdx/src/client/spotlight.tsx

@@ -79,6 +79,7 @@ export function Spotlight({
             className="ch-spotlight-preview"
             files={tab.files}
             presetConfig={presetConfig}
+            codeConfig={codeConfig}
           />
         )}
       </div>

packages/mdx/src/plugin.ts

@@ -8,6 +8,7 @@ import visit from "unist-util-visit"
 import { transformSlideshows } from "./plugin/slideshow"
 import { valueToEstree } from "./plugin/to-estree"
 import { CH_CODE_CONFIG_VAR_NAME } from "./plugin/unist-utils"
+import { transformPreviews } from "./plugin/preview"
 
 type CodeHikeConfig = {
   theme: any
@@ -35,6 +36,7 @@ export function remarkCodeHike(config: CodeHikeConfig) {
     }
 
     try {
+      await transformPreviews(tree)
       await transformScrollycodings(tree, config)
       await transformSpotlights(tree, config)
       await transformSlideshows(tree, config)

packages/mdx/src/plugin/preview.ts

@@ -1,4 +1,10 @@
 import fetch from "node-fetch"
+import {
+  visitAsync,
+  toJSX,
+  CH_CODE_CONFIG_PLACEHOLDER,
+} from "./unist-utils"
+import { Node } from "unist"
 
 export async function getPresetConfig(
   attributes?: {
@@ -18,3 +24,24 @@ export async function getPresetConfig(
   const res = await fetch(configUrl)
   return await res.json()
 }
+
+export async function transformPreviews(tree: Node) {
+  await visitAsync(
+    tree,
+    "mdxJsxFlowElement",
+    async node => {
+      if (node.name === "CH.Preview") {
+        await transformPreview(node)
+      }
+    }
+  )
+}
+
+async function transformPreview(node: Node) {
+  toJSX(node, {
+    props: {
+      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
+    },
+    appendProps: true,
+  })
+}

packages/mini-browser/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@code-hike/classer": "^0.3.0-next.0",
     "@code-hike/mini-frame": "^0.3.0-next.0",
+    "@code-hike/utils": "^0.3.0-next.0",
     "use-spring": "^0.2.3"
   },
   "peerDependencies": {

packages/mini-browser/src/mini-browser-hike.tsx

@@ -3,6 +3,7 @@ import { MiniFrame } from "@code-hike/mini-frame"
 import { TitleBar } from "./title-bar"
 import { MiniBrowserStep, useSteps } from "./use-steps"
 import { useClasser, Classes } from "@code-hike/classer"
+import { EditorTheme } from "@code-hike/utils"
 
 type Transition = "none" | "slide"
 
@@ -12,6 +13,7 @@ export type MiniBrowserHikeProps = {
   classes?: Classes
   steps?: MiniBrowserStep[]
   transition?: Transition
+  theme: EditorTheme
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
 
 const MiniBrowserHike = React.forwardRef<
@@ -26,6 +28,7 @@ function MiniBrowserWithRef(
     steps: ogSteps,
     transition = "none",
     classes,
+    theme,
     ...props
   }: MiniBrowserHikeProps,
   ref: React.Ref<HTMLIFrameElement>
@@ -50,8 +53,13 @@ function MiniBrowserWithRef(
       }}
       classes={classes}
       titleBar={
-        <TitleBar url={displayUrl!} linkUrl={loadUrl!} />
+        <TitleBar
+          url={displayUrl!}
+          linkUrl={loadUrl!}
+          theme={theme}
+        />
       }
+      theme={theme}
     >
       {children || <iframe ref={ref} src={loadUrl} />}
     </MiniFrame>

packages/mini-browser/src/title-bar.tsx

@@ -1,15 +1,18 @@
 import React from "react"
 import { Back, Forward, Open } from "./buttons"
 import { FrameButtons } from "@code-hike/mini-frame"
+import { EditorTheme } from "@code-hike/utils"
 
 export { TitleBar }
 
 function TitleBar({
   url,
   linkUrl,
+  theme,
 }: {
   url: string
   linkUrl: string
+  theme: EditorTheme
 }) {
   return (
     <>

packages/mini-frame/package.json

@@ -34,6 +34,7 @@
     "url": "https://opencollective.com/codehike"
   },
   "dependencies": {
-    "@code-hike/classer": "^0.3.0-next.0"
+    "@code-hike/classer": "^0.3.0-next.0",
+    "@code-hike/utils": "^0.3.0-next.0"
   }
 }

packages/mini-frame/src/mini-frame.tsx

@@ -4,13 +4,19 @@ import {
   useClasser,
   Classes,
 } from "@code-hike/classer"
+import {
+  EditorTheme,
+  getColor,
+  ColorName,
+} from "@code-hike/utils"
 
 type MiniFrameProps = {
   title?: string
   titleBar?: React.ReactNode
   zoom?: number
   classes?: Classes
   overflow?: string
+  theme: EditorTheme
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
 
 export const MiniFrame = React.forwardRef<
@@ -22,6 +28,7 @@ export const MiniFrame = React.forwardRef<
     children,
     titleBar,
     classes,
+    theme,
     zoom = 1,
     overflow,
     ...props
@@ -40,7 +47,17 @@ export const MiniFrame = React.forwardRef<
     <ClasserProvider classes={classes}>
       <div {...props} ref={ref}>
         <div className={c("")}>
-          <div className={c("title-bar")}>{bar}</div>
+          <div
+            className={c("title-bar")}
+            style={{
+              background: getColor(
+                theme,
+                ColorName.EditorGroupHeaderBackground
+              ),
+            }}
+          >
+            {bar}
+          </div>
           <div className={c("content")}>
             <div className={c("zoom")} style={zoomStyle}>
               {children}

packages/playground/content/simple-code.mdx

@@ -84,5 +84,3 @@ function lorem(ipsum, dolor = 1) {
     : []
 }
 ```
-
-<CH.Preview show="/" style={{ height: 200 }} />

packages/playground/content/test.mdx

@@ -1,9 +1,3 @@
 # Hello
 
-export const pi = { foo: 1 }
-
-<pre>{JSON.stringify(chCodeConfig, null, 2)}</pre>
-
-```js
-console.log(1)
-```
+<CH.Preview show="/" style={{ height: 200 }} />