perf: delay allOf merging as much as possible + update tree list"

P0lip · P0lip · commit f812a77bb263 · 2020-02-17T23:13:03.000+07:00
diff --git a/.yalc/@stoplight/tree-list/index.cjs.js b/.yalc/@stoplight/tree-list/index.cjs.js
diff --git a/.yalc/@stoplight/tree-list/index.es.js b/.yalc/@stoplight/tree-list/index.es.js
diff --git a/.yalc/@stoplight/tree-list/package.json b/.yalc/@stoplight/tree-list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/tree-list",
-  "version": "0.0.1-2d0c8d7d",
+  "version": "0.0.1-3a4ec67a",
   "description": "A React component that renders a file tree like interface.",
   "keywords": [],
   "sideEffects": false,
diff --git a/.yalc/@stoplight/tree-list/src/__stories__/__fixtures__/nodes.d.ts b/.yalc/@stoplight/tree-list/src/__stories__/__fixtures__/nodes.d.ts
@@ -1,3 +1,4 @@
 import { Tree } from 'src/tree/tree';
 export declare const smallTree: Tree;
 export declare const largeTree: Tree;
+export declare const createStressTree: () => Tree;
diff --git a/.yalc/@stoplight/tree-list/src/tree/__tests__/computable.spec.d.ts b/.yalc/@stoplight/tree-list/src/tree/__tests__/computable.spec.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/.yalc/@stoplight/tree-list/src/tree/async.d.ts b/.yalc/@stoplight/tree-list/src/tree/async.d.ts
diff --git a/.yalc/@stoplight/tree-list/src/tree/computable.d.ts b/.yalc/@stoplight/tree-list/src/tree/computable.d.ts
@@ -0,0 +1,11 @@
+import { TreeFragment, TreeListParentNode } from '../types';
+import { ITreeIterationOptions, Tree } from './tree';
+export declare type ComputeRowsFn = (node: TreeListParentNode) => TreeFragment | Promise<TreeFragment>;
+export declare class ComputableTree extends Tree {
+    protected readonly computeRows: ComputeRowsFn;
+    private visited;
+    constructor(computeRows: ComputeRowsFn, iterationOptions?: ITreeIterationOptions | null, root?: TreeListParentNode, cacheSize?: number);
+    private computeTree;
+    unwrap(node: TreeListParentNode): Promise<void>;
+    invalidate(): void;
+}
diff --git a/.yalc/@stoplight/tree-list/src/tree/index.d.ts b/.yalc/@stoplight/tree-list/src/tree/index.d.ts
@@ -1,4 +1,4 @@
 export { Tree } from './tree';
 export { TreeState } from './state';
 export { GenericTree } from './generic';
-export { AsyncTree } from './async';
+export { ComputableTree, ComputeRowsFn } from './computable';
diff --git a/.yalc/@stoplight/tree-list/src/tree/tree.d.ts b/.yalc/@stoplight/tree-list/src/tree/tree.d.ts
@@ -1,5 +1,5 @@
 import { Optional } from '@stoplight/types';
