Merge pull request #80 from smacker/use_initial_uast_prop

Use initial uast prop

docs/cases/uncontrolled.md

@@ -1,5 +1,5 @@
 Just pass a UAST to the component and it will be rendered.
 
 ```js
-<UASTViewer uast={smallUast} />
+<UASTViewer initialUast={smallUast} />
 ```

docs/components/FlatUASTViewer.md

@@ -1,29 +1,33 @@
 Low-level component. Renders flat UAST.
 
 You might need it if you need control over the tree.
-Check [controlled example](#/Use cases?id=controlled) for more information.
+Check [controlled example](#/Use%20cases?id=controlled) for more information.
 
-If you need only render raw UAST without external control, consider using [UASTViewer](#/UI Components?id=uastviewer) component instead.
+If you need only render raw UAST without external control, consider using [UASTViewer](#/UI%20Components?id=uastviewer) component instead.
 
 ```js
 const someUast = {
     1: {
-        "InternalType": "CompilationUnit",
-        "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
-        "EndPosition": { "Offset": 446, "Line": 0, "Col": 0 },
-        "Roles": ["File"],
-        "Children": [2],
+        n: {
+            "InternalType": "CompilationUnit",
+            "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
+            "EndPosition": { "Offset": 446, "Line": 0, "Col": 0 },
+            "Roles": ["File"],
+            "Children": [{ id: 2, "_uast_node_type": true }],
+        },
         expanded: true
     },
     2: {
-        "InternalType": "LineComment",
-        "Properties": { "internalRole": "comments", "text": " hello.java" },
-        "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
-        "EndPosition": { "Offset": 13, "Line": 1, "Col": 14 },
-        "Roles": ["Comment"],
-        "Children": []
+        n: {
+            "InternalType": "LineComment",
+            "Properties": { "internalRole": "comments", "text": " hello.java" },
+            "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
+            "EndPosition": { "Offset": 13, "Line": 1, "Col": 14 },
+            "Roles": ["Comment"],
+            "Children": []
+        }
     }
 };
 
-<FlatUASTViewer flatUast={someUast} />
+<FlatUASTViewer initialFlatUast={someUast} />
 ```

docs/components/Node.md

@@ -5,20 +5,24 @@ The component must be wrapped with `TreeContext.Provider` containing flat UAST J
 ```js
 const someUast = {
     1: {
-        "InternalType": "CompilationUnit",
-        "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
-        "EndPosition": { "Offset": 446, "Line": 0, "Col": 0 },
-        "Roles": ["File"],
-        "Children": [2],
+        n: {
+            "InternalType": "CompilationUnit",
+            "@pos": {
+                "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
+                "EndPosition": { "Offset": 446, "Line": 0, "Col": 0 },
+            },
+            "Roles": ["File"],
+            "Children": [{ id: 2, "_uast_node_type": true }],
+        },
         expanded: true
     },
     2: {
-        "InternalType": "LineComment",
-        "Properties": { "internalRole": "comments", "text": " hello.java" },
-        "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
-        "EndPosition": { "Offset": 13, "Line": 1, "Col": 14 },
-        "Roles": ["Comment"],
-        "Children": []
+        n: {
+            "InternalType": "LineComment",
+            "Properties": { "internalRole": "comments", "text": " hello.java" },
+            "Roles": ["Comment"],
+            "Children": []
+        }
     }
 };
 
@@ -32,11 +36,15 @@ With location:
 ```js
 const someUast = {
     1: {
-        "InternalType": "LineComment",
-        "Properties": { "internalRole": "comments", "text": " hello.java" },
-        "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
-        "EndPosition": { "Offset": 13, "Line": 1, "Col": 14 },
-        "Roles": ["Comment"],
+        n: {
+            "InternalType": "LineComment",
+            "Properties": { "internalRole": "comments", "text": " hello.java" },
+            "@pos": {
+                "StartPosition": { "Offset": 0, "Line": 1, "Col": 1 },
+                "EndPosition": { "Offset": 446, "Line": 0, "Col": 0 },
+            },
+            "Roles": ["Comment"],
+        },
         expanded: true
     }
 };

docs/components/UASTViewer.md

@@ -5,5 +5,5 @@ Wrapper for `FlatUASTViewer` component with similar default to `withUASTEditor`.
 All unknown properties are passed to `FlatUASTViewer` as is.
 
 ```js
-<UASTViewer uast={smallUast} />
+<UASTViewer initialUast={smallUast} />
 ```

src/components/FlatUASTViewer.js

@@ -9,11 +9,19 @@ class FlatUASTViewer extends Component {
   constructor(props) {
     super(props);
 
-    const controlled = Boolean(props.onNodeToggle || props.onNodeHover);
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.initialFlatUast && props.flatUast) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          'FlatUASTViewer: both initialFlatUast and flatUast props are passed ' +
+            'initialFlatUast property will be ignored'
+        );
+      }
+    }
+
     this.state = {
-      controlled,
       // keep uast in state only if component is uncontrolled
-      flatUast: !controlled ? props.flatUast : undefined
+      flatUast: props.initialFlatUast
     };
 
     this.onMouseMove = this.onMouseMove.bind(this);
@@ -46,26 +54,23 @@ class FlatUASTViewer extends Component {
   }
 
   getFlatUast() {
-    if (this.state.controlled) {
-      return this.props.flatUast;
-    }
-    return this.state.flatUast;
+    return this.props.flatUast || this.state.flatUast;
   }
 
   onMouseMove(id) {
     if (this.lastOverId === id) {
       return;
     }
-    if (this.props.onNodeHover) {
-      this.props.onNodeHover(id, this.lastOverId);
-    }
-    if (!this.state.controlled) {
+
+    if (!this.props.flatUast) {
       const newFlatUast = hoverNodeById(
         this.state.flatUast,
         id,
         this.lastOverId
       );
       this.setState({ flatUast: newFlatUast });
+    } else if (this.props.onNodeHover) {
+      this.props.onNodeHover(id, this.lastOverId);
     }
 
     this.lastOverId = id;
@@ -76,23 +81,20 @@ class FlatUASTViewer extends Component {
   }
 
   onToggle(id) {
-    if (this.props.onNodeToggle) {
+    if (!this.props.flatUast) {
+      const { flatUast } = this.state;
+      const node = flatUast[id];
+      const newFlatUast = {
+        ...flatUast,
+        [id]: {
+          ...node,
+          expanded: !node.expanded
+        }
+      };
+      this.setState({ flatUast: newFlatUast });
+    } else if (this.props.onNodeToggle) {
       this.props.onNodeToggle(id);
     }
-    if (this.state.controlled) {
-      return;
-    }
-
-    const flatUast = this.getFlatUast();
-    const node = flatUast[id];
-    const newFlatUast = {
-      ...flatUast,
-      [id]: {
-        ...node,
-        expanded: !node.expanded
-      }
-    };
-    this.setState({ flatUast: newFlatUast });
   }
 
   render() {
@@ -130,7 +132,9 @@ class FlatUASTViewer extends Component {
 FlatUASTViewer.propTypes = {
   // Object should have {[id]: node} format
   // don't use PropTypes.shape due to possible extra properties in a node
-  flatUast: PropTypes.object.isRequired,
+  flatUast: PropTypes.object,
+  // same as flatUast but for uncontrolled mode
+  initialFlatUast: PropTypes.any,
   rootIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   schema: PropTypes.func,
   showLocations: PropTypes.bool.isRequired,

src/components/FlatUASTViewer.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import FlatUASTViewer from './FlatUASTViewer';
+
+const flatUast2 = {
+  1: { n: { name: 'original-node' }, expanded: true }
+};
+
+const flatUast2Changed = {
+  1: { n: { name: 'changed-node' }, expanded: true }
+};
+
+describe('FlatUASTViewer', () => {
+  it('uncontrolled', () => {
+    const testRenderer = renderer.create(
+      <FlatUASTViewer initialFlatUast={flatUast2} />
+    );
+
+    const originalTree = testRenderer.toJSON();
+
+    testRenderer.update(<FlatUASTViewer initialFlatUast={flatUast2Changed} />);
+
+    const updatedTree = testRenderer.toJSON();
+
+    expect(originalTree).toEqual(updatedTree);
+  });
+
+  it('controlled', () => {
+    const testRenderer = renderer.create(
+      <FlatUASTViewer flatUast={flatUast2} />
+    );
+
+    const originalTree = testRenderer.toJSON();
+    expect(
+      testRenderer.root.findByProps({ className: 'uast-value string' }).children
+    ).toEqual(['original-node']);
+
+    testRenderer.update(<FlatUASTViewer flatUast={flatUast2Changed} />);
+
+    const updatedTree = testRenderer.toJSON();
+
+    expect(originalTree).not.toEqual(updatedTree);
+    expect(
+      testRenderer.root.findByProps({ className: 'uast-value string' }).children
+    ).toEqual(['changed-node']);
+  });
+});

src/components/UASTViewer.js

@@ -6,22 +6,42 @@ import { hocOptions as uastV2Options } from '../uast-v2';
 
 class UASTViewer extends PureComponent {
   render() {
-    const { uast, levelsToExpand, rootIds, options, ...rest } = this.props;
-
-    const flatUast = expandRootIds(
-      options.transformer(uast),
-      rootIds,
+    const {
+      uast,
+      initialUast,
       levelsToExpand,
-      options.getChildrenIds
-    );
+      rootIds,
+      options,
+      ...rest
+    } = this.props;
 
-    return <FlatUASTViewer flatUast={flatUast} rootIds={rootIds} {...rest} />;
+    const toFlat = input =>
+      expandRootIds(
+        options.transformer(input),
+        rootIds,
+        levelsToExpand,
+        options.getChildrenIds
+      );
+
+    const flatUast = uast ? toFlat(uast) : undefined;
+    const initialFlatUast = initialUast ? toFlat(initialUast) : undefined;
+
+    return (
+      <FlatUASTViewer
+        flatUast={flatUast}
+        initialFlatUast={initialFlatUast}
+        rootIds={rootIds}
+        {...rest}
+      />
+    );
   }
 }
 
 UASTViewer.propTypes = {
   // source UAST in the format matching transformer
   uast: PropTypes.any,
+  // same as uast but for uncontrolled mode
+  initialUast: PropTypes.any,
   // array of root nodes ids
   rootIds: PropTypes.array.isRequired,
   // number of node levels to expand from rootIds