@gluonjs/core / packages/json-forms/src / JsonFormsRendererContext

Interface: JsonFormsRendererContext

Public, immutable field context passed to a registered renderer.

Properties

control

readonly control: JsonFormsRendererControl

---

data

readonly data: JsonObject

---

disabled

readonly disabled: boolean

---

errors

readonly errors: readonly JsonFormValidationError[]

---

field

readonly field: JsonFormField

---

messages

readonly messages: JsonFormsMessageProvider

---

path

readonly path: readonly string[]

---

readOnly

readonly readOnly: boolean

---

rootUiSchema?

readonly optional rootUiSchema?: JsonFormsUiSchema

---

schema

readonly schema: JsonSchema

---

uiSchema?

readonly optional uiSchema?: JsonFormsUiSchema

---

value

readonly value: JsonValue | undefined

Example

Render from immutable field, schema, UI-schema, data, validation, state, and host-owned control context:

import {
  createJsonFormsMessageProvider,
  createJsonFormsRendererRegistry,
  isJsonFormsRendererRegistry,
  JsonForm,
  JsonSchemaResolutionError,
  jsonFormsTag,
  registerJsonForms,
  resolveJsonSchema,
  type JsonFormChangeDetail,
  type JsonFormField,
  type JsonFormOptions,
  type JsonFormsElement,
  type JsonFormsMessageOverrides,
  type JsonFormsMessageProvider,
  type JsonFormsMessageProviderOptions,
  type JsonFormsRendererContext,
  type JsonFormsRendererControl,
  type JsonFormsRendererKind,
  type JsonFormsRendererRegistration,
  type JsonFormsRendererSelector,
  type JsonFormsUiSchema,
  type JsonFormValidationChangeDetail,
  type JsonFormValidationError,
  type JsonObject,
  type JsonSchema,
  type JsonSchemaResolutionOptions,
  type JsonValue,
} from '@gluonjs/json-forms';

const schema = { type: 'object', properties: { email: { $ref: '#/$defs/email' }, delivery: { type: 'string', enum: ['morning', 'afternoon'] } }, required: ['email'], $defs: { email: { type: 'string', format: 'email' } } } satisfies JsonSchema;
const referenceOptions = { maxDepth: 8, maxNodes: 64 } satisfies JsonSchemaResolutionOptions;
const resolvedSchema = resolveJsonSchema(schema, referenceOptions);
const referenceError = new JsonSchemaResolutionError('ref-pointer', 'Invalid reference.');
const uischema = { type: 'VerticalLayout', elements: [{ type: 'Control', scope: '#/properties/email', label: 'Email address' }, { type: 'Control', scope: '#/properties/delivery' }] } satisfies JsonFormsUiSchema;
const data = { email: 'hello@example.test', delivery: 'morning' } satisfies JsonObject;
const value: JsonValue = data.delivery;
const errors: readonly JsonFormValidationError[] = [];
const change: JsonFormChangeDetail = { data, errors };
const validation: JsonFormValidationChangeDetail = { valid: true, errors };
const messageOverrides = { selectPlaceholder: (required: boolean) => required ? 'Choose one' : 'No selection' } satisfies JsonFormsMessageOverrides;
const messageOptions = { locale: 'en-GB', messages: messageOverrides } satisfies JsonFormsMessageProviderOptions;
const messages: JsonFormsMessageProvider = createJsonFormsMessageProvider(messageOptions);
const rendererKind: JsonFormsRendererKind = 'select';
const rendererSelector = { kind: rendererKind, path: ['delivery'] } satisfies JsonFormsRendererSelector;
const rendererRegistration = { id: 'delivery-summary', selector: rendererSelector, priority: 10, render: (context: JsonFormsRendererContext) => String(context.value ?? '') } satisfies JsonFormsRendererRegistration;
const rendererRegistry = createJsonFormsRendererRegistry([rendererRegistration]);

registerJsonForms();
const element = document.createElement(jsonFormsTag) as JsonFormsElement;
element.schema = schema;
element.uischema = uischema;
element.data = data;
element.messages = messages;
element.rendererRegistry = rendererRegistry;
const rendererControl: JsonFormsRendererControl | undefined = undefined;
const field: JsonFormField | undefined = undefined;
const options = { schema, uischema, data, messages, rendererRegistry, onChange: (event) => console.log(event.detail.data), onValidationChange: (event) => console.log(event.detail.valid) } satisfies JsonFormOptions;
const view = JsonForm(options);
console.log(element.value, value, change, validation, isJsonFormsRendererRegistry(rendererRegistry), rendererControl, field, view, resolvedSchema, referenceError.keyword);