feat: support Vue 3

fengyuanchen · Dec 17, 2020 · 4893b77 · 4893b77
1 parent 54cc33a
commit 4893b77
Showing 1 changed file with 40 additions and 19 deletions.
diff --git a/index.js b/index.js
@@ -3,7 +3,9 @@ const cheerio = require('cheerio');
 const loaderUtils = require('loader-utils');
 const path = require('path');
 const postcss = require('postcss');
+const vue = require('vue');
 
+const isVue3 = vue.version && vue.version[0] > 2;
 const defaultOptions = {
   cheerioLoadOptions: {
     decodeEntities: false,
@@ -35,6 +37,15 @@ const REGEXP_MODULE_EXPORTS = /(?:export\s+default|(?:module\.)?exports\s*=)/g;
 const REGEXP_MODULE_IMPORTS = /(?:import)(?:\s+((?:[\s\S](?!import))+?)\s+(?:from))?\s+["']([^"']+)["']/g;
 const REGEXP_NOT_WORDS = /\W/g;
 
+/**
+ * Check if the given value is a function.
+ * @param {*} value - The value to check.
+ * @returns {boolean} Returns `true` if the given value is a function, else `false`.
+ */
+function isFunction(value) {
+  return typeof value === 'function';
+}
+
 /**
  * Normalize script to valid Vue Component.
  * @param {string} script - The raw script code of component.
@@ -70,14 +81,17 @@ function normalizeComponent(script, mixin) {
 }
 
 module.exports = function markdownToVueLoader(source, map) {
-  const options = { ...defaultOptions, ...loaderUtils.getOptions(this) };
+  const options = {
+    ...defaultOptions,
+    ...(isFunction(this.getOptions) ? this.getOptions() : loaderUtils.getOptions(this)),
+  };
   const markdownItOptions = {
     ...defaultOptions.markdownItOptions,
     ...options.markdownItOptions,
   };
   const markdown = new MarkdownIt(markdownItOptions);
 
-  if (typeof options.configureMarkdownIt === 'function') {
+  if (isFunction(options.configureMarkdownIt)) {
     options.configureMarkdownIt.call(markdown, markdown);
   }
 
@@ -111,7 +125,7 @@ module.exports = function markdownToVueLoader(source, map) {
     }
 
     if (commentOption !== 'no-vue-component') {
-      $pre.children('code').each((i, code) => {
+      $pre.children('code').each((idx, code) => {
         const $code = $(code);
         const language = $code.attr('class').replace(REGEXP_LANGUAGE_PREFIXES, '');
 
@@ -127,21 +141,23 @@ module.exports = function markdownToVueLoader(source, map) {
 
         switch (language) {
           case 'vue': {
-            const $html = cheerio.load($code.text(), cheerioLoadOptions);
-            const $style = $html('style');
+            const $$ = cheerio.load($code.text(), cheerioLoadOptions);
+            const $style = $$('style');
 
-            component = $html('script').html() || 'export default {};';
+            component = $$('script').html() || 'export default {};';
             scoped = $style.attr('scoped');
             style = $style.html();
-            template = $html('template').html();
+            $$('template').each((i, element) => {
+              template += $(element).html();
+            });
             break;
           }
 
           case 'html': {
-            const $html = cheerio.load($code.text(), cheerioLoadOptions);
-            const $body = $html('body');
-            const $script = $html('script');
-            const $style = $html('style');
+            const $$ = cheerio.load($code.text(), cheerioLoadOptions);
+            const $body = $$('body');
+            const $script = $$('script');
+            const $style = $$('style');
 
             component = $script.html() || 'export default {};';
             scoped = $style.attr('scoped');
@@ -150,7 +166,12 @@ module.exports = function markdownToVueLoader(source, map) {
             $style.remove();
 
             // Move <template> from <head> to <body>
-            $body.append($html('head template'));
+            $body.append($$('head template'));
+            $body.find('template').each((i, element) => {
+              const $element = $(element);
+
+              $element.replaceWith($element.html());
+            });
             template = $body.html();
             break;
           }
@@ -190,7 +211,7 @@ module.exports = function markdownToVueLoader(source, map) {
               document.head.appendChild(style);
               this.$styleInjectedByMarkdownToVueLoader = style;
             }`);
-            mixin.push(`beforeDestroy: function () {
+            mixin.push(`before${isVue3 ? 'Unmount' : 'Destroyed'}: function () {
               var $style = this.$styleInjectedByMarkdownToVueLoader;
               $style.parentNode.removeChild($style);
             }`);
@@ -238,18 +259,18 @@ module.exports = function markdownToVueLoader(source, map) {
     }
   });
 
-  const $html = cheerio.load('<template></template>');
-  const $body = $html('body');
+  const $$ = cheerio.load('<template></template>');
+  const $body = $$('body');
 
-  $body.append($html('head template'));
+  $body.append($$('head template'));
 
-  $('style').each((i, style) => {
+  $('style').each((index, style) => {
     const $style = $(style);
 
     $body.append($style);
   });
 
-  $html('template').append(`<div class="${options.componentNamespace}-${normalizedResourceName}">${$('body').html()}</div>`);
+  $$('template').append(`<div class="${options.componentNamespace}-${normalizedResourceName}">${$('body').html()}</div>`);
 
   if (options.exportSource || components.length > 0) {
     $body.append(`<script>
@@ -260,5 +281,5 @@ module.exports = function markdownToVueLoader(source, map) {
 </script>`);
   }
 
-  this.callback(null, $html('body').html(), map);
+  this.callback(null, $$('body').html(), map);
 };