vuepress-playground/src/detail.js

vuepress demo box

/* eslint-disable no-eval */
/* eslint-disable no-mixed-operators */
import { getHtmlTpl, getJsTpl } from './tpl'
import getSettings from './settings'

export function getDetail (codeSection) {
  const codeDetail = codeSection.dataset.code
    .replace(/##double-quotes##/g, '"')
    .replace(/##line-break##/g, '\n')
  const cssBlock = codeDetail.match(/<style>([\s\S]+)<\/style>/)
  const htmlBlock = codeDetail.match(/<template>([\s\S]+)<\/template>/)
  const jsBlock = codeDetail.match(/<script>([\s\S]+)<\/script>/)
  const jsLibBlock = codeDetail.match(/<js-lib>([\s\S]+)<\/js-lib>/)
  const cssLibBlock = codeDetail.match(/<css-lib>([\s\S]+)<\/css-lib>/)
  const result = {
    css: cssBlock && cssBlock[1].replace(/^\n|\n$/g, ''),
    html: htmlBlock && htmlBlock[1].replace(/^\n|\n$/g, ''),
    js: jsBlock && jsBlock[1].replace(/^\n|\n$/g, ''),
    jsLib: jsLibBlock && jsLibBlock[1].trim().split(/\n/) || [],
    cssLib: cssLibBlock && cssLibBlock[1].trim().split(/\n/) || []
  }
  result.htmlTpl = getHtmlTpl(result.html)
  result.jsTpl = getJsTpl(result.js)
  const vueResource = getSettings('vue')
  result.jsLib.push(vueResource)
  return result
}

export function getScriptObj ({ js, html }) {
  const scripts = js.split('export default')
  const scriptStrOrg = `(function() {${scripts[0]} ; return ${scripts[1]}})()`
  const scriptStr = window.Babel
    ? window.Babel.transform(scriptStrOrg, { presets: ['es2015'] }).code
    : scriptStrOrg
  const scriptObj = eval(scriptStr)
  scriptObj.template = html
  return scriptObj
}