文档改版 (#55)

build/genExamples.js

@@ -1,114 +1,18 @@
-var markdownIt = require('markdown-it');
-var markdownItContainer = require('markdown-it-container');
-var fs = require('fs');
-var path = require('path');
-var cheerio = require('cheerio');
-var chalk = require('chalk');
-var decamelize = require('decamelize');
-var striptags = require('./strip-tags');
-var navs = require('../docs/src/nav.config.js');
-navs = navs['zh-CN'];
+const path = require('path');
+const docConfig = require('../docs/src/doc.config');
+const { extractExample } = require('zan-doc/src/helper');
 
-var parser = markdownIt('default', {
-  html: true
-});
-
-var renderVueTemplate = function(html, componentTitle) {
-  var $ = cheerio.load(html, {
-    decodeEntities: false,
-    lowerCaseAttributeNames: false,
-    lowerCaseTags: false
+function extract(watch = false) {
+  extractExample({
+    src: path.resolve(__dirname, '../docs/examples-docs'),
+    dist: path.resolve(__dirname, '../docs/examples-dist'),
+    nav: docConfig['zh-CN'].nav,
+    watch
   });
+}
 
-  var output = {
-    style: $.html('style'),
-    script: $.html('script'),
-    'example-block': $.html('example-block')
-  };
-  var result;
+extract();
 
-  $('style').remove();
-  $('script').remove();
-
-  var script = '';
-  if (output.script) {
-    script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);');
-  } else {
-    script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
-  }
-
-  var componentName = componentTitle.split(' ')[0];
-  componentName = decamelize(componentName, '-');
-  result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentTitle}</h1>` + output['example-block'] + '</section></template>\n' +
-    output.style + '\n' +
-    script;
-
-  return result;
+module.exports = function watch() {
+  extract(true);
 };
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-parser.use(markdownItContainer, 'demo', {
-  validate: function(params) {
-    return params.trim().match(/^demo\s*(.*)$/);
-  },
-
-  render: function(tokens, idx) {
-    var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-    if (tokens[idx].nesting === 1) {
-      var description = (m && m.length > 1) ? m[1] : '';
-      var content = tokens[idx + 1].content;
-      var html = convert(striptags.strip(content, ['script', 'style']));
-
-      return `<example-block title="${description}">
-                ${html}
-              </example-block>\n`;
-    }
-    return '';
-  }
-});
-
-var docsDir = path.resolve(__dirname, '../docs');
-var components = [];
-for (var i = 0; i < navs.length; i++) {
-  var navItem = navs[i];
-
-  if (!navItem.showInMobile) continue;
-
-  if (!navItem.groups) {
-    components.push(navs[i]);
-  } else {
-    for (var j = 0; j < navItem.groups.length; j++) {
-      components = components.concat(navItem.groups[j].list);
-    }
-  }
-}
-for (var i = 0; i < components.length; i++) {
-  var item = components[i];
-  var itemMdFile = `${docsDir}/examples-docs${item.path}.md`;
-  if (!fs.existsSync(itemMdFile)) {
-    continue;
-  }
-
-  var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
-  var content = parser.render(itemMd);
-  var result = renderVueTemplate(content, item.title);
-
-  var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
-
-  // 新建一个文件
-  if (!fs.existsSync(exampleVueName)) {
-    fs.closeSync(fs.openSync(exampleVueName, 'w'));
-  }
-  fs.writeFileSync(exampleVueName, result, {
-    encoding: 'utf8'
-  });
-}
-
-console.log(chalk.green('generate examples success!'));
-

build/webpack.config.dev.js

@@ -8,6 +8,12 @@ var ProgressBarPlugin = require('progress-bar-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const isProduction = process.env.NODE_ENV === 'production';
+const watchExample = require('./genExamples');
+
+if (!isProduction) {
+  watchExample();  
+}
 
 var StyleExtractPlugin;
 if (process.env.NODE_ENV === 'production') {
@@ -32,7 +38,7 @@ function wrap(render) {
 
 module.exports = {
   entry: {
-    'vendor': ['vue', 'vue-router'],
+    'vendor': ['vue', 'vue-router', 'zan-doc'],
     'vant-docs': './docs/src/index.js',
     'vant-examples': './docs/src/examples.js'
   },
@@ -118,37 +124,23 @@ module.exports = {
         },
         vueMarkdown: {
           use: [
-            [require('markdown-it-anchor'), {
-              level: 2,
-              slugify: slugify,
-              permalink: true,
-              permalinkBefore: true
-            }],
             [require('markdown-it-container'), 'demo', {
               validate: function(params) {
                 return params.trim().match(/^demo\s*(.*)$/);
               },
 
               render: function(tokens, idx) {
-                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
                 if (tokens[idx].nesting === 1) {
-                  var description = (m && m.length > 1) ? m[1] : '';
-                  var content = tokens[idx + 1].content;
-                  var html = convert(striptags.strip(content, ['script', 'style']));
-
-                  return `<demo-block class="demo-box" description="${description}">
-                            <div class="examples" slot="examples">${html}</div>
-                            <div class="highlight" slot="highlight">`;
+                  return `<demo-block class="demo-box"><div class="highlight" slot="highlight">`;
                 }
-                return '</div></demo-block>\n';
+                return `</div></demo-block>\n`;
               }
             }]
           ],
           preprocess: function(MarkdownIt, source) {
             MarkdownIt.renderer.rules.table_open = function() {
-              return '<table class="table">';
+              return '<table class="zan-doc-table">';
             };
-            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
             return source;
           }
         }