uabjs / uabpress Goto Github PK

const { program } = require('commander') //生成一个获取命令行输入内容的全局对象
program.version('1.0.0')                 //设置你的库当前版本
//下面就是通过 获取命令行输入内容 做一系列操作 运行对应执行文件等
...

const glob = require('glob')
//sourceDir 是docs文件夹路径
function getFolder(sourceDir) {
  return glob.sync(path.join(sourceDir, '/**/*.md'), { absolute: false })
        .filter(v => v.indexOf('node_modules') === -1 )
        .map(v => path.relative(sourceDir, v))
}
function createMiddleware (options) {
  return async (ctx, next) => {
    ctx.menu = getFolder(options.sourceDir) //获取文件名菜单 返回路径数组
    await next()
  }
}

async patch(filePaths) {
  const treeFlags = this.treekey()
  const newFiles = {}
  filePaths.forEach(filePath => {
    newFiles[this.formatFilePath(filePath)] = null
  })
  Object.keys(this.nodes)
    .filter(filePaths => filePaths.indexOf(treeFlags) === -1)
    .forEach(async (filePath) => {
      if (filePath in newFiles) {
        await this.updateFile(filePath)
        delete newFiles[filePath]
      } else {
        await this.removeFile(filePath)
      }
    })

  //剩下的 newFiles 则是新增的文件
  Object.keys(newFiles).forEach(async (filePath) => {
    await this.addFile(filePath)
  })
}

const Provider = require('./Provider')

module.exports = function () {
  const provider = new Provider()
  Array.from([
    require('./middleware/title'),       // 解析标题
    require('./middleware/prefix'),      // 标题层级
    require('./middleware/breadcrumb'),  // 计算面包屑
    require('./middleware/autoNumber'),  // 自动生成序号
    require('./middleware/marked'),      // markdown转html
    require('./middleware/themes')       // 添加样式
  ]).forEach(middleware => {
    provider.useMiddleware(middleware)
  })
  return provider
}

/**
 * root: TreeNode { path:'', children:[], parent: [TreeNode] },
 * nodes 内有两种形式： 标题集， 文件集
 * nodes: {
 *  '标题集/?': {
 *    path: 'level1B/levelB',
      children: [ [FileNode], ... ],
      parent: TreeNode { path: 'level1B', children: [Array], parent: [TreeNode] }
 *  }
 *  '标题集/文件集.md': FileNode {
      resolvePath: [Function],
      path: '文件集.md',
      isFileNode: true,
      parent: [TreeNode],
      body: '11111111111',
      lastModified: 1606828666908,
      title: '文件集.md',
      prefix: '',
      breadcrumb: [Object],
      catalogs: [],
      html: '<p>11111111111</p>\n'+ ...<h1~3>,
      themes: [Array],
      getTheme: [Function]
    },
    ...
   },
   middlewares: [],
   resolvePath: fn
 */

const Vue = require('vue')   //这是vue3
const compilerSsr = require('@vue/compiler-ssr') //将vue文件template模板编译成 render 方法
const compilerSfc = require('@vue/compiler-sfc') // 解析vue文件的内容
const serverRenderer = require('@vue/server-renderer') //将createApp的实例转换成html字符串

const createRender = sfcPath => {
  sfcPath = sfcPath ? sfcPath : path.resolve(__dirname, '../template/App.vue')
  const { descriptor } = compilerSfc.parse(fs.readFileSync(sfcPath, 'utf-8'))
  const render = compilerSsr.compile(descriptor.template.content).code
  return async (data) => {
    const app = Vue.createApp({
      ssrRender: new Function('require', render)(require),
      data: () => data
    })
    return serverRenderer.renderToString(app)  //将编译好的html字符串传入ctx.body相应出去
  }
}

const renderMarkdown = async ({ reqFile, template, provider, options }) => {
  const skin = options.theme || '默认皮肤'
  // 获取 menu 菜单数据及其页面数据
  const data = {
    menu: provider.toArray(fileNode => ({
      path: fileNode.path,
      name: fileNode.title,
      prefix: fileNode.prefix || ''
    })),
    skinPath: '',
    breadcrumb: null,
    catalogs: [],
    markdown: ''
  }

  //解析该路径页面的 data 数据
  await provider.getItem(reqFile, fileNode => {
    if (!fileNode) {
      data.markdown = `<h3>${reqFile} 不存在<h3>`
    } else {
      // console.log("fileNode----", fileNode);
      data.breadcrumb = fileNode.breadcrumb.html
      data.catalogs = fileNode.catalogs
      data.skinPath = fileNode.getTheme(skin).path
      data.markdown = [
        fileNode.html
      ].join('')
    }
  })
  return await createRender(template)(data)
}

const watch = require('watch')
const io = require('socket.io')

//options.sourceDir就是docs文件夹路径，目的：监听该路径内的文件修改时间如果改变则触发页面刷新
watch.watchTree(options.sourceDir, changePath => {
  progress.init() //刷新的进度条 初始化
  progress.step() //刷新的进度条 加载动画
  socket.emit('reload', changePath) //docs 改变重新加载
})

app.use(async (ctx, next) => {
  await next() //当所有中间件都执行完成后给最后生成的body添加socket监听
  if (ctx.type === 'text/html') {
    ctx.body = `
    <!DOCTYPE html>
    <html>
      <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
      <script>
        var socket = io()
        socket.on("reload", function(changePath) {
            window.location.reload()
        })
      </script>
      ${ctx.body}
    </html>
    `
  }
})

const open = require("open") //这个库传入url默认打开浏览器
open(`http://localhost:${port}`)

// 2. 解析到指令为 build 则执行下面操作
program
  .command('build')
  .description('编译页面文件(生成html)')
  .option('-t, --theme [theme]', 'Markdown样式，可选 default、techo')
  .option('-o, --output [output]', '输出目录')
  .action(async (options) => {
    console.log('')
    // 打包生成静态html页面
    await build({
      theme: options.theme || 'default', //打包后的html样式
      root: path.resolve(options.args.length > 0 ? options.args[0] : '.'), //打包路径
      output: path.resolve(options.output || 'dist') //默认输出到dist文件夹
    })
    process.exit()
  })

// 1. 将命令传递给 program 解析
program.parse(process.argv) // process.argv是命令行输入的命令