mdToVue.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. const path = require('path');
  2. const fs = require('fs');
  3. const nodeFilelist = require('node-filelist');
  4. let { hashElement } = require('folder-hash');
  5. let { version } = require("../package.json");
  6. let marked = require('marked');
  7. let contrast = require('./contrast');
  8. let rimraf = require("rimraf");
  9. if (!marked) {
  10. console.log('you need npm i marked -D!');
  11. }
  12. class mdVue{
  13. constructor(options){
  14. let defaultSetting = {
  15. needCode:true,
  16. isbuild:true,
  17. hasMarkList:true
  18. };
  19. this.options =Object.assign(defaultSetting,options);
  20. this.rendererMd = new marked.Renderer();
  21. this.marked = marked;
  22. let _that = this;
  23. this.Articlehead = "";
  24. this.Articleheadcount = 0;
  25. this.needHandleFiles = null;
  26. this.cachePath = path.join("./cache",options.entry.split(path.sep).pop()+ '.cache');
  27. this.codeHandle();
  28. this.checkSelf().then(res=>{
  29. // 检查要编译的文件
  30. let ct = new contrast({
  31. entry:this.options.entry
  32. }).run().then(res=>{
  33. _that.needHandleFiles = res;
  34. _that.ishasOutFile(_that.options.output).then(res=>{
  35. _that.star();
  36. });
  37. })
  38. })
  39. }
  40. checkSelf(){
  41. let _that = this;
  42. return new Promise((resolve,reject)=>{
  43. new contrast({
  44. entry:path.join(__dirname,"mdToVue.js"),
  45. include:["*.js"]
  46. }).run().then(res=>{
  47. if(JSON.stringify(res) != "{}"){
  48. //有变动清除当前entry缓存,重新渲染
  49. rimraf(_that.cachePath,err=>{
  50. console.log(err)
  51. resolve()
  52. })
  53. }else{
  54. resolve()
  55. }
  56. })
  57. })
  58. }
  59. apply(){}
  60. star(){
  61. let _that = this;
  62. hashElement(_that.options.entry, {
  63. folders: { exclude: ['.*', 'node_modules', 'test_coverage'] },
  64. files: { include: ['*.md']},
  65. matchBasename: true
  66. }).then(hash => {
  67. nodeFilelist.read([_that.options.entry],{"ext":'md'}, res => {
  68. res.map((item,index) =>{
  69. if(index == 30){
  70. debugger
  71. }
  72. let fileSplits = item.path.split(path.sep);
  73. let fileName = fileSplits.pop();
  74. if(_that.isDoc(fileName)){
  75. fileName = fileSplits.pop();
  76. }else{
  77. fileName = fileName.replace(/\.md/,'');
  78. }
  79. if(_that.needHandleFiles[fileName]){
  80. // _that.read(item.path).then(res=>{
  81. // _that.headHandle();
  82. // _that.markHandle();
  83. // let html = _that.marked(res);
  84. // _that.write({
  85. // outsrc:_that.options.output,
  86. // name:fileName + '.vue',
  87. // html:html
  88. // });
  89. // })
  90. }
  91. _that.read(item.path).then(res=>{
  92. _that.headHandle();
  93. _that.markHandle();
  94. let html = _that.marked(res);
  95. _that.write({
  96. outsrc:_that.options.output,
  97. name:fileName + '.vue',
  98. html:html
  99. });
  100. })
  101. });
  102. });
  103. })
  104. }
  105. isDoc(name){
  106. return (name == "doc.md") ? true : false;
  107. }
  108. read(src){
  109. return new Promise((resolve,reject)=>{
  110. fs.readFile(src, 'utf-8', (err, data) => {
  111. resolve(data)
  112. })
  113. })
  114. }
  115. write(param){
  116. let _that = this;
  117. return new Promise((resolve,reject)=>{
  118. let outPath = path.join(param.outsrc,param.name);
  119. let contexts = `<template>
  120. <div @click="dsCode">
  121. <div v-if="content" class="layer">
  122. <pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
  123. </div>`+ param.html + (_that.options.hasMarkList ? '<ul class="markList">' + _that.Articlehead + '</ul>' : '')+
  124. `<nut-backtop :right="50" :bottom="50"></nut-backtop>
  125. </div>
  126. </template><script>import root from '../root.js';
  127. export default {
  128. mixins:[root]
  129. }</script>`;
  130. _that.Articlehead = "";
  131. _that.Articleheadcount = 0;
  132. fs.writeFile(outPath ,contexts,'utf8',(err,res)=>{ })
  133. })
  134. }
  135. ishasOutFile(outPath){
  136. return new Promise((resolve,reject)=>{
  137. fs.stat(outPath,(err,res)=>{
  138. if(err){
  139. fs.mkdir(outPath,err=>{
  140. if(err){
  141. reject(err)
  142. }else{
  143. resolve(true)
  144. }
  145. })
  146. }else{
  147. resolve(true)
  148. }
  149. })
  150. })
  151. }
  152. headHandle(){
  153. let _that = this;
  154. let options = _that.options;
  155. _that.rendererMd.heading = function (text,level){
  156. let headcode = '<i class="qrcode"><a :href="demourl"><span>请使用手机扫码体验</span><img :src="codeurl" alt=""></a></i>';
  157. let codeHead = `<h1>` + text +headcode+`</h1>`;
  158. let normal = `<h`+level+`>`+text+`</h`+level+`>`;
  159. let Articleheadcounts = null;
  160. if(level==2&&_that.options.hasMarkList){
  161. Articleheadcounts = _that.Articleheadcount;
  162. Articleheadcounts++;
  163. _that.Articleheadcount = Articleheadcounts;
  164. let headmsg = _that.Articlehead;
  165. headmsg +=`<li @click="leavelchose(`+Articleheadcounts+`)" :class="levalcur==`+Articleheadcounts+`?'cur':''" class="level`+Articleheadcounts+'"><a href="#head'+Articleheadcounts+'">'+text.substr(0,10)+'</a></li>';
  166. _that.Articlehead = headmsg;
  167. }
  168. let maskIdHead = "<h"+level+" class='visibility' id='head"+Articleheadcounts+"'>"+ text +"</h"+level+">";
  169. //判断条件
  170. if(_that.options.hasMarkList && _that.options.needCode){
  171. if(level == 1){
  172. return codeHead;
  173. }else if(level == 2){
  174. return maskIdHead;
  175. } else{
  176. return normal;
  177. }
  178. }else if(_that.options.hasMarkList && !_that.options.needCode){
  179. if(level !=1){
  180. return maskIdHead;
  181. } else{
  182. return normal;
  183. }
  184. }else if(!_that.options.hasMarkList && _that.options.needCode){
  185. if(level == 1){
  186. return codeHead;
  187. } else{
  188. return normal;
  189. }
  190. }else if(!_that.options.hasMarkList && !_that.options.needCode){
  191. return normal;
  192. }
  193. };
  194. }
  195. codeHandle(){
  196. this.rendererMd.code = function (code, infostring, escaped) {
  197. var lang = (infostring || '').match(/\S*/)[0];
  198. if (this.options.highlight) {
  199. var out = this.options.highlight(code, lang);
  200. if (out != null && out !== code) {
  201. escaped = true;
  202. code = out;
  203. }
  204. }
  205. if (!lang) {
  206. return '<pre><code>'
  207. + (escaped ? code : escape(code, true))
  208. + '</code></pre>';
  209. }
  210. if (lang === 'html') {
  211. code = code.replace(/@latest/g, '@' + version)
  212. }
  213. return '<hide><pre class="prettyprint"><span class="lang">' + lang + '</span><div class="code-wrapper"><code class="'
  214. + this.options.langPrefix
  215. + escape(lang, true)
  216. + '">'
  217. + (escaped ? code : escape(code, true))
  218. + '</code></div><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre></hide>\n';
  219. };
  220. }
  221. markHandle(){
  222. let _that = this;
  223. this.marked.setOptions({
  224. renderer: _that.rendererMd,
  225. highlight: function (code) {
  226. return require('highlight.js').highlightAuto(code).value;
  227. },
  228. tables: true
  229. });
  230. }
  231. };
  232. module.exports = mdVue;