Skip to content

Commit 0b521d3

Browse files
BuptStEveBuptStEve
authored
perf: close #16, use v-html to render code at runtime in DemoAndCode.vue (#18)
1 parent 4a26f4d commit 0b521d3

File tree

10 files changed

+77
-73
lines changed

10 files changed

+77
-73
lines changed

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
presets: [
55
[
66
'@babel/preset-env',
7-
{ targets: { 'node': 'current' } },
7+
{ targets: { node: 'current' } },
88
],
99
],
1010
},

‎docs/.vuepress/config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ module.exports = {
1616
},
1717
},
1818
head: [
19-
['link', { rel: 'icon', href: `/favicon.ico` }],
20-
['link', { rel: 'stylesheet', href: `https://unpkg.com/animate.css@3.7.0/animate.min.css` }],
19+
['link', { rel: 'icon', href: '/favicon.ico' }],
20+
['link', { rel: 'stylesheet', href: 'https://unpkg.com/animate.css@3.7.0/animate.min.css' }],
2121
],
2222
plugins: [
2323
['smooth-scroll'],

‎jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
'!src/highlight.js',
99
'!src/enhanceAppFile.js',
1010
],
11-
coveragePathIgnorePatterns: [ '/__snapshots__/' ],
11+
coveragePathIgnorePatterns: ['/__snapshots__/'],
1212
transform: {
1313
'^.+\\.vue$': 'vue-jest',
1414
'^.+\\.jsx?$': 'babel-jest',

‎package.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuepress-plugin-demo-code",
3-
"version": "0.3.7",
3+
"version": "0.4.0",
44
"description": "📝 Demo and code plugin for vuepress",
55
"main": "src/index.js",
66
"files": [
@@ -37,35 +37,35 @@
3737
"prismjs": "^1.17.1"
3838
},
3939
"devDependencies": {
40-
"@babel/core": "^7.6.4",
41-
"@babel/preset-env": "^7.6.3",
40+
"@babel/core": "^7.7.2",
41+
"@babel/preset-env": "^7.7.1",
4242
"@commitlint/cli": "^8.2.0",
4343
"@commitlint/config-conventional": "^8.2.0",
4444
"@vue/test-utils": "^1.0.0-beta.29",
45-
"all-contributors-cli": "^6.9.1",
45+
"all-contributors-cli": "^6.11.0",
4646
"babel-core": "^7.0.0-bridge.0",
4747
"babel-eslint": "^10.0.3",
4848
"codecov": "^3.6.1",
4949
"cross-env": "^6.0.3",
50-
"eslint": "^6.5.1",
50+
"eslint": "^6.6.0",
5151
"eslint-config-standard": "^14.1.0",
5252
"eslint-config-vue": "^2.0.2",
5353
"eslint-plugin-import": "^2.18.2",
5454
"eslint-plugin-node": "^10.0.0",
5555
"eslint-plugin-promise": "^4.2.1",
5656
"eslint-plugin-standard": "^4.0.1",
57-
"eslint-plugin-vue": "^5.2.3",
57+
"eslint-plugin-vue": "^6.0.1",
5858
"gh-pages": "^2.1.1",
59-
"husky": "^3.0.8",
59+
"husky": "^3.1.0",
6060
"jest": "^24.9.0",
6161
"jest-serializer-vue": "^2.0.2",
6262
"jest-transform-stub": "^2.0.0",
63-
"lint-staged": "^9.4.2",
63+
"lint-staged": "^9.4.3",
6464
"markdown-it-include": "^1.1.0",
6565
"rimraf": "^3.0.0",
6666
"vue-jest": "^3.0.5",
67-
"vuepress": "^1.1.0",
68-
"vuepress-plugin-smooth-scroll": "^0.0.4"
67+
"vuepress": "^1.2.0",
68+
"vuepress-plugin-smooth-scroll": "^0.0.7"
6969
},
7070
"keywords": [
7171
"vue",

‎src/DemoAndCode.vue

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,17 @@
2525
</div>
2626

2727
<div class="code-wrapper" ref="codeWrapper" :style="codeWrapperStyle">
28-
<slot name="code" />
28+
<div
29+
v-html="highlightCode"
30+
:class="`language-${language}' extra-class`"
31+
/>
2932
</div>
3033
</section>
3134
</template>
3235

3336
<script>
3437
import OnlineEdit from './OnlineEdit.vue'
38+
import getHighlightCodeHtml from './highlight'
3539
import {
3640
JS_RE,
3741
CSS_RE,
@@ -50,6 +54,7 @@ export default {
5054
},
5155
props: {
5256
htmlStr: { type: String, default: '' },
57+
language: { type: String, default: 'vue' },
5358
showText: { type: String, default: 'show code' },
5459
hideText: { type: String, default: 'hide code' },
5560
jsLibsStr: { type: String, default: '[]' },
@@ -74,37 +79,28 @@ export default {
7479
}
7580
},
7681
computed: {
82+
// button text
83+
controlText: (vm) => vm.isShowCode ? vm.hideText : vm.showText,
84+
highlightCode: vm => getHighlightCodeHtml(vm.decodedHtmlStr, vm.language),
85+
decodedHtmlStr: vm => decodeURIComponent(vm.htmlStr),
86+
showOnlineBtns: vm => parseAndDecode(vm.onlineBtnsStr),
7787
// icon animation
7888
iconStyle: (vm) => ({
79-
transform: vm.isShowCode
80-
? 'rotate(0)'
81-
: 'rotate(-180deg)',
89+
transform: vm.isShowCode ? 'rotate(0)' : 'rotate(-180deg)',
8290
}),
83-
// button text
84-
controlText: (vm) => vm.isShowCode
85-
? vm.hideText
86-
: vm.showText,
8791
// animation
8892
codeWrapperStyle: (vm) => ({
89-
'max-height': vm.isShowCode
90-
? `${vm.codeHeight}px`
91-
: `${vm.minHeight}px`,
93+
'max-height': vm.isShowCode ? `${vm.codeHeight}px` : `${vm.minHeight}px`,
9294
}),
9395
// sticky
9496
codeControlStyle: (vm) => ({
95-
top: vm.isShowCode
96-
? `${vm.navbarHeight}px`
97-
: '0',
98-
cursor: vm.isShowControl
99-
? 'pointer'
100-
: 'auto',
97+
top: vm.isShowCode ? `${vm.navbarHeight}px` : '0',
98+
cursor: vm.isShowControl ? 'pointer' : 'auto',
10199
}),
102100
parsedCode: (vm) => {
103-
const source = decodeURIComponent(vm.htmlStr)
104-
105-
const js = getMatchedResult(JS_RE)(source) || ''
106-
const css = getMatchedResult(CSS_RE)(source) || ''
107-
const html = getMatchedResult(HTML_RE)(source) || source
101+
const js = getMatchedResult(JS_RE)(vm.decodedHtmlStr) || ''
102+
const css = getMatchedResult(CSS_RE)(vm.decodedHtmlStr) || ''
103+
const html = getMatchedResult(HTML_RE)(vm.decodedHtmlStr) || vm.decodedHtmlStr
108104
.replace(JS_RE, '')
109105
.replace(CSS_RE, '')
110106
.replace(HTML_RE, '')
@@ -116,7 +112,6 @@ export default {
116112
117113
return { js, css, html, jsLibs, cssLibs, codesandboxOptions }
118114
},
119-
showOnlineBtns: vm => parseAndDecode(vm.onlineBtnsStr),
120115
},
121116
methods: {
122117
onClickControl () {

‎src/constants.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ new Vue({
2626
components: { App },
2727
})`
2828

29-
const CODE_SANDBOX_HTML = `\n<div id="app"></div>`
29+
const CODE_SANDBOX_HTML = '\n<div id="app"></div>'
3030

3131
module.exports = {
3232
JS_RE,

‎src/highlight.js

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
// copy from https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/markdown/lib/highlight.js
1+
// https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/markdown/lib/highlight.js
22

33
const prism = require('prismjs')
4+
const escapeHtml = require('escape-html')
45
const loadLanguages = require('prismjs/components/index')
5-
const {
6-
logger,
7-
chalk,
8-
escapeHtml,
9-
} = require('@vuepress/shared-utils')
106

11-
// required to make embedded highlighting work...
12-
loadLanguages(['markup', 'css', 'javascript'])
7+
// loadLanguages(['markup', 'css', 'javascript'])
138

149
function wrap (code, lang) {
1510
if (lang === 'text') {
@@ -18,29 +13,38 @@ function wrap (code, lang) {
1813
return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
1914
}
2015

16+
function getLangCodeFromExtension (extension) {
17+
const extensionMap = {
18+
vue: 'markup',
19+
html: 'markup',
20+
md: 'markdown',
21+
rb: 'ruby',
22+
ts: 'typescript',
23+
py: 'python',
24+
sh: 'bash',
25+
yml: 'yaml',
26+
styl: 'stylus',
27+
kt: 'kotlin',
28+
rs: 'rust',
29+
}
30+
31+
return extensionMap[extension] || extension
32+
}
33+
2134
module.exports = (str, lang) => {
2235
if (!lang) {
2336
return wrap(str, 'text')
2437
}
2538
lang = lang.toLowerCase()
2639
const rawLang = lang
27-
if (lang === 'vue' || lang === 'html') {
28-
lang = 'markup'
29-
}
30-
if (lang === 'md') {
31-
lang = 'markdown'
32-
}
33-
if (lang === 'ts') {
34-
lang = 'typescript'
35-
}
36-
if (lang === 'py') {
37-
lang = 'python'
38-
}
40+
41+
lang = getLangCodeFromExtension(lang)
42+
3943
if (!prism.languages[lang]) {
4044
try {
4145
loadLanguages([lang])
4246
} catch (e) {
43-
logger.warn(chalk.yellow(`[vuepress] Syntax highlight for language "${lang}" is not supported.`))
47+
console.warn(`[vuepress] Syntax highlight for language "${lang}" is not supported.`)
4448
}
4549
}
4650
if (prism.languages[lang]) {

‎src/index.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const path = require('path')
2-
const getHighlightCodeHtml = require('./highlight')
3-
const { encodeAndStringify } = require('./utils')
42
const markdownItContainer = require('markdown-it-container')
3+
const { encodeAndStringify } = require('./utils')
54

65
const defaults = {
76
onlineBtns: {
@@ -81,6 +80,7 @@ module.exports = (options = {}) => {
8180
return `
8281
<DemoAndCode
8382
htmlStr="${encodeURIComponent(htmlStr)}"
83+
language="${language}"
8484
showText="${showText}"
8585
hideText="${hideText}"
8686
jsLibsStr="${jsLibsStr}"
@@ -89,12 +89,6 @@ module.exports = (options = {}) => {
8989
onlineBtnsStr="${onlineBtnsStr}"
9090
codesandboxStr="${codesandboxStr}"
9191
>
92-
<template slot="code">
93-
<div class="language-${language} extra-class">
94-
${getHighlightCodeHtml(htmlStr, language)}
95-
</div>
96-
</template>
97-
9892
<template slot="demo">
9993
`
10094
}

‎test/__snapshots__/DemoAndCode.test.js.snap

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,17 @@ exports[`DemoAndCode should be rendered 1`] = `
7070
<div
7171
class="code-wrapper"
7272
style="max-height: 200px;"
73-
/>
73+
>
74+
<div
75+
class="language-vue' extra-class"
76+
>
77+
<pre
78+
class="language-vue"
79+
v-pre=""
80+
>
81+
<code />
82+
</pre>
83+
</div>
84+
</div>
7485
</section>
7586
`;

‎test/utils.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ import {
77

88
describe('utils', () => {
99
it('getJsTmpl', () => {
10-
const code = ` export default { data: () => ({}) }\n\n\n`
11-
const result = getJsResult(`data: () => ({})`)
10+
const code = ' export default { data: () => ({}) }\n\n\n'
11+
const result = getJsResult('data: () => ({})')
1212

13-
expect(getJsTmpl(``)).toBe(getJsResult(``))
13+
expect(getJsTmpl('')).toBe(getJsResult(''))
1414
expect(getJsTmpl(code)).toBe(result)
1515
})
1616

1717
it('getMatchedResult', () => {
1818
const re = /export default {(.*)}/
19-
const code = ` export default { data: () => ({}) }\n\n\n`
19+
const code = ' export default { data: () => ({}) }\n\n\n'
2020
const result = getMatchedResult(re)(code)
2121

22-
expect(result).toBe(`data: () => ({})`)
22+
expect(result).toBe('data: () => ({})')
2323
})
2424

2525
it('parseAndDecode and encodeAndStringify', () => {

0 commit comments

Comments
 (0)