Split client and server code

Author: pomber

packages/mdx/src/client/annotations.tsx

@@ -0,0 +1,146 @@
+import React from "react"
+import { CodeAnnotation } from "@code-hike/smooth-code"
+
+export function Annotation() {
+  return "error: code hike remark plugin not running or annotation isn't at the right place"
+}
+
+export const annotationsMap: Record<
+  string,
+  CodeAnnotation["Component"]
+> = {
+  box: Box,
+  bg: Background,
+  label: Label,
+  link: CodeLink,
+}
+
+function Box({
+  children,
+  data,
+  theme,
+}: {
+  data: any
+  children: React.ReactNode
+  theme: any
+}) {
+  const border =
+    typeof data === "string"
+      ? data
+      : theme.tokenColors.find((tc: any) =>
+          tc.scope?.includes("string")
+        )?.settings?.foreground || "yellow"
+  return (
+    <span style={{ outline: `2px solid ${border}` }}>
+      {children}
+    </span>
+  )
+}
+
+function Background({
+  children,
+  data,
+  style,
+  theme,
+}: {
+  data: string
+  children: React.ReactNode
+  style?: React.CSSProperties
+  theme?: any
+}) {
+  const bg =
+    data ||
+    (((theme as any).colors[
+      "editor.lineHighlightBackground"
+    ] ||
+      (theme as any).colors[
+        "editor.selectionHighlightBackground"
+      ]) as string)
+  return (
+    <div
+      style={{
+        ...style,
+        background: bg,
+        // cursor: "pointer",
+      }}
+      // onClick={_ => alert("clicked")}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Label({
+  children,
+  data,
+  style,
+  theme,
+}: {
+  data: any
+  children: React.ReactNode
+  style?: React.CSSProperties
+  theme?: any
+}) {
+  const bg = ((theme as any).colors[
+    "editor.lineHighlightBackground"
+  ] ||
+    (theme as any).colors[
+      "editor.selectionHighlightBackground"
+    ]) as string
+  const [hover, setHover] = React.useState(false)
+
+  return (
+    <div
+      style={{
+        ...style,
+        background: hover ? bg : undefined,
+      }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {children}
+      <div
+        style={{
+          position: "absolute",
+          right: 0,
+          paddingRight: 16,
+          display: hover ? "block" : "none",
+          opacity: 0.7,
+        }}
+      >
+        {data?.children || data}
+      </div>
+    </div>
+  )
+}
+
+function CodeLink({
+  children,
+  data,
+}: {
+  data:
+    | {
+        url: string
+        title: string | undefined
+      }
+    | string
+  children: React.ReactNode
+}) {
+  const url = (data as any)?.url || data
+  const title = (data as any)?.title
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+      style={{
+        textDecoration: "underline",
+        textDecorationStyle: "dotted",
+        color: "inherit",
+      }}
+    >
+      {children}
+    </a>
+  )
+}

packages/mdx/src/client/code.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { CodeSpring } from "@code-hike/smooth-code"
+import {
+  EditorSpring,
+  EditorProps,
+} from "@code-hike/mini-editor"
+
+export function Code(props: EditorProps) {
+  if (
+    !props.southPanel &&
+    props.files.length === 1 &&
+    !props.files[0].name
+  ) {
+    return (
+      <CodeSpring
+        className="ch-code"
+        config={props.codeConfig}
+        step={props.files[0]}
+      />
+    )
+  } else {
+    return <EditorSpring {...props} />
+  }
+}

packages/mdx/src/preview.tsx renamed to packages/mdx/src/client/preview.tsx

@@ -66,22 +66,3 @@ function mergeFiles(
   })
   return result
 }
-
-export async function getPresetConfig(
-  attributes?: {
-    name: string
-    value: "string"
-  }[]
-) {
-  // todo add cache
-  const presetAttribute = attributes?.find(
-    (attr: any) => attr.name === "preset"
-  )
-  if (!presetAttribute) return undefined
-  const url = presetAttribute.value
-  const prefix = "https://codesandbox.io/s/"
-  const csbid = url.slice(prefix.length)
-  const configUrl = `https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack`
-  const res = await fetch(configUrl)
-  return await res.json()
-}

packages/mdx/src/scrollycoding.scss renamed to packages/mdx/src/client/scrollycoding.scss

