refactor: extract plugin code

re #20

.vscode/settings.json

@@ -1,7 +1,15 @@
 {
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "eslint.validate": [
     "typescript",
     "typescriptreact"
+  ],
+  "cSpell.words": [
+    "mdast",
+    "rehype",
+    "unist"
   ]
 }

src/constant.ts

@@ -0,0 +1,4 @@
+import { RehypePrismPlugin } from './interface/rehype-prism-plugin'
+
+
+export const internalPlugins: RehypePrismPlugin[] = ['line-numbers']

src/index.ts

@@ -3,14 +3,16 @@ import unifiedTypes from 'unified'
 import { Element } from 'hast'
 import { visit } from 'unist-util-visit'
 import { Test } from 'unist-util-is'
+import { RehypePrismOptions } from './interface/rehype-prism-options.js'
 import { preElementSelector } from './pre-element-selector.js'
-import { RehypePrismOptions } from './rehype-prism-options.js'
 import { parseCodeVisitor } from './parse-code-vistor.js'
+import { internalPlugins } from './constant.js'
 
 
 const rehypePrism: unifiedTypes.Plugin<[RehypePrismOptions?], Element> = (options?: RehypePrismOptions) => {
   if (options && options.plugins) {
-    const plugins = options.plugins.filter(plugin => plugin !== 'line-numbers')
+    const plugins = options.plugins
+      .filter(plugin => !internalPlugins.includes(plugin))
 
     for (const plugin of plugins) {
       import(`prismjs/plugins/${plugin}/prism-${plugin}.js`)

src/interface/plugin-options.ts

@@ -0,0 +1,10 @@
+import { Element } from 'hast'
+
+
+export interface PluginOptions {
+  preElement: Element
+  codeElement: Element
+
+  raw: string
+  lang: string
+}

src/interface/plugin.ts

@@ -0,0 +1,3 @@
+import { PluginOptions } from './plugin-options'
+
+export type Plugin = (options: PluginOptions) => void

src/interface/rehype-prism-options.ts

@@ -0,0 +1,6 @@
+import { RehypePrismPlugin } from './rehype-prism-plugin'
+
+
+export interface RehypePrismOptions {
+  plugins?: RehypePrismPlugin[]
+}

src/rehype-prism-options.ts → src/interface/rehype-prism-plugin.ts

@@ -8,7 +8,3 @@ export type RehypePrismPlugin = (
   'show-invisibles' | 'show-language' | 'toolbar' | 'treeview' |
   'unescaped-markup' | 'wpd'
 )
-
-export interface RehypePrismOptions {
-  plugins?: RehypePrismPlugin[]
-}

src/parse-code-vistor.ts

@@ -1,57 +1,50 @@
 import Prism from 'prismjs'
 import rehypeParse from 'rehype-parse'
 import { Element, Parent, ElementContent } from 'hast'
-import { Text } from 'mdast'
 import { Visitor } from 'unist-util-visit/complex-types'
 import { unified } from 'unified'
-import { h } from 'hastscript'
 import { select } from 'unist-util-select'
-import { getLang } from './get-lang.js'
-import { Checker } from './checker.js'
-import { appendClassName } from './append-class-name.js'
-import { getLineNumber } from './get-line-number.js'
-import { RehypePrismOptions } from './rehype-prism-options.js'
+import { getLang } from './utils/get-lang.js'
+import { appendClassName } from './utils/append-class-name.js'
+import { RehypePrismOptions } from './interface/rehype-prism-options.js'
+
+import { isElementNode } from './utils/is-element-node.js'
+import { isTextNode } from './utils/is-text-node.js'
+import { applyPlugin } from './plugins/apply-plugin.js'
 
 
 const parser = unified()
   .use(rehypeParse, { fragment: true })
 
 export function parseCodeVisitor(options?: RehypePrismOptions): Visitor<ElementContent, Parent> {
   return node => {
-    if (!Checker.isElement(node) || node.tagName !== 'pre') return
-    const preNode = node
+    if (!isElementNode(node) || node.tagName !== 'pre') return
+    const preElement = node
 
-    const codeNode = select('[tagName=code]', preNode)
-    if (!Checker.isElement(codeNode)) return
+    const codeElement = select('[tagName=code]', preElement)
+    if (!isElementNode(codeElement)) return
 
-    const lang = getLang(codeNode)
+    const lang = getLang(codeElement)
     if (!lang || !Prism.languages[lang]) return
 
-    const textNode = select('text', codeNode) as (Text | null)
-    if (!Checker.isText(textNode)) return
-
-    const codeText = textNode.value
+    const textNode = select('text', codeElement)
+    if (!isTextNode(textNode)) return
+    const raw = textNode.value
 
-    const html = Prism.highlight(codeText, Prism.languages[lang], lang)
+    const html = Prism.highlight(raw, Prism.languages[lang], lang)
     const tree = parser.parse(html) as unknown as Element
 
-    appendClassName(preNode, `language-${lang}`)
-
-    codeNode.children = [...tree.children]
+    appendClassName(preElement, `language-${lang}`)
 
-    if (options?.plugins?.includes('line-numbers')) {
-      appendClassName(preNode, 'line-numbers')
+    codeElement.children = [...tree.children]
 
-      const lineNumber = getLineNumber(codeText)
-      const lineNumberColumn = h(
-        'span',
-        {
-          'aria-hidden': 'true',
-          className: ['line-numbers-rows'],
-        },
-        new Array(lineNumber).fill(h('span')),
-      )
-      codeNode.children.push(lineNumberColumn)
+    if (options?.plugins) {
+      applyPlugin(options.plugins, {
+        preElement,
+        codeElement,
+        raw,
+        lang,
+      })
     }
   }
 }

src/plugins/apply-plugin.ts

@@ -0,0 +1,10 @@
+import { PluginOptions } from '@/interface/plugin-options'
+import { RehypePrismPlugin } from '@/interface/rehype-prism-plugin'
+import { applyLineNumberPlugin } from './line-numbers.js'
+
+
+export function applyPlugin(plugins: RehypePrismPlugin[], options: PluginOptions): void {
+  for (const plugin of plugins) {
+    if (plugin === 'line-numbers') applyLineNumberPlugin(options)
+  }
+}

src/plugins/line-numbers.ts

@@ -0,0 +1,26 @@
+import { h } from 'hastscript'
+import { appendClassName } from '@/utils/append-class-name.js'
+import { Plugin } from '@/interface/plugin.js'
+
+
+function getLineNumber(str: string): number {
+  const match = str.match(/\n(?!$)/g)
+  return match ? match.length + 1 : 1
+}
+
+export const applyLineNumberPlugin: Plugin = options => {
+  const { preElement, codeElement, raw } = options
+
+  appendClassName(preElement, 'line-numbers')
+
+  const lineNumber = getLineNumber(raw)
+  const lineNumberColumn = h(
+    'span',
+    {
+      'aria-hidden': 'true',
+      className: ['line-numbers-rows'],
+    },
+    new Array(lineNumber).fill(h('span')),
+  )
+  codeElement.children.push(lineNumberColumn)
+}

src/pre-element-selector.ts

@@ -1,7 +1,7 @@
 import { Test } from 'unist-util-is'
-import { Checker } from './checker.js'
+import { isElementNode } from './utils/is-element-node.js'
 
 
 export function preElementSelector(): Test {
-  return node => Checker.isElement(node) && node.tagName === 'pre'
+  return node => isElementNode(node) && node.tagName === 'pre'
 }

src/utils/is-element-node.ts

@@ -0,0 +1,7 @@
+import { Node } from 'unist'
+import { Element } from 'hast'
+
+
+export function isElementNode(node?: Node | null): node is Element {
+  return !!node && node.type === 'element' && 'tagName' in node
+}

src/utils/is-text-node.ts

@@ -0,0 +1,7 @@
+import { Node } from 'unist'
+import { Text } from 'mdast'
+
+
+export function isTextNode(node: Node | null): node is Text {
+  return !!node && node.type === 'text'
+}