diff --git a/README-zh_CN.md b/README-zh_CN.md
index 32460c8..e5ab10c 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -15,7 +15,7 @@
-[English](../) | 简体中文
+English | 简体中文
> demo-code plugin for vuepress.
@@ -35,7 +35,7 @@ export default {
:::
```
-[实际效果请点击这里](./example/#实现效果)
+实际效果请点击这里
## Features
* 只有一份代码同时生成 demo 和 code
@@ -57,9 +57,21 @@ export default {
```bash
$ npm i -D vuepress-plugin-demo-code
# OR
+$ pnpm i -D vuepress-plugin-demo-code
+# OR
$ yarn add -D vuepress-plugin-demo-code
```
+* 如果你用的是 [vuepress 2.x](https://v2.vuepress.vuejs.org/)，请安装 next 版本。
+
+```bash
+$ npm i -D vuepress-plugin-demo-code@next
+# OR
+$ pnpm i -D vuepress-plugin-demo-code@next
+# OR
+$ yarn add -D vuepress-plugin-demo-code@next
+```
+
## Usage
配置 vuepress config
@@ -83,6 +95,7 @@ module.exports = {
cssLibs: [
'https://unpkg.com/animate.css@3.7.0/animate.min.css',
],
+ vueVersion: '^3',
showText: 'show code',
hideText: 'hide',
styleStr: 'text-decoration: underline;',
@@ -121,6 +134,12 @@ module.exports = {
展示 demo 所需的 css 库。
+### vueVersion
+* 类型：`String` (语义化版本格式)
+* 默认值：`^2.6.14`
+
+vue 的语义化版本字符串。想要了解更多的语义化版本格式，可以看这里 [npm semver calculator](https://semver.npmjs.com/).
+
### showText
* 类型：`String`
* 默认值：`show code`
diff --git a/README.md b/README.md
index 7748148..b054640 100644
--- a/README.md
+++ b/README.md
@@ -57,9 +57,21 @@ export default {
```bash
$ npm i -D vuepress-plugin-demo-code
# OR
+$ pnpm i -D vuepress-plugin-demo-code
+# OR
$ yarn add -D vuepress-plugin-demo-code
```
+* If you are using [vuepress 2.x](https://v2.vuepress.vuejs.org/), please install the next version.
+
+```bash
+$ npm i -D vuepress-plugin-demo-code@next
+# OR
+$ pnpm i -D vuepress-plugin-demo-code@next
+# OR
+$ yarn add -D vuepress-plugin-demo-code@next
+```
+
## Usage
Write vuepress config
@@ -83,6 +95,7 @@ module.exports = {
cssLibs: [
'https://unpkg.com/animate.css@3.7.0/animate.min.css',
],
+ vueVersion: '^3',
showText: 'show code',
hideText: 'hide',
styleStr: 'text-decoration: underline;',
@@ -121,6 +134,12 @@ Js libraries for the demo.
Css libraries for the demo.
+### vueVersion
+* Type: `String` (semantic versioning syntax)
+* Default: `^2.6.14`
+
+The semantic version string of vue. For more information on semantic versioning syntax, see the [npm semver calculator](https://semver.npmjs.com/).
+
### showText
* Type: `String`
* Default: `show code`
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 22f850e..5a9f26d 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -1 +1 @@
-<[include](../README.md)
+<[include](../README-zh_CN.md)
diff --git a/src/DemoAndCode.vue b/src/DemoAndCode.vue
index b7c2699..a66b038 100644
--- a/src/DemoAndCode.vue
+++ b/src/DemoAndCode.vue
@@ -20,6 +20,7 @@
v-show="showOnlineBtns[platform]"
v-bind="parsedCode"
:platform="platform"
+ :vueVersion="vueVersion"
/>
@@ -59,14 +60,15 @@ export default {
hideText: { type: String, default: 'hide code' },
jsLibsStr: { type: String, default: '[]' },
cssLibsStr: { type: String, default: '[]' },
+ vueVersion: { type: String, default: '^2.6.14' },
+ jsfiddleStr: { type: String, default: '{}' },
+ onlineBtnsStr: { type: String, default: '{}' },
+ codesandboxStr: { type: String, default: '{}' },
minHeight: {
type: Number,
default: 200,
validator: val => val >= 0,
},
- jsfiddleStr: { type: String, default: '{}' },
- onlineBtnsStr: { type: String, default: '{}' },
- codesandboxStr: { type: String, default: '{}' },
},
data () {
return {
diff --git a/src/OnlineEdit.vue b/src/OnlineEdit.vue
index 4a679db..2ea0505 100644
--- a/src/OnlineEdit.vue
+++ b/src/OnlineEdit.vue
@@ -48,7 +48,7 @@ import {
PLATFORM_TIP_MAP,
} from './constants'
-const vueJs = 'https://unpkg.com/vue/dist/vue.js'
+const getUnpkgVueJs = vueVersion => `https://unpkg.com/vue@${encodeURIComponent(vueVersion)}`
export default {
name: 'OnlineEdit',
@@ -58,11 +58,6 @@ export default {
codesandbox,
},
props: {
- platform: {
- type: String,
- required: true,
- validator: val => PLATFORMS.indexOf(val) !== -1,
- },
js: { type: String, default: '' },
css: { type: String, default: '' },
html: { type: String, default: '' },
@@ -71,24 +66,27 @@ export default {
jsLibs: { type: Array, default: () => [] },
cssLibs: { type: Array, default: () => [] },
editors: { type: String, default: '101' },
+ vueVersion: { type: String, default: '^2.6.14' },
jsfiddleOptions: { type: Object, default: () => ({}) },
codesandboxOptions: { type: Object, default: () => ({}) },
+ platform: {
+ type: String,
+ required: true,
+ validator: val => PLATFORMS.indexOf(val) !== -1,
+ },
},
computed: {
jsTmpl: vm => getJsTmpl(vm.js),
htmlTmpl: vm => getHtmlTmpl(vm.html),
actionUrl: vm => {
- if (vm.platform === 'jsfiddle') {
- return ACTION_MAP[vm.platform] + vm.jsfiddleOptions.framework
- }
-
- return ACTION_MAP[vm.platform]
+ if (vm.platform !== 'jsfiddle') return ACTION_MAP[vm.platform]
+ return ACTION_MAP[vm.platform] + vm.jsfiddleOptions.framework
},
resources: vm => vm.jsLibsWithVue.concat(vm.cssLibs).join(','),
js_external: vm => vm.jsLibsWithVue.join(';'),
platformTip: vm => PLATFORM_TIP_MAP[vm.platform],
css_external: vm => vm.cssLibs.join(';'),
- jsLibsWithVue: vm => vm.jsLibs.concat(vueJs),
+ jsLibsWithVue: vm => vm.jsLibs.concat(getUnpkgVueJs(vm.vueVersion)),
codepenValue: (vm) => JSON.stringify({
js: vm.jsTmpl,
css: vm.css,
@@ -106,6 +104,7 @@ export default {
deps: vm.codesandboxOptions.deps,
jsLibs: vm.jsLibs,
cssLibs: vm.cssLibs,
+ vueVersion: vm.vueVersion,
}),
},
}
diff --git a/src/index.js b/src/index.js
index 13d1539..dda7c0d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -82,6 +82,7 @@ module.exports = (options = {}) => {
showText = 'show code',
hideText = 'hide code',
minHeight,
+ vueVersion = '^2.6.14',
} = options
const jsfiddle = Object.assign({}, defaults.jsfiddle, options.jsfiddle)
@@ -101,8 +102,9 @@ module.exports = (options = {}) => {
showText="${showText}"
hideText="${hideText}"
jsLibsStr="${jsLibsStr}"
- cssLibsStr="${cssLibsStr}"
:minHeight="${minHeight}"
+ cssLibsStr="${cssLibsStr}"
+ vueVersion="${vueVersion}"
jsfiddleStr="${jsfiddleStr}"
onlineBtnsStr="${onlineBtnsStr}"
codesandboxStr="${codesandboxStr}"
diff --git a/src/utils.js b/src/utils.js
index 70b4456..ed0b4c0 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -30,25 +30,39 @@ const urlToHtmlTag = type => url => type === 'js'
: 'Error type: js | css'
/* istanbul ignore next */
-const getCodeSandboxTmpl = ({ js, css, html, deps, jsLibs, cssLibs }) => getParameters({
+const getCodeSandboxTmpl = ({
+ js,
+ css,
+ html,
+ deps,
+ jsLibs,
+ cssLibs,
+ vueVersion,
+}) => getParameters({
files: {
- 'index.js': { content: CODE_SANDBOX_JS },
+ 'index.js': { isBinary: false, content: CODE_SANDBOX_JS },
'App.vue': {
+ isBinary: false,
content:
`\n\n${html}\n\n\n\n` +
`\n\n` +
`\n`,
},
'index.html': {
+ isBinary: false,
content:
cssLibs.map(urlToHtmlTag('css')) +
jsLibs.map(urlToHtmlTag('js')) +
CODE_SANDBOX_HTML,
},
'package.json': {
- content: {
- dependencies: Object.assign({ vue: 'latest' }, deps),
- },
+ isBinary: false,
+ content: JSON.stringify({
+ dependencies: Object.assign({ vue: vueVersion }, deps),
+ devDependencies: {
+ '@vue/cli-service': '^4.1.1',
+ },
+ }),
},
},
})
diff --git a/test/__snapshots__/DemoAndCode.test.js.snap b/test/__snapshots__/DemoAndCode.test.js.snap
index 495759a..c85c3af 100644
--- a/test/__snapshots__/DemoAndCode.test.js.snap
+++ b/test/__snapshots__/DemoAndCode.test.js.snap
@@ -38,6 +38,7 @@ exports[`DemoAndCode should be rendered 1`] = `
layout="left"
platform="codepen"
style="display: none;"
+ vueversion="^2.6.14"
/>
diff --git a/test/__snapshots__/OnlineEdit.test.js.snap b/test/__snapshots__/OnlineEdit.test.js.snap
index 3570b46..09cf32f 100644
--- a/test/__snapshots__/OnlineEdit.test.js.snap
+++ b/test/__snapshots__/OnlineEdit.test.js.snap
@@ -10,7 +10,7 @@ exports[`OnlineEdit should be rendered 1`] = `
\\\\n\\\\n\\\\n\\\\n\\",\\"layout\\":\\"left\\",\\"editors\\":\\"101\\",\\"js_external\\":\\"https://unpkg.com/vue/dist/vue.js\\",\\"css_external\\":\\"\\",\\"js_pre_processor\\":\\"babel\\"}"
+ value="{\\"js\\":\\"new Vue({\\\\n\\\\tel: '#app', \\\\n\\\\t\\\\n})\\",\\"css\\":\\"\\",\\"html\\":\\"\\\\n\\\\n\\\\n\\\\n
\\",\\"layout\\":\\"left\\",\\"editors\\":\\"101\\",\\"js_external\\":\\"https://unpkg.com/vue@%5E2.6.14\\",\\"css_external\\":\\"\\",\\"js_pre_processor\\":\\"babel\\"}"
/>
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..08cf89d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}