added explosion of md includes

Author: ycmjason

lib/prepare.js

@@ -6,6 +6,7 @@ const tomlParser = require('toml')
 const createMarkdown = require('./markdown')
 const tempPath = path.resolve(__dirname, 'app/.temp')
 const { inferTitle, extractHeaders, parseFrontmatter } = require('./util')
+const { mdExplodeIncludes } = require('./webpack/util')
 
 fs.ensureDirSync(tempPath)
 
@@ -188,7 +189,10 @@ async function resolveOptions (sourceDir) {
     }
 
     // extract yaml frontmatter
-    const content = await fs.readFile(path.resolve(sourceDir, file), 'utf-8')
+    const { explodedSrc: content } = mdExplodeIncludes({
+      cwd: path.dirname(path.resolve(sourceDir, file)),
+      src: await fs.readFile(path.resolve(sourceDir, file), 'utf-8')
+    })
     const frontmatter = parseFrontmatter(content)
     // infer title
     const title = inferTitle(frontmatter)

lib/webpack/markdownLoader.js

@@ -5,26 +5,32 @@ const { EventEmitter } = require('events')
 const { getOptions } = require('loader-utils')
 const { inferTitle, extractHeaders, parseFrontmatter } = require('../util')
 const LRU = require('lru-cache')
+const { mdExplodeIncludes } = require('./util')
 
 const cache = LRU({ max: 1000 })
 const devCache = LRU({ max: 1000 })
 
 module.exports = function (src) {
+  const file = this.resourcePath
+  const cwd = path.dirname(file)
+
+  const { explodedSrc, dependencies } = mdExplodeIncludes({ cwd, src })
+  dependencies.forEach(d => this.addDependency(d))
+
   const isProd = process.env.NODE_ENV === 'production'
   const isServer = this.target === 'node'
   const { markdown, sourceDir } = getOptions(this)
 
   // 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
   // selecting the individual blocks.
-  const file = this.resourcePath
-  const key = hash(file + src)
+  const key = hash(file + explodedSrc)
   const cached = cache.get(key)
   if (cached && (isProd || /\?vue/.test(this.resourceQuery))) {
     return cached
   }
 
-  const frontmatter = parseFrontmatter(src)
+  const frontmatter = parseFrontmatter(explodedSrc)
   const content = frontmatter.content
 
   if (!isProd && !isServer) {
@@ -66,9 +72,8 @@ module.exports = function (src) {
     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
+    const file = path.resolve(cwd, filename)
+    const altfile = altname !== filename ? path.resolve(cwd, altname) : null
     if (!fs.existsSync(file) && (altfile && !fs.existsSync(altfile))) {
       this.emitWarning(
         new Error(

lib/webpack/util.js

@@ -0,0 +1,27 @@
+const { readFileSync } = require('fs')
+const { resolve, dirname } = require('path')
+
+const mdExplodeIncludes = exports.mdExplodeIncludes = ({ cwd, src }) => {
+  const deps = []
+
+  return {
+    explodedSrc: src.replace(/<!-- *include +(.*?) *-->/g, (match, path) => {
+      try {
+        const absolutePath = resolve(cwd, path)
+        const content = readFileSync(absolutePath, 'utf8')
+
+        // recursively explode the included file
+        const { explodedSrc, dependencies } = mdExplodeIncludes({
+          cwd: dirname(absolutePath),
+          src: content
+        })
+
+        deps.push(absolutePath, ...dependencies)
+        return explodedSrc
+      } catch (e) {
+        return match
+      }
+    }),
+    dependencies: deps
+  }
+}