-import { DeprecatedTreeListNode, TreeListNode, TreeListParentNode } from '../types';
+import { DeprecatedTreeListNode, TreeFragment, TreeListNode, TreeListParentNode } from '../types';
 import { IndexLookup } from './cache';
 declare type Arrayish = Pick<typeof Array['prototype'], 'indexOf' | 'every'>;
 declare type Range = {
@@ -12,17 +12,18 @@ export interface ITreeIterationOptions {
     readonly expanded: ((node: TreeListParentNode) => boolean) | null;
 }
 export declare class Tree implements Arrayish {
-    protected readonly tree: TreeListParentNode;
     protected readonly iterationOptions: ITreeIterationOptions | null;
-    root: TreeListParentNode;
+    protected readonly tree: TreeListParentNode;
+    protected _root: TreeListParentNode;
+    get root(): import("../types").ITreeListNodeWithChildren;
     protected readonly indexLookup: IndexLookup<TreeListNode>;
-    private readonly wrapped;
-    private readonly sorted;
-    private readonly filtered;
+    private wrapped;
+    private sorted;
+    private filtered;
     private _count;
     get count(): number;
     set count(val: number);
-    constructor(tree: TreeListParentNode, iterationOptions?: ITreeIterationOptions | null, cacheSize?: number);
+    constructor(iterationOptions?: ITreeIterationOptions | null, tree?: TreeListParentNode, cacheSize?: number);
     static getLevel(node: TreeListNode): any;
     static getDropZoneId(node: TreeListNode): any;
     clearCache(): void;
@@ -38,6 +39,8 @@ export declare class Tree implements Arrayish {
     static getOffsetForNode(node: TreeListNode): number;
     protected _itemAt(node: TreeListParentNode, pos: number, boundaries: Range): Optional<TreeListNode>;
     protected static readonly boundaries: Range;
+    private static getLastItem;
+    protected static getNodeIndex(node: TreeListNode): number;
     private static nextItem;
     nextItem(node: TreeListNode): Optional<TreeListNode>;
     prevItem(node: TreeListNode): Optional<TreeListNode>;
@@ -51,10 +54,11 @@ export declare class Tree implements Arrayish {
     protected invalidateChildren(node: TreeListParentNode): void;
     wrap(node: TreeListParentNode): void;
     unwrap(node: TreeListParentNode): void;
-    moveNode(node: TreeListNode, parentId: string | null): void;
-    insertNode(node: TreeListNode, parentId: string | null): void;
-    insertTreeFragment(fragment: TreeListNode[], parentId: string | null): void;
+    moveNode(node: TreeListNode, parent: TreeListParentNode): void;
+    insertNode(node: TreeListNode, parent: TreeListParentNode): void;
+    insertTreeFragment(fragment: TreeFragment, parent: TreeListParentNode): void;
     removeNode(node: TreeListNode): void;
+    replaceNode(node: TreeListNode, newNode: TreeListNode): void;
     protected getCount(node: TreeListParentNode): any;
     protected resetCounter(node: TreeListParentNode): void;
     protected processTreeFragment(node: TreeListParentNode): number;
diff --git a/.yalc/@stoplight/tree-list/src/types.d.ts b/.yalc/@stoplight/tree-list/src/types.d.ts
@@ -100,6 +100,7 @@ export interface ITreeListNode {
 export interface ITreeListNodeWithChildren extends ITreeListNode {
     children: TreeListNode[];
 }
+export declare type TreeFragment = TreeListNode[];
 export declare type TreeListNode = ITreeListNode | ITreeListNodeWithChildren;
 export declare type TreeListParentNode = ITreeListNodeWithChildren;
 export declare type DeprecatedTreeListNode<T extends object = object> = Omit<TreeListNode, 'parent' | 'children'> & {
diff --git a/.yalc/@stoplight/tree-list/yalc.sig b/.yalc/@stoplight/tree-list/yalc.sig
@@ -1 +1 @@
-2d0c8d7db40f2b21094b8c818d648978
+3a4ec67ab4abb12019cfd1bff79c82fa
diff --git a/src/__stories__/JsonSchemaViewer.tsx b/src/__stories__/JsonSchemaViewer.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { State, Store } from '@sambego/storybook-state';
 import { Button, Checkbox, Icon } from '@stoplight/ui-kit';
 import { action } from '@storybook/addon-actions';
 import { boolean, number, object, select, text, withKnobs } from '@storybook/addon-knobs';
@@ -9,10 +8,7 @@ import { JSONSchema4 } from 'json-schema';
 import { JsonSchemaViewer, RowRenderer, SchemaRow } from '../';
 
 const allOfSchemaResolved = require('../__fixtures__/allOf/allOf-resolved.json');
-const allOfSchema = require('../__fixtures__/allOf/allOf-schema.json');
 const schema = require('../__fixtures__/default-schema.json');
-const schemaWithRefs = require('../__fixtures__/ref/original.json');
-const dereferencedSchema = require('../__fixtures__/ref/resolved.json');
 const stressSchema = require('../__fixtures__/stress-schema.json');
 import { Wrapper } from './utils/Wrapper';
 
@@ -29,26 +25,6 @@ storiesOf('JsonSchemaViewer', module)
       onGoToRef={action('onGoToRef')}
     />
   ))
-  .add('with dereferenced schema', () => {
-    const store = new Store<{ selected: string[] }>({
-      selected: [],
-    });
-
-    return (
-      <State store={store}>
-        <JsonSchemaViewer
-          name={text('name', 'name')}
-          schema={schemaWithRefs as JSONSchema4}
-          dereferencedSchema={dereferencedSchema as JSONSchema4}
-          defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-          expanded={boolean('expanded', true)}
-          hideTopBar={boolean('hideTopBar', false)}
-          onGoToRef={action('onGoToRef')}
-          mergeAllOf={boolean('mergeAllOf', true)}
-        />
-      </State>
-    );
-  })
   .add('custom schema', () => (
     <JsonSchemaViewer
       name={text('name', 'my schema')}
@@ -116,8 +92,7 @@ storiesOf('JsonSchemaViewer', module)
   ))
   .add('allOf-schema', () => (
     <JsonSchemaViewer
-      schema={allOfSchema as JSONSchema4}
-      dereferencedSchema={allOfSchemaResolved as JSONSchema4}
+      schema={allOfSchemaResolved as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       expanded={boolean('expanded', false)}
       hideTopBar={boolean('hideTopBar', false)}
diff --git a/src/components/JsonSchemaViewer.tsx b/src/components/JsonSchemaViewer.tsx
@@ -7,7 +7,6 @@ import * as React from 'react';
 import { JSONSchema4 } from 'json-schema';
 import { SchemaTree } from '../tree/tree';
 import { GoToRefHandler, RowRenderer } from '../types';
-import { mergeAllOf } from '../utils';
 import { isSchemaViewerEmpty } from '../utils/isSchemaViewerEmpty';
 import { SchemaTree as SchemaTreeComponent } from './SchemaTree';
 
@@ -36,11 +35,10 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
     super(props);
 
     this.treeState = new TreeState();
-    this.tree = new SchemaTree(
-      props.mergeAllOf ? mergeAllOf(props.schema) : props.schema,
-      this.treeState,
-      this.expandedDepth,
-    );
+    this.tree = new SchemaTree(props.schema, this.treeState, {
+      expandedDepth: this.expandedDepth,
+      mergeAllOf: !!this.props.mergeAllOf,
+    });
     this.treeStore = new TreeStore(this.tree, this.treeState, {
       defaultExpandedDepth: this.expandedDepth,
     });
@@ -79,7 +77,8 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
       this.tree.expandedDepth = this.expandedDepth;
       this.renderSchema();
     } else if (prevProps.schema !== this.props.schema || prevProps.mergeAllOf !== this.props.mergeAllOf) {
-      this.tree.schema = this.props.mergeAllOf ? mergeAllOf(this.props.schema) : this.props.schema;
+      this.tree.mergeAllOf = !!this.props.mergeAllOf;
+      this.tree.schema = this.props.schema;
       this.renderSchema();
     }
   }
diff --git a/src/components/SchemaRow.tsx b/src/components/SchemaRow.tsx
@@ -19,9 +19,9 @@ const ROW_OFFSET = 7;
 
 export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ className, node, rowOptions, onGoToRef }) => {
   const metadata = getNodeMetadata(node);
-  const { path, schema: schemaNode } = metadata;
+  const { path, schemaNode } = metadata;
 
-  const parentSchemaNode = (node.parent !== null && metadataStore.get(node.parent)?.schema) || null;
+  const parentSchemaNode = (node.parent !== null && metadataStore.get(node.parent)?.schemaNode) || null;
   const description = 'annotations' in schemaNode ? schemaNode.annotations.description : null;
 
   return (
diff --git a/src/components/__tests__/SchemaRow.spec.tsx b/src/components/__tests__/SchemaRow.spec.tsx
@@ -16,7 +16,7 @@ describe('SchemaRow component', () => {
     };
 
     metadataStore.set(node, {
-      schema: {
+      schemaNode: {
         name: '',
         id: '232',
         type: SchemaKind.Object,
@@ -26,6 +26,7 @@ describe('SchemaRow component', () => {
         annotations: {},
         enum: [null, 0, false],
       } as any,
+      schema: {} as any,
       path: [],
     });
 
diff --git a/src/tree/metadata.ts b/src/tree/metadata.ts
@@ -1,10 +1,12 @@
+import { TreeListNode } from '@stoplight/tree-list';
 import { JsonPath } from '@stoplight/types';
+import { JSONSchema4 } from 'json-schema';
 import { SchemaNode, SchemaTreeListNode } from '../types';
-import { TreeListNode } from '@stoplight/tree-list';
 
 export interface ITreeNodeMeta {
   path: JsonPath;
-  schema: SchemaNode;
+  schemaNode: SchemaNode;
+  schema: JSONSchema4;
 }
 
 export const metadataStore = new WeakMap<SchemaTreeListNode, ITreeNodeMeta>();
@@ -16,4 +18,4 @@ export const getNodeMetadata = (node: TreeListNode): ITreeNodeMeta => {
   }
 
   return metadata;
-}
+};
diff --git a/src/tree/populateTree.ts b/src/tree/populateTree.ts
@@ -3,13 +3,15 @@ import { TreeListNode, TreeListParentNode } from '@stoplight/tree-list';
 import { JsonPath } from '@stoplight/types';
 import { JSONSchema4 } from 'json-schema';
 import { IArrayNode, IObjectNode, SchemaKind, SchemaNode, SchemaTreeListNode } from '../types';
+import { mergeAllOf } from '../utils';
 import { getPrimaryType } from '../utils/getPrimaryType';
 import { isCombinerNode, isRefNode } from '../utils/guards';
 import { isCombiner } from '../utils/isCombiner';
 import { metadataStore } from './metadata';
 import { walk } from './walk';
 
 export type WalkingOptions = {
+  mergeAllOf: boolean;
   onNode?(node: SchemaNode, parentTreeNode: TreeListNode, level: number): boolean | void;
 };
 
@@ -35,34 +37,14 @@ export const populateTree: Walker = (schema, parent, level, path, options): unde
 
     parent.children.push(treeNode);
     metadataStore.set(treeNode, {
-      schema: node,
+      schemaNode: node,
+      schema,
       path,
     });
 
     if (isRefNode(node) && isLocalRef(node.$ref) && node.$ref !== '#') {
       (treeNode as TreeListParentNode).children = [];
-    } else if (isCombinerNode(node)) {
-      if (node.properties !== void 0) {
-        (treeNode as TreeListParentNode).children = [];
-
-        for (const [i, property] of node.properties.entries()) {
-          if ('type' in node) {
-            node.properties[i] = {
-              ...property,
-              type: property.type || node.type,
-            };
-          }
-
-          populateTree(
-            node.properties[i],
-            treeNode as TreeListParentNode,
-            level + 1,
-            [...path, node.combiner, i],
-            options,
-          );
-        }
-      }
-    } else {
+    } else if (!isCombinerNode(node)) {
       switch (getPrimaryType(node)) {
         case SchemaKind.Array:
           processArray(treeNode, node as IArrayNode, level, path, options);
@@ -71,6 +53,28 @@ export const populateTree: Walker = (schema, parent, level, path, options): unde
           processObject(treeNode, node as IObjectNode, level, path, options);
           break;
       }
+    } else if (node.combiner === 'allOf' && options?.mergeAllOf) {
+      parent.children.pop();
+      populateTree(mergeAllOf(schema), parent, level, path, options);
+    } else if (node.properties !== void 0) {
+      (treeNode as TreeListParentNode).children = [];
+
+      for (const [i, property] of node.properties.entries()) {
+        if ('type' in node) {
+          node.properties[i] = {
+            ...property,
+            type: property.type || node.type,
+          };
+        }
+
+        populateTree(
+          node.properties[i],
+          treeNode as TreeListParentNode,
+          level + 1,
+          [...path, node.combiner, i],
+          options,
+        );
+      }
     }
   }
 
diff --git a/src/tree/tree.ts b/src/tree/tree.ts
diff --git a/yalc.lock b/yalc.lock
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@stoplight/tree-list",`
`3`		`- "version": "0.0.1-2d0c8d7d",`
	`3`	`+ "version": "0.0.1-3a4ec67a",`
`4`	`4`	`"description": "A React component that renders a file tree like interface.",`
`5`	`5`	`"keywords": [],`
`6`	`6`	`"sideEffects": false,`
Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ export interface ITreeListNode {`
`100`	`100`	`export interface ITreeListNodeWithChildren extends ITreeListNode {`
`101`	`101`	`children: TreeListNode[];`
`102`	`102`	`}`
	`103`	`+export declare type TreeFragment = TreeListNode[];`
`103`	`104`	`export declare type TreeListNode = ITreeListNode \| ITreeListNodeWithChildren;`
`104`	`105`	`export declare type TreeListParentNode = ITreeListNodeWithChildren;`
`105`	`106`	`export declare type DeprecatedTreeListNode<T extends object = object> = Omit<TreeListNode, 'parent' \| 'children'> & {`