Use lighter annotations

Author: pomber

packages/mdx/dev/content/assets/bar.js

@@ -1,6 +1,7 @@
 console.log("one")
 console.log("two")
 console.log("three")
+// mark
 console.log("four")
 console.log("five")
 console.log("six")

packages/mdx/dev/content/comment-annotations.mdx

@@ -112,3 +112,44 @@ function adipiscing(...elit) {
   return elit.map(ipsum => ipsum.sit)
 }
 ```
+
+## Inline comments
+
+```css
+body {
+  margin: 12px; /* mark[11:14] */
+}
+```
+
+## Other syntaxes
+
+```html hello.html
+<!-- mark[6:14] -->
+<div>Code Hike</div>
+```
+
+```mdx
+# Hello {/* mark */}
+```
+
+```jsonc
+{
+  // mark[12:20]
+  "name": "Code Hike"
+}
+```
+
+```lua
+-- mark[8:16]
+print("Code Hike")
+```
+
+```matlab
+% mark[7:15]
+disp('Code Hike')
+```
+
+```lisp
+; mark[9:17]
+(print "Code Hike")
+```

packages/mdx/dev/content/test.mdx

@@ -7,9 +7,3 @@ function foobarloremipsumfoobarloremipsumsitametfoobarloremipsumfoobarloremipsum
   return 8
 }
 ```
-
-<CH.Preview>
-
-Hello
-
-</CH.Preview>

packages/mdx/src/remark/__snapshots__/comment-data.test.ts.snap

@@ -0,0 +1,147 @@
+import { CodeAnnotation } from "smooth-code"
+import {
+  LighterAnnotation,
+  extractLighterAnnotations,
+  parseLighterAnnotations,
+} from "./lighter"
+
+export async function splitCodeAndAnnotations(
+  rawCode: string,
+  lang: string,
+  config: { filepath?: string; autoLink?: boolean }
+): Promise<{
+  code: string
+  annotations: CodeAnnotation[]
+  focus: string
+}> {
+  let { code, annotations } =
+    await extractLighterAnnotations(rawCode, lang)
+
+  // import external code if needed and re-run annotations extraction
+  const fromAnnotations = annotations.filter(
+    a => a.name === "from"
+  )
+  if (fromAnnotations.length === 1) {
+    const fromData = fromAnnotations[0].query?.trim()
+    const [codepath, range] = fromData?.split(/\s+/) || []
+    const externalFileContent = await readFile(
+      codepath,
+      config.filepath,
+      range
+    )
+    // TODO remove 'from' annotation from the annotation names to avoid loops
+    const result = await extractLighterAnnotations(
+      externalFileContent,
+      lang
+    )
+    code = result.code
+    annotations = result.annotations
+  }
+
+  if (config.autoLink) {
+    const autoLinkAnnotations = findLinkAnnotations(code)
+    annotations = [...annotations, ...autoLinkAnnotations]
+  }
+
+  return { code, ...parseLighterAnnotations(annotations) }
+}
+
+async function readFile(
+  externalCodePath: string,
+  mdxFilePath: string,
+  range: string | undefined
+) {
+  const annotationContent =
+    "from " + mdxFilePath + " " + (range || "")
+
+  let fs, path
+
+  try {
+    fs = (await import("fs")).default
+    path = (await import("path")).default
+    if (!fs || !fs.readFileSync || !path || !path.resolve) {
+      throw new Error("fs or path not found")
+    }
+  } catch (e) {
+    e.message = `Code Hike couldn't resolve this annotation:
+${annotationContent}
+Looks like node "fs" and "path" modules are not available.`
+    throw e
+  }
+
+  // if we don't know the path of the mdx file:
+  if (mdxFilePath == null) {
+    throw new Error(
+      `Code Hike couldn't resolve this annotation:
+  ${annotationContent}
+  Someone is calling the mdx compile function without setting the path.
+  Open an issue on CodeHike's repo for help.`
+    )
+  }
+
+  const dir = path.dirname(mdxFilePath)
+  const absoluteCodepath = path.resolve(
+    dir,
+    externalCodePath
+  )
+
+  let content: string
+  try {
+    content = fs.readFileSync(absoluteCodepath, "utf8")
+  } catch (e) {
+    e.message = `Code Hike couldn't resolve this annotation:
+${annotationContent}
+${absoluteCodepath} doesn't exist.`
+    throw e
+  }
+
+  if (range) {
+    const [start, end] = range.split(":")
+    const startLine = parseInt(start)
+    const endLine = parseInt(end)
+    if (isNaN(startLine) || isNaN(endLine)) {
+      throw new Error(
+        `Code Hike couldn't resolve this annotation:
+${annotationContent}
+The range is not valid. Should be something like:
+ ${externalCodePath} 2:5`
+      )
+    }
+    const lines = content.split("\n")
+    content = lines.slice(startLine - 1, endLine).join("\n")
+  }
+
+  return content
+}
+
+const urlRegex = /https?:\/\/[\w\-_.~:/?#[\]@!$&*+,;=%]+/g
+function findLinkAnnotations(
+  code: string
+): LighterAnnotation[] {
+  const lines = code.split("\n")
+
+  const annotations: LighterAnnotation[] = []
+
+  lines.forEach((line, i) => {
+    let match: RegExpExecArray | null
+    while ((match = urlRegex.exec(line)) !== null) {
+      const url = match[0]
+      const start = match.index
+      const end = start + url.length
+
+      annotations.push({
+        name: "link",
+        query: url,
+        ranges: [
+          {
+            lineNumber: i + 1,
+            fromColumn: start + 1,
+            toColumn: end + 1,
+          },
+        ],
+      })
+    }
+  })
+
+  return annotations
+}

packages/mdx/src/remark/annotations.comments.ts

@@ -0,0 +1,15 @@
+import { CodeAnnotation } from "../smooth-code"
+import { annotationsMap } from "../mdx-client/annotations"
+
+export function getAnnotationsFromMetastring(
+  options: Record<string, string>
+) {
+  const annotations = [] as CodeAnnotation[]
+  Object.keys(options).forEach(key => {
+    const Component = annotationsMap[key]
+    if (Component) {
+      annotations?.push({ focus: options[key], Component })
+    }
+  })
+  return annotations
+}