@jsonforms/core 3.0.0-beta.1 → 3.0.0-beta.2

package/lib/reducers/reducers.d.ts

@@ -17,10 +17,10 @@ export declare const jsonFormsReducerConfig: {
  * @param schema the JSON schema describing the data to be rendered
  * @param schemaPath the according schema path
  * @param path the instance path
- * @param fallbackLayoutType the type of the layout to use
+ * @param fallback the type of the layout to use or a UI-schema-generator function
  * @param control may be checked for embedded inline uischema options
  */
-export declare const findUISchema: (uischemas: JsonFormsUISchemaRegistryEntry[], schema: JsonSchema, schemaPath: string, path: string, fallbackLayoutType?: string, control?: ControlElement, rootSchema?: JsonSchema) => UISchemaElement;
+export declare const findUISchema: (uischemas: JsonFormsUISchemaRegistryEntry[], schema: JsonSchema, schemaPath: string, path: string, fallback?: string | (() => UISchemaElement), control?: ControlElement, rootSchema?: JsonSchema) => UISchemaElement;
 export declare const getErrorAt: (instancePath: string, schema: JsonSchema) => (state: JsonFormsState) => import("ajv").ErrorObject<string, Record<string, any>, unknown>[];
 export declare const getSubErrorsAt: (instancePath: string, schema: JsonSchema) => (state: JsonFormsState) => import("ajv").ErrorObject<string, Record<string, any>, unknown>[];
 export declare const getConfig: (state: JsonFormsState) => any;

package/lib/testers/testers.d.ts

@@ -7,12 +7,13 @@ import { Categorization, ControlElement, JsonSchema, UISchemaElement } from '../
 export declare const NOT_APPLICABLE = -1;
 /**
  * A tester is a function that receives an UI schema and a JSON schema and returns a boolean.
+ * The rootSchema is handed over as context. Can be used to resolve references.
  */
-export declare type Tester = (uischema: UISchemaElement, schema: JsonSchema) => boolean;
+export declare type Tester = (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => boolean;
 /**
  * A ranked tester associates a tester with a number.
  */
-export declare type RankedTester = (uischema: UISchemaElement, schema: JsonSchema) => number;
+export declare type RankedTester = (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => number;
 export declare const isControl: (uischema: any) => uischema is ControlElement;
 /**
  * Only applicable for Controls.
@@ -24,8 +25,8 @@ export declare const isControl: (uischema: any) => uischema is ControlElement;
  * @param {(JsonSchema) => boolean} predicate the predicate that should be
  *        applied to the resolved sub-schema
  */
-export declare const schemaMatches: (predicate: (schema: JsonSchema) => boolean) => Tester;
-export declare const schemaSubPathMatches: (subPath: string, predicate: (schema: JsonSchema) => boolean) => Tester;
+export declare const schemaMatches: (predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean) => Tester;
+export declare const schemaSubPathMatches: (subPath: string, predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean) => Tester;
 /**
  * Only applicable for Controls.
  *
@@ -96,8 +97,8 @@ export declare const or: (...testers: Tester[]) => Tester;
  * @param {number} rank the rank to be returned in case the tester returns true
  * @param {Tester} tester a tester
  */
-export declare const rankWith: (rank: number, tester: Tester) => (uischema: UISchemaElement, schema: JsonSchema) => number;
-export declare const withIncreasedRank: (by: number, rankedTester: RankedTester) => (uischema: UISchemaElement, schema: JsonSchema) => number;
+export declare const rankWith: (rank: number, tester: Tester) => (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => number;
+export declare const withIncreasedRank: (by: number, rankedTester: RankedTester) => (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => number;
 /**
  * Default tester for boolean.
  * @type {RankedTester}
@@ -172,7 +173,7 @@ export declare const isObjectArray: Tester;
  * @type {Tester}
  */
 export declare const isObjectArrayControl: Tester;
-export declare const isObjectArrayWithNesting: (uischema: UISchemaElement, schema: JsonSchema) => boolean;
+export declare const isObjectArrayWithNesting: (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => boolean;
 /**
  * Synonym for isObjectArrayControl
  */

package/lib/util/combinators.d.ts

@@ -6,5 +6,4 @@ export interface CombinatorSubSchemaRenderInfo {
     label: string;
 }
 export declare type CombinatorKeyword = 'anyOf' | 'oneOf' | 'allOf';
-export declare const resolveSubSchemas: (schema: JsonSchema, rootSchema: JsonSchema, keyword: CombinatorKeyword) => JsonSchema;
 export declare const createCombinatorRenderInfos: (combinatorSubSchemas: JsonSchema[], rootSchema: JsonSchema, keyword: CombinatorKeyword, control: ControlElement, path: string, uischemas: JsonFormsUISchemaRegistryEntry[]) => CombinatorSubSchemaRenderInfo[];

package/lib/util/path.d.ts

@@ -23,3 +23,13 @@ export declare const toDataPathSegments: (schemaPath: string) => string[];
  */
 export declare const toDataPath: (schemaPath: string) => string;
 export declare const composeWithUi: (scopableUi: Scopable, path: string) => string;
+/**
+ * Encodes the given segment to be used as part of a JSON Pointer
+ *
+ * JSON Pointer has special meaning for "/" and "~", therefore these must be encoded
+ */
+export declare const encode: (segment: string) => string;
+/**
+ * Decodes a given JSON Pointer segment to its "normal" representation
+ */
+export declare const decode: (pointerSegment: string) => string;

package/lib/util/renderer.d.ts

@@ -1,5 +1,5 @@
 import { ControlElement, JsonSchema, UISchemaElement } from '../models';
-import type { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry } from '../reducers';
+import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry } from '../reducers';
 import { JsonFormsUISchemaRegistryEntry } from '../reducers';
 import { RankedTester } from '../testers';
 import { CombinatorKeyword } from './combinators';
@@ -359,7 +359,7 @@ export declare const controlDefaultProps: {
     path: string;
     direction: 'row' | 'column';
 };
-export interface StatePropsOfCombinator extends OwnPropsOfControl {
+export interface StatePropsOfCombinator extends StatePropsOfControl {
     rootSchema: JsonSchema;
     path: string;
     id: string;

package/lib/util/resolvers.d.ts

@@ -22,4 +22,4 @@ export declare const findAllRefs: (schema: JsonSchema, result?: ReferenceSchemaM
  * @param {JsonSchema} rootSchema the actual root schema
  * @returns {JsonSchema} the resolved sub-schema
  */
-export declare const resolveSchema: (schema: JsonSchema, schemaPath: string, rootSchema?: JsonSchema) => JsonSchema;
+export declare const resolveSchema: (schema: JsonSchema, schemaPath: string, rootSchema: JsonSchema) => JsonSchema;

package/lib/util/util.d.ts

@@ -18,7 +18,7 @@ export declare const deriveTypes: (jsonSchema: JsonSchema) => string[];
 * Convenience wrapper around resolveData and resolveSchema.
 */
 export declare const Resolve: {
-    schema(schema: JsonSchema, schemaPath: string, rootSchema?: JsonSchema): JsonSchema;
+    schema(schema: JsonSchema, schemaPath: string, rootSchema: JsonSchema): JsonSchema;
     data(data: any, path: string): any;
 };
 export declare const Paths: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/core",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "Core module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -88,5 +88,5 @@
     "typedoc": "^0.19.2",
     "typescript": "4.2.3"
   },
-  "gitHead": "8c3b6263f360ca192c0a20a343a19c5ffb3a10f7"
+  "gitHead": "8e9c14dcf049ee4b31baf9c40a86b394cba33139"
 }

package/src/generators/uischema.ts

@@ -35,7 +35,7 @@ import {
   Layout,
   UISchemaElement
 } from '../models';
-import { deriveTypes, resolveSchema } from '../util';
+import { deriveTypes, encode, resolveSchema } from '../util';
 
 /**
  * Creates a new ILayout.
@@ -122,7 +122,7 @@ const generateUISchema = (
 ): UISchemaElement => {
   if (!isEmpty(jsonSchema) && jsonSchema.$ref !== undefined) {
     return generateUISchema(
-      resolveSchema(rootSchema, jsonSchema.$ref),
+      resolveSchema(rootSchema, jsonSchema.$ref, rootSchema),
       schemaElements,
       currentRef,
       schemaName,
@@ -162,9 +162,9 @@ const generateUISchema = (
       const nextRef: string = currentRef + '/properties';
       Object.keys(jsonSchema.properties).map(propName => {
         let value = jsonSchema.properties[propName];
-        const ref = `${nextRef}/${propName}`;
+        const ref = `${nextRef}/${encode(propName)}`;
         if (value.$ref !== undefined) {
-          value = resolveSchema(rootSchema, value.$ref);
+          value = resolveSchema(rootSchema, value.$ref, rootSchema);
         }
         generateUISchema(
           value,

package/src/reducers/reducers.ts

@@ -67,7 +67,7 @@ export const jsonFormsReducerConfig = {
  * @param schema the JSON schema describing the data to be rendered
  * @param schemaPath the according schema path
  * @param path the instance path
- * @param fallbackLayoutType the type of the layout to use
+ * @param fallback the type of the layout to use or a UI-schema-generator function
  * @param control may be checked for embedded inline uischema options
  */
 export const findUISchema = (
@@ -75,7 +75,7 @@ export const findUISchema = (
   schema: JsonSchema,
   schemaPath: string,
   path: string,
-  fallbackLayoutType = 'VerticalLayout',
+  fallback: string | (() => UISchemaElement) = 'VerticalLayout',
   control?: ControlElement,
   rootSchema?: JsonSchema
 ): UISchemaElement => {
@@ -83,8 +83,12 @@ export const findUISchema = (
   if (control && control.options && control.options.detail) {
     if (typeof control.options.detail === 'string') {
       if (control.options.detail.toUpperCase() === 'GENERATE') {
+        //use fallback generation function
+        if(typeof fallback === "function"){
+          return fallback();
+        }
         // force generation of uischema
-        return Generate.uiSchema(schema, fallbackLayoutType);
+        return Generate.uiSchema(schema, fallback);
       }
     } else if (typeof control.options.detail === 'object') {
       // check if detail is a valid uischema
@@ -99,7 +103,11 @@ export const findUISchema = (
   // default
   const uiSchema = findMatchingUISchema(uischemas)(schema, schemaPath, path);
   if (uiSchema === undefined) {
-    return Generate.uiSchema(schema, fallbackLayoutType, '#', rootSchema);
+    //use fallback generation function
+    if(typeof fallback === 'function'){
+      return fallback();
+    }
+    return Generate.uiSchema(schema, fallback, '#', rootSchema);
   }
   return uiSchema;
 };

package/src/testers/testers.ts

@@ -47,15 +47,17 @@ import { deriveTypes, hasType, resolveSchema } from '../util';
 export const NOT_APPLICABLE = -1;
 /**
  * A tester is a function that receives an UI schema and a JSON schema and returns a boolean.
+ * The rootSchema is handed over as context. Can be used to resolve references.
  */
-export type Tester = (uischema: UISchemaElement, schema: JsonSchema) => boolean;
+export type Tester = (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema) => boolean;
 
 /**
  * A ranked tester associates a tester with a number.
  */
 export type RankedTester = (
   uischema: UISchemaElement,
-  schema: JsonSchema
+  schema: JsonSchema,
+  rootSchema: JsonSchema
 ) => number;
 
 export const isControl = (uischema: any): uischema is ControlElement =>
@@ -72,8 +74,8 @@ export const isControl = (uischema: any): uischema is ControlElement =>
  *        applied to the resolved sub-schema
  */
 export const schemaMatches = (
-  predicate: (schema: JsonSchema) => boolean
-): Tester => (uischema: UISchemaElement, schema: JsonSchema): boolean => {
+  predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean
+): Tester => (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema): boolean => {
   if (isEmpty(uischema) || !isControl(uischema)) {
     return false;
   }
@@ -86,26 +88,26 @@ export const schemaMatches = (
   }
   let currentDataSchema = schema;
   if (hasType(schema, 'object')) {
-    currentDataSchema = resolveSchema(schema, schemaPath);
+    currentDataSchema = resolveSchema(schema, schemaPath, rootSchema);
   }
   if (currentDataSchema === undefined) {
     return false;
   }
 
-  return predicate(currentDataSchema);
+  return predicate(currentDataSchema, rootSchema);
 };
 
 export const schemaSubPathMatches = (
   subPath: string,
-  predicate: (schema: JsonSchema) => boolean
-): Tester => (uischema: UISchemaElement, schema: JsonSchema): boolean => {
+  predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean
+): Tester => (uischema: UISchemaElement, schema: JsonSchema, rootSchema: JsonSchema): boolean => {
   if (isEmpty(uischema) || !isControl(uischema)) {
     return false;
   }
   const schemaPath = uischema.scope;
   let currentDataSchema: JsonSchema = schema;
   if (hasType(schema, 'object')) {
-    currentDataSchema = resolveSchema(schema, schemaPath);
+    currentDataSchema = resolveSchema(schema, schemaPath, rootSchema);
   }
   currentDataSchema = get(currentDataSchema, subPath);
 
@@ -113,7 +115,7 @@ export const schemaSubPathMatches = (
     return false;
   }
 
-  return predicate(currentDataSchema);
+  return predicate(currentDataSchema, rootSchema);
 };
 
 /**
@@ -215,8 +217,9 @@ export const scopeEndIs = (expected: string): Tester => (
  */
 export const and = (...testers: Tester[]): Tester => (
   uischema: UISchemaElement,
-  schema: JsonSchema
-) => testers.reduce((acc, tester) => acc && tester(uischema, schema), true);
+  schema: JsonSchema,
+  rootSchema: JsonSchema
+) => testers.reduce((acc, tester) => acc && tester(uischema, schema, rootSchema), true);
 
 /**
  * A tester that allow composing other testers by || them.
@@ -225,8 +228,9 @@ export const and = (...testers: Tester[]): Tester => (
  */
 export const or = (...testers: Tester[]): Tester => (
   uischema: UISchemaElement,
-  schema: JsonSchema
-) => testers.reduce((acc, tester) => acc || tester(uischema, schema), false);
+  schema: JsonSchema,
+  rootSchema: JsonSchema
+) => testers.reduce((acc, tester) => acc || tester(uischema, schema, rootSchema), false);
 /**
  * Create a ranked tester that will associate a number with a given tester, if the
  * latter returns true.
@@ -236,9 +240,10 @@ export const or = (...testers: Tester[]): Tester => (
  */
 export const rankWith = (rank: number, tester: Tester) => (
   uischema: UISchemaElement,
-  schema: JsonSchema
+  schema: JsonSchema,
+  rootSchema: JsonSchema
 ): number => {
-  if (tester(uischema, schema)) {
+  if (tester(uischema, schema, rootSchema)) {
     return rank;
   }
 
@@ -247,9 +252,10 @@ export const rankWith = (rank: number, tester: Tester) => (
 
 export const withIncreasedRank = (by: number, rankedTester: RankedTester) => (
   uischema: UISchemaElement,
-  schema: JsonSchema
+  schema: JsonSchema,
+  rootSchema: JsonSchema
 ): number => {
-  const rank = rankedTester(uischema, schema);
+  const rank = rankedTester(uischema, schema, rootSchema);
   if (rank === NOT_APPLICABLE) {
     return NOT_APPLICABLE;
   }
@@ -380,9 +386,12 @@ export const isDateTimeControl = and(
  */
 export const isObjectArray = and(
   schemaMatches(
-    schema => hasType(schema, 'array') && !Array.isArray(schema.items) // we don't care about tuples
+    (schema, rootSchema) => hasType(schema, 'array') && !Array.isArray(resolveSchema(schema, 'items', rootSchema)) // we don't care about tuples
   ),
-  schemaSubPathMatches('items', schema => hasType(schema, 'object'))
+  schemaSubPathMatches('items', (schema, rootSchema) => {
+    const resolvedSchema = schema.$ref ? resolveSchema(rootSchema, schema.$ref, rootSchema) : schema;
+    return hasType(resolvedSchema, 'object')
+  })
 );
 
 /**
@@ -394,22 +403,31 @@ export const isObjectArrayControl = and(uiTypeIs('Control'), isObjectArray);
 
 const traverse = (
   any: JsonSchema | JsonSchema[],
-  pred: (obj: JsonSchema) => boolean
+  pred: (obj: JsonSchema) => boolean,
+  rootSchema: JsonSchema
 ): boolean => {
   if (isArray(any)) {
-    return reduce(any, (acc, el) => acc || traverse(el, pred), false);
+    return reduce(any, (acc, el) => acc || traverse(el, pred, rootSchema), false);
   }
 
   if (pred(any)) {
     return true;
   }
+
+  if (any.$ref) {
+    const toTraverse = resolveSchema(rootSchema, any.$ref, rootSchema);
+    if (toTraverse && !toTraverse.$ref) {
+      return traverse(toTraverse, pred, rootSchema);
+    }
+  }
+
   if (any.items) {
-    return traverse(any.items, pred);
+    return traverse(any.items, pred, rootSchema);
   }
   if (any.properties) {
     return reduce(
       toPairs(any.properties),
-      (acc, [_key, val]) => acc || traverse(val, pred),
+      (acc, [_key, val]) => acc || traverse(val, pred, rootSchema),
       false
     );
   }
@@ -419,13 +437,14 @@ const traverse = (
 
 export const isObjectArrayWithNesting = (
   uischema: UISchemaElement,
-  schema: JsonSchema
+  schema: JsonSchema,
+  rootSchema: JsonSchema
 ): boolean => {
-  if (!uiTypeIs('Control')(uischema, schema)) {
+  if (!uiTypeIs('Control')(uischema, schema, rootSchema)) {
     return false;
   }
   const schemaPath = (uischema as ControlElement).scope;
-  const resolvedSchema = resolveSchema(schema, schemaPath);
+  const resolvedSchema = resolveSchema(schema, schemaPath, rootSchema ?? schema);
   const wantedNestingByType: { [key: string]: number } = {
     object: 2,
     array: 1
@@ -437,6 +456,9 @@ export const isObjectArrayWithNesting = (
         if (val === schema) {
           return false;
         }
+        if (val.$ref !== undefined) {
+          return false;
+        }
         // we don't support multiple types
         if (typeof val.type !== 'string') {
           return true;
@@ -447,7 +469,7 @@ export const isObjectArrayWithNesting = (
         }
         wantedNestingByType[val.type] = typeCount - 1;
         return wantedNestingByType[val.type] === 0;
-      })
+      }, rootSchema)
     ) {
       return true;
     }
@@ -479,10 +501,13 @@ export const isArrayObjectControl = isObjectArrayControl;
 export const isPrimitiveArrayControl = and(
   uiTypeIs('Control'),
   schemaMatches(
-    schema => deriveTypes(schema).length !== 0 && !Array.isArray(schema.items) // we don't care about tuples
+    (schema, rootSchema) =>
+      deriveTypes(schema).length !== 0 &&
+      !Array.isArray(resolveSchema(schema, 'items', rootSchema)) // we don't care about tuples
   ),
-  schemaSubPathMatches('items', schema => {
-    const types = deriveTypes(schema);
+  schemaSubPathMatches('items', (schema, rootSchema) => {
+    const resolvedSchema = schema.$ref ? resolveSchema(rootSchema, schema.$ref, rootSchema) : schema;
+    const types = deriveTypes(resolvedSchema);
     return (
       types.length === 1 &&
       includes(['integer', 'number', 'boolean', 'string'], types[0])
@@ -543,5 +568,7 @@ export const categorizationHasCategory = (uischema: UISchemaElement) =>
 
 export const not = (tester: Tester): Tester => (
   uischema: UISchemaElement,
-  schema: JsonSchema
-) => !tester(uischema, schema);
+  schema: JsonSchema,
+  rootSchema: JsonSchema
+
+) => !tester(uischema, schema, rootSchema);

package/src/util/combinators.ts

@@ -24,8 +24,8 @@
 */
 
 import { ControlElement, JsonSchema, UISchemaElement } from '../models';
-import { resolveSchema } from './resolvers';
 import { findUISchema, JsonFormsUISchemaRegistryEntry } from '../reducers';
+import { Resolve } from './util';
 
 export interface CombinatorSubSchemaRenderInfo {
   schema: JsonSchema;
@@ -47,24 +47,6 @@ const createLabel = (
   }
 };
 
-export const resolveSubSchemas = (
-  schema: JsonSchema,
-  rootSchema: JsonSchema,
-  keyword: CombinatorKeyword
-) => {
-  // resolve any $refs, otherwise the generated UI schema can't match the schema???
-  const schemas = schema[keyword] as any[];
-  if (schemas.findIndex(e => e.$ref !== undefined) !== -1) {
-    return {
-      ...schema,
-      [keyword]: (schema[keyword] as any[]).map(e =>
-        e.$ref ? resolveSchema(rootSchema, e.$ref) : e
-      )
-    };
-  }
-  return schema;
-};
-
 export const createCombinatorRenderInfos = (
   combinatorSubSchemas: JsonSchema[],
   rootSchema: JsonSchema,
@@ -73,16 +55,19 @@ export const createCombinatorRenderInfos = (
   path: string,
   uischemas: JsonFormsUISchemaRegistryEntry[]
 ): CombinatorSubSchemaRenderInfo[] =>
-  combinatorSubSchemas.map((subSchema, subSchemaIndex) => ({
-    schema: subSchema,
-    uischema: findUISchema(
-      uischemas,
-      subSchema,
-      control.scope,
-      path,
-      undefined,
-      control,
-      rootSchema
-    ),
-    label: createLabel(subSchema, subSchemaIndex, keyword)
-  }));
+  combinatorSubSchemas.map((subSchema, subSchemaIndex) => {
+    const schema = subSchema.$ref ? Resolve.schema(rootSchema, subSchema.$ref, rootSchema) : subSchema;
+    return {
+      schema,
+      uischema: findUISchema(
+        uischemas,
+        schema,
+        control.scope,
+        path,
+        undefined,
+        control,
+        rootSchema
+      ),
+      label: createLabel(subSchema, subSchemaIndex, keyword)
+    }
+  });

package/src/util/label.ts

@@ -26,6 +26,7 @@
 import startCase from 'lodash/startCase';
 
 import { ControlElement, JsonSchema, LabelDescription } from '../models';
+import { decode } from './path';
 
 const deriveLabel = (
   controlElement: ControlElement,
@@ -36,8 +37,7 @@ const deriveLabel = (
   }
   if (typeof controlElement.scope === 'string') {
     const ref = controlElement.scope;
-    const label = ref.substr(ref.lastIndexOf('/') + 1);
-
+    const label = decode(ref.substr(ref.lastIndexOf('/') + 1));
     return startCase(label);
   }
 

package/src/util/path.ts

@@ -57,14 +57,15 @@ export { compose as composePaths };
  */
 export const toDataPathSegments = (schemaPath: string): string[] => {
   const s = schemaPath
-    .replace(/anyOf\/[\d]\//g, '')
-    .replace(/allOf\/[\d]\//g, '')
-    .replace(/oneOf\/[\d]\//g, '');
+    .replace(/(anyOf|allOf|oneOf)\/[\d]\//g, '')
+    .replace(/(then|else)\//g, '');
   const segments = s.split('/');
 
-  const startFromRoot = segments[0] === '#' || segments[0] === '';
+  const decodedSegments = segments.map(decode);
+
+  const startFromRoot = decodedSegments[0] === '#' || decodedSegments[0] === '';
   const startIndex = startFromRoot ? 2 : 1;
-  return range(startIndex, segments.length, 2).map(idx => segments[idx]);
+  return range(startIndex, decodedSegments.length, 2).map(idx => decodedSegments[idx]);
 };
 
 /**
@@ -77,7 +78,7 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
  */
 export const toDataPath = (schemaPath: string): string => {
   return toDataPathSegments(schemaPath).join('.');
-};
+    };
 
 export const composeWithUi = (scopableUi: Scopable, path: string): string => {
   const segments = toDataPathSegments(scopableUi.scope);
@@ -88,3 +89,14 @@ export const composeWithUi = (scopableUi: Scopable, path: string): string => {
 
   return isEmpty(segments) ? path : compose(path, segments.join('.'));
 };
+
+/**
+ * Encodes the given segment to be used as part of a JSON Pointer
+ * 
+ * JSON Pointer has special meaning for "/" and "~", therefore these must be encoded
+ */
+export const encode = (segment: string) => segment?.replace(/~/g, '~0').replace(/\//g, '~1');
+/**
+ * Decodes a given JSON Pointer segment to its "normal" representation
+ */
+export const decode = (pointerSegment: string) => pointerSegment?.replace(/~1/g, '/').replace(/~0/, '~');