From b135f8417d9b27b58a545e9f792e70d7b319cc15 Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Wed, 7 Oct 2020 13:13:03 -0500 Subject: [PATCH] Add Vue 3 compatibility - Update docs - Update tests - Add Vue 2 to docs site - Add Vue 2 & 3 dependencies for tests --- docs/index.html | 1 + docs/vue.md | 118 ++++++++++++++--------------- jest.config.js | 2 +- package-lock.json | 96 ++++++++++++++++++++++++ package.json | 2 + src/core/render/index.js | 34 +++++++-- test/README.md | 25 ++++--- test/e2e/vue.test.js | 155 +++++++++++++++++++++++++++++++-------- 8 files changed, 320 insertions(+), 113 deletions(-) diff --git a/docs/index.html b/docs/index.html index 11d96866..0693aba3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -162,5 +162,6 @@ } })(); + diff --git a/docs/vue.md b/docs/vue.md index 23392b55..5e62363d 100644 --- a/docs/vue.md +++ b/docs/vue.md @@ -1,24 +1,34 @@ # Vue compatibility -Docsify allows [Vue.js](https://vuejs.org) components to be added directly to you Markdown files. These components can greatly simplify working with data and adding reactivity to your content. +Docsify allows Vue [v2.x](https://vuejs.org) and [v3.x](https://v3.vuejs.org) components to be added directly to you Markdown files. These components can greatly simplify working with data and adding reactivity to your content. -To get started, load either the production (minified) or development (unminified) version of Vue in your `index.html`: +To get started, load either the production or development version of Vue in your `index.html`: + +#### Vue 2.x ```html - + - + ``` +#### Vue 3.x + +```html + + + + + +``` + ## Basic rendering Docsify will automatically render basic Vue content that does not require `data`, `methods`, or other instance features. ```markdown - - @@ -26,8 +36,6 @@ Docsify will automatically render basic Vue content that does not require `data` The HTML above will render the following: - - @@ -36,6 +44,8 @@ The HTML above will render the following: Vue components and templates that require `data`, `methods`, computed properties, lifecycle hooks, etc. require manually creating a new `Vue()` instance within a ` ``` +#### Vue 3.x + +```markdown + +``` + The HTML & JavaScript above will render the following: + +

{{ message }}

@@ -77,64 +115,18 @@ The HTML & JavaScript above will render the following:
+ + !> Only the first ` -``` - -Add vuep markup to a markdown file (e.g. `README.md`): - -```markdown - - - - -``` - - - - - - + `, }, - }); + vue3: { + markdown: ` +
+ + {{ counter }} +
- const testResult = await page.textContent('#test'); + + `, + }, + }; - expect(testResult).toBe('test{{ i }}'); + for (const vueURL of vueURLs) { + const vueVersion = vueURL.match(/vue(\d+)/)[1]; // vue2|vue3 + const vueData = testData[`vue${vueVersion}`]; + + for (const executeScript of ['unspecified', true]) { + test(`handles Vue v${vueVersion}.x advanced usage when executeScript is ${executeScript}`, async () => { + const docsifyInitConfig = { + markdown: { + homepage: vueData.markdown, + }, + scriptURLs: vueURL, + }; + + if (executeScript !== 'unspecified') { + docsifyInitConfig.config = { + executeScript, + }; + } + + await docsifyInit(docsifyInitConfig); + + await expect(page).toEqualText('#test span', '0'); + await page.click('#test button'); + await expect(page).toEqualText('#test span', '1'); + }); + } + + test(`handles Vue v${vueVersion}.x advanced usage when executeScript is false`, async () => { + const docsifyInitConfig = { + config: { + executeScript: false, + }, + markdown: { + homepage: vueData.markdown, + }, + scriptURLs: vueURL, + }; + + await docsifyInit(docsifyInitConfig); + + const textContent = await page.textContent('#test span'); + expect(textContent).toBe(''); + }); + } }); });