Add allOf support (rjsf-team#1380)

* feat: add allOf support * use patch version of json-schema-merge-allof * fix: publicPath for netlify builds * fix typo * fix: pass around shouldMergeAllOf a bit * fix: remove shouldMergeAllOf * fix: resolve allOf when calculating idSchema and pathSchema * Revert "Fix dependency defaults for uncontrolled components (rjsf-team#1371)" This reverts commit 6728977. * Revert "Revert "Fix dependency defaults for uncontrolled components (rjsf-team#1371)"" This reverts commit ad2bd68. * test: start writing some basic tests * add doc on allOf * add allOf playground sample * handle merging errors by removing allOf * add test for nested allOf's * clarify that allOf keyword is dropped * don't use merge allof fork * remove change to package-lock.json * prettier format

Author: epicfaace

packages/core/docs/index.md

@@ -190,10 +190,12 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
 
 * `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `"type": ["string", "array"]`)
 
- The `anyOf`  and `oneOf` keywords are supported,  however, properties declared inside the `anyOf/oneOf` should not overlap with properties "outside" of the `anyOf/oneOf`.
+ The `anyOf` and `oneOf` keywords are supported; however, properties declared inside the `anyOf/oneOf` should not overlap with properties "outside" of the `anyOf/oneOf`.
 
  You can also use `oneOf` with [schema dependencies](dependencies.md#schema-dependencies) to dynamically add schema properties based on input data.
 
+ The `allOf` keyword is supported; it uses [json-schema-merge-allof](https://github.com/mokkabonna/json-schema-merge-allof) to merge subschemas to render the final combined schema in the form. When these subschemas are incompatible, though (or if the library has an error merging it), the `allOf` keyword is dropped from the schema. 
+
 * `"additionalProperties":false` produces incorrect schemas when used with [schema dependencies](#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `"additionalProperties":false` when you use schema dependencies. See [#848](https://github.com/mozilla-services/react-jsonschema-form/issues/848) [#902](https://github.com/mozilla-services/react-jsonschema-form/issues/902) [#992](https://github.com/mozilla-services/react-jsonschema-form/issues/992)
 
 ## Handling of schema defaults

packages/core/package-lock.json

@@ -45,6 +45,7 @@
  "@babel/runtime-corejs2": "^7.4.5",
  "ajv": "^6.7.0",
  "core-js": "^2.5.7",
+ "json-schema-merge-allof": "^0.6.0",
  "lodash": "^4.17.15",
  "prop-types": "^15.7.2",
  "react-app-polyfill": "^1.0.4",

packages/core/package.json

@@ -1,6 +1,7 @@
 import arrays from "./arrays";
 import anyOf from "./anyOf";
 import oneOf from "./oneOf";
+import allOf from "./allOf";
 import nested from "./nested";
 import numbers from "./numbers";
 import simple from "./simple";
@@ -48,6 +49,7 @@ export const samples = {
  "Additional Properties": additionalProperties,
  "Any Of": anyOf,
  "One Of": oneOf,
+ "All Of": allOf,
  "Null fields": nullField,
  Nullable: nullable,
  ErrorSchema: errorSchema,

packages/core/playground/samples/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import * as ReactIs from "react-is";
+import mergeAllOf from "json-schema-merge-allof";
 import fill from "core-js/library/fn/array/fill";
 import validateFormData, { isValid } from "./validate";
 import union from "lodash/union";
@@ -627,6 +628,13 @@ export function resolveSchema(schema, definitions = {}, formData = {}) {
  } else if (schema.hasOwnProperty("dependencies")) {
  const resolvedSchema = resolveDependencies(schema, definitions, formData);
  return retrieveSchema(resolvedSchema, definitions, formData);
+ } else if (schema.hasOwnProperty("allOf")) {
+ return {
+ ...schema,
+ allOf: schema.allOf.map(allOfSubschema =>
+ retrieveSchema(allOfSubschema, definitions, formData)
+ ),
+ };
  } else {
  // No $ref or dependencies attribute found, returning the original schema.
  return schema;
@@ -647,7 +655,19 @@ function resolveReference(schema, definitions, formData) {
 }
 
 export function retrieveSchema(schema, definitions = {}, formData = {}) {
- const resolvedSchema = resolveSchema(schema, definitions, formData);
+ let resolvedSchema = resolveSchema(schema, definitions, formData);
+ if ("allOf" in schema) {
+ try {
+ resolvedSchema = mergeAllOf({
+ ...resolvedSchema,
+ allOf: resolvedSchema.allOf,
+ });
+ } catch (e) {
+ console.warn("could not merge subschemas in allOf:\n" + e);
+ const { allOf, ...resolvedSchemaWithoutAllOf } = resolvedSchema;
+ return resolvedSchemaWithoutAllOf;
+ }
+ }
  const hasAdditionalProperties =
  resolvedSchema.hasOwnProperty("additionalProperties") &&
  resolvedSchema.additionalProperties !== false;
@@ -937,7 +957,7 @@ export function toIdSchema(
  const idSchema = {
  $id: id || idPrefix,
  };
- if ("$ref" in schema || "dependencies" in schema) {
+ if ("$ref" in schema || "dependencies" in schema || "allOf" in schema) {
  const _schema = retrieveSchema(schema, definitions, formData);
  return toIdSchema(_schema, id, definitions, formData, idPrefix);
  }
@@ -967,7 +987,7 @@ export function toPathSchema(schema, name = "", definitions, formData = {}) {
  const pathSchema = {
  $name: name.replace(/^\./, ""),
  };
- if ("$ref" in schema || "dependencies" in schema) {
+ if ("$ref" in schema || "dependencies" in schema || "allOf" in schema) {
  const _schema = retrieveSchema(schema, definitions, formData);
  return toPathSchema(_schema, name, definitions, formData);
  }

packages/core/src/utils.js

@@ -26,8 +26,19 @@ import {
  guessType,
  mergeSchemas,
 } from "../src/utils";
+import { createSandbox } from "./test_utils";
 
 describe("utils", () => {
+ let sandbox;
+
+ beforeEach(() => {
+ sandbox = createSandbox();
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
  describe("getDefaultFormState()", () => {
  describe("root default", () => {
  it("should map root schema default to form state, if any", () => {
@@ -2259,6 +2270,67 @@ describe("utils", () => {
  });
  });
  });
+
+ describe("allOf", () => {
+ it("should merge types", () => {
+ const schema = {
+ allOf: [{ type: ["string", "number", "null"] }, { type: "string" }],
+ };
+ const definitions = {};
+ const formData = {};
+ expect(retrieveSchema(schema, definitions, formData)).eql({
+ type: "string",
+ });
+ });
+ it("should not merge incompatible types", () => {
+ sandbox.stub(console, "warn");
+ const schema = {
+ allOf: [{ type: "string" }, { type: "boolean" }],
+ };
+ const definitions = {};
+ const formData = {};
+ expect(retrieveSchema(schema, definitions, formData)).eql({});
+ expect(
+ console.warn.calledWithMatch(/could not merge subschemas in allOf/)
+ ).to.be.true;
+ });
+ it("should merge types with $ref in them", () => {
+ const schema = {
+ allOf: [{ $ref: "#/definitions/1" }, { $ref: "#/definitions/2" }],
+ };
+ const definitions = {
+ "1": { type: "string" },
+ "2": { minLength: 5 },
+ };
+ const formData = {};
+ expect(retrieveSchema(schema, definitions, formData)).eql({
+ type: "string",
+ minLength: 5,
+ });
+ });
+ it("should properly merge schemas with nested allOf's", () => {
+ const schema = {
+ allOf: [
+ {
+ type: "string",
+ allOf: [{ minLength: 2 }, { maxLength: 5 }],
+ },
+ {
+ type: "string",
+ allOf: [{ default: "hi" }, { minLength: 4 }],
+ },
+ ],
+ };
+ const definitions = {};
+ const formData = {};
+ expect(retrieveSchema(schema, definitions, formData)).eql({
+ type: "string",
+ minLength: 4,
+ maxLength: 5,
+ default: "hi",
+ });
+ });
+ });
  });
 
  describe("shouldRender", () => {

packages/core/test/utils_test.js

@@ -0,0 +1,26 @@
+module.exports = {
+ schema: {
+ type: "object",
+ allOf: [
+ {
+ properties: {
+ lorem: {
+ type: ["string", "number"],
+ },
+ },
+ },
+ {
+ properties: {
+ lorem: {
+ type: "boolean",
+ minLength: 5,
+ },
+ ipsum: {
+ type: "string",
+ },
+ },
+ },
+ ],
+ },
+ formData: {},
+};

playground/samples/allOf.js

@@ -0,0 +1,49 @@
+import { expect } from "chai";
+
+import { createFormComponent, createSandbox } from "./test_utils";
+
+describe("allOf", () => {
+ let sandbox;
+
+ beforeEach(() => {
+ sandbox = createSandbox();
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render a regular input element with a single type, when multiple types specified", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ foo: {
+ allOf: [{ type: ["string", "number", "null"] }, { type: "string" }],
+ },
+ },
+ };
+
+ const { node } = createFormComponent({
+ schema,
+ });
+
+ expect(node.querySelectorAll("input")).to.have.length.of(1);
+ });
+
+ it("should be able to handle incompatible types and not crash", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ foo: {
+ allOf: [{ type: "string" }, { type: "boolean" }],
+ },
+ },
+ };
+
+ const { node } = createFormComponent({
+ schema,
+ });
+
+ expect(node.querySelectorAll("input")).to.have.length.of(0);
+ });
+});