Dumi 1.0 was released on March 2nd this year, and it has been 304 days since then.

During this period, Dumi has become a component library r & D/document writing tool for 700+ community projects, with nearly 10K MONTHLY DOWNLOADS of NPM, nearly 300 issue feedback and 150+ PRs received, and countless friends who continuously help Dumi to improve and optimize. Thank you for your support for Dumi;

During this time, through constant feedback, feature planning, and iterative development, we have the new Dumi 1.1 ready to share with you on the eve of 2021.

To upgrade core

New features:

  • 📱 Mobile component development
  • 🎨 Custom theme
  • 🏷 Component API parsing
  • 🔌 integrates with Umi projects
  • 🌈 Richer document writing syntax
  • 📡 Data capability of assets

Improvement:

  • 📈 single test coverage from 57% -> 93%, more robust
  • 🛠 Markdown parsed the core logic refactoring and upgraded the Parser to Micromark for more stable JSX output
  • 🚀 Cache and compilation strategy optimization, startup and hot update significantly faster

Mobile component development

In the new mobile mode, Dumi provides developers with mobile simulation frame to display components, and provides a set of HD rendering scheme based on UMI-HD. Let’s have a look at the rendering effect of mobile mode:

Visit Dumi – Mobile Component Development to learn more.

Custom themes

When a tool meets its functional needs, personalization is bound to become a constant theme. Dumi not only brings theme customization this time, but also makes “customization” a step by step thing:

  • Support partial copying of themes: If Dumi’s default layout is basically what we want, we can partially duplicate dumi’s default layout by adding controls globally in the body area, such as a “one-click feedback” button
  • Support for extended Markdown tags: Dumi has extended Markdown tags such as Badge and Alert, and also allows developers to quickly extend their own Markdown tags, such as creating a global Feedback component to display Feedback
  • Support for local/theme package dual mode: developers can quickly create local themes in their projects or publish separate NPM theme packages for use by other Dumi projects

Dumi mobile component development is through the dumi-theme-mobile custom theme package to achieve, also want to start custom? Visit Dumi – Theme development to learn more.

Component API Parsing

We can automatically generate component API tables with JS Doc annotations and TypeScript type definitions.

As long as we write components in TypeScript, refine the type definitions, and add a few comments, Dumi can help us identify the type definitions and output them as API tables. For example, we write a component like this:

Render the corresponding API table using the
built-in component in Markdown:

Visit Dumi – Component API auto-generation to learn more.

Of course, automatic API generation is not an easy thing, because the real development of the component attribute complexity may be very surprising, we need to participate in the optimization, if you encounter problems during the use of the API automatic generation feature or have any idea, please go to the API automatic generation discussion post feedback.

Integration with Umi projects

In addition to independent component libraries, most of our projects will also have their own internal components. Managing these internal component libraries is often a headache, requiring no separate NPM packages to be released, but also iteration, update, specification, hand-off. To make the internal component library management of the project easier, Dumi launched Umi project integration mode:

  • isolated: All Dumi documents are concentrated in/~docsUnder routing, it is isolated from the original project and does not interfere with each other, which can be understood as a specific route prefix is added to standard Dumi documents, including user navigation and menu routing configuration
  • Does not affect production: only inNODE_ENV 是 developmentWhen integration, does not affect the production construction of the project
  • Can be built separately: If you need to build a separate document for deployment, you can do thisumi build --dumi, you can get a dumi site product in non-integrated mode,--dumi 在 umi devIt is also available on command

Visit the Dumi-Umi Project Integration pattern to learn more.

Richer document writing syntax

On top of 1.0, Dumi has added a number of new document syntax to help us write documents and demos faster and better:

  • Embed other Markdowns: dumi default to HTMLembedTags are extended to embed part or all of a Markdown document in another Markdown document,For details
  • Open built-in components: You can use the Badge, Alert built-in components to enrich the document content, more built-in components will be added in the future, learn more
  • Debug Demo: You can create a debug demo that is visible only in development mode to learn more
  • Enable the IFrame mode for Demo: Can be easily configurediframe: trueRender the demo inside an IFrame, which is more suitable for page-based components,For details

Data capability of assets

How to understand assets? In a narrow sense from a developer’s perspective, any entity that is produced to help downstream performance can be called an asset, such as a component, document, component API, component demo, and so on.

We are creating assets all the time in component development. The published NPM package is an asset, of course, but so are the TypeScript type definitions written and the carefully prepared component library demo. Now, with a single command, you can digitize the assets that Dumi and developers have worked on together. This data can be iterated and published along with the NPM package. It is then used by downstream tools.

For example, the asset data is handed over to the Umi UI for consumption, and the developer can use the Umi UI to insert component demos directly into the project:

This is just one way to consume data right now, and if you’re on a team that has other productivity tools, try using asset data to connect and help r&d improve performance.

Visit Dumi-UI asset datafication to learn more about the flow and consumption of asset data.

This update is fully compatible with version 1.0, so if you’re already using Dumi, you just need to update your dependencies. If you haven’t used Dumi yet, visit the Dumi website for a new component development experience: d.umijs.org

Thank you

Thank @Xiaohuoni, @Mortalyoung, @Xrkffgg and @LBWA for completing the research and development of DUMI 1.1 together.

Thanks to more than 40 friends who continuously help Dumi to improve and optimize:

Thank you for your feedback, suggestions and solutions on GitHub Issue, Dingspike Group and wechat Group.

With everyone’s participation, Dumi has grown; We still need everyone’s participation in the future so that Dumi can continue to grow. I look forward to meeting you on GitHub!

Make an advertisement

The annual SEE Conf is about to start. This conference will also include our exploration and practice of asset engineering link. Welcome to join us. Stamp the picture for details: