purpose

Sometimes learn a thing, feel learned, but actually start waste, but also delayed a lot of time, so it is necessary to learn about the excellent source code, although it also takes time, but really have the effect of sharpening the knife does not mistakenly cut firewood

The cause of

I want to learn vue-demi, see the introduction that developed components can be used in vuE2 as well as vue3, this is very convenient, the company’s old projects are written in VUe2, to extend the plug-in, also use VUe2 to write, and then new projects are written in Vue3, after writing, have to upgrade to 3. Although @vue/ composition-API supports writing 3 code in vue2, it is still not convenient. When publishing the plugin, I have to develop vue2 and vue3 separately. It is too uncomfortable. Doesn’t it smell good?

The problem

  • Currently, most vue-demi are written using rend functions. does it support template writing and publishing?
  • How to release a support for two versions, is v2 and V3 to pack two sets?
  • How can we test that it supports both V2 and V3?

bonus

To answer the above question, let’s talk about my unexpected harvest. The answer is also in the harvest

  1. codesandbox

JavaScript online sandbox environment — Codesandbox.io

Get started fast: CodesandBox has templates for all the popular frameworks you can use to create web apps, experiment with code and ideas, and share your creations

Codesandbox is generated automatically, and md is also generated automatically, and the address of CodesandBox is also written in md.

I have solved the third problem here

  1. Cdn.jsdelivr.net quoted the CDN

When I looked at the Sandbox, I found that all the referenced links were CDN and automatic, so I went to Baidu to check, and found that as long as the resources published on NPM can automatically generate CDN, and the speed is not bad, so I experimented with my open source ruler component. Do have cdn.jsdelivr.net/npm/vue3-sk…

The rule is: prefix + package name + version + location

Prefix: https://cdn.jsdelivr.net/npm/ package name: vue3 version - the sketch - ruler: @ 1.2.6 location: (their definition, is not clear to check the package. The main json) lib/index es. JsCopy the code

With this guy, what do you want to test or share new plugins, or give a bug to a plugin, or PR, directly a sandbox link to the past, free!

vue-echarts

This plug-in is to support echarts with vUE way to write a transfer plug-in, already know, but there is a special effect, it is to support v2 and V3 at the same time to use the plug-in, let’s dig source code, it how to achieve

Agmd an AGMD command, the directory structure and annotations to strip down, about the specific use of this plug-in, click the link can see, which code annotations are I look at the source code, labeled good, there is a need to click the link to download

The sandbox contains some code for the CodesandBox configuration to demonstrate the different use of V2 and V3 test cases. The docs. Js feature is also very powerful and can automatically generate readme files for the project. Automatically paste the codesandbox link echarts.ts as the core main function, which uses the protagonist Vue-demi to replace vue use

The template uses the render function

This is key, the plugins that support vue-demi currently write render functions, as both V2 and V3 support this rendering method

The others are some general operations, which I won’t interpret here

Solution 1: currently, most vue-demi are written using rend function, does it support template writing and publishing?

  1. First of all, there is a problem of packing vue templates. Is vue2 the same as vue3? Can it be used? With this question in mind, I first try to package the code with Vite. After all, Vite is my son, and the function of packaging Vue must be great, so I created a new Vite project and fitted with Vue-Demi file according to the way of VUe-Demi. However, vue-Demi disappeared after packaging. This will definitely not work in VUE2, failed attempt
  2. Convert template to render function using @vue/ Compiler-sFC? Git has been looking for a bunch of examples, don’t see any good examples
  3. The same code with VUE-demi in vue2 and vue3 respectively play two versions of the file out, but only maintain a source, at present may be the third more realistic, compare V2 and V3 template parsing is not the same, the current conclusion, problem two is the same thing.

Due to time constraints, today is the second night to prepare this manuscript, so I’d better send it to you first. I will continue to reply in the message after I have successfully debugged it

Two links are posted below

Previous articles: Automatically generate directory MD files

Agmd source code – Automatically generates MarkDown