chore: added happy-dom utility's and started line number highlighting

src/builders/code/code.ts

@@ -1,16 +1,16 @@
 import { PipelineStage } from '../../types'
 import { createBuilder } from '../createBuilder'
 import { fence } from './mdi'
-import type { CodeOptions } from './types/code-types'
+import type { CodeOptions, PrismOptions } from './types/code-types'
 import { Highlighter } from './types/code-types'
 
-const PRISM_DEFAULTS = {
+const PRISM_DEFAULTS: Partial<PrismOptions> = {
  engine: Highlighter.prism,
  plugins: [],
  init: () => {
  // do nothing by default
  },
- defaultLanguageForUnknown: undefined,
+ defaultLanguageForUnknown: 'bash',
  defaultLanguageForUnspecified: 'bash',
  defaultLanguage: undefined,
 }

src/builders/code/mdi/establishHighlighter.ts

@@ -4,11 +4,11 @@ import type {
  CodeOptions,
  HighlighterFunction,
  LineClassFn,
- PrismLanguage,
  PrismOptions,
  ShikiOptions,
 } from '../types'
-import { usesPrismHighlighting } from '../utils'
+import type { PrismLanguage } from '../utils'
+import { usesPrismHighlighting } from '../utils/highlighting'
 import { getPrismHighlighter } from './prism'
 import { getShikiHighlighter } from './shiki'
 

src/builders/code/mdi/fence.ts

@@ -1,155 +1,21 @@
 import { pipe } from 'fp-ts/lib/function'
 import type MarkdownIt from 'markdown-it'
-import type Token from 'markdown-it/lib/token'
 import type { Pipeline, PipelineStage } from '../../../types'
+import {
+ convertLinesToCodeBlock,
+ extractInfo,
+ highlightLines,
+ parseLines,
+ renderFence,
+ resolveLanguage,
+ showLineNumbers,
+ useHighlighter, userRules,
+} from '../pipeline'
 import type {
- CodeFenceMeta,
  CodeOptions,
- HighlighterFunction,
- LineClassFn,
- Modifier,
 } from '../types'
-import {
- isLineCallback,
- isValidLanguage,
- usesPrismHighlighting,
-} from '../utils'
-import { establishHighlighter } from './establishHighlighter'
-
-function typedValue(value: string) {
- return value.startsWith('"')
- ? value.endsWith('"') ? value.slice(1, -1) : value.slice(1)
- : value === 'true'
- ? true
- : value === 'false'
- ? false
- : !Number.isNaN(value) ? Number(value) : value
-}
-
-/**
- * Converts the Markdown-IT `Token` into a `CodeFenceMeta` data structure
- */
-function extractInfo(t: Token): CodeFenceMeta {
- const matches = t.info.trim().match(/((!|#|\*){0,2})(\w+)\s+({.*}){0,1}(.*)$/)
- let props: Record<string, any> = {}
- let modifiers: Modifier[] = []
- let lang = t.info
-
- if (matches) {
- const [, m, , l, obj, csv] = matches
- if (obj) {
- try {
- props = JSON.parse(obj)
- }
- catch {
- props = {}
- console.warn(`- a fenced code block appeared to have a configuration object but failed to be parsed. When using an object notation always ensure it is valid JSON or alternatively you can use the CSV name/value style of assignment: ${obj}`)
- }
- }
- else if (csv) {
- props = csv.split(',').reduce((acc, i) => {
- const [key, ...rest] = i.trim().split(/[:=]/)
- return { ...acc, [key.trim()]: typedValue(rest.join().trim()) }
- }, {})
- }
-
- if (m)
- modifiers = Array.from(m) as Modifier[]
-
- if (l)
- lang = l
- }
-
- return {
- data: t.content,
- tag: t.tag,
- lang,
- props,
- modifiers,
- markup: t.markup,
- }
-}
-
-/**
- * Looks for invalid and non-existant language settings and uses fallbacks
- * where available
- */
-const resolveLanguage = (o: CodeOptions) => (fence: CodeFenceMeta) => {
- if (fence.lang) {
- if (isValidLanguage(o.engine, fence)) {
- fence.lang = usesPrismHighlighting(o)
- ? o.defaultLanguageForUnknown || o.defaultLanguage || ''
- : fence.lang
- }
- }
-
- if (!fence.lang) {
- fence.lang = usesPrismHighlighting(o)
- ? o.defaultLanguageForUnspecified || o.defaultLanguage
- : fence.lang
- }
-
- return fence
-}
 
-/**
- * If configured to highlight lines (default is `true`) and line
- * annotation is found in code block then it will be
- */
-const highlightLines = (_o: CodeOptions) => (fence: CodeFenceMeta) => {
- return fence
-}
-
-/**
- * If configured for line numbers, the appropriate HTML will be added
- * to bring this in.
- */
-const showLineNumbers = (o: CodeOptions) => (fence: CodeFenceMeta) => {
- return o.lineNumbers
- ? {
- ...fence,
- props: {
- ...fence.props,
- class: [...(fence.props?.class || '').split(/\s+/), 'line-numbers-mode'].join(' '),
- },
- }
- : fence
-}
-
-const userRules = (when: 'before' | 'after', p: Pipeline<PipelineStage.parser>, o: CodeOptions) => (fence: CodeFenceMeta): CodeFenceMeta => {
- return o[when] ? o[when](fence, p, o) : fence
-}
-
-const klass = (o: CodeOptions, fence: CodeFenceMeta): LineClassFn => {
- const { lineClass } = o
- const { data, lang } = fence
- return lineClass
- ? isLineCallback(lineClass)
- ? (line: string) => ['line', lineClass(line, data, lang)].join(' ')
- : typeof lineClass === 'string'
- ? (_: string) => lineClass
- : (_: string) => ''
- : (_: string) => 'line'
-}
-
-/**
- * Use Prism or Shiki to modify the code block into stylized HTML
- */
-const useHighlighter = (h: HighlighterFunction, o: CodeOptions) => (fence: CodeFenceMeta): CodeFenceMeta => {
- return {
- ...fence,
- data: h(fence.data, fence.lang, klass(o, fence)),
- }
-}
-
-/**
- * Renders the HTML which results from the code block transform pipeline
- */
-const renderFence = (fence: CodeFenceMeta): string => {
- return `<pre class='${[`language-${fence.lang}`, fence.props.class?.trim()].filter(i => i).join(' ')}'${fence.props.style ? ` style='${fence.props.style}'` : ''}><code>
-${fence.data.trim()}
-</code></pre>`
-}
+import { establishHighlighter } from './establishHighlighter'
 
 /**
  * A higher-order function which receives payload and options for context up front
@@ -166,18 +32,20 @@ export const fence = async(payload: Pipeline<PipelineStage.parser>, options: Cod
  // fence mutation pipeline
  const fence = pipe(
  extractInfo(state[idx]),
-
  userRules('before', payload, options),
-
  resolveLanguage(options),
  useHighlighter(highlighter, options),
+ // the 'code' property is converted from a string to a DOM tree
+ parseLines,
  highlightLines(options),
  showLineNumbers(options),
-
  userRules('after', payload, options),
+ // the 'code' property is converted back to a string
+ convertLinesToCodeBlock,
+ renderFence,
  )
 
- return renderFence(fence)
+ return fence
  }
  }
 }

src/builders/code/mdi/index.ts

@@ -1,4 +1,3 @@
-export * from './highlighting'
 export * from './prism'
 export * from './shiki'
 export * from './fence'

src/builders/code/mdi/prism.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import type { Grammar } from 'prismjs'
 import { escapeHtml } from 'markdown-it/lib/common/utils'
-import type { LineClassFn, PrismLanguage, PrismOptions } from '../types'
+import type { LineClassFn, PrismOptions } from '../types'
+import type { PrismLanguage } from '../utils'
 
 function wrap(line: string, klass: LineClassFn) {
  return `<span class="${klass(line)}">${line}</span>`

src/builders/code/mdi/shiki.ts

@@ -50,9 +50,6 @@ export async function getShikiHighlighter(options: ShikiOptions) {
  )
  }
 
- // // ensure language is loaded
- // await shiki.loadLanguage(lang)
-
  return {
  highlight(code: string, lang: Lang, klass: LineClassFn): string {
  const modes = themes.map((t) => {

src/builders/code/pipeline/convertLinesToCodeBlock.ts

@@ -0,0 +1,22 @@
+import { pipe } from 'fp-ts/lib/function'
+import type { CodeBlockMeta } from '../types'
+import { getHtmlFromCodeLines, getHtmlFromNode, wrapCodeBlock } from '../utils'
+
+/**
+ * Converts the lines of DOM elements back to a singular HTML string which
+ * represents the `code` block
+ */
+export function convertLinesToCodeBlock(fence: CodeBlockMeta<'lines'>): CodeBlockMeta<'complete'> {
+ const code = fence.wrapLines
+ ? pipe(
+ fence.lines,
+ wrapCodeBlock(fence.wrapLines),
+ getHtmlFromNode,
+ )
+ : getHtmlFromCodeLines(fence.lines)
+
+ return {
+ ...fence,
+ code,
+ }
+}