Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ stats.html
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
!.vscode/tasks.json

.coveralls.yml
packages/examples-react/build
Expand Down
7 changes: 7 additions & 0 deletions .prompts/build-examples.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
isCommand: true
commandName: build-examples
commandDescription: Build the JSON Forms examples application
---
Run the "Build Examples App" task to build the examples application for JSON Forms.
~{runTask}
7 changes: 7 additions & 0 deletions .prompts/build.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
isCommand: true
commandName: build
commandDescription: Build the JSON Forms project
---
Run the "Build" task to compile the entire JSON Forms project.
~{runTask}
7 changes: 7 additions & 0 deletions .prompts/clean.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
isCommand: true
commandName: clean
commandDescription: Clean the JSON Forms project build artifacts
---
Run the "Clean" task to remove build artifacts and clean the JSON Forms project.
~{runTask}
7 changes: 7 additions & 0 deletions .prompts/lint-fix.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
isCommand: true
commandName: lint-fix
commandDescription: Run linting and auto-fix issues in the JSON Forms project
---
Run the "Lint Fix" task to automatically fix linting issues in the JSON Forms project.
~{runTask}
7 changes: 7 additions & 0 deletions .prompts/lint.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
isCommand: true
commandName: lint
commandDescription: Run linting checks on the JSON Forms project
---
Run the "Lint" task to check the code for linting errors in the JSON Forms project. ~{runTask}
~{runTask}
55 changes: 55 additions & 0 deletions .prompts/project-info.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
## JSON Forms Project information

JSON Forms is a declarative framework for efficiently building form-based web UIs.
These UIs are targeted at entering, modifying and viewing data and are usually embedded within an application.

Any UI is defined by using two schemata:
- The JSON schema defines the underlying data to be shown in the UI (objects, properties, and their types)
- The UI schema defines how this data is rendered as a form, e.g. the order of controls, their visibility, and the layout.
If no UI schema is given, JSON Forms generates one based on the given JSON schema.

We put great emphasis on the customizability and extensibility of JSON Forms.

### Architecture overview

The JSON Forms mono repository consists of these packages:
- `@jsonforms/core` in `packages/core`: Provides utilities for managing and rendering JSON Schema based forms.
The core package is independent of any UI technology.
- `@jsonforms/react` in `packages/react`, `@jsonforms/angular` in `packages/angular`, `@jsonforms/vue` in `packages/vue`.
These use the core package to provide specialized bindings for React, Angular and Vue, leveraging each respective's state management and rendering systems.
- For React we maintain two renderer sets: The `@jsonforms/material-renderers` in `packages/material-renderers`, which are based on the popular Material-UI framework and `@jsonforms/vanilla-renderers` in `packages/vanilla-renderers` which provides pure HTML5 renderers.
For Angular we provide an Angular Material based renderer set (`@jsonforms/angular-material` in `packages/angular-material`). For Vue we provide a HTML5 based renderer set `@jsonforms/vue-vanilla` in `packages/vue-vanilla` and a Vuetify based one `@jsonforms/vue-vuetify` in `packages/vue-vuetify`.

### Mono-repo Setup

- Package Manager: pnpm with lerna for orchestration
- Dependency Management: Each package declares all its dependencies explicitly (no hoisting assumptions). We aim to use the same dependency versions across packages (e.g. for Typescript or Jest)
- Testing: Independent test setup per package. Tests are implemented in separate folder `test` or `tests` within a package.
- Build: Each package has its own build configuration. Rollup is the default tool except if there are other typical tools for the respective technology (e.g. Angular)
- Linting and Formatting: Each package has its own `.eslintrc.js` and `.prettierrc.js` config
- Typescript: Packages extend common base config `tsconfig.base.js`

### Core principles

JSON Forms uses a reducer-style approach for its state management.
The form-wide state is manipulated via the reducers in `packages/core/src/reducers`.

Renderers are registered in a registry, consisting of tester, renderer pairs.
For each UI Schema element to be rendered, all testers are asked for their priority.
The highest priority wins and the respective renderer gets full control over rendering.
The renderer may dispatch back to JSON Forms to render children elements.

Dispatchers only receive a minimal amount of properties, e.g. which part of the JSON Schema they are refering to and which UI Schema element is to be rendered.
Mappers in packages/core/src/mappers are then used to determine the actual props for the renderers to work with, combining the handed over dispatch props and the form-wide state.

