svelte-json-schema-form

Howto

Writing Custom Widgets

Importing widgets

When importing widgets, you must use the *(general import) identifier.

This is to access both the component itself and its metadata.

<script>
  import JSONSchemaForm from "@c0ldra1n/svelte-json-schema-form";
  import * as StringWidget from "./string-widget.svlete";
</script>

<JSONSchemaForm widgets="{[StringFormWidget]}" />

Priorities

Custom widgets have priorities over default widgets. Prioritiies within them are determined by the order they are inserted in.

Assigning widgets

It is important that a widget is instantiated from the correct, designated property. The following methods are used to "resolve" the widget from each properties.

If both type and resolveWidget are exported, the widget resolver code will first match for type, then execute resolveWidget.

Type

<script context="module">
  export const type = "string";
</script>

type could also be an array if it can support multiple types

<script context="module">
  export const type = ["integer", "number"];
</script>

shouldResolve

<script context="module">
  export const shouldResolve = (propertyID, schema) => {
      if(/*some condition*/){
          // the widget will be displayed.
          return true;
      }else{
          // the widget will not be displayed.
          return false;
      }
  }
</script>

Recursive widgets

It is possible to use the resolveWidgetfunction within a custom widget. Use getContext("@c0ldra1n/svelte-json-schema-form") to access the function.

<script>
  import { getContext } from "svelte";
  const { resolveWidget } = getContext("@c0ldra1n/svelte-json-schema-form");
</script>

A note about default

The default key in JSON schema is retained, but is renamed as defaultValue during property assignment.

When exporting properties from your custom widget, you should export defaultValue instead of default, as shown in the example below.

<script>
  export let defaultValue;
</script>