Without further ado, first look at the picture:

Document address, not completely completed, you can have a look

Is a person can see this interface with Vant a hair, please forgive me for not what art culture, the country vigorously developed nine years of compulsory education I only learned to copy 😢

preface

The team is currently in a TOC scenario and uses the React technology stack. However, I had difficulty in choosing UI. I had been using Ant Design Mobile before, but it was not satisfactory in many aspects. Therefore, I started to build a UI component library for my team in a self-driven state, which happened to be a thankless task for my business.

Here is only about the process, a lot of details if you want to know you can directly look at the source code, the project is still very small, only more than 20 components, for students who have this idea, I hope to help you. Of course, if you feel that the project is very bad, you are welcome to spray me, as long as you can progress, put what posture can 😛😛

introduce

structure

In fact, when it comes to mobile UI library, the first association is good Vant, although it is Vue, but the framework is almost the same, and the next process is simple, take to copy……

After looking through the Vant source code, I probably have some structure in mind. Vant contains more than just the code for each component; it also includes things like component documentation, command-line tools, specification definitions, Webpack plug-ins, and more. So after standing on the shoulders of giants, I decided to do something of my own

The structure of the project looks something like this

Rokku Flag School - Docs # Document Flag School - SRC # Component Flag School - Packages Flag School - CLI # Command Line Tools Flag School - Fabric # Code Standard Flag School - Icon # Flag Library Flag School - MarkDown-Loader # Custom ├─ exercises # ├─ exercises #Copy the code

The structure of each component is shown below

├─ ├─ SRC └─ button ├─ demo # ├─ ├ __ # ├─ style/index.less # ├─ download.txt Readme.en-us. md #Copy the code

The document

Unlike the others, MY first thought was how to document, not how to write component code in the first place. Because a good component library must be well documented, or no one will want to use it.

So when it comes to documents on the mobile end, there is actually a floating preview area that is more similar to the mobile interface of the emulator. The usual practice is simply to write a separate page for the document and then pack it into a two-page application when running local commands, with a floating preview interface embedded with iframe and some messaging between the two.

In the middle of the document, read the readme. md of each file by traversal, and then translate it into the React component with the custom loader described above. Each document is imported by route. The code in the Demo folder under each component corresponds to the contents of the right-most preview image.

In addition, a configuration file is used in the root directory, and the routing configuration for the document is generated based on this file. The details can be viewed directly in the code.

packaging

The packaging operation is mainly done using the AFOREMENTIONED CLI command line tools, and the process of the development environment is the process of generating documentation, which has been outlined above. Now we’re talking about packaging in the production environment. That’s not what Vant does. This is done using gulp and some of its plugins, because there are many operations involving file changes in addition to code translation.

The first is typescript validation, the translation of less files, and then the Babel code, with some optimizations to avoid the problem of translated files becoming too large.

In addition to the file translation processing, there is another processing, is to achieve on-demand loading and theme customization, the CSS used by each component, including components that depend on each other and may use other components of the CSS into style/index.js file and style/less

Implementation details

How do I automatically generate documents?

The above has been briefly introduced, the following is a little more specific.

There is a unique configuration file rokku.config.js in the root directory, where the nav configuration item corresponds to all the components shown in the document, through which the routing configuration file will be generated when packaging, by which the document application will be generated.

The readme. md file for each component is in the middle of the component description section. Of course, the. Md file cannot be displayed directly, so you need to write a custom webpack plug-in here. Its main purpose is to retrieve the readme.md files of all components under SRC during the packaging process, and then generate a new file to export these contents.

3. Write separate application code for the document, importing the above file as a component of the route configuration

A custom loader is used to convert the.md component into a react component. The other thing is some code highlighting and style changes

How do I preview the demo?

The implementation here is similar to the previous article, use the custom Webpack plug-in to query the files under demo and export, the following operation is the same, write the preview application code separately, after importing the route configuration, and then use iframe embedded with the previous desktop application and add some message passing operations. The route switchover is consistent.

How to deal with ICONS?

ICONS have always been a troublesome point in component libraries, and packaging them into libraries feels cumbersome and takes up too much volume. Here I directly copied Vant’s method (in fact, I also copied others), directly through gulp-iconfont and gulp-iconfont CSS directly generated.sketch into iconfont.css file. Then import it in the Icon component.

conclusion

All the components of this UI library are written using React Hook, so it is not compatible with too early versions of React. I also encountered many problems in the middle, which gave me a great opportunity to learn and improve.

In fact, I really like the process of going from 0 to 1. It connects all the knowledge points together. It is a very enjoyable experience for a person with technical pursuit.

There is one of the code a lot of reference (plagiarism) Vant, please don’t spray me, the main Vant do is really too good, not copy white not copy…

The code address

Say a long time do not put the code with brush rogue no difference, please visit github.com/Hyattria/ro… , so far there are only about 20 components, so it should not be too complicated to read, I hope to have a little help to partners with common needs, finally, kneel beg star⭐️⭐️~~