feat: on collapse rendering

Author: P0lip

package.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "@stoplight/json": "^3.5.1",
     "@stoplight/react-error-boundary": "^1.0.0",
+    "@stoplight/tree-list": "file:.yalc/@stoplight/tree-list",
     "classnames": "^2.2.6",
     "json-schema-merge-allof": "https://github.com/stoplightio/json-schema-merge-allof",
     "lodash-es": "^4.17.15",
@@ -59,7 +60,6 @@
     "@stoplight/markdown-viewer": "^3.5.5",
     "@stoplight/scripts": "7.0.4",
     "@stoplight/storybook-config": "^2.0.4",
-    "@stoplight/tree-list": "file:.yalc/@stoplight/tree-list",
     "@stoplight/types": "11.0.0",
     "@stoplight/ui-kit": "^2.10.0",
     "@types/classnames": "^2.2.9",

src/__stories__/JsonSchemaViewer.tsx

@@ -23,7 +23,7 @@ storiesOf('JsonSchemaViewer', module)
     <JsonSchemaViewer
       name={text('name', 'my schema')}
       schema={schema as JSONSchema4}
-      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      defaultExpandedDepth={number('defaultExpandedDepth', 0)}
       expanded={boolean('expanded', false)}
       hideTopBar={boolean('hideTopBar', false)}
       onGoToRef={action('onGoToRef')}

src/components/JsonSchemaViewer.tsx

@@ -1,17 +1,16 @@
 import { ErrorBoundaryForwardedProps, FallbackComponent, withErrorBoundary } from '@stoplight/react-error-boundary';
-import { Tree, TreeState, TreeStore } from '@stoplight/tree-list';
+import { TreeState, TreeStore } from '@stoplight/tree-list';
 import { Intent, Spinner } from '@stoplight/ui-kit';
 import cn from 'classnames';
 import { action, runInAction } from 'mobx';
 import * as React from 'react';
-import SchemaWorker, { WebWorker } from 'web-worker:../workers/schema.ts';
 
 import { JSONSchema4 } from 'json-schema';
-import { populateTree } from '../tree/populateTree';
+import { SchemaTree } from '../tree/tree';
 import { GoToRefHandler, RowRenderer } from '../types';
 import { isSchemaViewerEmpty } from '../utils/isSchemaViewerEmpty';
 import { ComputeSchemaMessageData, isRenderedSchemaMessage } from '../workers/messages';
