Rename configs

Author: pomber

packages/mdx/src/core/types.ts

@@ -0,0 +1,65 @@
+import type { Theme } from "@code-hike/lighter"
+
+type TriggerPosition = `${number}px` | `${number}%`
+
+export type RemarkConfig = {
+  // remark only
+  theme: Theme
+  autoImport?: boolean
+  skipLanguages: string[]
+  autoLink?: boolean
+  // path to the current file, internal use only
+  filepath?: string
+
+  // client config
+  lineNumbers?: boolean
+  showCopyButton?: boolean
+  staticMediaQuery?: string
+  triggerPosition?: TriggerPosition
+}
+
+// the config that is passed from remark to the client components
+export type GlobalConfig = {
+  themeName: string
+  lineNumbers?: boolean
+  showCopyButton?: boolean
+  staticMediaQuery?: string
+  triggerPosition?: TriggerPosition
+}
+
+export function toGlobalConfig({
+  theme,
+  staticMediaQuery,
+  lineNumbers,
+  showCopyButton,
+  triggerPosition,
+}: RemarkConfig): GlobalConfig {
+  return {
+    themeName:
+      typeof theme === "string" ? theme : theme.name,
+    staticMediaQuery,
+    lineNumbers,
+    showCopyButton,
+    triggerPosition,
+  }
+}
+
+export type CodeSettings = {
+  // from global config
+  lineNumbers?: boolean
+  showCopyButton?: boolean
+  staticMediaQuery?: string
+  themeName?: string
+  // scrollycoding only
+  triggerPosition?: TriggerPosition
+
+  showExpandButton?: boolean
+  /* not really the height, when this changes we measure everything again */
+  parentHeight?: any
+  minColumns?: number
+  minZoom?: number
+  maxZoom?: number
+  horizontalCenter?: boolean
+  rows?: number | "focus" | (number | "focus")[]
+  debug?: boolean
+}

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

@@ -1,15 +1,13 @@
 import React from "react"
-import { CodeConfig, CodeSpring } from "../smooth-code"
+import { CodeSpring } from "../smooth-code"
 import {
   EditorSpring,
   EditorProps,
   EditorStep,
 } from "../mini-editor"
-import { CodeHikeConfig } from "../remark/config"
+import { CodeSettings, GlobalConfig } from "../core/types"
 
