Remove config placeholder

Author: pomber

packages/mdx/src/remark/code.ts

@@ -1,12 +1,6 @@
 import { highlight } from "../highlighter"
 import { extractLinks } from "./links"
-import {
-  visitAsync,
-  toJSX,
-  NodeInfo,
-  splitChildren,
-  CH_CODE_CONFIG_PLACEHOLDER,
-} from "./unist-utils"
+import { NodeInfo, splitChildren } from "./unist-utils"
 import { CodeStep } from "../smooth-code"
 import { EditorProps } from "../mini-editor"
 import {
@@ -38,27 +32,28 @@ export async function mapAnyCodeNode(
   }
 }
 
+type Props = Omit<EditorProps, "codeConfig">
+
 async function mapCode(
   nodeInfo: NodeInfo<CodeNode>,
   config: CodeHikeConfig
-): Promise<EditorProps> {
+): Promise<Props> {
   const file = await mapFile(nodeInfo, config)
-  const props: EditorProps = {
+  const props: Props = {
     northPanel: {
       tabs: [file.name],
       active: file.name,
       heightRatio: 1,
     },
     files: [file],
-    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
   }
   return props
 }
 
 export async function mapEditor(
   { node }: NodeInfo,
   config: CodeHikeConfig
-): Promise<EditorProps> {
+): Promise<Props> {
   const [northNodes, southNodes = []] = splitChildren(
     node,
     "thematicBreak"
@@ -105,7 +100,6 @@ export async function mapEditor(
         }
       : undefined,
     files: allFiles as any,
-    codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
   }
   return props
 }

packages/mdx/src/remark/steps.tsx

@@ -30,11 +30,10 @@ export async function extractStepsInfo(
     steps[stepIndex] = steps[stepIndex] || { children: [] }
     const step = steps[stepIndex]
     if (!step.editorStep && isEditorNode(child)) {
-      const { codeConfig, ...editorStep } =
-        await mapAnyCodeNode(
-          { node: child, parent, index: i },
-          config
-        )
+      const editorStep = await mapAnyCodeNode(
+        { node: child, parent, index: i },
+        config
+      )
 
       if (stepIndex === 0) {
         // for the header props, keep it as it is

packages/mdx/src/remark/transform.code.ts

@@ -1,5 +1,5 @@
 import { NodeInfo, toJSX, visitAsync } from "./unist-utils"
-import { mapEditor } from "./code"
+import { mapAnyCodeNode, mapEditor } from "./code"
 import { CodeNode, JsxNode, SuperNode } from "./nodes"
 import { CodeHikeConfig } from "./config"
 
@@ -31,6 +31,7 @@ async function transformCode(
 ) {
   toJSX(nodeInfo.node, {
     name: "CH.Code",
-    props: await mapEditor(nodeInfo, config),
+    props: await mapAnyCodeNode(nodeInfo, config),
+    addConfigProp: true,
   })
 }

packages/mdx/src/remark/transform.inline-code.ts

@@ -1,8 +1,4 @@
-import {
-  visitAsync,
-  toJSX,
-  CH_CODE_CONFIG_PLACEHOLDER,
-} from "./unist-utils"
+import { visitAsync, toJSX } from "./unist-utils"
 import { highlight } from "../highlighter"
 import { EditorStep } from "../mini-editor"
 import { Code } from "../utils"
@@ -46,9 +42,9 @@ export async function transformInlineCodes(
               lang,
               theme
             ),
-            codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
           },
           appendProps: true,
+          addConfigProp: true,
         })
       }
     }

packages/mdx/src/remark/transform.preview.ts

@@ -1,9 +1,5 @@
 import fetch from "node-fetch"
-import {
-  visitAsync,
-  toJSX,
-  CH_CODE_CONFIG_PLACEHOLDER,
-} from "./unist-utils"
+import { visitAsync, toJSX } from "./unist-utils"
 import { JsxNode, SuperNode } from "./nodes"
 
 export async function getPresetConfig(
@@ -36,9 +32,8 @@ export async function transformPreviews(tree: SuperNode) {
 
 async function transformPreview(node: Node) {
   toJSX(node, {
-    props: {
-      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
-    },
+    props: {},
     appendProps: true,
+    addConfigProp: true,
   })
 }

packages/mdx/src/remark/transform.scrollycoding.ts

@@ -1,8 +1,4 @@
-import {
-  visitAsync,
-  toJSX,
-  CH_CODE_CONFIG_PLACEHOLDER,
-} from "./unist-utils"
+import { visitAsync, toJSX } from "./unist-utils"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./transform.preview"
 import { transformLinks } from "./transform.section"
@@ -41,10 +37,10 @@ async function transformScrollycoding(
 
   toJSX(node, {
     props: {
-      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
       editorSteps: editorSteps,
       presetConfig,
     },
     appendProps: true,
+    addConfigProp: true,
   })
 }

packages/mdx/src/remark/transform.section.ts

@@ -29,7 +29,7 @@ async function transformSection(
     async (editorNode, index, parent) => {
       if (isEditorNode(editorNode)) {
         props = await mapAnyCodeNode(
-          { node: editorNode, index, parent: parent! },
+          { node: editorNode, index, parent },
           config
         )
         toJSX(editorNode, {
@@ -43,7 +43,11 @@ async function transformSection(
   transformLinks(node)
 
   if (props) {
-    toJSX(node, { name: "CH.Section", props: props as any })
+    toJSX(node, {
+      name: "CH.Section",
+      props: props as any,
+      addConfigProp: true,
+    })
   } else {
     toJSX(node, { name: "div", props: {} })
   }

packages/mdx/src/remark/transform.slideshow.ts

@@ -1,8 +1,4 @@
-import {
-  visitAsync,
-  toJSX,
-  CH_CODE_CONFIG_PLACEHOLDER,
-} from "./unist-utils"
+import { visitAsync, toJSX } from "./unist-utils"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./transform.preview"
 import { JsxNode, SuperNode } from "./nodes"
@@ -38,10 +34,10 @@ async function transformSlideshow(
 
   toJSX(node, {
     props: {
-      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
       editorSteps: editorSteps,
       presetConfig,
     },
     appendProps: true,
+    addConfigProp: true,
   })
 }

packages/mdx/src/remark/transform.spotlight.ts

@@ -1,8 +1,4 @@
-import {
-  visitAsync,
-  toJSX,
-  CH_CODE_CONFIG_PLACEHOLDER,
-} from "./unist-utils"
+import { visitAsync, toJSX } from "./unist-utils"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./transform.preview"
 import { JsxNode, SuperNode } from "./nodes"
@@ -39,10 +35,10 @@ async function transformSpotlight(
 
   toJSX(node, {
     props: {
-      codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
       editorSteps: editorSteps,
       presetConfig,
     },
     appendProps: true,
+    addConfigProp: true,
   })
 }

packages/mdx/src/remark/unist-utils.ts

@@ -46,10 +46,6 @@ export async function visitAsync(
   await Promise.all(promises)
 }
 
-// if one of the props in a toJSX call has the CH_CODE_CONFIG_PLACEHOLDER value
-// it will be replaced with a reference to the CH_CODE_CONFIG_VAR_NAME var
-export const CH_CODE_CONFIG_PLACEHOLDER =
-  "CH_CodeConfig" as any
 export const CH_CODE_CONFIG_VAR_NAME = "chCodeConfig"
 
 /**
@@ -64,14 +60,15 @@ export function toJSX(
     props,
     name,
     appendProps = false,
+    addConfigProp = false,
   }: {
     type?: string
     props: Record<string, any>
     name?: string
     appendProps?: boolean
+    addConfigProp?: boolean
   }
 ) {
-  // console.log(`transforming ${node.name} to ${name}`)
   node.type = type
   if (name) {
     node.name = name
@@ -82,26 +79,26 @@ export function toJSX(
     node.attributes = node.attributes || []
   }
 
+  if (addConfigProp) {
+    node.attributes.push(
+      toAttribute("codeConfig", CH_CODE_CONFIG_VAR_NAME, {
+        type: "Identifier",
+        name: CH_CODE_CONFIG_VAR_NAME,
+      })
+    )
+  }
+
   Object.keys(props).forEach(key => {
     if (props[key] === undefined) {
       return
     }
-    if (props[key] === CH_CODE_CONFIG_PLACEHOLDER) {
-      node.attributes.push(
-        toAttribute(key, CH_CODE_CONFIG_VAR_NAME, {
-          type: "Identifier",
-          name: CH_CODE_CONFIG_VAR_NAME,
-        })
+    node.attributes.push(
+      toAttribute(
+        key,
+        JSON.stringify(props[key]),
+        valueToEstree(props[key])
       )
-    } else {
-      node.attributes.push(
-        toAttribute(
-          key,
-          JSON.stringify(props[key]),
-          valueToEstree(props[key])
-        )
-      )
-    }
+    )
   })
 }