refactor: simplify JSV

package.json

@@ -37,7 +37,6 @@
   "peerDependencies": {
     "@stoplight/markdown-viewer": "^4",
     "@stoplight/ui-kit": "^3",
-    "mobx": "^5",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
@@ -47,7 +46,6 @@
     "@stoplight/json-schema-tree": "^1.1.0",
     "@stoplight/mosaic": "^1.0.0-beta.22",
     "@stoplight/react-error-boundary": "^1.0.0",
-    "@stoplight/tree-list": "^5.0.3",
     "classnames": "^2.2.6",
     "lodash": "^4.17.19"
   },
@@ -87,7 +85,6 @@
     "fast-glob": "^3.2.4",
     "jest": "^26.6.2",
     "jest-enzyme": "^7.1.2",
-    "mobx": "^5.13.0",
     "prettier": "^2.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

src/__stories__/JsonSchemaViewer.tsx

@@ -1,16 +1,20 @@
 import { Button, Flex, InvertTheme, subscribeTheme } from '@stoplight/mosaic';
 import { action } from '@storybook/addon-actions';
-import { boolean, number, object, select, withKnobs } from '@storybook/addon-knobs';
+import { number, object, select, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
-import { JsonSchemaViewer, RowRenderer, SchemaRow } from '../';
+import { JsonSchemaViewer, RowAddonRenderer } from '../';
 import { Wrapper } from './utils/Wrapper';
 
 const allOfSchema = require('../__fixtures__/combiners/allOfs/base.json');
 const schema = require('../__fixtures__/default-schema.json');
 const stressSchema = require('../__fixtures__/stress-schema.json');
+const refSchema = require('../__fixtures__/references/base.json');
+const nullRefSchema = require('../__fixtures__/references/nullish.json');
+const brokenRefArraySchema = require('../__fixtures__/arrays/of-refs.json');
+const oneOfWithArraySchema = require('../__fixtures__/combiners/oneof-with-array-type.json');
 
 subscribeTheme({ mode: 'light' });
 
@@ -21,7 +25,6 @@ storiesOf('JsonSchemaViewer', module)
     <JsonSchemaViewer
       schema={schema as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 0)}
-      onGoToRef={action('onGoToRef')}
       viewMode={select(
         'viewMode',
         {
@@ -31,58 +34,48 @@ storiesOf('JsonSchemaViewer', module)
         },
         'standalone',
       )}