The binding packages `@jsonforms/react`, `@jsonforms/angular` and `@jsonforms/vue` bind these functionalities to mechanisms of their respective framework.
The renderers then use the bound functionalities and usually do not interact with `@jsonforms/core` directly.

### Coding Guidelines

When creating new functions we prefer the arrow style approach

### Development Guidelines

The framework is popular, therefore we never break adopters if we don't have to.
Consider this for all changes.
7 changes: 7 additions & 0 deletions .prompts/test.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
Copy link
Member Author

@sdirix sdirix Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The slash commands are meant to model use cases, so we should not have a separate command for the LLM to just execute a single task, this would probably be typed almost as fast manually by the user.

Instead it should cover a workflow, similar like this (untested):

---
isCommand: true
commandName: develop-feature
commandDescription: Develop a feature for JSON Forms
---

Use the ~{runTask} tool to interact with the JSON Forms code base:
 - Run `build` tasks in each modified package or in the repository root to rebuild
 - Use `lint` tasks to lint modified packages
 - Use `test` tasks to run the unit tests
 - Use "build:examples-app" to build the example application

After you are satisfied run the github-agent to commit the changes.

$ARGUMENTS
---
isCommand: true
commandName: fix-bug
commandDescription: Fix a bug for JSON Forms
---

## Fixing a bug in JSON Forms

You are tasked with fixing a bug in JSON Forms.

Perform the following actions:

1. Analyze the bug description
2. Generate a set of unit tests to reproduce the described issues
3. Fix the issue
4. Rerun the unit tests to confirm issue is fixed

Use the ~{runTask} tool to interact with the JSON Forms code base:
 - Run `build` tasks in each modified package to make sure they are still compiling
 - Use `lint` tasks to lint modified packages, making sure that there are no lint warning or errors after applying changes
 - Use `test` tasks to run the unit tests

## Issue description

$ARGUMENTS

This is just a minimal example. The commands could be more detailed too, for example instructing the LLM to find an example in which an issue can be reproduced. Building and starting the example application, using the App-Tester agent to interact with the examples app to verify the issue is reproducible and/or can be fixed. Instructing to commit the changes or interacting with GH to retrieve information instead of having to paste it manually.

The idea is to instruct the agent with a common development/process loop so that we don't need to repeat it every time when working on a new feature, reproducing a bug, fixing a bug etc.

See here for a more complex example in Theia AI: https://github.com/eclipse-theia/theia/pull/16704/changes#diff-13e142c30c0be119266e6577fe8c5561279d274c3ffd4888ff930487cecb6f01R46

isCommand: true
commandName: test
commandDescription: Run tests for the JSON Forms project
---
Run the "Test" task to execute the test suite for the JSON Forms project.
~{runTask}
80 changes: 80 additions & 0 deletions .vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
{
Copy link
Member Author

@sdirix sdirix Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basic tasks which are just executing npm scripts are already automatically derived in Theia and VS code from the package.json files and therefore do not need to be repeated manually. We can just instruct the LLM to use them in the runTask tool.

"version": "2.0.0",
"tasks": [
{
"label": "Build",
"type": "shell",
"command": "pnpm",
"args": ["run", "build"],
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": ["$tsc"],
"presentation": {
"reveal": "always",
"panel": "shared"
}
},
{
"label": "Test",
"type": "shell",
"command": "pnpm",
"args": ["run", "test"],
"group": "test",
"problemMatcher": [],
"presentation": {
"reveal": "always",
"panel": "shared"
}
},
{
"label": "Lint",
"type": "shell",
"command": "pnpm",
"args": ["run", "lint"],
"group": "none",
"problemMatcher": ["$eslint-stylish"],
"presentation": {
"reveal": "always",
"panel": "shared"
}
},
{
"label": "Build Examples App",
"type": "shell",
"command": "pnpm",
"args": ["run", "build:examples-app"],
"group": "build",
"problemMatcher": ["$tsc"],
"presentation": {
"reveal": "always",
"panel": "shared"
}
},
{
"label": "Lint Fix",
"type": "shell",
"command": "pnpm",
"args": ["run", "lint:fix"],
"group": "none",
"problemMatcher": ["$eslint-stylish"],
"presentation": {
"reveal": "always",
"panel": "shared"
}
},
{
"label": "Clean",
"type": "shell",
"command": "pnpm",
"args": ["run", "clean"],
"group": "none",
"problemMatcher": [],
"presentation": {
"reveal": "always",
"panel": "shared"
}
}
]
}