DSingh0304 commented on issue #2986:
URL:
https://github.com/apache/apisix-dashboard/issues/2986#issuecomment-3656971549
Hi @baoyuan, thanks for the guidance via the mailing list.
I have conducted a technical evaluation of potential solutions for
auto-generating plugin forms, focusing on **Bundle Size**, **Integration**
(React Hook Form + Mantine/AntD), and **Schema Compatibility**.
Here are my findings and recommendation:
### 1. Landscape Analysis
The current `apisix-dashboard` stack relies on:
- **State Management:** `react-hook-form` (v7)
- **UI Components:** `antd` (v5) + `@mantine/core` (v7)
- **Validation:** `zod`
Any new solution should ideally leverage these existing dependencies rather
than introducing a second form state manager.
### 2. Candidate Comparison
| Metric | **A. react-jsonschema-form** (RJSF) | **B. Formily** | **C.
Custom RHF Adapter** (Recommended) |
| :--- | :--- | :--- | :--- |
| **Bundle Size (Min+Gzip)** | **~69.4 kB** (Core + Validator) | **~67 kB**
(Core + React) | **~15-20 kB** (AJV + Adapter logic) |
| **State Manager** | Internal (Redux-like) | Internal (Observable) |
**react-hook-form` (Native)** |
| **UI Integration** | Good (Official AntD theme) | Complex (Requires
adapter) | **Perfect** (Direct usage of Mantine/AntD) |
| **Customization** | Hard (requires wrapper widgets) | Medium | **Easy**
(Standard React components) |
#### Analysis of Options
**Option A: react-jsonschema-form (RJSF)**
* *Pros:* Battle-tested, supports Draft 7 standard out-of-the-box.
* *Cons:* **Heavy.** It introduces its own state management system,
creating a "black box" inside our existing RHF forms. The bundle size impact
(~70kB) contradicts the goal of a lightweight dashboard.
**Option B: Formily**
* *Pros:* Very powerful for complex enterprise forms.
* *Cons:* **Overkill.** High learning curve and heavy bundle size. It
duplicates the functionality of `react-hook-form`, which we already use.
**Option C: Custom Adapter (JSON Schema -> React Hook Form)**
* *Concept:* Build a dedicated `PluginForm` component that maps JSON
Schema types directly to our existing `Mantine/AntD` components, controlled by
`react-hook-form`.
* *Pros:*
* **Zero Logic Duplication:** Reuses `react-hook-form` for
state/validation.
* **Tiny Footprint:** Only requires a schema validator (likely `ajv`,
~20kB) and mapping logic.
* **Consistent UI:** We render *our* actual components, complete with
our specific classes/styles, not a 3rd party's abstraction of them.
* *Cons:* Initial setup requires writing the mapping logic (Schema Type ->
Component).
### 3. Recommendation
I strongly recommend **Option C (Custom RHF Adapter)**.
Since the dashboard already pays the cost for `react-hook-form`, `antd`, and
`mantine`, we can build a lightweight generator that simply "glues" them
together based on the schema.
**Proposed Architecture:**
1. **Validator:** Use `ajv` (Draft 7 compatible) to validate the form state
against the plugin schema.
2. **Mapper:** Create a `SchemaField` component that recursively renders
the correct UI widget:
* `type: string` -> `<TextInput />` (Mantine)
* `type: boolean` -> `<Switch />` (Mantine)
* `enum: [...]` -> `<Select />` (AntD/Mantine)
3. **State:** Connects directly to the parent `useForm` context.
I am happy to proceed with creating a **Proof of Concept (POC)** for Option
C to demonstrate how it handles a complex plugin schema (e.g., `limit-count`)
if this direction aligns with the team's vision.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
