Skip to content

Commit c183be5

Browse files
fengyuanchenfengyuanchen
committed
refactor!: upgrade to Vue 3
1 parent a815d63 commit c183be5

File tree

9 files changed

+2312
-1502
lines changed

9 files changed

+2312
-1502
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
language: node_js
2-
node_js: node
2+
node_js: lts/*
33
cache: npm
44
script:
55
- npm run lint

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
## Features
1111

12+
- Supports Vue 2 and Vue 3.
1213
- Supports to load a markdown file as a Vue component.
1314
- Supports to load code blocks (Vue and HTML by default) as Vue components.
1415
- Supports 10 [options](#options).
@@ -30,7 +31,6 @@ module: {
3031
rules: [
3132
{
3233
test: /\.md$/,
33-
exclude: /(node_modules|bower_components)/,
3434
use: [
3535
'vue-loader',
3636
{

‎index.js

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ const MarkdownIt = require('markdown-it');
22
const cheerio = require('cheerio');
33
const path = require('path');
44
const postcss = require('postcss');
5+
const vue = require('vue');
56

7+
const isVue3 = vue.version && vue.version[0] > 2;
68
const defaultOptions = {
79
cheerioLoadOptions: {
810
decodeEntities: false,
@@ -62,9 +64,7 @@ function normalizeComponent(script, mixin) {
6264
component = {};
6365
}
6466
65-
component.mixins = (component.mixins || []).concat([${mixin}]);
66-
67-
return component;
67+
return Object.assign(component, ${mixin});
6868
}())`;
6969
}
7070

@@ -110,7 +110,7 @@ module.exports = function markdownToVueLoader(source, map) {
110110
}
111111

112112
if (commentOption !== 'no-vue-component') {
113-
$pre.children('code').each((i, code) => {
113+
$pre.children('code').each((idx, code) => {
114114
const $code = $(code);
115115
const language = $code.attr('class').replace(REGEXP_LANGUAGE_PREFIXES, '');
116116

@@ -119,28 +119,30 @@ module.exports = function markdownToVueLoader(source, map) {
119119
}
120120

121121
const mixin = [];
122+
let template = '';
122123
let component;
123124
let scoped;
124125
let style;
125-
let template;
126126

127127
switch (language) {
128128
case 'vue': {
129-
const $html = cheerio.load($code.text(), cheerioLoadOptions);
130-
const $style = $html('style');
129+
const $$ = cheerio.load($code.text(), cheerioLoadOptions);
130+
const $style = $$('style');
131131

132-
component = $html('script').html() || 'export default {};';
132+
component = $$('script').html() || 'export default {};';
133133
scoped = $style.attr('scoped');
134134
style = $style.html();
135-
template = $html('template').html();
135+
$$('template').each((i, element) => {
136+
template += $(element).html();
137+
});
136138
break;
137139
}
138140

139141
case 'html': {
140-
const $html = cheerio.load($code.text(), cheerioLoadOptions);
141-
const $body = $html('body');
142-
const $script = $html('script');
143-
const $style = $html('style');
142+
const $$ = cheerio.load($code.text(), cheerioLoadOptions);
143+
const $body = $$('body');
144+
const $script = $$('script');
145+
const $style = $$('style');
144146

145147
component = $script.html() || 'export default {};';
146148
scoped = $style.attr('scoped');
@@ -149,7 +151,12 @@ module.exports = function markdownToVueLoader(source, map) {
149151
$style.remove();
150152

151153
// Move <template> from <head> to <body>
152-
$body.append($html('head template'));
154+
$body.append($$('head template'));
155+
$body.find('template').each((i, element) => {
156+
const $element = $(element);
157+
158+
$element.replaceWith($element.html());
159+
});
153160
template = $body.html();
154161
break;
155162
}
@@ -189,7 +196,7 @@ module.exports = function markdownToVueLoader(source, map) {
189196
document.head.appendChild(style);
190197
this.$styleInjectedByMarkdownToVueLoader = style;
191198
}`);
192-
mixin.push(`beforeDestroy: function () {
199+
mixin.push(`before${isVue3 ? 'Unmount' : 'Destroyed'}: function () {
193200
var $style = this.$styleInjectedByMarkdownToVueLoader;
194201
$style.parentNode.removeChild($style);
195202
}`);
@@ -237,18 +244,18 @@ module.exports = function markdownToVueLoader(source, map) {
237244
}
238245
});
239246

240-
const $html = cheerio.load('<template></template>');
241-
const $body = $html('body');
247+
const $$ = cheerio.load('<template></template>');
248+
const $body = $$('body');
242249

243-
$body.append($html('head template'));
250+
$body.append($$('head template'));
244251

245-
$('style').each((i, style) => {
252+
$('style').each((index, style) => {
246253
const $style = $(style);
247254

248255
$body.append($style);
249256
});
250257

251-
$html('template').append(`<div class="${options.componentNamespace}-${normalizedResourceName}">${$('body').html()}</div>`);
258+
$$('template').append(`<div class="${options.componentNamespace}-${normalizedResourceName}">${$('body').html()}</div>`);
252259

253260
if (options.exportSource || components.length > 0) {
254261
$body.append(`<script>
@@ -259,5 +266,5 @@ module.exports = function markdownToVueLoader(source, map) {
259266
</script>`);
260267
}
261268

262-
this.callback(null, $html('body').html(), map);
269+
this.callback(null, $$('body').html(), map);
263270
};

0 commit comments

Comments
 (0)