What’s New in Taro Next? H5 Support, React/Vue Conversion, Virtual List & CSS‑in‑JS

H5 Compilation Support

H5 compilation is a key reason for the upgrade. Install the runner with @tarojs/webpack-runner and execute taro build --type h5 --watch to build for the web. The H5 side is a complete rewrite: all base components are built with Web Components, the routing system is fully decoupled from any front‑end framework, and the output runs on React, Vue, or Nerv without modification.

$ npm i -D @tarojs/webpack-runner@next
$ taro build --type h5 --watch

WeChat Mini‑Program to React/Vue Conversion

Since Taro 1.2, the taro convert command can transform a WeChat mini‑program project into a multi‑platform app with either React or Vue code. Run the command in the project root and select the desired framework.

$ taro convert

HTML String Rendering

The previously used wxparse library is complex, poorly extensible, and no longer maintained. Taro Next provides a native HTML rendering API that aligns with web standards: use React’s dangerouslySetInnerHTML or Vue’s v-html, style tags directly with CSS, bind events to rendered elements, and hook into the parsing/rendering process for custom behavior.

Web‑consistent API (dangerouslySetInnerHTML / v-html)

CSS can control tag styles directly

Event binding on rendered HTML elements

Hook functions for customized rendering

CSS‑in‑JS with Linaria

While styled‑components works in React, it relies on the <style> tag, which is unavailable in mini‑programs. Taro adopts linaria to offer a similar API with full TypeScript support and zero runtime overhead, crucial for keeping bundle size small on constrained platforms.

API similar to styled‑components

Complete TypeScript integration

Zero runtime cost

Virtual List (VirtualList)

Rendering extremely large lists can freeze the UI. The VirtualList component renders only the items visible in the viewport and lazily renders off‑screen items when the user scrolls. This concept mirrors Android’s RecyclerView and React Native’s VirtualizedList , and the component is available across React, Vue, mini‑programs, and H5.

import VirtualList from '@tarojs/components/virtual-list'

Plugin System

Since version 2.2, Taro supports a plugin mechanism for extending functionality or adding custom business features. In Taro Next, the official @tarojs/plugin-mock provides a simple data‑mocking capability.

Progress Toward a Stable Release

After the Beta release, development focused on open‑source governance and the introduction of an RFC process to make major changes transparent and community‑driven. Documentation has been reorganized for better navigation. The RC stage is feature‑freeze, concentrating on bug fixing before the final stable release.

References

[1] Taro 1.2 release – https://aotu.io/notes/2018/12/17/taro-1-2/

[2] wxParse – https://github.com/icindy/wxParse

[3] HTML rendering docs – https://taro-docs.jd.com/taro/next/docs/html.html

[4] styled‑components – https://github.com/styled-components/styled-components

[5] Linaria – https://github.com/callstack/linaria

[6] CSS‑in‑JS guide – https://taro-docs.jd.com/taro/next/docs/css-in-js.html

[7] Android RecyclerView – https://developer.android.com/reference/android/support/v7/widget/RecyclerView

[8] React Native VirtualizedList – https://reactnative.dev/docs/virtualizedlist

[9] Virtual list documentation – https://taro-docs.jd.com/taro/next/docs/virtual-list.html

[10] Taro RFC process – https://github.com/NervJS/taro-rfcs