@@type: — Class Instantiation

Instantiate registered classes and React components directly from JSON.

"@@type": "ClassName"

How it works

When the converter encounters an object with an @@type key, it looks up the class in the registry and instantiates it. All sibling keys in the same object become constructor props.

Syntax

Component instantiation
{
  "@@type": "BasicLegend",
  "items": [
    {
      "label": "Forest",
      "value": "#22c55e"
    },
    {
      "label": "Water",
      "value": "#3b82f6"
    }
  ]
}

Registered types

React Components

ComponentPurpose
BasicLegendSimple color + label list
ChoroplethLegendColor ramps with boundaries
GradientLegendContinuous color gradient

Examples

BasicLegend
A legend component with parameterized colors.
Input
{
  "@@type": "BasicLegend",
  "items": [
    {
      "label": "Category A",
      "value": "@@#params.color_a"
    },
    {
      "label": "Category B",
      "value": "@@#params.color_b"
    }
  ]
}
Controls
Output
{
  "props": {
    "items": [
      {
        "label": "Category A",
        "value": "#22c55e"
      },
      {
        "label": "Category B",
        "value": "#3b82f6"
      }
    ]
  }
}
Tips & Gotchas
  • The @@type key triggers class instantiation — all other keys in the same object become constructor props/options.
  • Types must be registered in converter-config.ts. The converter maps the string name to the actual class.
  • You can combine @@type with @@#params and @@= in the same object — params resolve first, then the converter instantiates the class with resolved values.