schema-components - v3.7.0
    Preparing search index...

    Class SchemaComponent

    Lit Custom Element for editable schema-driven UI.

    Tag: <schema-component> (default) or <{prefix}schema-component> (when registerSchemaComponents(prefix) is called).

    Required: call registerSchemaComponents once at module setup before instantiating this element in HTML markup, otherwise none of the per-type <sc-*> children will upgrade and the tree will render as unknown elements.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    properties schema schemaRef io value resolver widgets fields meta idPrefix readOnly strict onDiagnostic

    Methods - Other

    makeRenderChild renderField

    Methods - rendering

    render

    Constructors

    Properties

    properties: {
        schema: { attribute: boolean };
        value: { attribute: boolean };
        resolver: { attribute: boolean };
        widgets: { attribute: boolean };
        fields: { attribute: boolean };
        meta: { attribute: boolean };
        schemaRef: { attribute: boolean };
        io: { attribute: boolean };
        idPrefix: { attribute: boolean };
        onDiagnostic: { attribute: boolean };
        readOnly: { type: BooleanConstructor; reflect: boolean; attribute: string };
        strict: { type: BooleanConstructor };
    } = ...

    Element property declarations.

    All four "data" properties (schema, value, resolver, widgets) carry attribute: false: Custom Element attributes are strings, and these payloads (an arbitrary Zod schema, an arbitrary JS value, a resolver function map, a widget tag map) cannot round-trip through attribute serialisation. Set them via direct property assignment.

    readOnly is a boolean attribute (and reflects to DOM) so the common "render read-only view" case is reachable from plain HTML markup (<schema-component readonly></schema-component>). The capitalisation is readOnly on the property and readonly on the attribute — matching the HTML readonly attribute on <input> / <textarea>.

    schema: unknown

    Reactive property declarations. Each field is declared with declare (no runtime emit) so Lit's static properties accessors are not shadowed by class-field initialisers. Default values are seeded in the constructor.

    schemaRef: string | undefined
    io: SchemaIoSide | undefined
    value: unknown
    resolver: LitComponentResolver | undefined
    widgets: ReadonlyMap<string, string> | undefined
    fields: Record<string, unknown> | undefined
    meta: SchemaMeta | undefined
    idPrefix: string | undefined
    readOnly: boolean
    strict: boolean
    onDiagnostic: ((diagnostic: Diagnostic) => void) | undefined

    Methods - Other

    • Build the recursive renderChild closure threaded through every container renderer.

      Parameters

      Returns (
          tree: WalkedField,
          value: unknown,
          change: (next: unknown) => void,
          pathSuffix?: string,
      ) => TemplateResult

    • Dispatch a single walked field through the resolver, widget registry, and recursion limit. Parallel to renderField in react/SchemaComponent.tsx.

      Parameters

      • tree: WalkedField
      • value: unknown
      • change: (next: unknown) => void
      • userResolver: LitComponentResolver
      • renderChild: (
            tree: WalkedField,
            value: unknown,
            change: (next: unknown) => void,
            pathSuffix?: string,
        ) => TemplateResult
      • path: string

      Returns TemplateResult

    Methods - rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns TemplateResult

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods - Other
    Methods - rendering