feat: Vue components, mount options, global options, and v3 support

[jhildenbiddle]

Fix #752 #1252

Summary

This PR significantly improves Vue functionality in docsify and addresses a few bugs/issues with the test environment.

Note that the preview site auto-generated for this PR is not built with the correct index.html so it will not process Vue content as expected. To preview locally, check out the branch/PR and run the following:

node ./test/config/server.js --start

Public Changes

• Add vueComponents configuration option
• Add vueMounts configuration option
• Add vueGlobalOptions configuration option
• Add Vue 3 support
• Add styling for <output> element to vue.css
• Update /docs/ site

Dev Changes

There was a significant test-related bug fixed in this PR. Due to the way Jest manages the JSDOM environment, global objects like the window and document objects are not reset after each test in the same file. As a result, event listeners added to the window object by docsify were not being cleared after each test, resulting in event listeners from previous previous tests continuing to be triggered.

• Add support to docsify-init() for functions in config
• Add .markdownlint.json
• Add _logHTML.selector option to docsify-init()
• Remove unnecessary global variables from test environment
• Remove --runInBand flag from local Jest tests
• Update Vue tests
• Update Jest cleanup/reset in /test/config/jest.setup-tests.js
• Fix waitForSelector() timeout in /test/helpers/wait-for.js
• Fix docsify-init() handling of config.basePath option

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Repo settings
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Screenshot of new <output> styling (below code block):

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

[trusktr]

I'm not clear on the last bullet point. I guess if it'll start to explain this magic part, it might just need to go into more detail.

[jhildenbiddle]

Yes, I agree this description could use some work. To be honest, I debated about even adding it. I've updated the description to (hopefully) make it more clear. At the end of the day, this text exists to help explain why this edge case won't work:

window.$docsify = {
  vueGlobalOptions: {
    data() {
      return {
        globalMsg: 'Hello from vueGlobalOptions!',
      };
    },
  },
  vueMounts: {
    '#test': {
      data() {
        return {
          mountMsg: 'Hello from vueMounts!'
        };
      },
    },
  },
};

Example 1: This will work

<!-- Source -->
<p>{{ globalMsg }}</p>
<p id="test">{{ mountMsg }}</p>

<!-- Output -->
<p>Hello from vueGlobalOptions!</p>
<p id="test">Hello from vueMounts!</p>

In this example, docsify first mounts the top-level <p id="test"> from vueMounts. Docsify then iterates over the top-level child elements (<p>), skips the ones that contain or are themselves Vue instances, detects Vue template syntax in the top-level <p> element, and mounts it using vueGlobalOptions. Great.

Example 2: This will not work

<!-- Source -->
<div>
  <p>{{ globalMsg }}</p>
  <p id="test">{{ mountMsg }}</p>
</div>

<!-- Output -->
<div>
  <p>{{ globalMsg }}</p>
  <p id="test">Hello from vueMounts!</p>
</div>

Like the previous example, docsify first mounts the top-level <p id="test"> from vueMounts. Docsify then iterates over the top-level child elements (<div>), detects that <div> contains a Vue instance (<p id="test">) and skips that element. This behavior is explained in the following "Technical Notes" bullet point:

• Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.

I think it is highly unlikely that this will be an issue, but I added the related technical notes in hopes of making life easier for everyone if it does. The trick is how to do this succinctly without going into the same level of detail above. Hopefully the changes I've put in place are good enough for now. We can always revisit if/when needed.

[trusktr]

@jhildenbiddle The example of what works vs what doesn't will be very helpful to some people. I think it'd be worth pasting what you wrote into the docs.

[trusktr]

Are these style changes potentially breaking (website will look different when v4 user updates)?

[trusktr]

Oh never mind, looks like only refactoring.

[jhildenbiddle]

Non-breaking change because styles did not exist previously.

[sy-records]

Thanks to your contribution. the vue content in documentation now looks great 👍🏻

[sy-records]

LGTM.

[Koooooo-7]

damnnnn good. 👍