+      onGoToRef={action('onGoToRef')}
     />
   ))
   .add('custom schema', () => (
     <JsonSchemaViewer
       schema={object('schema', {})}
       defaultExpandedDepth={number('defaultExpandedDepth', 0)}
       onGoToRef={action('onGoToRef')}
-      maxRows={number('maxRows', 5)}
-      mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
-  .add('custom row renderer', () => {
-    const customRowRenderer: RowRenderer = (node, rowOptions) => {
+  .add('custom row addon', () => {
+    const customRowAddonRenderer: RowAddonRenderer = () => {
       return (
-        <>
-          <SchemaRow treeListNode={node} rowOptions={rowOptions} />
-          <Flex h="full" alignItems="center">
-            <Button pl={1} mr={1} size="sm" appearance="minimal" icon="issue" />
-            <input type="checkbox" />
-          </Flex>
-        </>
+        <Flex h="full" alignItems="center">
+          <Button pl={1} mr={1} size="sm" appearance="minimal" icon="issue" />
+          <input type="checkbox" />
+        </Flex>
       );
     };
 
     return (
       <JsonSchemaViewer
         schema={object('schema', schema as JSONSchema4)}
         onGoToRef={action('onGoToRef')}
-        maxRows={number('maxRows', 5)}
-        mergeAllOf={boolean('mergeAllOf', true)}
-        rowRenderer={customRowRenderer}
+        renderRowAddon={customRowAddonRenderer}
       />
     );
   })
   .add('stress-test schema', () => (
     <>
-      <div style={{ height: 345 }}>
+      <div style={{ height: 345, overflowY: 'scroll' }}>
         <JsonSchemaViewer
           schema={stressSchema as JSONSchema4}
           defaultExpandedDepth={number('defaultExpandedDepth', 2)}
           onGoToRef={action('onGoToRef')}
-          maxRows={number('maxRows', 10)}
-          mergeAllOf={boolean('mergeAllOf', true)}
         />
       </div>
-      <div style={{ height: 345 }}>
+      <div style={{ height: 345, overflowY: 'scroll' }}>
         <JsonSchemaViewer
           schema={stressSchema as JSONSchema4}
           defaultExpandedDepth={number('defaultExpandedDepth', 2)}
           onGoToRef={action('onGoToRef')}
-          maxRows={number('maxRows', 10)}
-          mergeAllOf={boolean('mergeAllOf', true)}
         />
       </div>
     </>
@@ -91,7 +84,13 @@ storiesOf('JsonSchemaViewer', module)
     <JsonSchemaViewer
       schema={allOfSchema as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      mergeAllOf={boolean('mergeAllOf', true)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
+  .add('anyOf-array-schema', () => (
+    <JsonSchemaViewer
+      schema={oneOfWithArraySchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
@@ -108,7 +107,6 @@ storiesOf('JsonSchemaViewer', module)
       )}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
-      mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
   .add('invalid types property pretty error message', () => (
@@ -140,7 +138,6 @@ storiesOf('JsonSchemaViewer', module)
       }}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
-      mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
   .add('dark', () => {
@@ -151,9 +148,29 @@ storiesOf('JsonSchemaViewer', module)
             schema={schema as JSONSchema4}
             defaultExpandedDepth={number('defaultExpandedDepth', 2)}
             onGoToRef={action('onGoToRef')}
-            mergeAllOf={boolean('mergeAllOf', true)}
           />
         </div>
       </InvertTheme>
     );
-  });
+  })
+  .add('refs/normal', () => (
+    <JsonSchemaViewer
+      schema={refSchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
+  .add('refs/nullish', () => (
+    <JsonSchemaViewer
+      schema={nullRefSchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
+  .add('refs/broken', () => (
+    <JsonSchemaViewer
+      schema={brokenRefArraySchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ));

src/__stories__/_styles.scss

@@ -1,4 +1,3 @@
-@import "~@stoplight/tree-list/styles/_tree-list.scss";
 @import "~@stoplight/ui-kit/styles/_ui-kit.scss";
 @import "~@stoplight/mosaic/styles.css";
 @import "~@stoplight/mosaic/themes/default.css";

src/components/JsonSchemaViewer.tsx

@@ -1,127 +1,77 @@
-import type { SchemaTreeRefDereferenceFn } from '@stoplight/json-schema-tree';
-import { isRegularNode } from '@stoplight/json-schema-tree';
-import { Box, Flex } from '@stoplight/mosaic';
-import { ErrorBoundaryForwardedProps, FallbackComponent, withErrorBoundary } from '@stoplight/react-error-boundary';
-import { Tree, TreeState, TreeStore } from '@stoplight/tree-list';
+import { isRegularNode, SchemaTree as JsonSchemaTree, SchemaTreeRefDereferenceFn } from '@stoplight/json-schema-tree';
+import { Box, VStack } from '@stoplight/mosaic';
+import { ErrorBoundaryForwardedProps, FallbackProps, withErrorBoundary } from '@stoplight/react-error-boundary';
 import cn from 'classnames';
 import type { JSONSchema4 } from 'json-schema';
-import { action } from 'mobx';
 import * as React from 'react';
 
-import { SchemaTreeContext, ViewModeContext } from '../contexts';
-import { SchemaTreeListTree, SchemaTreeOptions } from '../tree';
-import type { GoToRefHandler, RowRenderer, ViewMode } from '../types';
-import { SchemaTree as SchemaTreeComponent } from './SchemaTree';
+import { JSVOptions, JSVOptionsContextProvider } from '../contexts';
+import { SchemaRow } from './SchemaRow';
 
-export interface IJsonSchemaViewer {
+export type JsonSchemaProps = Partial<JSVOptions> & {
   schema: JSONSchema4;
   emptyText?: string;
-  defaultExpandedDepth?: number;
   className?: string;
-  maxRows?: number;
-  onGoToRef?: GoToRefHandler;
-  mergeAllOf?: boolean;
-  FallbackComponent?: typeof FallbackComponent;
-  rowRenderer?: RowRenderer;
   resolveRef?: SchemaTreeRefDereferenceFn;
-  viewMode?: ViewMode;
-}
-
-export class JsonSchemaViewerComponent extends React.PureComponent<
-  IJsonSchemaViewer & ErrorBoundaryForwardedProps,
-  { isEmpty: boolean }
-> {
-  protected readonly treeStore: TreeStore;
-  protected readonly tree: SchemaTreeListTree;
-  protected readonly treeState: TreeState;
-
-  public readonly state = {
-    isEmpty: true,
-  };
-
-  constructor(props: IJsonSchemaViewer & ErrorBoundaryForwardedProps) {
-    super(props);
+};
 
-    this.treeState = new TreeState();
-    this.tree = new SchemaTreeListTree(props.schema, this.treeState, this.treeOptions);
-    this.treeStore = new TreeStore(this.tree, this.treeState, {
-      defaultExpandedDepth: this.expandedDepth,
+const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForwardedProps> = ({
+  schema,
+  viewMode = 'standalone',
+  className,
+  resolveRef,
+  emptyText = 'No schema defined',
+  defaultExpandedDepth = 2,
+  onGoToRef,
+  renderRowAddon,
+}) => {
+  const jsonSchemaTreeRoot = React.useMemo(() => {
+    const jsonSchemaTree = new JsonSchemaTree(schema, {
+      mergeAllOf: true,
+      refResolver: resolveRef,
     });
-  }
+    jsonSchemaTree.walker.hookInto('filter', node => {
+      if (!isRegularNode(node)) return true;
 
-  protected get treeOptions(): SchemaTreeOptions {
-    return {
-      expandedDepth: this.expandedDepth,
-      mergeAllOf: this.mergeAllOf,
-      resolveRef: this.props.resolveRef,
-      viewMode: this.props.viewMode,
-    };
-  }
+      const { validations } = node;
 
-  protected get mergeAllOf() {
-    return this.props.mergeAllOf !== false;
-  }
-
-  protected get expandedDepth(): number {
-    return this.props.defaultExpandedDepth ?? 1;
-  }
+      if (!!validations.writeOnly === !!validations.readOnly) {
+        return true;
+      }
 
-  protected renderSchema() {
-    if (this.tree.count > 0) {
-      this.tree.setRoot(Tree.createArtificialRoot());
-    }
-
-    this.tree.populate();
-    this.setState({
-      isEmpty: this.tree.jsonSchemaTree.root.children.every(node => !isRegularNode(node) || node.unknown),
+      return !((viewMode === 'read' && !!validations.writeOnly) || (viewMode === 'write' && !!validations.readOnly));
     });
+    jsonSchemaTree.populate();
+    return jsonSchemaTree.root;
+  }, [schema, resolveRef, viewMode]);
+
+  const isEmpty = React.useMemo(() => jsonSchemaTreeRoot.children.every(node => !isRegularNode(node) || node.unknown), [
+    jsonSchemaTreeRoot,
+  ]);
+
+  const options = React.useMemo(() => ({ defaultExpandedDepth, viewMode, onGoToRef, renderRowAddon }), [
+    defaultExpandedDepth,
+    viewMode,
+    onGoToRef,
+    renderRowAddon,
+  ]);
+
+  if (isEmpty) {
+    return <Box className={cn(className, 'JsonSchemaViewer')}>{emptyText}</Box>;
   }
 
-  public componentDidMount() {
-    this.renderSchema();
-  }
-
-  @action
-  public componentDidUpdate(prevProps: Readonly<IJsonSchemaViewer>) {
-    if (prevProps.resolveRef !== this.props.resolveRef) {
-      this.tree.treeOptions.resolveRef = this.props.resolveRef;
-    }
-
-    if (
-      this.treeStore.defaultExpandedDepth !== this.expandedDepth ||
-      prevProps.schema !== this.props.schema ||
-      prevProps.mergeAllOf !== this.props.mergeAllOf ||
-      prevProps.viewMode !== this.props.viewMode
-    ) {
-      this.treeStore.defaultExpandedDepth = this.expandedDepth;
-      this.tree.treeOptions = this.treeOptions;
-      this.tree.schema = this.props.schema;
-      this.renderSchema();
-    }
-  }
-
-  public render() {
-    const {
-      props: { emptyText = 'No schema defined', schema, defaultExpandedDepth, className, ...props },
-    } = this;
-
-    if (this.state.isEmpty) {
-      return <div>{emptyText}</div>;
-    }
-
-    return (
-      <Flex pos="relative" h="full" className={cn(className, 'JsonSchemaViewer')}>
-        <SchemaTreeContext.Provider value={this.tree}>
-          <ViewModeContext.Provider value={this.props.viewMode ?? 'standalone'}>
-            <SchemaTreeComponent schema={schema} treeStore={this.treeStore} {...props} />
-          </ViewModeContext.Provider>
-        </SchemaTreeContext.Provider>
-      </Flex>
-    );
-  }
-}
+  return (
+    <JSVOptionsContextProvider value={options}>
+      <VStack divider className={cn(className, 'JsonSchemaViewer')}>
+        {jsonSchemaTreeRoot.children.map(childJsonSchemaNode => (
+          <SchemaRow key={childJsonSchemaNode.id} schemaNode={childJsonSchemaNode} nestingLevel={0} />
+        ))}
+      </VStack>
+    </JSVOptionsContextProvider>
+  );
+};
 
-const JsonSchemaFallbackComponent: typeof FallbackComponent = ({ error }) => {
+const JsonSchemaFallbackComponent: React.FC<FallbackProps> = ({ error }) => {
   return (
     <Box p={4}>
       <b className="text-danger">Error</b>
@@ -130,7 +80,7 @@ const JsonSchemaFallbackComponent: typeof FallbackComponent = ({ error }) => {
   );
 };
 
-export const JsonSchemaViewer = withErrorBoundary<IJsonSchemaViewer>(JsonSchemaViewerComponent, {
+export const JsonSchemaViewer = withErrorBoundary<JsonSchemaProps>(JsonSchemaViewerComponent, {
   FallbackComponent: JsonSchemaFallbackComponent,
   recoverableProps: ['schema'],
   reportErrors: false,