From ea3d36e8cff0e44a1db3c83f7302e26d247eec3d Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Tue, 22 Jul 2025 11:18:42 +0200 Subject: [PATCH 1/5] dev: add project information for Theia AI Adds '.prompts/project-info.prompttemplate' to hand over JSON Forms project information to Theia AI. --- .prompts/project-info.prompttemplate | 46 ++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 .prompts/project-info.prompttemplate diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate new file mode 100644 index 000000000..97bde9a2d --- /dev/null +++ b/.prompts/project-info.prompttemplate @@ -0,0 +1,46 @@ +## 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, it will be auto generated + +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`. + +### 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. From 05fb2301a501e39c4cc583979c2d6ee55c648e27 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Tue, 16 Dec 2025 14:28:44 +0100 Subject: [PATCH 2/5] Apply suggestions from code review --- .prompts/project-info.prompttemplate | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate index 97bde9a2d..32bb7dc72 100644 --- a/.prompts/project-info.prompttemplate +++ b/.prompts/project-info.prompttemplate @@ -6,7 +6,7 @@ These UIs are targeted at entering, modifying and viewing data and are usually e 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, it will be auto generated + 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. @@ -23,9 +23,9 @@ The JSON Forms mono repository consists of these packages: ### 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. +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. +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. From 40b47e680c684176079f1e27392d5f45d449a8c4 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Tue, 16 Dec 2025 16:04:57 +0100 Subject: [PATCH 3/5] dev: Add VSCode tasks for common dev commands Add VSCode tasks to execute root commands: - build and build examples app - test - clean - lint and lint fix --- .gitignore | 1 + .vscode/tasks.json | 80 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 .vscode/tasks.json diff --git a/.gitignore b/.gitignore index 658b9f0e0..d3b39378e 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,7 @@ stats.html .vscode/* !.vscode/extensions.json !.vscode/settings.json +!.vscode/tasks.json .coveralls.yml packages/examples-react/build diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 000000000..ce1a618c0 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,80 @@ +{ + "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" + } + } + ] +} From 3a818b112528de5b4c4b617c67e4bef55696c9b8 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Tue, 16 Dec 2025 17:07:56 +0100 Subject: [PATCH 4/5] dev: Add Theia AI slash commands for common dev tasks --- .prompts/build-examples.prompttemplate | 7 +++++++ .prompts/build.prompttemplate | 7 +++++++ .prompts/clean.prompttemplate | 7 +++++++ .prompts/lint-fix.prompttemplate | 7 +++++++ .prompts/lint.prompttemplate | 7 +++++++ .prompts/test.prompttemplate | 7 +++++++ 6 files changed, 42 insertions(+) create mode 100644 .prompts/build-examples.prompttemplate create mode 100644 .prompts/build.prompttemplate create mode 100644 .prompts/clean.prompttemplate create mode 100644 .prompts/lint-fix.prompttemplate create mode 100644 .prompts/lint.prompttemplate create mode 100644 .prompts/test.prompttemplate diff --git a/.prompts/build-examples.prompttemplate b/.prompts/build-examples.prompttemplate new file mode 100644 index 000000000..34c883430 --- /dev/null +++ b/.prompts/build-examples.prompttemplate @@ -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} diff --git a/.prompts/build.prompttemplate b/.prompts/build.prompttemplate new file mode 100644 index 000000000..c18225092 --- /dev/null +++ b/.prompts/build.prompttemplate @@ -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} diff --git a/.prompts/clean.prompttemplate b/.prompts/clean.prompttemplate new file mode 100644 index 000000000..a27d1a5d9 --- /dev/null +++ b/.prompts/clean.prompttemplate @@ -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} diff --git a/.prompts/lint-fix.prompttemplate b/.prompts/lint-fix.prompttemplate new file mode 100644 index 000000000..81e0fc1ea --- /dev/null +++ b/.prompts/lint-fix.prompttemplate @@ -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} diff --git a/.prompts/lint.prompttemplate b/.prompts/lint.prompttemplate new file mode 100644 index 000000000..dc4590971 --- /dev/null +++ b/.prompts/lint.prompttemplate @@ -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} diff --git a/.prompts/test.prompttemplate b/.prompts/test.prompttemplate new file mode 100644 index 000000000..729518b91 --- /dev/null +++ b/.prompts/test.prompttemplate @@ -0,0 +1,7 @@ +--- +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} From e0cbfc3608e18b436f44e037e6d6b5a78c2b0f48 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Wed, 17 Dec 2025 10:45:25 +0100 Subject: [PATCH 5/5] dev: Add mono-repo information to project info --- .prompts/project-info.prompttemplate | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate index 32bb7dc72..e9f1df4ff 100644 --- a/.prompts/project-info.prompttemplate +++ b/.prompts/project-info.prompttemplate @@ -20,6 +20,15 @@ The JSON Forms mono repository consists of these packages: - 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.