Taro version 3.1 is available: Applets for customization

Since the launch of Taro 3.1, we have been continuously refining version 3.1 based on community feedback. We improved the open architecture, introduced a CustomWrapper component to address performance issues, and proposed a solution of progressive integration of native applets using Taro.

After 12 beta releases, the official 3.1 version is here at 🎉

A, Highlights

1. Open architecture

In recent years, more and more small program platforms have been launched in the industry. However, there are only six platforms for Taro’s core maintenance. Therefore, students often ask whether they can support the Feature Request of such and such platform.

Based on the current architecture, supporting a new platform is complex and difficult for the community to contribute to.

To this end, we have built Taro into an open framework that can support any applets platform through the end platform plugin:

Plugin developers can write a terminal platform plug-in without modifying the Taro project source code.
Plug-in users simply install and configure the terminal platform plug-in to compile code to the specified platform.

Based on the open architecture, we’ve added some interesting plugins, and we’re excited to see people get creative with it.

New plug-ins:

The plug-in	function
@tarojs/plugin-platform-weapp-qy	Compile enterprise wechat applets
@tarojs/plugin-platform-alipay-dd	Compile the pin applet
@tarojs/plugin-platform-alipay-iot	Compile alipay IOT applet
@tarojs/plugin-inject	Quick additions for all applets platformsAPI,component.Adjusting component propertiesEtc.

2. Added the applets performance optimization component CustomWrapper

Taro3 renders using

To do this, we introduced a base component, CustomWrapper, which creates a native custom component. The setData of the descendant node will be called from this custom component to achieve the effect of local update, thus improving the update performance.

Developers can use CustomWrapper to wrap components that encounter performance issues with updates:

<CustomWrapper>
  <GoodsList>
    <Item />
    <Item />
    // ...
  </GoodsList>
</CustomWrapper>
Copy the code

For more detailed performance optimization principles, please refer to “Taro Help Jingxi Project Performance Experience Optimization”.

3. Progressive mixed use of native small program Taro development

In the past, we have supported a mix of native uses in the Taro project. Conversely, there is little emphasis on mixing Taro with native projects. However, there are plenty of native development applets on the market, and the transformation cost for them to integrate Taro’s development is often very high, so they have to give up the idea of hybrid development at last.

Through the cooperation with Jingxi Spelling project, we are also driven to pay more attention to this part of the demand. Taro has launched a complete mix of native programs using Taro’s program.

The solution mainly supports three scenarios:

Use the pages developed by Taro in native projects.
Run complete Taro projects in subcontracting of native projects.
Use custom components developed by Taro in native projects.

We hope that the above solutions will satisfy students who plan to gradually join the development of Taro. For more comments, please leave us a comment on Github.

4. Embrace React 17, TypeScript 4

4.1. Method of use

New project:

Templates rely on React 17 and TypeScript 4 by default and can be used directly.

Old items:

Manual upgrade project dependencies:

React: ^ 17.0.0
The react - dom: ^ 17.0.0
Typescript: ^ 4.1.0
@ typescript eslint/parser: ^ 4.15.1
@ typescript - eslint/eslint - plugin: ^ 4.15.1

Setting the ESLint configuration:

// .eslintrc
module.exports = {
  "extends": ["taro/react"]."rules": {
    "react/jsx-uses-react": "off"."react/react-in-jsx-scope": "off"}}Copy the code

4.2. React Is supported by defaultNew JSX Transform

The New JSX Transform eliminates the need to introduce React before writing JSX.

If you don’t want to enable this function, you can change the reactJsxRuntime option in the Babel configuration to classes:

// babel.config.js
module.exports = {
  presets: [['taro', {
      framework: 'react'.ts: true.reactJsxRuntime: 'classes'}}]]Copy the code

4.3. React H5 is enabled by defaultfast-refresh

If you do not want to enable this feature, you can modify the Taro configuration and Babel configuration:

// config/index.js
const config = {
  h5: {
    devServer: {
      hot: false}}}// babel.config.js