-export function Code(
-  props: EditorProps & Partial<CodeHikeConfig>
-) {
+export function Code(props: EditorProps & GlobalConfig) {
   const [step, setStep] = React.useState(props)
 
   function onTabClick(filename: string) {
@@ -22,8 +20,8 @@ export function Code(
 
 // build the CodeConfig from props and props.codeConfig
 export function mergeCodeConfig<T>(
-  props: Partial<CodeConfig> & {
-    codeConfig: Partial<CodeConfig>
+  props: Partial<CodeSettings> & {
+    codeConfig: Partial<CodeSettings>
   } & T
 ) {
   const {
@@ -66,7 +64,7 @@ export function InnerCode({
   ...props
 }: EditorProps & {
   onTabClick?: (filename: string) => void
-} & Partial<CodeHikeConfig>) {
+} & GlobalConfig) {
   const { className, style, codeConfig, ...editorProps } =
     mergeCodeConfig(props)
 

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

@@ -6,7 +6,7 @@ import {
   SandboxInfo,
 } from "@codesandbox/sandpack-client"
 import { EditorStep } from "../mini-editor"
-import { CodeConfig } from "../smooth-code"
+import { CodeSettings } from "../core/types"
 
 export type PresetConfig = SandboxInfo
 export function Preview({
@@ -27,7 +27,7 @@ export function Preview({
   show?: string
   style?: React.CSSProperties
   children?: React.ReactNode
-  codeConfig?: CodeConfig
+  codeConfig?: CodeSettings
 }) {
   const kids = presetConfig ? (
     <SandpackPreview

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

@@ -1,17 +1,18 @@
 import React from "react"
-import { EditorProps, EditorStep } from "../mini-editor"
+import { EditorStep } from "../mini-editor"
 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"
 import { Swap } from "./ssmq"
 import { StaticStepContext } from "./slots"
+import { GlobalConfig } from "../core/types"
 
 type ScrollycodingProps = {
   children: React.ReactNode
   editorSteps: EditorStep[]
-  codeConfig: EditorProps["codeConfig"]
+  codeConfig: GlobalConfig
   start?: number
   presetConfig?: PresetConfig
   className?: string

packages/mdx/src/mini-editor/editor-shift.tsx

@@ -1,10 +1,7 @@
-import {
-  CodeTween,
-  CodeConfig,
-  CodeStep,
-} from "../smooth-code"
+import { CodeTween, CodeStep } from "../smooth-code"
 import React from "react"
 import { codeToText } from "utils"
+import { CodeSettings } from "../core/types"
 
 export type CodeFile = CodeStep & {
   name: string
@@ -56,7 +53,7 @@ type Snapshot = {
   southTabs: TabsSnapshot | null
 }
 
-function northConfig(codeConfig: CodeConfig) {
+function northConfig(codeConfig: CodeSettings) {
   if (Array.isArray(codeConfig.rows)) {
     return {
       ...codeConfig,
@@ -66,7 +63,7 @@ function northConfig(codeConfig: CodeConfig) {
   return codeConfig
 }
 
-function southConfig(codeConfig: CodeConfig) {
+function southConfig(codeConfig: CodeSettings) {
   if (Array.isArray(codeConfig.rows)) {
     return {
       ...codeConfig,
@@ -82,7 +79,7 @@ export function useTransition(
   next: EditorStep,
   t: number,
   backward: boolean,
-  codeConfig: CodeConfig
+  codeConfig: CodeSettings
 ): Transition {
   // prevSnapshot has the dimensions of the editor for t=0
   // nextSnapshot has the dimensions of the editor for t=1
@@ -174,7 +171,7 @@ export function useTransition(
 function startingPosition(
   prev: EditorStep,
   next: EditorStep,
-  codeConfig: CodeConfig
+  codeConfig: CodeSettings
 ): Transition {
   const inputNorthPanel = prev.northPanel
   const inputSouthPanel = prev.southPanel
@@ -235,7 +232,7 @@ function startingPosition(
 function endingPosition(
   prev: EditorStep,
   next: EditorStep,
-  codeConfig: CodeConfig
+  codeConfig: CodeSettings
 ): Transition {
   const inputNorthPanel = next.northPanel
   const inputSouthPanel = next.southPanel
@@ -312,7 +309,7 @@ function CodeTransition({
   nextFile: CodeFile
   t: number
   parentHeight: string
-  codeConfig: CodeConfig & { htmlProps?: any }
+  codeConfig: CodeSettings & { htmlProps?: any }
 }) {
   const htmlProps = {
     ...codeConfig?.htmlProps,

packages/mdx/src/mini-editor/editor-spring.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { useSpring } from "use-spring"
 import { EditorTween } from "./editor-tween"
-import { CodeConfig } from "../smooth-code"
 import { EditorFrameProps } from "./editor-frame"
 import { EditorStep, CodeFile } from "./editor-shift"
+import { CodeSettings } from "../core/types"
 
 export { EditorSpring }
 export type { EditorProps, EditorStep, CodeFile }
@@ -22,7 +22,7 @@ const defaultSpring = {
 }
 type EditorProps = EditorStep & {
   frameProps?: Partial<EditorFrameProps>
-  codeConfig: CodeConfig
+  codeConfig: CodeSettings
   springConfig?: SpringConfig
 } & DivProps
 

packages/mdx/src/mini-editor/editor-tween.tsx

@@ -5,10 +5,10 @@ import {
 } from "./editor-frame"
 import { TerminalPanel } from "./terminal-panel"
 import { useTransition, EditorStep } from "./editor-shift"
-import { CodeConfig } from "../smooth-code"
 import { useLayoutEffect } from "../utils"
 import { CopyButton } from "smooth-code/copy-button"
 import { EditorExpandButton } from "mini-editor/expand-button"
+import { CodeSettings } from "../core/types"
 
 export { EditorTransition, EditorTween }
 export type { EditorTransitionProps, EditorTweenProps }
@@ -18,7 +18,7 @@ type EditorTransitionProps = {
   next?: EditorStep
   t: number
   backward: boolean
-  codeConfig: CodeConfig
+  codeConfig: CodeSettings
 } & Omit<EditorFrameProps, "northPanel" | "southPanel">
 
 type DivProps = React.PropsWithoutRef<
@@ -30,7 +30,7 @@ type EditorTweenProps = {
   next?: EditorStep
   t: number
   backward: boolean
-  codeConfig: CodeConfig
+  codeConfig: CodeSettings
   frameProps?: Partial<EditorFrameProps>
 } & DivProps
 

packages/mdx/src/remark/config.ts

@@ -1,17 +1,6 @@
-import { Theme } from "@code-hike/lighter"
+import { RemarkConfig } from "../core/types"
 
-export type CodeHikeConfig = {
-  theme: Theme
-  lineNumbers?: boolean
-  autoImport?: boolean
-  skipLanguages: string[]
-  showExpandButton?: boolean
-  showCopyButton?: boolean
-  autoLink?: boolean
-  staticMediaQuery?: string
-  // path to the current file, internal use only
-  filepath?: string
-}
+export type CodeHikeConfig = RemarkConfig
 
 /**
  * Add defaults and normalize config

packages/mdx/src/remark/transform.ts

@@ -13,6 +13,7 @@ import { addConfigDefaults, CodeHikeConfig } from "./config"
 
 import type { Node } from "unist"
 import { getThemeColors } from "@code-hike/lighter"
+import { toGlobalConfig } from "core/types"
 
 const transforms = [
   transformPreviews,
@@ -155,16 +156,12 @@ async function addConfig(
   config: CodeHikeConfig
 ) {
   const { theme } = config
-  const themeName =
-    typeof theme === "string" ? theme : theme.name
-  const style = await getStyle(theme, themeName)
 
-  const codeConfig = {
-    staticMediaQuery: config.staticMediaQuery,
-    lineNumbers: config.lineNumbers,
-    showCopyButton: config.showCopyButton,
-    themeName,
-  }
+  const globalConfig = toGlobalConfig(config)
+  const style = await getStyle(
+    theme,
+    globalConfig.themeName
+  )
 
   tree.children.unshift({
     type: "mdxJsxFlowElement",
@@ -236,7 +233,7 @@ async function addConfig(
                     type: "Identifier",
                     name: CH_CODE_CONFIG_VAR_NAME,
                   },
-                  init: valueToEstree(codeConfig),
+                  init: valueToEstree(globalConfig),
                 },
               ],
               kind: "const",

packages/mdx/src/smooth-code/code-spring.tsx

@@ -1,11 +1,8 @@
 import React from "react"
 import { useSpring } from "use-spring"
 import { FullTween } from "../utils"
-import {
-  CodeTween,
-  CodeConfig,
-  CodeStep,
-} from "./code-tween"
+import { CodeTween, CodeStep } from "./code-tween"
+import { CodeSettings } from "../core/types"
 
 type SpringConfig = Parameters<typeof useSpring>[1]
 
@@ -27,7 +24,7 @@ export function CodeSpring({
   ...htmlProps
 }: {
   step: CodeStep
-  config: CodeConfig & { spring?: SpringConfig }
+  config: CodeSettings & { spring?: SpringConfig }
 } & HTMLProps) {
   const { tween, t } = useStepSpring(step, config.spring)
   return (