Before I do that, I want to make a point. This is not a purely technical article, but rather a narrative article, documenting my development of the plug-in.

A simple brag before you begin

Vue2 has been in the works for many years. Multiplayer collaboration has always used other people’s components. The point is that some components look like real effort without documentation. Props can also be seen directly from the components, and the emit,ref, and slot code can be a little more labors to read. Some solutions have been considered, such as writing a README per component. Here’s the problem. Who’s going to write the readme for you? I’m kidding.

So it would be nice to have something that automatically parses Vue components. Search on the Internet, Vue automatically generated documents, there is really such a thing Vuese, basically meet the requirements, but there are a few not very satisfied.

  • Does not support vue3
  • Each time you generate a document, you need to run the command. You can also listen with nodemon. But it just feels a little low
  • The UI is not very nice (this is a bit of a bone scratcher, which is why I started to build my own vite plugins later on)

Overall, Vuese is a very good project. Many of the ideas in my plugin are for reference (in fact, I copied 😂). Vuese, I listed his bad ones, just to give myself a reason to build a wheel…

With all that said you can probably guess what plug-in I’m going to build, but to summarize:

  • Automatically resolves VUE and supports VUE3
  • Support hot update, write code can immediately see the live preview
  • Good UI, it is best to let others see the document that I write the code is very NB, do not say the code is good, look at the document will be able to fool people 😄

So why Vite Plug-in South?

  • Not long after it came out, there were fewer wheels compared to the Webpack
  • It seems like most wheels are written in TS, so take a chance and learn a wave of TS.
  • The Vite introduction is 10-100 times faster than the traditional one, and the initial experience is really fast. But this is not the main reason, the main reason is that it is relatively new ah, less wheels, I can take advantage of a wave of heat, maybe the fire, the salary will be raised. 👏 👏 👏

Blow the bull, and the demand is clear

Always thought to do an open source the most difficult is not development, but to get a better demand. But the development of this Vite plugin was a bit of a hassle, and it almost blew my mind. 😏

At the very beginning there was a problem

  • How to get props, lots from a VUE file?

I haven’t done any similar projects before, nor have I encountered any similar problems, so I don’t know how to start at all. The initial idea is to use regular to match, carefully thought ha, the feeling is not very reliable, mainly because my regular is not good. 🤙 🤙 🤙

I can’t think of a way to do it. Someone knows how to do it. Watch Vuese do it. First look at the package.json inside the use of those plug-ins, do not know the plug-in all search, to understand some what role. Finally, I found several libraries that can parse JS code into an AST syntax tree and parse VUE perfectly.

{" dependencies ": {" @ Babel/parser" : "^ 7.10.3", "@ Babel/traverse by" : "^ 7.10.3", "@ Babel/types" : "^7.3.0", "vue-template-compiler": "^2.6.11"}}

LL: Well, I’ve heard a lot about bable, but I don’t know how to understand it

Without further ado, let’s enumerate their roles

The plug-in role
@babel/parser Script is parsed into an AST syntax tree by the parse method
@babel/traverse The AST syntax tree is traversed to update and delete nodes
@babel/types What type is the current node
vue-template-compiler VUE is AST, and VUE3 uses @VUE /compiler-sfc

The @bable/parse parse method, bableParse, is exposed in @vue/compiler-sfc

// compiler-sfc.d.ts import { parse as babelParse } from '@babel/parser'; . export { babelParse }

I also found a good tool to convert JS code into AST: ASTExplorer online

Setting up the development environment

Once a technical challenge is solved, it’s time to create the project and set up the development environment. Ignore playing with the vite demo and the plug-in demo here.

In Awesome-Vite, I looked at a lot of plug-in source code and summarized a few features

  • There are almost always two projects. One is the source code of the plugin and the other is the example instance. Some plug-ins are common to multiple frameworks such as Vue and React and have multiple instances
  • The development environment in order to quickly package the environment, the use of the more is the TsuP, TSC these two plug-ins
  • Because the source code is TS and needs to be packaged into JS, the two fields of package.json are main and types

The base project structure is created

Now that you have these features, you can create your project and set up your development environment step by step

The general directory structure looks like this

-pacakges / -vue-docs -example # example-packages.json

See this package, there are a number of modules, the first thought is Lerna + yarn + workspaces, so directly a shuttle

Yarn init-y yarn add lerna -d NPX lerna init NPX lerna create vue-docs NPX lerna create @vue-docs/exampe # But Example is a Vue project for Vite, so Yarn Create Vite is created with Vite

The final list looks like this

-.git-pacakges / -example # vite creates a vue project --... -vue-docs # plugin code -... - lerna.json - package.json

Modify package.json to get the following results

{" name ":" monorepo ", / / reference the lerna spelled "version" : "0.0.0", / / 0.0.0 "main" : "index. Js", "license" : "MIT", "devDependencies" : {" lerna ":" ^ 4.0.0 "}, / / the new "private" : true, "workspaces:" [] "packages / *"}

Now that you have the project structure, let’s get to the vue-docs directory

Vue-docs plugin directory setup

As mentioned earlier, most plug-ins use TS, and use both the tsup/ TSC plug-ins. So according to this standard to build

Let’s install the plug-in first, so we can use tsup directly here

 yarn workspace vue-docs add typescript tsup @babel/preset-typescript @babel/preset-env -D

Configuration bable. Config. Js

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};

Create a new index.ts in lib and test it

export function sum(a: number, b: number): number {
  return a + b;
}

sum(1, 2);
npx tsup ./lib/index.ts

Discover that a dist/index.js file was generated

"use strict";
Object.defineProperty(exports, "__esModule", { value: true }); // lib/index.ts
function sum(a, b) {
  return a + b;
}
sum(1, 2);

exports.sum = sum;

Here the basic vue-docs construction is completed, and finally load the command in package.json scripts

{
  "scripts": "tsup  ./lib/index.ts"
}

At this point, the basic prototype of the project is in place, and the next step is to improve the development environment. I’ll see you in the next video

And then the last wave of generalizations

  • Warehouse link: vite-plugin-vue-docs
  • Online experience: parse.vue files and generate documents automatically