-import { SchemaTree } from './SchemaTree';
+import { SchemaTree as SchemaTreeComponent } from './SchemaTree';
 
 export interface IJsonSchemaViewer {
   schema: JSONSchema4;
@@ -32,9 +31,10 @@ export interface IJsonSchemaViewer {
 
 export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaViewer & ErrorBoundaryForwardedProps> {
   protected readonly treeStore: TreeStore;
-  protected readonly tree: Tree;
+  protected readonly tree: SchemaTree;
+  protected readonly treeState: TreeState;
   protected readonly instanceId: string;
-  public static schemaWorker?: WebWorker;
+  // public static schemaWorker?: WebWorker;
 
   public state = {
     computing: false,
@@ -43,8 +43,9 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
   constructor(props: IJsonSchemaViewer & ErrorBoundaryForwardedProps) {
     super(props);
 
-    this.tree = new Tree(Tree.createArtificialRoot());
-    this.treeStore = new TreeStore(this.tree, new TreeState(), {
+    this.treeState = new TreeState();
+    this.tree = new SchemaTree(this.schema, this.treeState, this.expandedDepth);
+    this.treeStore = new TreeStore(this.tree, this.treeState, {
       defaultExpandedDepth: this.expandedDepth,
     });
 
@@ -130,35 +131,33 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
   // }
 
   protected renderSchema() {
-    populateTree(this.schema, this.tree.root, 0, [], null);
-    this.tree.root = this.tree.root.children[0];
-    this.tree.invalidate();
+    this.tree.populate();
     // const needsFullRendering = true;
     // this.prerenderSchema();
     // if (!needsFullRendering) {
     //   return;
     // }
 
-    const message: ComputeSchemaMessageData = {
-      instanceId: this.instanceId,
-      schema: this.schema,
-      mergeAllOf: this.props.mergeAllOf !== false,
-    };
-
-    if (JsonSchemaViewerComponent.schemaWorker !== void 0) {
-      JsonSchemaViewerComponent.schemaWorker.postMessage(message);
-    }
+    // const message: ComputeSchemaMessageData = {
+    //   instanceId: this.instanceId,
+    //   schema: this.schema,
+    //   mergeAllOf: this.props.mergeAllOf !== false,
+    // };
+    //
+    // if (JsonSchemaViewerComponent.schemaWorker !== void 0) {
+    //   JsonSchemaViewerComponent.schemaWorker.postMessage(message);
+    // }
 
     this.setState({ computing: false });
   }
 
   public componentDidMount() {
     // let's initialize it lazily
-    if (JsonSchemaViewerComponent.schemaWorker === void 0) {
-      JsonSchemaViewerComponent.schemaWorker = new SchemaWorker();
-    }
+    // if (JsonSchemaViewerComponent.schemaWorker === void 0) {
+    //   JsonSchemaViewerComponent.schemaWorker = new SchemaWorker();
+    // }
 
-    JsonSchemaViewerComponent.schemaWorker.addEventListener('message', this.handleWorkerMessage);
+    // JsonSchemaViewerComponent.schemaWorker.addEventListener('message', this.handleWorkerMessage);
     this.renderSchema();
   }
 
@@ -197,7 +196,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
             <Spinner className="relative" intent={Intent.PRIMARY} size={Spinner.SIZE_LARGE} />
           </div>
         )}
-        <SchemaTree expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
+        <SchemaTreeComponent expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
       </div>
     );
   }

src/components/SchemaTree.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { GoToRefHandler, RowRenderer } from '../types';
 import { SchemaRow } from './SchemaRow';
+import { MetadataStore } from '../tree/metadata';
 
 export interface ISchemaTree {
   treeStore: TreeStore;

src/tree/metadata.ts

@@ -6,4 +6,4 @@ export interface ITreeNodeMeta {
   schema: SchemaNode;
 }
 
-export const MetadataStore: Dictionary<ITreeNodeMeta, string> = {};
+export const MetadataStore: Dictionary<ITreeNodeMeta, string> = {}; // todo: can be a weakmap I guess since no stringyfing is needed

src/tree/populateTree.ts

@@ -2,15 +2,15 @@ import { isLocalRef } from '@stoplight/json';
 import { TreeListNode, TreeListParentNode } from '@stoplight/tree-list';
 import { JsonPath } from '@stoplight/types';
 import { JSONSchema4 } from 'json-schema';
-import { IArrayNode, IObjectNode, SchemaKind, SchemaTreeListNode } from '../types';
+import { IArrayNode, IObjectNode, SchemaKind, SchemaNode, SchemaTreeListNode } from '../types';
 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 = {
-  depth?: number;
+  onNode?(node: SchemaNode, parentTreeNode: TreeListNode, level: number): boolean | void;
 };
 
 export type Walker = (
@@ -23,9 +23,10 @@ export type Walker = (
 
 export const populateTree: Walker = (schema, parent, level, path, options) => {
   if (typeof schema !== 'object' || schema === null) return;
-  if (options !== null && options.depth !== void 0 && level >= options.depth) return;
 
   for (const node of walk(schema)) {
+    if (options !== null && options.onNode !== void 0 && !options.onNode(node, parent, level)) continue;
+
     const treeNode: SchemaTreeListNode = {
       id: node.id,
       name: '',
@@ -77,14 +78,14 @@ export const populateTree: Walker = (schema, parent, level, path, options) => {
 };
 
 function processArray(
-  node: TreeListNode,
+  node: SchemaTreeListNode,
   schema: IArrayNode,
   level: number,
   path: JsonPath,
   options: WalkingOptions | null,
-): TreeListNode {
+): SchemaTreeListNode {
   if (Array.isArray(schema.items)) {
-    const children: TreeListNode[] = [];
+    const children: SchemaTreeListNode[] = [];
     (node as TreeListParentNode).children = children;
     for (const [i, property] of schema.items.entries()) {
       const child = populateTree(property, node as TreeListParentNode, level + 1, [...path, 'items', i], options);
@@ -96,12 +97,12 @@ function processArray(
     const subtype = getPrimaryType(schema.items);
     switch (subtype) {
       case SchemaKind.Object:
-        return processObject(node, schema.items as IObjectNode, level + 1, [...path, 'items'], options);
+        return processObject(node, schema.items as IObjectNode, level , [...path, 'items'], options);
       case SchemaKind.Array:
-        return processArray(node, schema.items as IObjectNode, level + 1, [...path, 'items'], options);
+        return processArray(node, schema.items as IObjectNode, level, [...path, 'items'], options);
       default:
         if (typeof subtype === 'string' && isCombiner(subtype)) {
-          return processArray(node, schema.items as IObjectNode, level + 1, [...path, 'items'], options);
+          return processArray(node, schema.items as IObjectNode, level , [...path, 'items'], options);
         }
     }
   }

src/tree/tree.ts

@@ -0,0 +1,54 @@
+import { isLocalRef } from '@stoplight/json';
+import { Tree, TreeListParentNode, TreeState } from '@stoplight/tree-list';
+import { JSONSchema4 } from 'json-schema';
+import { get } from 'lodash-es';
+import { SchemaNode } from '../types';
+import { isRefNode } from '../utils/guards';
+import { MetadataStore } from './metadata';
+import { populateTree } from './populateTree';
+
+export class SchemaTree extends Tree {
+  constructor(public schema: JSONSchema4, public state: TreeState, public defaultExpandedDepth: number) {
+    super(Tree.createArtificialRoot());
+  }
+
+  protected readonly visited = new WeakSet();
+
+  public populate() {
+    const expanded = {};
+    populateTree(this.schema, this.root, 0, [], {
+      onNode: (node: SchemaNode, parentTreeNode, level: number): boolean => {
+        if (isRefNode(node) && isLocalRef(node.$ref)) {
+          expanded[node.id] = false;
+        }
+
+        if (MetadataStore[parentTreeNode.id] && isRefNode(MetadataStore[parentTreeNode.id].schema)) return false;
+        return level <= this.defaultExpandedDepth + 1;
+      },
+    });
+    this.state.expanded = expanded;
+    this.invalidate();
+  }
+
+  public populateTreeFragment(parent: TreeListParentNode) {
+    const { path } = MetadataStore[parent.id];
+    const initialLevel = Tree.getLevel(parent);
+    const artificialRoot = Tree.createArtificialRoot();
+    populateTree(get(this.schema, path), artificialRoot, initialLevel, path, {
+      onNode: (node: SchemaNode, parentTreeNode, level: number): boolean => {
+        return level <= initialLevel + 1;
+      },
+    });
+    this.insertTreeFragment(artificialRoot.children[0].children, parent.id);
+  }
+
+  public unwrap(node: TreeListParentNode) {
+    if (isRefNode(MetadataStore[node.id].schema)) {
+    } else if (node.children.length === 0 && !this.visited.has(node)) {
+      this.populateTreeFragment(node);
+      super.unwrap(node);
+    } else {
+      super.unwrap(node);
+    }
+  }
+}

src/tree/walk.ts

@@ -79,7 +79,7 @@ export function* walk(schema: JSONSchema4[] | JSONSchema4): IterableIterator<Sch
     }
   } else {
     const node = processNode(schema);
-    if (node !== void 0 ) {
+    if (node !== void 0) {
       yield node;
     }
   }

yalc.lock

@@ -3,8 +3,7 @@
   "packages": {
     "@stoplight/tree-list": {
       "signature": "2d0c8d7db40f2b21094b8c818d648978",
-      "file": true,
-      "replaced": "^4.8.0"
+      "file": true
     }
   }
 }