@vxrn/mdx 1.1.321

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@vxrn/mdx",
+  "version": "1.1.321",
+  "types": "./types/index.d.ts",
+  "main": "dist/index.js",
+  "type": "commonjs",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build --bundle --bundle-modules",
+    "watch": "yarn build --watch",
+    "lint": "biome check src",
+    "lint:fix": "biome check --write src",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "// 👋 note - import === require here, mdx-bundler is cjs only must await import() this package": "./",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "react-native": "./dist/index.native.js",
+      "default": "./dist/index.native.js"
+    }
+  },
+  "dependencies": {
+    "compare-versions": "^4.1.3",
+    "gray-matter": "^4.0.3",
+    "hast-util-to-html": "^8.0.3",
+    "hast-util-to-string": "^2.0.0",
+    "mdx-bundler": "^10.0.2",
+    "parse-numeric-range": "^1.3.0",
+    "reading-time": "1.3.0",
+    "refractor": "^4.7.0",
+    "rehype": "^12.0.1",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-parse": "^8.0.4",
+    "rehype-slug": "^5.0.1",
+    "shiki": "1.3.0",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^2.0.3"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.116.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/getAllFrontmatter.tsx

@@ -0,0 +1,25 @@
+import glob from 'glob'
+import matter from 'gray-matter'
+import fs from 'node:fs'
+import path from 'node:path'
+import readingTime from 'reading-time'
+import { getHeadings } from './getHeadings'
+import type { Frontmatter } from './types'
+
+// the front matter and content of all mdx files based on `docsPaths`
+export const getAllFrontmatter = (fromPath: string): Frontmatter[] => {
+  const paths = glob.sync(`${fromPath}/**/*.mdx`)
+  return paths
+    .map((filePath) => {
+      const source = fs.readFileSync(path.join(filePath), 'utf8')
+      const { data, content } = matter(source)
+      const slug = filePath.replace(`${fromPath.replaceAll('\\', '/')}/`, '').replace('.mdx', '')
+      return {
+        ...data,
+        slug,
+        headings: getHeadings(source),
+        readingTime: readingTime(content),
+      } as Frontmatter
+    })
+    .sort((a, b) => Number(new Date(b.publishedAt || '')) - Number(new Date(a.publishedAt || '')))
+}

package/src/getHeadings.ts

@@ -0,0 +1,11 @@
+const getTitle = (source: string) => source.replace(/^\#+\s+/, '').replace(/\<.*\>/, ' ')
+
+export const getHeadings = (source: string) =>
+  source
+    .split('\n')
+    .filter((x) => x.startsWith('#'))
+    .map((x) => ({
+      title: getTitle(x),
+      priority: x.trim().split(' ')[0].length,
+      id: `#${getTitle(x).replace(/\s+/, '-').toLowerCase()}`,
+    }))

package/src/getMDXBySlug.tsx

@@ -0,0 +1,62 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import compareVersions from 'compare-versions'
+import { bundleMDX } from 'mdx-bundler'
+import readingTime from 'reading-time'
+import type { Frontmatter } from './types'
+import { rehypeHighlightCode } from './rehypeHighlightCode'
+import rehypeMetaAttribute from './rehypeMetaAttribute'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypeSlug from 'rehype-slug'
+import { getHeadings } from './getHeadings'
+
+export const getMDXBySlug = async (
+  basePath: string,
+  slug: string
+): Promise<{ frontmatter: Frontmatter; code: string }> => {
+  let mdxPath = slug
+
+  // if no version given, find it
+  if (!slug.includes('.') && basePath.includes('components')) {
+    const versions = getAllVersionsFromPath(path.join(basePath, slug))
+    mdxPath += `/${versions[0]}`
+  }
+
+  const filePath = path.join(basePath, `${mdxPath}.mdx`)
+  const source = fs.readFileSync(filePath, 'utf8')
+  const { frontmatter, code } = await getMDX(source)
+  return {
+    frontmatter: {
+      ...frontmatter,
+      headings: getHeadings(source),
+      readingTime: readingTime(code),
+    } as Frontmatter,
+    code,
+  }
+}
+
+export async function getMDX(source: string) {
+  return await bundleMDX({
+    source,
+    mdxOptions(options) {
+      const plugins = [
+        ...(options.rehypePlugins ?? []),
+        rehypeMetaAttribute,
+        rehypeHighlightCode,
+        rehypeAutolinkHeadings,
+        rehypeSlug,
+      ]
+      options.rehypePlugins = plugins as any
+      return options
+    },
+  })
+}
+
+export function getAllVersionsFromPath(fromPath: string): string[] {
+  if (!fs.existsSync(fromPath)) return []
+  return fs
+    .readdirSync(fromPath)
+    .map((fileName) => fileName.replace('.mdx', ''))
+    .sort(compareVersions)
+    .reverse()
+}

package/src/highlightCode.tsx

@@ -0,0 +1,27 @@
+import { toHtml } from 'hast-util-to-html'
+import rangeParser from 'parse-numeric-range'
+import { refractor } from 'refractor'
+import css from 'refractor/lang/css.js'
+import tsx from 'refractor/lang/tsx.js'
+
+import { rehypeHighlightLine } from './rehypeLine'
+import { rehypeHighlightWord } from './rehypeWord'
+
+let highlighter: (source: string, language: 'tsx' | 'css' | string, line?: string) => string
+
+export function createCodeHighlighter() {
+  if (highlighter) return highlighter
+
+  refractor.register(tsx)
+  refractor.register(css)
+
+  highlighter = function codeToHtml(source, language, line = '0') {
+    let result: any = refractor.highlight(source, language)
+    result = rehypeHighlightLine(result, rangeParser(line))
+    result = rehypeHighlightWord(result)
+    result = toHtml(result)
+    return result as string
+  }
+
+  return highlighter
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+// export { rehypeHighlightCode } from './rehypeHighlightCode'
+export { getAllFrontmatter } from './getAllFrontmatter'
+export { getMDXBySlug, getAllVersionsFromPath } from './getMDXBySlug'
+export type { Frontmatter } from './types'
+export { createCodeHighlighter } from './highlightCode'

package/src/rehypeHighlightCode.tsx

@@ -0,0 +1,40 @@
+// Inspired by https://github.com/j0lv3r4/mdx-prism
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import { toString } from 'hast-util-to-string'
+import rangeParser from 'parse-numeric-range'
+import { refractor } from 'refractor'
+import tsx from 'refractor/lang/tsx.js'
+import visit from 'unist-util-visit'
+
+import { rehypeHighlightLine } from './rehypeLine'
+import { rehypeHighlightWord } from './rehypeWord'
+
+refractor.register(tsx)
+
+export const rehypeHighlightCode = (options = {}) => {
+  return (tree) => {
+    visit(tree, 'element', visitor)
+  }
+
+  function visitor(node, index, parent) {
+    if (
+      !parent ||
+      parent.tagName !== 'pre' ||
+      node.tagName !== 'code' ||
+      !node.properties.className
+    ) {
+      return
+    }
+
+    const [_, lang] = node.properties.className[0].split('-')
+    const codeString = toString(node)
+    let result = refractor.highlight(codeString, lang)
+
+    const linesToHighlight = rangeParser(node.properties.line || '0')
+
+    result = rehypeHighlightLine(result, linesToHighlight)
+
+    node.children = rehypeHighlightWord(result)
+  }
+}

package/src/rehypeLine.tsx

@@ -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 = (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 rehypeHighlightLine(ast, lines) {
+  const formattedAst = applyMultilineFix(ast)
+  const numbered = lineNumberify(formattedAst).nodes
+  return wrapLines(numbered, lines)
+}

package/src/rehypeMetaAttribute.tsx

@@ -0,0 +1,22 @@
+// https://github.com/wooorm/xdm#syntax-highlighting-with-the-meta-field
+
+import visit from 'unist-util-visit'
+
+const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g
+
+export default (options = {}) => {
+  return (tree) => {
+    visit(tree, 'element', onelement)
+  }
+
+  function onelement(node) {
+    let match
+    if (node.tagName === 'code' && node.data && node.data.meta) {
+      re.lastIndex = 0 // Reset regex.
+
+      while ((match = re.exec(node.data.meta))) {
+        node.properties[match[1]] = match[2] || match[3] || match[4] || ''
+      }
+    }
+  }
+}

package/src/rehypeWord.tsx

@@ -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 const rehypeHighlightWord = (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/types.ts

@@ -0,0 +1,20 @@
+export type Frontmatter = {
+  title: string
+  headings?: { title: string; priority: number; id: string }[]
+  description?: string
+  name?: string
+  versions?: string[]
+  version?: string
+  by?: string
+  publishedAt?: string
+  draft?: boolean
+  relatedIds?: string[]
+  type?: 'changelog' | string
+  readingTime?: { text: string; minutes: number; time: number; words: number }
+  poster?: string
+  slug: string
+  image?: string
+  component?: string
+  package?: string
+  demoName?: string
+}

package/types/getAllFrontmatter.d.ts

@@ -0,0 +1,3 @@
+import type { Frontmatter } from './types';
+export declare const getAllFrontmatter: (fromPath: string) => Frontmatter[];
+//# sourceMappingURL=getAllFrontmatter.d.ts.map

package/types/getAllFrontmatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getAllFrontmatter.d.ts","sourceRoot":"","sources":["../src/getAllFrontmatter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,eAAO,MAAM,iBAAiB,aAAc,MAAM,KAAG,WAAW,EAe/D,CAAA"}

package/types/getHeadings.d.ts

@@ -0,0 +1,6 @@
+export declare const getHeadings: (source: string) => {
+    title: string;
+    priority: number;
+    id: string;
+}[];
+//# sourceMappingURL=getHeadings.d.ts.map

package/types/getHeadings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getHeadings.d.ts","sourceRoot":"","sources":["../src/getHeadings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,WAAY,MAAM;;;;GAQnC,CAAA"}

package/types/getMDXBySlug.d.ts

@@ -0,0 +1,19 @@
+import type { Frontmatter } from './types';
+export declare const getMDXBySlug: (basePath: string, slug: string) => Promise<{
+    frontmatter: Frontmatter;
+    code: string;
+}>;
+export declare function getMDX(source: string): Promise<{
+    code: string;
+    frontmatter: {
+        [key: string]: any;
+    };
+    errors: import("esbuild").Message[];
+    matter: Omit<import("gray-matter").GrayMatterFile<string>, "data"> & {
+        data: {
+            [key: string]: any;
+        };
+    };
+}>;
+export declare function getAllVersionsFromPath(fromPath: string): string[];
+//# sourceMappingURL=getMDXBySlug.d.ts.map

package/types/getMDXBySlug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMDXBySlug.d.ts","sourceRoot":"","sources":["../src/getMDXBySlug.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAO1C,eAAO,MAAM,YAAY,aACb,MAAM,QACV,MAAM,KACX,OAAO,CAAC;IAAE,WAAW,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAoBpD,CAAA;AAED,wBAAsB,MAAM,CAAC,MAAM,EAAE,MAAM;;;;;;;;;;;GAe1C;AAED,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAOjE"}

package/types/highlightCode.d.ts

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

package/types/highlightCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightCode.d.ts","sourceRoot":"","sources":["../src/highlightCode.tsx"],"names":[],"mappings":"AAWA,wBAAgB,qBAAqB,aAFX,MAAM,YAAY,KAAK,GAAG,KAAK,GAAG,MAAM,SAAS,MAAM,KAAK,MAAM,CAiB3F"}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export { getAllFrontmatter } from './getAllFrontmatter';
+export { getMDXBySlug, getAllVersionsFromPath } from './getMDXBySlug';
+export type { Frontmatter } from './types';
+export { createCodeHighlighter } from './highlightCode';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACrE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA"}

package/types/rehypeHighlightCode.d.ts

@@ -0,0 +1,2 @@
+export declare const rehypeHighlightCode: (options?: {}) => (tree: any) => void;
+//# sourceMappingURL=rehypeHighlightCode.d.ts.map

package/types/rehypeHighlightCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rehypeHighlightCode.d.ts","sourceRoot":"","sources":["../src/rehypeHighlightCode.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,mBAAmB,uCAyB/B,CAAA"}

package/types/rehypeLine.d.ts

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

package/types/rehypeLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rehypeLine.d.ts","sourceRoot":"","sources":["../src/rehypeLine.tsx"],"names":[],"mappings":"AA2GA,wBAAgB,mBAAmB,CAAC,GAAG,KAAA,EAAE,KAAK,KAAA,OAI7C"}

package/types/rehypeMetaAttribute.d.ts

@@ -0,0 +1,3 @@
+declare const _default: (options?: {}) => (tree: any) => void;
+export default _default;
+//# sourceMappingURL=rehypeMetaAttribute.d.ts.map

package/types/rehypeMetaAttribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rehypeMetaAttribute.d.ts","sourceRoot":"","sources":["../src/rehypeMetaAttribute.tsx"],"names":[],"mappings":";AAMA,wBAeC"}

package/types/rehypeWord.d.ts

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

package/types/rehypeWord.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rehypeWord.d.ts","sourceRoot":"","sources":["../src/rehypeWord.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,6CAK/B,CAAA"}

package/types/types.d.ts

@@ -0,0 +1,30 @@
+export type Frontmatter = {
+    title: string;
+    headings?: {
+        title: string;
+        priority: number;
+        id: string;
+    }[];
+    description?: string;
+    name?: string;
+    versions?: string[];
+    version?: string;
+    by?: string;
+    publishedAt?: string;
+    draft?: boolean;
+    relatedIds?: string[];
+    type?: 'changelog' | string;
+    readingTime?: {
+        text: string;
+        minutes: number;
+        time: number;
+        words: number;
+    };
+    poster?: string;
+    slug: string;
+    image?: string;
+    component?: string;
+    package?: string;
+    demoName?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA"}