refactor($core): separate markdown and markdown-loader from core

Author: ulivz

packages/@vuepress/core/lib/dev.js

@@ -17,7 +17,7 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
   const DevLogPlugin = require('./webpack/DevLogPlugin')
   const createClientConfig = require('./webpack/createClientConfig')
   const { applyUserWebpackConfig } = require('./util/index')
-  const { frontmatterEmitter } = require('./webpack/markdownLoader')
+  const { frontmatterEmitter } = require('@vuepress/markdown-loader')
 
   logger.wait('\nExtracting site metadata...')
   const options = await prepare(sourceDir, cliOptions, false /* isProd */)

packages/@vuepress/core/lib/prepare/AppContext.js

@@ -5,7 +5,7 @@
  */
 
 const path = require('path')
-const createMarkdown = require('../markdown/index')
+const createMarkdown = require('./createMarkdown')
 const loadConfig = require('./loadConfig')
 const loadTheme = require('./loadTheme')
 const { fs, logger, chalk, globby, sort, datatypes: { isFunction }} = require('@vuepress/shared-utils')
@@ -69,7 +69,7 @@ module.exports = class AppContext {
     this.resolveTemplates()
     await this.resolveTheme()
     this.resolvePlugins()
-    this.markdown = createMarkdown(this.siteConfig.markdown, this.pluginAPI)
+    this.markdown = createMarkdown(this)
 
     await this.resolvePages()
     await Promise.all(
@@ -79,7 +79,6 @@ module.exports = class AppContext {
     )
 
     await this.pluginAPI.options.ready.apply()
-    this.pluginAPI.options.extendMarkdown.syncApply(this.markdown)
     await this.pluginAPI.options.clientDynamicModules.apply(this)
     await this.pluginAPI.options.globalUIComponents.apply(this)
     await this.pluginAPI.options.enhanceAppFiles.apply(this)

packages/@vuepress/core/lib/prepare/Page.js

@@ -5,9 +5,9 @@
  */
 
 const path = require('path')
-const slugify = require('../markdown/slugify')
-const { inferTitle, inferDate, extractHeaders, DATE_RE } = require('../util/index')
-const { fs, fileToPath, parseFrontmatter, getPermalink } = require('@vuepress/shared-utils')
+const slugify = require('../../../markdown/lib/slugify')
+const { inferDate, DATE_RE } = require('../util/index')
+const { extractHeaders, fs, fileToPath, parseFrontmatter, getPermalink, inferTitle } = require('@vuepress/shared-utils')
 
 /**
  * Expose Page class.

packages/@vuepress/core/lib/prepare/createMarkdown.js

@@ -0,0 +1,33 @@
+'use strict'
+
+/**
+ * Module dependencies.
+ */
+
+const createMarkdown = require('@vuepress/markdown')
+
+/**
+ * Expose createMarkdown.
+ */
+
+module.exports = function (ctx) {
+  const { markdown: markdownConfig = {}} = ctx.siteConfig
+  const { chainMarkdown, extendMarkdown } = markdownConfig
+
+  const beforeInstantiate = config => {
+    chainMarkdown && chainMarkdown(config)
+    ctx.pluginAPI.options.chainMarkdown.syncApply(config)
+  }
+
+  const afterInstantiate = md => {
+    extendMarkdown && extendMarkdown(md)
+    ctx.pluginAPI.options.extendMarkdown.syncApply(md)
+  }
+
+  return createMarkdown(
+    Object.assign(markdownConfig, {
+      beforeInstantiate,
+      afterInstantiate
+    })
+  )
+}

packages/@vuepress/core/lib/util/index.js

@@ -1,11 +1,5 @@
 'use strict'
 
-/**
- * Module dependencies.
- */
-
-const { deeplyParseHeaders } = require('@vuepress/shared-utils')
-
 /**
  * Normalize head tag config.
  *
@@ -49,65 +43,6 @@ exports.applyUserWebpackConfig = function (userConfig, config, isServer) {
   return config
 }
 
-/**
- * Infer a page's title via frontmatter and content.
- *
- * @param frontmatter
- * @param strippedContent
- * @returns {*}
- */
-
-exports.inferTitle = function (frontmatter, strippedContent) {
-  if (frontmatter.home) {
-    return 'Home'
-  }
-  if (frontmatter.title) {
-    return deeplyParseHeaders(frontmatter.title)
-  }
-  const match = strippedContent.trim().match(/^#+\s+(.*)/)
-  if (match) {
-    return deeplyParseHeaders(match[1])
-  }
-}
-
-/**
- * Extract heeaders from markdown source content.
- *
- * @param {string} content
- * @param {array} include
- * @param {object} md
- * @returns {array}
- */
-
-const LRU = require('lru-cache')
-const cache = LRU({ max: 1000 })
-
-exports.extractHeaders = function (content, include = [], md) {
-  const key = content + include.join(',')
-  const hit = cache.get(key)
-  if (hit) {
-    return hit
-  }
-
-  const tokens = md.parse(content, {})
-
-  const res = []
-  tokens.forEach((t, i) => {
-    if (t.type === 'heading_open' && include.includes(t.tag)) {
-      const title = tokens[i + 1].content
-      const slug = t.attrs.find(([name]) => name === 'id')[1]
-      res.push({
-        level: parseInt(t.tag.slice(1), 10),
-        title: deeplyParseHeaders(title),
-        slug: slug || md.slugify(title)
-      })
-    }
-  })
-
-  cache.set(key, res)
-  return res
-}
-
 /**
  * Infer date.
  *

packages/@vuepress/core/lib/webpack/createBaseConfig.js

@@ -136,7 +136,7 @@ module.exports = function createBaseConfig ({
 
   mdRule
     .use('markdown-loader')
-      .loader(require.resolve('./markdownLoader'))
+      .loader(require.resolve('@vuepress/markdown-loader'))
       .options({ sourceDir, markdown })
 
   config.module

packages/@vuepress/core/package.json

@@ -21,6 +21,8 @@
   "dependencies": {
     "@babel/core": "7.0.0-beta.47",
     "@vue/babel-preset-app": "3.0.0-beta.11",
+    "@vuepress/markdown": "^1.0.0",
+    "@vuepress/markdown-loader": "^1.0.0",
     "@vuepress/shared-utils": "^1.0.0",
     "@vuepress/plugin-last-updated": "^1.0.0",
     "@vuepress/plugin-register-components": "^1.0.0",
@@ -33,8 +35,6 @@
     "copy-webpack-plugin": "^4.5.1",
     "cross-spawn": "^6.0.5",
     "css-loader": "^0.28.11",
-    "diacritics": "^1.3.0",
-    "escape-html": "^1.0.3",
     "file-loader": "^1.1.11",
     "globby": "^8.0.1",
     "gray-matter": "^4.0.1",
@@ -43,18 +43,11 @@
     "koa-mount": "^3.0.0",
     "koa-range": "^0.3.0",
     "koa-static": "^4.0.2",
-    "loader-utils": "^1.1.0",
     "lru-cache": "^4.1.2",
-    "markdown-it": "^8.4.1",
-    "markdown-it-anchor": "^5.0.2",
-    "markdown-it-container": "^2.0.0",
-    "markdown-it-emoji": "^1.4.0",
-    "markdown-it-table-of-contents": "^0.4.0",
     "mini-css-extract-plugin": "^0.4.1",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "portfinder": "^1.0.13",
     "postcss-loader": "^2.1.5",
-    "prismjs": "^1.13.0",
     "toml": "^2.3.3",
     "url-loader": "^1.0.1",
     "vue": "^2.5.16",
@@ -67,8 +60,7 @@
     "webpack-chain": "^4.6.0",
     "webpack-merge": "^4.1.2",
     "webpack-serve": "^1.0.2",
-    "webpackbar": "^2.6.1",
-    "markdown-it-chain": "^1.2.0"
+    "webpackbar": "^2.6.1"
   },
   "engines": {
     "node": ">=8"

packages/@vuepress/markdown-loader/.npmignore

@@ -0,0 +1,2 @@
+__tests__
+__mocks__

packages/@vuepress/markdown-loader/README.md

@@ -0,0 +1,24 @@
+# @vuepress/markdown-loader
+
+> markdown-loader for vuepress
+
+## Usage
+
+```js
+const rule = config.module
+    .rule('markdown')
+      .test(/\.md$/)
+
+rule
+  .use('vue-loader')
+    .loader('vue-loader')
+    .options({ /* ... */ })
+
+rule
+  .use('markdown-loader')
+    .loader(require.resolve('@vuepress/markdown-loader'))
+    .options({
+       markdown: /* instance created by @vuepress/markdown */,
+       sourceDir: /* root source directory of your docs */,
+    })
+```

packages/@vuepress/core/lib/webpack/markdownLoader.js renamed to packages/@vuepress/markdown-loader/index.js

@@ -4,14 +4,12 @@
  * Module dependencies.
  */
 
-const fs = require('fs')
 const path = require('path')
-const hash = require('hash-sum')
 const { EventEmitter } = require('events')
 const { getOptions } = require('loader-utils')
-const { inferTitle, extractHeaders } = require('../util/index')
-const { parseFrontmatter } = require('@vuepress/shared-utils')
+const { fs, hash, parseFrontmatter, inferTitle, extractHeaders } = require('@vuepress/shared-utils')
 const LRU = require('lru-cache')
+const md = require('@vuepress/markdown')
 
 const cache = LRU({ max: 1000 })
 const devCache = LRU({ max: 1000 })
@@ -23,7 +21,12 @@ const devCache = LRU({ max: 1000 })
 module.exports = function (src) {
   const isProd = process.env.NODE_ENV === 'production'
   const isServer = this.target === 'node'
-  const { markdown, sourceDir } = getOptions(this)
+  const options = getOptions(this)
+  const { sourceDir } = options
+  let { markdown } = options
+  if (!markdown) {
+    markdown = md()
+  }
 
   // we implement a manual cache here because this loader is chained before
   // vue-loader, and will be applied on the same file multiple times when
@@ -69,18 +72,23 @@ module.exports = function (src) {
   // check if relative links are valid
   links && links.forEach(link => {
     link = decodeURIComponent(link)
+
     const shortname = link
       .replace(/#.*$/, '')
       .replace(/\.html$/, '.md')
+
     const filename = shortname
       .replace(/\/$/, '/README.md')
       .replace(/^\//, sourceDir + '/')
+
     const altname = shortname
       .replace(/\/$/, '/index.md')
       .replace(/^\//, sourceDir + '/')
+
     const dir = path.dirname(this.resourcePath)
     const file = path.resolve(dir, filename)
     const altfile = altname !== filename ? path.resolve(dir, altname) : null
+
     if (!fs.existsSync(file) && (!altfile || !fs.existsSync(altfile))) {
       this.emitWarning(
         new Error(
@@ -95,7 +103,6 @@ module.exports = function (src) {
     `<template>\n` +
       `<div class="content">${html}</div>\n` +
     `</template>\n` +
-    `<script>export default { props: ['target'] }</script>` +
     (hoistedTags || []).join('\n')
   )
   cache.set(key, res)

packages/@vuepress/markdown-loader/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@vuepress/markdown-loader",
+  "version": "1.0.0",
+  "description": "markdown-loader for vuepress",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vuepress.git"
+  },
+  "keywords": [
+    "documentation",
+    "vue",
+    "vuepress",
+    "generator"
+  ],
+  "dependencies": {
+    "@vuepress/markdown": "1.0.0",
+    "loader-utils": "^1.1.0"
+  },
+  "author": "Evan You",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/vuepress/issues"
+  },
+  "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/markdown-loader#readme"
+}

packages/@vuepress/markdown/.npmignore

@@ -0,0 +1,2 @@
+__tests__
+__mocks__

packages/@vuepress/markdown/README.md

@@ -0,0 +1,3 @@
+# @vuepress/markdown
+
+> markdown for vuepress

packages/@vuepress/core/__test__/markdown/__snapshots__/containers.spec.js.snap renamed to packages/@vuepress/markdown/__tests__/__snapshots__/containers.spec.js.snap

@@ -1,5 +1,5 @@
 import { Md, getFragment } from './util'
-import containers from '../../lib/markdown/containers.js'
+import containers from '../lib/containers.js'
 
 const mdC = Md().use(containers)
 

packages/@vuepress/core/__test__/markdown/__snapshots__/highlight.spec.js.snap renamed to packages/@vuepress/markdown/__tests__/__snapshots__/highlight.spec.js.snap

@@ -1,5 +1,5 @@
 import { Md, getFragment } from './util'
-import highlight from '../../lib/markdown/highlight.js'
+import highlight from '../lib/highlight.js'
 
 const md = Md()
 const mdH = Md().set({ highlight })

packages/@vuepress/core/__test__/markdown/__snapshots__/highlightLines.spec.js.snap renamed to packages/@vuepress/markdown/__tests__/__snapshots__/highlightLines.spec.js.snap

@@ -1,5 +1,5 @@
 import { Md, getFragment } from './util'
-import highlightLines from '../../lib/markdown/highlightLines.js'
+import highlightLines from '../lib/highlightLines.js'
 
 const md = Md()
 const mdH = Md().use(highlightLines)

packages/@vuepress/core/__test__/markdown/__snapshots__/hoist.spec.js.snap renamed to packages/@vuepress/markdown/__tests__/__snapshots__/hoist.spec.js.snap

@@ -1,6 +1,6 @@
 import { Md, getFragment } from './util'
-import hoist from '../../lib/markdown/hoist.js'
-import { dataReturnable } from '../../lib/markdown/index.js'
+import hoist from '../lib/hoist.js'
+import { dataReturnable } from '../lib/index.js'
 
 const md = Md().set({ html: true })
 const mdH = Md().set({ html: true }).use(hoist)

packages/@vuepress/core/__test__/markdown/__snapshots__/lineNumers.spec.js.snap renamed to packages/@vuepress/markdown/__tests__/__snapshots__/lineNumers.spec.js.snap

@@ -1,7 +1,7 @@
 import { Md, getFragment } from './util'
-import preWrapper from '../../lib/markdown/preWrapper.js'
-import lineNumbers from '../../lib/markdown/lineNumbers.js'
-import highlightLines from '../../lib/markdown/highlightLines.js'
+import preWrapper from '../lib/preWrapper.js'
+import lineNumbers from '../lib/lineNumbers.js'
+import highlightLines from '../lib/highlightLines.js'
 
 // lineNumbers must be chained after preWrapper.
 // since lineNumbers needs to add extra stateful class to its block wrapper.

packages/@vuepress/core/__test__/markdown/__snapshots__/link.spec.js.snap renamed to packages/@vuepress/markdown/__tests__/__snapshots__/link.spec.js.snap

@@ -1,6 +1,6 @@
 import { Md } from './util'
-import link from '../../lib/markdown/link.js'
-import { dataReturnable } from '../../lib/markdown/index.js'
+import link from '../lib/link.js'
+import { dataReturnable } from '../lib/index.js'
 
 const mdL = Md().use(link, {
   target: '_blank',