preface

Component library is an old talk, when it comes to corporate infrastructure, it will inevitably involve the construction of component library. While it may seem like the output of a component library is not that difficult given the amount of effort and time invested, considering the number of component libraries that are currently popular in the front-end market, it is still very small. Output, then, is not the same as excellence. Therefore, how to combine the business of the company at the same time, the excellent design and usability of component library is extremely necessary.

background

The team of the author is mainly engaged in interactive marketing activities. The basic types of activities can be enumerated. The current development status is as follows: Due to the particularity of the business, each developer happens to choose to develop corresponding activity components by himself, rather than reuse others’, which leads to reduced development efficiency and the output of the whole team, and is not conducive to the promotion of business model and design standardization. Therefore, it is imperative to establish a library of business model components that are abstract, highly reusable and integrated with design standards.

The target

  1. Support Comonjs, EsModule and other specifications, to provide full registration and local registration capabilities;
  2. Contains a well-readable documentation with interactive examples;
  3. Automatic deployment of document libraries and component libraries;
  4. Specification of project development, submission and version management;
  5. Component unit testing;
  6. Component UI design specification, API design naming specification, etc.
  7. The component developer development process is simple and efficient, and requires no additional mental burden.

start

The project architecture

Technology selection

  • Technical stack: vue >= 2.5.22 + TSX
  • Package management: vue-cli + yarn workspace
  • Packaging tool: Rollup + Babel
  • Code specification: stylelint + ESLint + prettier
  • Version log management: standard-version + Changelog
  • Document library: Vuepress
  • Unit tests: JEST

The development process

How to simplify the development process?

What is a good development mode? Component developers only need to pay attention to the component modules they develop, including component source code, documents and demo should be developed under the current component file module. The whole project is responsible for rendering the corresponding module.

  • The readme. md file of the component needs to be synchronized to the ‘vuepress’ project directory to realize hot update of the document. Therefore, during the project startup phase, it is necessary to start an additional file replication service to listen for changes in the.
  • Routes of the Demo service are registered according to the demo files of components. When the Demo files are changed, the demo service is hot updated in real time.

Compile the package

Ts/TSX composite compilation

This is compiled using the ‘transformAsync’ API provided by the ‘Babel’ core library, and the Babel configuration includes several presets called ‘preset’, including ‘preset-typescript’ and ‘preset- JSX’.

Less style compilation

Less can be compiled to CSS using the ‘render’ function provided by the less package, but it requires further automatic browser prefix compatibility with the CSS, which can be achieved through the ‘postCSS’ plugin.

Vue single file compilation

A vue file contains a ‘template’, ‘script’, and multiple ‘style’ modules, so these modules need to be compiled separately. Since all vue single files in ‘webpack’ are compiled and parsedby ‘vue-loader’, consider starting with the Loader. The following apis are included:

compileUtils
vueTemplateCompiler
Copy the code

Using these apis, you can get the source code of each block. The source code of ‘script’ modules needs to be compiled into ‘render’ functions and then assembly into the corresponding ‘render options’, and the source code of’ style ‘modules needs to be’ scoped ‘. At compile time, add a ‘scopedId’ as the unique element class name identifier.

Packaging goals

You need to support the ‘esModule’ specification and ‘CommonJS’ specification, and to optimize the user experience, you need to import and load as needed, that is, ‘tree-shaking’.

Vuepress step pit summary

Question 1: The default vuepress theme is not pretty, how to customize the theme?

Vuepress’s default theme is not suitable for all developers, so it provides a custom theme entry to the outside world. Simply reorganize the themes according to the convention theme directory structure provided in the official document:

After completing the theme development in accordance with the official convention specifications, Vuepress will automatically reference and render your theme.

Question 2: How does Vuepress register page routing?

Vuepress automatically registers the routing address of the page based on the address in the directory where docs are located. Therefore, manual registration is not required.

Question 3: How do I render the contents of Markdown?

Vuepress provides a markdown slot. For normal Content in a MarkDown file, it becomes the default Content of the slot. You can access it directly using the ‘Content’ component:

<Content />
Copy the code

Question 4: How do I obtain global routing information and customize the order of the sidebar page routing?

  1. In the compilation phase, vuepress provides developers with global computing attributes, including site data site and page data site and page data page, routing information is included in it;

  2. The vuepress Markdown file can contain ‘YAML front matter’ and must be the first part of the file. The basic example is as follows:

    Group: basic component level: 1

You can obtain the configuration item from $frontMatter on the page. ‘group’ is the name of the group where the current page resides, and ‘level’ is the level size of the group where the current page resides. You can use the two configuration items to sort the initialized routes.

Question 5: How do I introduce the source code for demo cases into the documentation?

The MarkDown document in Vuepress supports importing code snippets as follows:

<<< @/filepath
<<< @/filepath{highlightLines}
Copy the code

Where ‘filepath’ is the path to the object file to import the source code, ‘highlightLines’ is the number of lines of code highlighted.

And to enable importing only part of the target file on demand, it supports’ VS Code region ‘, which provides a custom region name (preset to snippet) immediately after the ‘#’ at the end of the file path.

Input:

< < < @ /.. /@vuepress/markdown/__tests__/fragments/snippet-with-region.js#snippetCopy the code

If you need to import multiple code blocks in the same source file, you need to add the markdown configuration item in the global ‘config.js’ as follows:

Question 6: How do I load the Demo service started by vuepress

Considering that the project needs to start two services at the same time, the port number of the two services must be inconsistent, so the cross-domain problem is inevitable, so consider using ‘iframe’ to load the Demo service.

Question 7: How can I solve the routing synchronization problem between the document service and demo service?

Case 1: Click the route on the navigation bar of the document service. How can the Demo service synchronize the route of the corresponding component case page?

Solution: Dynamically change the ‘SRC’ address of ‘iframe’.

Case 2: Click the component list item of the Demo service. How can the document service be synchronized to the route of the corresponding component document page?

Solution: Cross-domain communication is carried out through ‘postMessage’, the child window sends messages, and the parent window listens to the ‘message’ event to obtain the routing data sent by the child window, and navigates to the specified document page through the route.

Question 8: How do pages in the Demo service refer to the locally packaged component source code?

Given the introduction pattern of the consumer when using the component library we developed, we need to validate the availability of the packaged source code by introducing the packaged component source.

Use the webpack configuration item ‘resolve/alias’ provided by’ vue-cli ‘to configure the alias to point to the packaged directory, and ensure that the referenced source code is always up to date by starting a service that listens for changes and compiles the files in real time during project startup:

Const resolve = (dir) => path.join(__dirname, dir)resolve: {alias: {"@tuia/market-ui": Resolve ("es")}} import {component} from '@tuia/market-ui'Copy the code

Afterword.

To be continued, we will continue to update ‘component API design specifications’,’ unit testing ‘and’ automated deployment ‘as the project progresses. Stay tuned ~ ~ ~