Refactor mdx-client props

Author: pomber

packages/mdx/dev/content/rows.mdx

@@ -66,7 +66,7 @@ console.log(7)
 
 </CH.Code>
 
-<CH.Code rows={[2, "focus"]}  lineNumbers >
+<CH.Code rows={[2, "focus"]}  lineNumbers showExpandButton>
 
 ```js foo.js
 console.log(2)

packages/mdx/dev/content/test.mdx

@@ -1,9 +1,13 @@
+<CH.Scrollycoding rows={10} lineNumbers>
+
+<CH.Code rows={3}>
+
 ```js
-// mark(1)
-function foobarloremipsumfoobarloremipsumsitametfoobarloremipsumfoobarloremipsumsitamet() {
-  // box[16:20] red
-  console.log("hover me")
-  // mark[9:12]
-  return 8
-}
+console.log(1)
 ```
+
+</CH.Code>
+
+Hello 1
+
+</CH.Scrollycoding>

packages/mdx/src/core/types.ts

@@ -1,4 +1,5 @@
 import type { Theme } from "@code-hike/lighter"
+import type { CodeStep } from "../smooth-code"
 
 type TriggerPosition = `${number}px` | `${number}%`
 
@@ -25,6 +26,10 @@ export type GlobalConfig = {
   showCopyButton?: boolean
   staticMediaQuery?: string
   triggerPosition?: TriggerPosition
+
+  minZoom?: number
+  maxZoom?: number
+  horizontalCenter?: boolean
 }
 
 export function toGlobalConfig({
@@ -63,3 +68,36 @@ export type CodeSettings = {
   rows?: number | "focus" | (number | "focus")[]
   debug?: boolean
 }
+
+export type ElementProps = {
+  style?: React.CSSProperties
+  className?: string
+}
+
+export type CodeConfigProps = {
+  rows?: number | "focus" | (number | "focus")[]
+  showCopyButton?: boolean
+  showExpandButton?: boolean
+  lineNumbers?: boolean
+
+  minZoom?: number
+  maxZoom?: number
+  horizontalCenter?: boolean
+}
+
+type EditorPanel = {
+  tabs: string[]
+  active: string
+  heightRatio: number
+}
+
+export type EditorStep = {
+  files: CodeFile[]
+  northPanel: EditorPanel
+  southPanel?: EditorPanel
+  terminal?: string
+}
+
+export type CodeFile = CodeStep & {
+  name: string
+}

packages/mdx/src/mdx-client/code.tsx

@@ -1,116 +1,128 @@
 import React from "react"
 import { CodeSpring } from "../smooth-code"
+import { EditorSpring, EditorStep } from "../mini-editor"
 import {
-  EditorSpring,
-  EditorProps,
-  EditorStep,
-} from "../mini-editor"
-import { CodeSettings, GlobalConfig } from "../core/types"
+  CodeConfigProps,
+  ElementProps,
+  GlobalConfig,
+} from "../core/types"
 
-export function Code(props: EditorProps & GlobalConfig) {
-  const [step, setStep] = React.useState(props)
+type Props = {
+  editorStep: EditorStep
+  globalConfig: GlobalConfig
+} & ElementProps &
+  CodeConfigProps
+
+export function Code(props: Props) {
+  const { editorStep, globalConfig, ...codeConfigProps } =
+    props
+  const [step, setStep] = React.useState(editorStep)
 
   function onTabClick(filename: string) {
-    const newStep = updateEditorStep(step, filename, null)
+    const newStep = updateEditorStep(
+      props.editorStep,
+      filename,
+      null
+    )
     setStep({ ...step, ...newStep })
   }
 
-  return <InnerCode {...step} onTabClick={onTabClick} />
+  return (
+    <InnerCode
+      editorStep={step}
+      onTabClick={onTabClick}
+      globalConfig={globalConfig}
+      codeConfigProps={codeConfigProps}
+    />
+  )
 }
 
-// build the CodeConfig from props and props.codeConfig
-export function mergeCodeConfig<T>(
-  props: Partial<CodeSettings> & {
-    codeConfig: Partial<CodeSettings>
-  } & T
-) {
-  const {
-    lineNumbers,
-    showCopyButton,
-    showExpandButton,
-    minZoom,
-    maxZoom,
-    ...rest
-  } = props
-  const codeConfig = {
-    ...props.codeConfig,
-    maxZoom:
-      maxZoom == null ? props.codeConfig?.maxZoom : maxZoom,
-    minZoom:
-      minZoom == null ? props.codeConfig?.minZoom : minZoom,
-    horizontalCenter:
-      props.codeConfig?.horizontalCenter ??
-      props.horizontalCenter,
-    lineNumbers:
-      lineNumbers == null
-        ? props.codeConfig?.lineNumbers
-        : lineNumbers,
-    showCopyButton:
-      showCopyButton == null
-        ? props.codeConfig?.showCopyButton
-        : showCopyButton,
-    showExpandButton:
-      showExpandButton == null
-        ? props.codeConfig?.showExpandButton
-        : showExpandButton,
-    rows: props.rows,
-    debug: props.debug ?? props.codeConfig?.debug,
-  }
-  return { ...rest, codeConfig }
+type InnerCodeProps = {
+  onTabClick: (filename: string) => void
+  globalConfig: GlobalConfig
+  editorStep: EditorStep
+  codeConfigProps: CodeConfigProps & ElementProps
 }
 
 export function InnerCode({
   onTabClick,
-  ...props
-}: EditorProps & {
-  onTabClick?: (filename: string) => void
-} & GlobalConfig) {
-  const { className, style, codeConfig, ...editorProps } =
-    mergeCodeConfig(props)
+  globalConfig,
+  editorStep,
+  codeConfigProps,
+}: InnerCodeProps) {
+  const { className, style, ...config } = mergeCodeConfig(
+    globalConfig,
+    codeConfigProps
+  )
 
   if (
-    !props.southPanel &&
-    props.files.length === 1 &&
-    !props.files[0].name
+    !editorStep.southPanel &&
+    editorStep.files.length === 1 &&
+    !editorStep.files[0].name
   ) {
     return (
       <div
         className={`ch-codeblock not-prose ${
           className || ""
         }`}
-        data-ch-theme={props.codeConfig?.themeName}
+        data-ch-theme={globalConfig.themeName}
         style={style}
       >
         <CodeSpring
           className="ch-code"
-          config={codeConfig}
-          step={editorProps.files[0]}
+          config={config}
+          step={editorStep.files[0]}
         />
       </div>
     )
   } else {
     const frameProps = {
-      ...editorProps?.frameProps,
+      // ...editorStep?.frameProps,
       onTabClick,
     }
     return (
       <div
         className={`ch-codegroup not-prose ${
           className || ""
         }`}
-        data-ch-theme={props.codeConfig?.themeName}
+        data-ch-theme={globalConfig.themeName}
         style={style}
       >
         <EditorSpring
-          {...editorProps}
+          {...editorStep}
           frameProps={frameProps}
-          codeConfig={codeConfig}
+          codeConfig={config}
         />
       </div>
     )
   }
 }
 
+export function mergeCodeConfig(
+  globalConfig: GlobalConfig,
+  local: CodeConfigProps & ElementProps
+) {
+  const {
+    // ignore these
+    staticMediaQuery,
+    themeName,
+    triggerPosition,
+    // keep the rest
+    ...global
+  } = globalConfig
+  return {
+    ...global,
+    ...local,
+    lineNumbers: local.lineNumbers ?? global.lineNumbers,
+    maxZoom: local.maxZoom ?? global.maxZoom,
+    minZoom: local.minZoom ?? global.minZoom,
+    horizontalCenter:
+      local.horizontalCenter ?? global.horizontalCenter,
+    showCopyButton:
+      local.showCopyButton ?? global.showCopyButton,
+  }
+}
+
 export function updateEditorStep(
   step: EditorStep,
   filename: string | undefined,

packages/mdx/src/mdx-client/inline-code.tsx

@@ -3,22 +3,22 @@ import { Code } from "../utils"
 
 export function InlineCode({
   className,
-  codeConfig,
+  globalConfig,
   children,
   code,
   ...rest
 }: {
   className: string
   code: Code
   children?: React.ReactNode
-  codeConfig: { themeName: string }
+  globalConfig: { themeName: string }
 }) {
   const { lines } = code
   const allTokens = lines.flatMap(line => line.tokens)
 
   return (
     <span
-      data-ch-theme={codeConfig.themeName}
+      data-ch-theme={globalConfig.themeName}
       className={
         "ch-inline-code not-prose" +
         (className ? " " + className : "")

packages/mdx/src/mdx-client/preview.tsx

@@ -6,29 +6,31 @@ import {
   SandboxInfo,
 } from "@codesandbox/sandpack-client"
 import { EditorStep } from "../mini-editor"
-import { CodeSettings } from "../core/types"
+import { ElementProps, GlobalConfig } from "../core/types"
+
+type PreviewProps = {
+  globalConfig: GlobalConfig
+  // data
+  files: EditorStep["files"]
+  presetConfig?: PresetConfig
+  children?: React.ReactNode
+  // local config
+  show?: string
+  frameless?: boolean
+} & ElementProps
 
 export type PresetConfig = SandboxInfo
 export function Preview({
-  className,
+  globalConfig,
   files,
   presetConfig,
   show,
   children,
-  style,
   frameless,
-  codeConfig,
+  className,
+  style,
   ...rest
-}: {
-  className: string
-  frameless?: boolean
-  files: EditorStep["files"]
-  presetConfig?: PresetConfig
-  show?: string
-  style?: React.CSSProperties
-  children?: React.ReactNode
-  codeConfig?: CodeSettings
-}) {
+}: PreviewProps) {
   const kids = presetConfig ? (
     <SandpackPreview
       files={files}
@@ -43,7 +45,7 @@ export function Preview({
         "ch-preview" + (className ? " " + className : "")
       }
       style={style}
-      data-ch-theme={codeConfig?.themeName}
+      data-ch-theme={globalConfig?.themeName}
     >
       {frameless ? (
         kids