feat: add vueVersion

README-zh_CN.md

@@ -15,7 +15,7 @@
     </a>
 </p>
 
-[English](../) | 简体中文
+<a href="https://buptsteve.github.io/vuepress-plugin-demo-code/">English</a> | 简体中文
 
 > demo-code plugin for vuepress.
 
@@ -35,7 +35,7 @@ export default {
 :::
 ```
 
-[实际效果请点击这里](./example/#实现效果)
+<a href="https://buptsteve.github.io/vuepress-plugin-demo-code/zh/example/">实际效果请点击这里</a>
 
 ## 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/[email protected]/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`

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/[email protected]/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`

docs/zh/README.md

@@ -1 +1 @@
-<[include](../README.md)
+<[include](../README-zh_CN.md)

src/DemoAndCode.vue

@@ -20,6 +20,7 @@
                     v-show="showOnlineBtns[platform]"
                     v-bind="parsedCode"
                     :platform="platform"
+                    :vueVersion="vueVersion"
                 />
             </div>
         </div>
@@ -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 {

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,
         }),
     },
 }

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}"

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:
                 `<template>\n\n${html}\n\n</template>\n\n` +
                 `<script>\n${js}\n</script>\n\n` +
                 `<style>\n${css}\n</style>\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',
+                },
+            }),
         },
     },
 })

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"
       />
       <onlineedit-stub
         codesandboxoptions="[object Object]"
@@ -52,6 +53,7 @@ exports[`DemoAndCode should be rendered 1`] = `
         layout="left"
         platform="jsfiddle"
         style="display: none;"
+        vueversion="^2.6.14"
       />
       <onlineedit-stub
         codesandboxoptions="[object Object]"
@@ -66,6 +68,7 @@ exports[`DemoAndCode should be rendered 1`] = `
         layout="left"
         platform="codesandbox"
         style="display: none;"
+        vueversion="^2.6.14"
       />
     </div>
   </div>

test/__snapshots__/OnlineEdit.test.js.snap

@@ -10,7 +10,7 @@ exports[`OnlineEdit should be rendered 1`] = `
   <input
     name="data"
     type="hidden"
-    value="{\\"js\\":\\"new Vue({\\\\n\\\\tel: '#app', \\\\n\\\\t\\\\n})\\",\\"css\\":\\"\\",\\"html\\":\\"<div id=\\\\\\"app\\\\\\">\\\\n\\\\n\\\\n\\\\n</div>\\",\\"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\\":\\"<div id=\\\\\\"app\\\\\\">\\\\n\\\\n\\\\n\\\\n</div>\\",\\"layout\\":\\"left\\",\\"editors\\":\\"101\\",\\"js_external\\":\\"https://unpkg.com/vue@%5E2.6.14\\",\\"css_external\\":\\"\\",\\"js_pre_processor\\":\\"babel\\"}"
   />
    
   <!---->

tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    }
+}