@tamagui/code-to-html 1.0.1-beta.142

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@tamagui/code-to-html",
+  "version": "1.0.1-beta.142",
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build --bundle",
+    "watch": "tamagui-build --bundle --watch",
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "hast-util-to-html": "^8.0.3",
+    "hast-util-to-string": "^2.0.0",
+    "parse-numeric-range": "^1.3.0",
+    "refractor": "^4.7.0",
+    "rehype": "^12.0.1",
+    "rehype-parse": "^8.0.4",
+    "rehype-slug": "^5.0.1",
+    "unified": "^10.1.2",
+    "url": "^0.11.0"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.142"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/highlightLine.ts

@@ -0,0 +1,112 @@
+// Inspired by https://github.com/j0lv3r4/mdx-prism
+
+import { toHtml } from 'hast-util-to-html'
+import parse from 'rehype-parse'
+import { unified } from 'unified'
+
+const lineNumberify = function lineNumberify(ast, lineNum = 1) {
+  let lineNumber = lineNum
+  return ast.reduce(
+    (result, node) => {
+      if (node.type === 'text') {
+        if (node.value.indexOf('\n') === -1) {
+          node.lineNumber = lineNumber
+          result.nodes.push(node)
+          return result
+        }
+
+        const lines = node.value.split('\n')
+        for (let i = 0; i < lines.length; i++) {
+          if (i !== 0) ++lineNumber
+          if (i === lines.length - 1 && lines[i].length === 0) continue
+          result.nodes.push({
+            type: 'text',
+            value: i === lines.length - 1 ? lines[i] : `${lines[i]}\n`,
+            lineNumber: lineNumber,
+          })
+        }
+
+        result.lineNumber = lineNumber
+        return result
+      }
+
+      if (node.children) {
+        node.lineNumber = lineNumber
+        const processed = lineNumberify(node.children, lineNumber)
+        node.children = processed.nodes
+        result.lineNumber = processed.lineNumber
+        result.nodes.push(node)
+        return result
+      }
+
+      result.nodes.push(node)
+      return result
+    },
+    { nodes: [], lineNumber: lineNumber }
+  )
+}
+
+const wrapLines = function wrapLines(ast: any[], linesToHighlight) {
+  const highlightAll = linesToHighlight.length === 1 && linesToHighlight[0] === 0
+  const allLines: any[] = Array.from(new Set(ast.map((x) => x.lineNumber)))
+  let i = 0
+  const wrapped = allLines.reduce((nodes, marker) => {
+    const line = marker
+    const children: any[] = []
+    for (; i < ast.length; i++) {
+      if (ast[i].lineNumber < line) {
+        nodes.push(ast[i])
+        continue
+      }
+
+      if (ast[i].lineNumber === line) {
+        children.push(ast[i])
+        continue
+      }
+
+      if (ast[i].lineNumber > line) {
+        break
+      }
+    }
+
+    nodes.push({
+      type: 'element',
+      tagName: 'div',
+      properties: {
+        dataLine: line,
+        className: 'highlight-line',
+        dataHighlighted: linesToHighlight.includes(line) || highlightAll ? 'true' : 'false',
+      },
+      children,
+      lineNumber: line,
+    })
+
+    return nodes
+  }, [])
+
+  return wrapped
+}
+
+// https://github.com/gatsbyjs/gatsby/pull/26161/files
+const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g
+
+const applyMultilineFix = function (ast) {
+  // AST to HTML
+  let html = toHtml(ast)
+
+  // Fix JSX issue
+  html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
+    match.replace(/\n/g, `</span>\n<span class="token ${token}">`)
+  )
+
+  // HTML to AST
+  const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(html)
+
+  return hast.children
+}
+
+export function highlightLine(ast, lines) {
+  const formattedAst = applyMultilineFix(ast)
+  const numbered = lineNumberify(formattedAst).nodes
+  return wrapLines(numbered, lines)
+}

package/src/highlightWord.ts

@@ -0,0 +1,13 @@
+// const visit = require('unist-util-visit')
+import { toHtml } from 'hast-util-to-html'
+import parse from 'rehype-parse'
+import { unified } from 'unified'
+
+const CALLOUT = /__(.*?)__/g
+
+export function highlightWord(code) {
+  const html = toHtml(code)
+  const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`)
+  const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(result)
+  return hast.children
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+import { toHtml } from 'hast-util-to-html'
+import rangeParser from 'parse-numeric-range'
+import { refractor } from 'refractor'
+import css from 'refractor/lang/css'
+import tsx from 'refractor/lang/tsx'
+
+import { highlightLine } from './highlightLine'
+import { highlightWord } from './highlightWord'
+
+refractor.register(tsx)
+refractor.register(css)
+
+export function codeToHTML(source: string, language: 'tsx' | 'css' | string, line = '0') {
+  let result: any = refractor.highlight(source, language)
+  result = highlightLine(result, rangeParser(line))
+  result = highlightWord(result)
+  result = toHtml(result)
+  return result as string
+}

package/types/highlightLine.d.ts

@@ -0,0 +1,2 @@
+export declare function highlightLine(ast: any, lines: any): any;
+//# sourceMappingURL=highlightLine.d.ts.map

package/types/highlightWord.d.ts

@@ -0,0 +1,2 @@
+export declare function highlightWord(code: any): import("hast").RootContent[];
+//# sourceMappingURL=highlightWord.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export declare function codeToHTML(source: string, language: 'tsx' | 'css' | string, line?: string): string;
+//# sourceMappingURL=index.d.ts.map