---
title: Declaration and Usage
---

# Introduction

Due to execution environment factors, [Render Script](../api/render) cannot directly use functional modules such as third-party chart libraries and 3D libraries to introduce plug-in mechanisms. Adaptation support is provided by the official.

Provide some commonly used modules for development in the form of plug-ins, After declaring the plugin configuration, you can import the corresponding plugin module using the `requirePlugin` method.

Environmental requirements:

- Base library version `>= 2.18.0`
- Tuya MiniApp IDE `>= 0.6.3` [Download](../../../../devtools/tools/download)

## Declaring Plugins

Declare the plugin names in the `app.json` file using the `usingPlugins` field. The specific names are provided by the official documentation. Please refer to the following list for details.

For example:

```json
{
  "usingPlugins": ["rjs://echarts"]
}
```

## Using Plugins

You can use the global function `requirePlugin` to import the exported module of the plugin, supporting both single and multiple imports.

```ts
// Importing a single plugin module
type requirePlugin = (plugin: string) => Promise<Module>

// Importing multiple plugin modules
type requirePlugin = (plugins: string[]) => Promise<Module[]>
```

For example:

```js
// pages/index/index.rjs
export default Render({
    async init() {
        const echarts = await requirePlugin('rjs://echarts');
    }
})
```

```js
// pages/index/index.rjs
export default Render({
    async init() {
        const [echarts, charts] = await requirePlugin(['rjs://echarts/core', 'rjs://echarts/charts']);
        const { BarChart } = charts;
    }
})
```

If the corresponding plugin is not declared in "usingPlugins", an error will be thrown.

```js
// pages/index/index.rjs
export default Render({
    async init() {
        const echartsCore = await requirePlugin('rjs://echarts/core').catch((err) => {
          console.log(err); // The plugin rjs://echarts/core is not declared in usingPlugins.
        });
    }
})
```

## Official Plugin List

Officially provided plugin modules can be imported using the `requirePlugin` method. If a plugin module is not listed, you can submit a request on the forum if needed.

**The available plugin modules are:**

### [echarts](https://echarts.apache.org/en/index.html) Plugin

Used to render echarts charts in Render _\*.rjs_ files.

Please install the corresponding npm package before use:

```bash
npm install echarts
```

**Plugin Path Format**

- `rjs://echarts` is equivalent to `import * as echarts from 'echarts'`
- `rjs://echarts/core` is equivalent to `import * as echarts from 'echarts/core';`
- `rjs://echarts/charts` is equivalent to `import { BarChart } from 'echarts/charts';`

> Similarly, all file modules of `echarts` can be imported.

### [three.js](https://threejs.org/) Plugin

Used to render three.js 3D graphics in Render _\*.rjs_ files.

Please install the corresponding npm package before use:

```bash
npm install three
```

**Plugin Path Format**

- `rjs://three` is equivalent to `import * as THREE from 'three';`
- `rjs://three/addons/loaders/GLTFLoader` is equivalent to `import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';`

> Similarly, all file modules of `three.js` can be imported.

### [@antv/f2](https://f2.antv.antgroup.com/) Plugin

Used to render F2 charts in Render _\*.rjs_ files.

Please install the corresponding npm package before use:

```bash
npm install @antv/f2
```

**Plugin Path Format**

- `rjs://@antv/f2` is equivalent to `import F2 from '@antv/f2';`

> Similarly, all file modules of `@antv/f2` can be imported.

## DEMO Demonstration

- [rjs-plugin](https://github.com/Tuya-Community/tuya-miniapp-demo/tree/rjs-plugin) Native Miniapps example project
- [ray-rjs-plugin](https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayRjsPlugin) Ray-Based development example project

## Notes

### Export of modules

The object returned by the plugin module depends on the specific file implementation, so developers need to verify it themselves.

Module implementation:

```js
export default {}
```

To access the exported object, use `module.default`.

```js
const module = await requirePlugin('rjs://module');

module.default;
```
### Using plug-ins in Ray-Based Miniapps

It is recommended to use the native applet syntax to write [component](../component/intro), and then introduce custom components through hybrid development in the Ray development mode. For details, see [Hybrid Development](../../../ray/framework/mixed-development).

The declaration of `usingPlugins` corresponds to the configuration in `src/global.config.js`. For details, see [Application Configuration](../../../ray/framework/app).

```js
export const tuya = {
  // other config
  usingPlugins: ['rjs://echarts']
}
```