upd: discard webpack loader

loader/md-vue/config.js

@@ -1,41 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/*markdown-it的配置文件*/
-const Config = require('markdown-it-chain'); //链式配置
-const anchorPlugin = require('markdown-it-anchor'); //给页眉添加锚点
-const slugify = require('transliteration').slugify;
-const hljs = require('highlight.js');
-const containers = require('./containers');
-const overWriteFenceRule = require('./fence');
-
-const config = new Config();
-
-const highlight = (str, lang) => {
-  if (!lang || !hljs.getLanguage(lang)) {
-    return '<pre><code class="hljs">' + str + '</code></pre>';
-  }
-  const html = hljs.highlight(lang, str, true, undefined).value;
-  return `<pre><code class="hljs language-${lang}">${html}</code></pre>`;
-};
-
-config.options
-  .html(true)
-  .highlight(highlight)
-  .end()
-
-  // .plugin('anchor').use(anchorPlugin, [
-  //   {
-  //     level: 2,
-  //     slugify: slugify,
-  //     permalink: false,
-  //     permalinkBefore: false,
-  //   },
-  // ]).end()
-
-  .plugin('containers')
-  .use(containers)
-  .end();
-
-const md = config.toMd();
-overWriteFenceRule(md);
-
-module.exports = md;

loader/md-vue/containers.js

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const mdContainer = require('markdown-it-container');
-
-module.exports = md => {
-  md.use(mdContainer, 'demo', {
-    validate(params) {
-      return params.trim().match(/^demo\s*(.*)$/);
-    },
-    render(tokens, idx) {
-      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-      if (tokens[idx].nesting === 1) {
-        const description = m && m.length > 1 ? m[1] : '';
-        /*
-        tokens是一个数组，里面是块级容器里面所有md代码的code,按照一定规则分割，例如
-        tokens[idx].type === 'fence'意味着被```包裹的东西
-        */
-        const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
-        return `<demo-block>
-        ${description ? `<div>${md.render(description)}</div>` : ''}
-        `;
-      }
-      return '</demo-block>';
-    }
-  });
-
-  md.use(mdContainer, 'tip');
-  md.use(mdContainer, 'warning');
-};

loader/md-vue/fence.js

@@ -1,14 +0,0 @@
-// 覆盖默认的 fence 渲染策略
-module.exports = md => {
-  const defaultRender = md.renderer.rules.fence;
-  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
-    const token = tokens[idx];
-    // 判断该 fence 是否在 :::demo 内
-    const prevToken = tokens[idx - 1];
-    const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/);
-    // if (token.info === 'html' && isInDemoContainer) {
-    //   return `<template #highlight><pre v-pre><code class="html">${md.utils.escapeHtml(token.content)}</code></pre></template>`;
-    // }
-    return defaultRender(tokens, idx, options, env, self);
-  };
-};

loader/md-vue/index.js

@@ -1,70 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { stripScript, stripTemplate, genInlineComponentText } = require('./util');
-const md = require('./config');
-
-module.exports = function(source) {
-  const content = md.render(source); //得到来自.md的解析出来的数据
-  const startTag = '<!--nutui-demo:';
-  const startTagLen = startTag.length;
-  const endTag = ':nutui-demo-->';
-  const endTagLen = endTag.length;
-
-  let componenetsString = '';
-  let id = 0; // demo 的 id
-  let output = []; // 输出的内容
-  let start = 0; // 字符串开始位置
-
-  let commentStart = content.indexOf(startTag);
-  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);
-  while (commentStart !== -1 && commentEnd !== -1) {
-    output.push(content.slice(start, commentStart));
-
-    const commentContent = content.slice(commentStart + startTagLen, commentEnd);
-
-    const html = stripTemplate(commentContent); //传入的是demo的代码部分，获取demo中的的html
-    const script = stripScript(commentContent); //传入的是demo的代码部分，获取demo中的的script
-    let demoComponentContent = genInlineComponentText(html, script);
-    const demoComponentName = `nutui-demo${id}`;
-    //output是一个数组，最终会拼接放入输出vue文件的template里面，也就是这一页的HTML
-    output.push(`<template #source><${demoComponentName} /></template>`);
-    componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;
-
-    // 重新计算下一次的位置
-    // demoComponentName 与id,命名每个demo组件名字用的，id会在while每一次循环+1，这样子组件从第一个到最后一个都不会重名。
-    id++;
-    start = commentEnd + endTagLen;
-    commentStart = content.indexOf(startTag, start);
-    commentEnd = content.indexOf(endTag, commentStart + startTagLen);
-  }
-
-  // 仅允许在 demo 不存在时，才可以在 Markdown 中写 script 标签
-  // todo: 优化这段逻辑
-
-  let pageScript = '';
-  if (componenetsString) {
-    pageScript = `<script lang="ts">
-      import * as Vue from 'vue';
-      export default {
-        name: 'component-doc',
-        components: {
-          ${componenetsString}
-        }
-      }
-    </script>`;
-  } else if (content.indexOf('<script>') === 0) {
-    // 硬编码，有待改善
-    start = content.indexOf('</script>') + '</script>'.length;
-    pageScript = content.slice(0, start);
-  }
-
-  output.push(content.slice(start));
-  const result = `
-  <template>
-    <section class="content nutui-doc">
-      ${output.join('')}
-    </section>
-  </template>
-  ${pageScript}
-  `;
-  return result;
-};

loader/md-vue/util.js

@@ -1,86 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { compileTemplate, TemplateCompiler } = require('@vue/compiler-sfc');
-
-//获取script标签中的内容
-function stripScript(content) {
-  const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
-  return result && result[2] ? result[2].trim() : '';
-}
-
-//获取style标签中的代码
-function stripStyle(content) {
-  const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
-  return result && result[2] ? result[2].trim() : '';
-}
-
-// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
-//获取template标签中的内容
-function stripTemplate(content) {
-  content = content.trim();
-  if (!content) {
-    return content;
-  }
-  return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
-}
-
-function pad(source) {
-  return source
-    .split(/\r?\n/)
-    .map(line => `  ${line}`)
-    .join('\n');
-}
-
-const templateReplaceRegex = /<template>([\s\S]+)<\/template>/g;
-function genInlineComponentText(template, script) {
-  // https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
-  let source = template;
-  if (templateReplaceRegex.test(source)) {
-    source = source.replace(templateReplaceRegex, '$1');
-  }
-  const finalOptions = {
-    source: `<div>${source}</div>`,
-    filename: 'inline-component', // TODO：这里有待调整
-    compiler: TemplateCompiler,
-    compilerOptions: {
-      mode: 'function'
-    }
-  };
-  const compiled = compileTemplate(finalOptions);
-  // tips
-  if (compiled.tips && compiled.tips.length) {
-    compiled.tips.forEach(tip => {
-      console.warn(tip);
-    });
-  }
-  // errors
-  if (compiled.errors && compiled.errors.length) {
-    console.error(`\n  Error compiling template:\n${pad(compiled.source)}\n` + compiled.errors.map(e => `  - ${e}`).join('\n') + '\n');
-  }
-  let demoComponentContent = `
-    ${compiled.code.replace('return function render', 'function render')}
-  `;
-  // todo: 这里采用了硬编码有待改进
-  // 这部分是把字符串里面的export default 替换为const democomponentExport =便于后面的解构赋值
-  script = script.trim();
-  if (script) {
-    script = script.replace(/export\s+default/, 'const democomponentExport =').replace(/import ({.*}) from 'vue'/g, (s, s1) => `const ${s1} = Vue`);
-  } else {
-    script = 'const democomponentExport = {}';
-  }
-  demoComponentContent = `(function() {
-    ${demoComponentContent}
-    ${script}
-    return {
-      render,
-      ...democomponentExport
-    }
-  })()`;
-  return demoComponentContent;
-}
-
-module.exports = {
-  stripScript,
-  stripStyle,
-  stripTemplate,
-  genInlineComponentText
-};