module.exports = {
  presets: [['taro', {
      framework: 'react'.ts: true.hot: false}}]]Copy the code

Second, the Breakings

1. React

The React version of the project must >= 16.14.0, or use 17.0.0+

2. Vue2

Fixed Vue2 entry component lifecycle trigger multiple times, #7179

User-written entry components need to be modified as follows:

// app.js

Vue objects need to be created in 3.0
const App = new Vue({})

In 3.1 you only need to return object literals
const App = {}
Copy the code

3. Linaria

To use Linaria, you need to modify the contents of linaria.config.js.

module.exports = {
  rules: [{action: require("linaria/evaluators").shaker,
    },
    {
      // The re is changed here
      test: /node_modules[\/\\](? ! @tarojs)/,
      action: "ignore"}}]Copy the code

Three, features,

componentViewincreasecatchMoveProperty, resolveScroll throughThe problem.
Synchronize all built-in applets official latest API, component capabilities.

4. Problem repair

1. The important

Fix baidu small program rendering problem, #7293.
Fix and enhance the ability of wechat applet to convert Taro.
Optimize packing volume.
Alipay applet supports referencing custom components.
Fix for applets sharing API not working with Redux, #7232.

2. Small programs

Fix multiterminal files not according to WebpackextensionConfiguration parsing problem, #6786, #7265.
Fixed failure to set style property #8678.

3. H5

Fixed HMR failure on H5 terminal.
To support routing404Triggered whenApp.onPageNotFoundAnd # 7474.
Fixing form componentsslotCompatibility issues, #7363.
repairView 和 TextComponent multi-line truncation style failure, #7472 #6741.
The component’sstyleProperty supports setting CSS variables, #7452.

V. Upgrade Guide

Those who are upgrading from v2.x should follow the migration guide first.

To upgrade from v3.x, you need to install the CLI tool of V3.1:

npm i -g @tarojs/cli
Copy the code

Then go to the project and delete node_modules, yarn.lock, package-lock.json.

Finally, change the version of the Taro dependencies in package.json file to ^3.1.0 and reinstall the dependencies. The upgrade is complete.

6. Future planning

Thanks to the support of the 58 tech team, Taro 3 is coming soon to support React Native, which is now available in a Beta version of 3.2.0. The official version of 3.2.0 will be available later this month. First taste: Add Support for React Native (Taro 3.2.0)

Thank you,

Open source is not easy, you need to adhere to. The Taro team would like to extend our heartfelt thanks to all the friends who have participated in the construction of the open source project, whether they have submitted code for Taro, built the surrounding ecology, provided feedback, or even just discussed and joked with us over dinner.

We sincerely invite you to communicate with the official Taro team about your use. With your company, Taro will be more exciting! Address of the questionnaire

Finally, special thanks to all of you who contributed code to Taro’s journey from V3.0 to V3.1, in no particular order:

@wuchangming
@SyMind
@zhuxianguo
@Songkeys
@vdfor
@ZeroTo0ne
@zhaoguoweiLLHC
@Spencer17x
@wingsico
@w91
@fjc0k
@Leechael
@southorange1228
@alexlees
@cncolder
@rottenpen
@gcxfd
@twocucao
@pengtikui
@kala888
@LengYXin
@iugo
@jin-yufeng
@xuchengzone
@csolin
@xiaoyao96
@baranwang
@fred8617
@huanz
@Cslove
@002huiguo
@jazzqi
@Jetsly
@yuezk
@lukezhange001
@k55k32
@Soul-Stone
@hisanshao
@gjc9620
@younthu
@digiaries
@GoodbyeNJN
@Swordword
@helsonxiao
@Ininit
@atzcl
@taoqf
@Aysnine
@cjz9032
@z3rog
@doublethinkio
@Jackyzm
@ywzou
@koalaink
@mosqlee
@wangjuerong
@kdxcxs
@LiHDong
@ryougifujino
@GitaiQAQ
@logix-o
@CallMeXYZ

Welcome to submit your case written with Taro: docs. Taro. Zone/Showcase

Welcome to the Taro Community public account.