cooking.demo.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. var cooking = require('cooking');
  2. var config = require('./config');
  3. var md = require('markdown-it')();
  4. var striptags = require('./strip-tags');
  5. function convert(str) {
  6. str = str.replace(/(&#x)(\w{4});/gi, function($0) {
  7. return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
  8. });
  9. return str;
  10. }
  11. cooking.set({
  12. entry: './examples/entry.js',
  13. dist: './examples/element-ui/',
  14. template: './examples/index.tpl',
  15. publicPath: process.env.CI_ENV || '/',
  16. hash: true,
  17. devServer: {
  18. port: 8085,
  19. log: false,
  20. publicPath: '/'
  21. },
  22. minimize: true,
  23. chunk: true,
  24. extractCSS: true,
  25. sourceMap: true,
  26. alias: config.alias,
  27. extends: ['vue2', 'lint'],
  28. postcss: config.postcss
  29. });
  30. cooking.add('loader.md', {
  31. test: /\.md$/,
  32. loader: 'vue-markdown-loader'
  33. });
  34. cooking.add('vueMarkdown', {
  35. use: [
  36. [require('markdown-it-container'), 'demo', {
  37. validate: function(params) {
  38. return params.trim().match(/^demo\s*(.*)$/);
  39. },
  40. render: function(tokens, idx) {
  41. var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
  42. if (tokens[idx].nesting === 1) {
  43. var description = (m && m.length > 1) ? m[1] : '';
  44. var content = tokens[idx + 1].content;
  45. var html = convert(striptags.strip(content, 'script'));
  46. var script = striptags.fetch(content, 'script');
  47. var jsfiddle = { html: html, script: script };
  48. var descriptionHTML = description
  49. ? '<div class="description">' + md.render(description) + '</div>'
  50. : '';
  51. jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
  52. return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
  53. <div class="source">${html}</div>
  54. <div class="meta">
  55. ${descriptionHTML}
  56. <div class="highlight">`;
  57. }
  58. return '</div></div></demo-block>\n';
  59. }
  60. }]
  61. ],
  62. preprocess: function(MarkdownIt, source) {
  63. MarkdownIt.renderer.rules.table_open = function() {
  64. return '<table class="table">';
  65. };
  66. MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
  67. return source;
  68. }
  69. });
  70. var wrap = function(render) {
  71. return function() {
  72. return render.apply(this, arguments)
  73. .replace('<code class="', '<code class="hljs ')
  74. .replace('<code>', '<code class="hljs">');
  75. };
  76. };
  77. if (process.env.NODE_ENV === 'production') {
  78. cooking.add('externals.vue', 'Vue');
  79. cooking.add('externals.vue-router', 'VueRouter');
  80. }
  81. cooking.add('vue.preserveWhitespace', false);
  82. module.exports = cooking.resolve();