NPM Component Extension Package Design and Development Practice for Baidu's Low-Code Platform

Components are one of the core capabilities of the visual page building module in Baidu's low-code platform (爱速搭). The platform provides over 120 built-in functional components covering most middle-office page visualization design scenarios. For complex business scenarios requiring customized UI or intricate interactions, 爱速搭 offers a custom component extension mechanism.

Currently, three custom component extension methods are supported: Custom Component, Online Custom Component, and NPM Component Extension Package. This article focuses on the NPM Component Extension Package approach, which allows importing NPM packages to extend component materials, supporting local IDE pure coding development mode with high flexibility for developing custom components in any complex business scenario.

Core Functions of NPM Component Extension Package:

Support for extending multiple custom components simultaneously within one package

Support for multiple technology stacks including Vue 2.0, Vue 3.0, React, jQuery, and UniApp

Three local preview and debugging methods: Component Preview Mode (preview), Local Development Mode (dev), and External Link Debugging (linkDebug)

Support for multiple types of custom component extensions: amis custom components for web applications, mini-program custom components, and quick-app custom components

Working Principle:

A complete custom component contains two core modules: the amis renderer and the amis-editor plugin. The amis renderer is required for page rendering; without it, custom components cannot be displayed. The amis-editor plugin is the key module for integrating with the page designer, used for setting display positions in the component panel, initial data configuration, and all designer-related settings.

Development tools include amis-widget (provides methods for registering amis renderers and editor plugins) and amis-widget-cli (scaffolding for developing custom components based on AKFun).

Multi-Technology Stack Support:

Since 爱速搭 and amis are based on React technology stack, custom components from other technology stacks cannot run directly on the platform. The solution is to wrap non-React components into React component objects before registration. The article provides key methods for converting Vue 2.0 and Vue 3.0 component objects to React components.

Development Steps:

Install amis-widget-cli globally

Initialize NPM component extension package using amis init command

Develop custom component using desired technology stack

Register component using registerRendererByType method

Configure basic properties and configurable items using registerAmisEditorPlugin method

Preview and debug locally using npm run preview or npm run dev

Debug in 爱速搭 platform using npm run linkDebug

Build and publish to NPM repository

The article also addresses common questions about using NPM for component hosting, converting existing business components, and supporting private NPM repositories for confidential business components.