@@ -1,23 +1,14 @@
-import { visitAsync, toJSX } from "./unist-utils"
-import { Node, Parent } from "unist"
 import React from "react"
 import {
-  EditorSpring,
   EditorProps,
   EditorStep,
 } from "@code-hike/mini-editor"
-import { mapEditor, Code } from "./code"
-import { reduceSteps } from "./code-files-reducer"
-import { extractStepsInfo } from "./steps"
+import { Code } from "./code"
 import {
   Scroller,
   Step as ScrollerStep,
 } from "@code-hike/scroller"
-import {
-  Preview,
-  PresetConfig,
-  getPresetConfig,
-} from "./preview"
+import { Preview, PresetConfig } from "./preview"
 
 export function Scrollycoding({
   children,
@@ -77,41 +68,3 @@ export function Scrollycoding({
     </section>
   )
 }
-
-export async function transformScrollycodings(
-  tree: Node,
-  config: { theme: any }
-) {
-  await visitAsync(
-    tree,
-    "mdxJsxFlowElement",
-    async node => {
-      if (node.name === "CH.Scrollycoding") {
-        await transformScrollycoding(node, config)
-      }
-    }
-  )
-}
-async function transformScrollycoding(
-  node: Node,
-  { theme }: { theme: any }
-) {
-  const editorSteps = await extractStepsInfo(
-    node as Parent,
-    { theme },
-    "merge step with previous"
-  )
-
-  const presetConfig = await getPresetConfig(
-    (node as any).attributes
-  )
-
-  toJSX(node, {
-    props: {
-      codeConfig: { theme },
-      editorSteps: editorSteps,
-      presetConfig,
-    },
-    appendProps: true,
-  })
-}

packages/mdx/src/scrollycoding.tsx renamed to packages/mdx/src/client/scrollycoding.tsx

@@ -1,19 +1,6 @@
-import visit from "unist-util-visit"
-import { Node, Parent } from "unist"
-import { highlight } from "@code-hike/highlighter"
-import { extractLinks } from "./links"
-import { visitAsync, toJSX } from "./unist-utils"
 import React from "react"
-import {
-  EditorSpring,
-  EditorProps,
-} from "@code-hike/mini-editor"
-import {
-  Code,
-  mapEditor,
-  isEditorNode,
-  mapAnyCodeNode,
-} from "./code"
+import { EditorProps } from "@code-hike/mini-editor"
+import { Code } from "./code"
 
 const SectionContext = React.createContext<{
   props: EditorProps
@@ -130,66 +117,3 @@ export function SectionLink({
     />
   )
 }
-
-export async function transformSections(
-  tree: Node,
-  config: { theme: any }
-) {
-  await visitAsync(
-    tree,
-    "mdxJsxFlowElement",
-    async sectionNode => {
-      if (sectionNode.name === "CH.Section") {
-        await transformSection(sectionNode, config)
-      }
-    }
-  )
-}
-
-async function transformSection(
-  node: Node,
-  config: { theme: any }
-) {
-  let props
-  await visitAsync(
-    node,
-    ["mdxJsxFlowElement", "code"],
-    async (node, index, parent) => {
-      if (isEditorNode(node)) {
-        props = await mapAnyCodeNode(
-          { node, index, parent: parent! },
-          config
-        )
-        toJSX(node, { name: "CH.SectionCode", props: {} })
-      }
-    }
-  )
-
-  transformLinks(node)
-
-  if (props) {
-    toJSX(node, { name: "CH.Section", props: props as any })
-  } else {
-    toJSX(node, { name: "div", props: {} })
-  }
-}
-
-function transformLinks(tree: Node) {
-  visit(tree, "link", (linkNode: any) => {
-    const url = decodeURI(linkNode["url"])
-    if (url.startsWith("focus://")) {
-      const [firstPart, secondPart] = decodeURI(url)
-        .substr("focus://".length)
-        .split("#")
-      const hasFile = Boolean(secondPart)
-      const props = hasFile
-        ? { file: firstPart, focus: secondPart, id: url }
-        : { focus: firstPart, id: url }
-      toJSX(linkNode, {
-        type: "mdxJsxTextElement",
-        name: "CH.SectionLink",
-        props,
-      })
-    }
-  })
-}