Fix computed member expressions (#5655)

* Fix computed member expressions

* add more fixtures for computed properties

* tweaks

* fix flow issues

Author: bomsy

src/workers/parser/getSymbols.js

@@ -9,7 +9,12 @@ import * as t from "@babel/types";
 
 import createSimplePath, { type SimplePath } from "./utils/simple-path";
 import { traverseAst } from "./utils/ast";
-import { isVariable, isFunction, getVariables } from "./utils/helpers";
+import {
+  isVariable,
+  isFunction,
+  getVariables,
+  isComputedExpression
+} from "./utils/helpers";
 import { inferClassName } from "./utils/inferClassName";
 import getFunctionName from "./utils/getFunctionName";
 
@@ -305,17 +310,23 @@ function extractSymbols(sourceId) {
 function extendSnippet(
   name: string,
   expression: string,
-  path: SimplePath | null = null,
+  path: SimplePath | Object | null = null,
   prevPath: SimplePath | null = null
 ): string | void {
   const computed = path && path.node.computed;
   const prevComputed = prevPath && prevPath.node.computed;
   const prevArray = t.isArrayExpression(prevPath);
   const array = t.isArrayExpression(path);
+  const value =
+    (path &&
+      path.node.property &&
+      path.node.property.extra &&
+      path.node.property.extra.raw) ||
+    "";
 
   if (expression === "") {
     if (computed) {
-      return `[${name}]`;
+      return name === undefined ? `[${value}]` : `[${name}]`;
     }
     return name;
   }
@@ -324,21 +335,28 @@ function extendSnippet(
     if (prevComputed || prevArray) {
       return `[${name}]${expression}`;
     }
-    return `[${name}].${expression}`;
+    return `[${name === undefined ? value : name}].${expression}`;
   }
 
   if (prevComputed || prevArray) {
     return `${name}${expression}`;
   }
 
+  if (isComputedExpression(expression) && name !== undefined) {
+    return `${name}${expression}`;
+  }
+
   return `${name}.${expression}`;
 }
 
 function getMemberSnippet(node: Node, expression: string = "") {
   if (t.isMemberExpression(node)) {
     const name = node.property.name;
-
-    return getMemberSnippet(node.object, extendSnippet(name, expression));
+    const snippet = getMemberSnippet(
+      node.object,
+      extendSnippet(name, expression, { node })
+    );
+    return snippet;
   }
 
   if (t.isCallExpression(node)) {
@@ -350,6 +368,9 @@ function getMemberSnippet(node: Node, expression: string = "") {
   }
 
   if (t.isIdentifier(node)) {
+    if (isComputedExpression(expression)) {
+      return `${node.name}${expression}`;
+    }
     return `${node.name}.${expression}`;
   }
 

src/workers/parser/tests/__snapshots__/closest.spec.js.snap

@@ -55,7 +55,7 @@ Object {
   "location": SourceLocation {
     "end": Position {
       "column": 0,
-      "line": 24,
+      "line": 26,
     },
     "start": Position {
       "column": 0,

src/workers/parser/tests/__snapshots__/getSymbols.spec.js.snap

@@ -368,7 +368,7 @@ callExpressions:
 memberExpressions:
 [(7, 35), (7, 42)] [(7, 31), (7, 42)] arr.entries entries
 [(8, 10), (8, 13)] [(8, 2), (8, 13)] console.log log
-[(16, 34), (16, 46)] [(16, 19), (16, 47)] prefsBlueprint.accessorName accessorName
+[(16, 34), (16, 46)] [(16, 19), (16, 47)] prefsBlueprint[accessorName] accessorName
 
 objectProperties:
 [(1, 8), (1, 9)]  b b
@@ -462,9 +462,9 @@ hasTypes: false"
 
 exports[`Parser.getSymbols expression 1`] = `
 "functions:
-[(8, 10), (8, 23)]   render() TodoView
-[(21, 0), (21, 28)]   params()
-[(22, 11), (22, 32)]   pars()
+[(10, 10), (10, 23)]   render() TodoView
+[(23, 0), (23, 28)]   params()
+[(24, 11), (24, 32)]   pars()
 
 variables:
 [(1, 6), (1, 27)]   obj
@@ -476,51 +476,61 @@ variables:
 [(5, 21), (5, 27)]   b
 [(5, 29), (5, 37)]   d
 [(5, 41), (5, 47)]   b
-[(12, 12), (12, 25)]   a
-[(12, 17), (12, 23)]   b
-[(12, 27), (12, 31)]   b
-[(13, 8), (13, 21)]   a
-[(13, 13), (13, 19)]   b
-[(13, 23), (13, 27)]   b
-[(16, 6), (16, 32)]   res
-[(16, 15), (16, 19)]   a
-[(16, 25), (16, 29)]   b
-[(17, 6), (17, 30)]   res2
-[(17, 15), (17, 28)]   a
-[(17, 21), (17, 25)]   b
-[(18, 6), (18, 45)]   res3
-[(18, 15), (18, 28)]   a
-[(18, 21), (18, 25)]   b
-[(18, 30), (18, 43)]   b
-[(18, 36), (18, 40)]   c
-[(19, 6), (19, 45)]   res4
-[(19, 17), (19, 21)]   a
-[(19, 29), (19, 41)]   b
-[(21, 16), (21, 24)]
-[(21, 18), (21, 19)]   a
-[(21, 21), (21, 22)]   b
-[(22, 4), (22, 32)]   pars
-[(22, 20), (22, 28)]
-[(22, 22), (22, 23)]   a
-[(22, 25), (22, 26)]   b
-[(23, 6), (23, 43)]   evil
+[(6, 6), (6, 46)]   firstAuthor
+[(7, 6), (7, 74)]   firstActionDirector
+[(14, 12), (14, 25)]   a
+[(14, 17), (14, 23)]   b
+[(14, 27), (14, 31)]   b
+[(15, 8), (15, 21)]   a
+[(15, 13), (15, 19)]   b
+[(15, 23), (15, 27)]   b
+[(18, 6), (18, 32)]   res
+[(18, 15), (18, 19)]   a
+[(18, 25), (18, 29)]   b
+[(19, 6), (19, 30)]   res2
+[(19, 15), (19, 28)]   a
+[(19, 21), (19, 25)]   b
+[(20, 6), (20, 45)]   res3
+[(20, 15), (20, 28)]   a
+[(20, 21), (20, 25)]   b
+[(20, 30), (20, 43)]   b
+[(20, 36), (20, 40)]   c
+[(21, 6), (21, 45)]   res4
+[(21, 17), (21, 21)]   a
+[(21, 29), (21, 41)]   b
+[(23, 16), (23, 24)]
+[(23, 18), (23, 19)]   a
+[(23, 21), (23, 22)]   b
+[(24, 4), (24, 32)]   pars
+[(24, 20), (24, 28)]
+[(24, 22), (24, 23)]   a
+[(24, 25), (24, 26)]   b
+[(25, 6), (25, 43)]   evil
 
 callExpressions:
 
 
 memberExpressions:
 [(2, 19), (2, 33)] [(2, 12), (2, 33)] obj2.c.secondProperty secondProperty
 [(2, 17), (2, 18)] [(2, 12), (2, 18)] obj2.c c
-[(7, 4), (7, 12)] [(7, 0), (7, 12)] app.TodoView TodoView
-[(7, 24), (7, 30)] [(7, 15), (7, 30)] Backbone.extend extend
-[(12, 4), (12, 7)] [(12, 0), (12, 7)] obj.foo foo
-[(19, 40), (19, 41)] [(19, 32), (19, 41)] a.b.c.v.d d
-[(19, 38), (19, 39)] [(19, 32), (19, 39)] a.b.c.v v
-[(19, 36), (19, 37)] [(19, 32), (19, 37)] a.b.c c
-[(19, 34), (19, 35)] [(19, 32), (19, 35)] a.b b
-[(23, 29), (23, 43)] [(23, 13), (23, 43)]  secondProperty
-[(23, 27), (23, 28)] [(23, 13), (23, 28)]  c
-[(23, 18), (23, 24)] [(23, 13), (23, 24)] obj2.doEvil doEvil
+[(6, 40), (6, 46)] [(6, 20), (6, 46)] collection.books[1].author author
+[(6, 37), (6, 38)] [(6, 20), (6, 39)] collection.books[1]
+[(6, 31), (6, 36)] [(6, 20), (6, 36)] collection.books books
+[(7, 66), (7, 74)] [(7, 28), (7, 74)] collection.genres[\\"sci-fi\\"].movies[0].director director
+[(7, 63), (7, 64)] [(7, 28), (7, 65)] collection.genres[\\"sci-fi\\"].movies[0]
+[(7, 56), (7, 62)] [(7, 28), (7, 62)] collection.genres[\\"sci-fi\\"].movies movies
+[(7, 46), (7, 54)] [(7, 28), (7, 55)] collection.genres[\\"sci-fi\\"]
+[(7, 39), (7, 45)] [(7, 28), (7, 45)] collection.genres genres
+[(9, 4), (9, 12)] [(9, 0), (9, 12)] app.TodoView TodoView
+[(9, 24), (9, 30)] [(9, 15), (9, 30)] Backbone.extend extend
+[(14, 4), (14, 7)] [(14, 0), (14, 7)] obj.foo foo
+[(21, 40), (21, 41)] [(21, 32), (21, 41)] a.b.c.v.d d
+[(21, 38), (21, 39)] [(21, 32), (21, 39)] a.b.c.v v
+[(21, 36), (21, 37)] [(21, 32), (21, 37)] a.b.c c
+[(21, 34), (21, 35)] [(21, 32), (21, 35)] a.b b
+[(25, 29), (25, 43)] [(25, 13), (25, 43)]  secondProperty
+[(25, 27), (25, 28)] [(25, 13), (25, 28)]  c
+[(25, 18), (25, 24)] [(25, 13), (25, 24)] obj2.doEvil doEvil
 
 objectProperties:
 [(1, 14), (1, 15)]  obj.a a
@@ -529,43 +539,43 @@ objectProperties:
 [(5, 21), (5, 22)]  com[a].b b
 [(5, 30), (5, 31)]  com[a][d] d
 [(5, 42), (5, 43)]  com[b] b
-[(8, 2), (8, 8)]   render
-[(12, 12), (12, 13)]  obj.foo.a a
-[(12, 17), (12, 18)]  obj.foo.a.b b
-[(12, 27), (12, 28)]  obj.foo.b b
-[(13, 8), (13, 9)]  com.a a
-[(13, 13), (13, 14)]  com.a.b b
-[(13, 23), (13, 24)]  com.b b
-[(16, 15), (16, 16)]  res[0].a a
-[(16, 25), (16, 26)]  res[1].b b
-[(17, 15), (17, 16)]  res2.a a
-[(17, 21), (17, 22)]  res2.a[0].b b
-[(18, 15), (18, 16)]  res3.a a
-[(18, 21), (18, 22)]  res3.a[0].b b
-[(18, 30), (18, 31)]  res3.b b
-[(18, 36), (18, 37)]  res3.b[0].c c
-[(19, 17), (19, 18)]  res4[0].a a
-[(19, 29), (19, 30)]  res4[0].b b
-[(21, 18), (21, 19)]  a a
-[(21, 21), (21, 22)]  b b
-[(22, 22), (22, 23)]  a a
-[(22, 25), (22, 26)]  b b
+[(10, 2), (10, 8)]   render
+[(14, 12), (14, 13)]  obj.foo.a a
+[(14, 17), (14, 18)]  obj.foo.a.b b
+[(14, 27), (14, 28)]  obj.foo.b b
+[(15, 8), (15, 9)]  com.a a
+[(15, 13), (15, 14)]  com.a.b b
+[(15, 23), (15, 24)]  com.b b
+[(18, 15), (18, 16)]  res[0].a a
+[(18, 25), (18, 26)]  res[1].b b
+[(19, 15), (19, 16)]  res2.a a
+[(19, 21), (19, 22)]  res2.a[0].b b
+[(20, 15), (20, 16)]  res3.a a
+[(20, 21), (20, 22)]  res3.a[0].b b
+[(20, 30), (20, 31)]  res3.b b
+[(20, 36), (20, 37)]  res3.b[0].c c
+[(21, 17), (21, 18)]  res4[0].a a
+[(21, 29), (21, 30)]  res4[0].b b
+[(23, 18), (23, 19)]  a a
+[(23, 21), (23, 22)]  b b
+[(24, 22), (24, 23)]  a a
+[(24, 25), (24, 26)]  b b
 
 comments:
 [(1, 29), (1, 44)]
 [(2, 35), (2, 68)]
 [(4, 0), (4, 22)]
 [(5, 51), (5, 67)]
-[(11, 0), (11, 14)]
-[(12, 35), (12, 54)]
-[(13, 31), (13, 46)]
-[(15, 0), (15, 9)]
-[(16, 34), (16, 50)]
-[(17, 32), (17, 50)]
-[(18, 47), (18, 65)]
-[(19, 47), (19, 66)]
-[(21, 29), (21, 38)]
-[(23, 45), (23, 70)]
+[(13, 0), (13, 14)]
+[(14, 35), (14, 54)]
+[(15, 31), (15, 46)]
+[(17, 0), (17, 9)]
+[(18, 34), (18, 50)]
+[(19, 32), (19, 50)]
+[(20, 47), (20, 65)]
+[(21, 47), (21, 66)]
+[(23, 29), (23, 38)]
+[(25, 45), (25, 70)]
 
 identifiers:
 [(1, 6), (1, 27)]  obj obj
@@ -577,35 +587,46 @@ identifiers:
 [(2, 19), (2, 33)]  secondProperty secondProperty
 [(5, 6), (5, 49)]  com com
 [(5, 6), (5, 9)]  com com
-[(7, 0), (7, 3)]  app app
-[(7, 4), (7, 12)]  TodoView TodoView
-[(7, 15), (7, 23)]  Backbone Backbone
-[(7, 24), (7, 30)]  extend extend
-[(12, 0), (12, 3)]  obj obj
-[(12, 4), (12, 7)]  foo foo
-[(13, 0), (13, 3)]  com com
-[(16, 6), (16, 32)]  res res
-[(16, 6), (16, 9)]  res res
-[(17, 6), (17, 30)]  res2 res2
-[(17, 6), (17, 10)]  res2 res2
-[(18, 6), (18, 45)]  res3 res3
-[(18, 6), (18, 10)]  res3 res3
-[(19, 6), (19, 45)]  res4 res4
-[(19, 6), (19, 10)]  res4 res4
-[(19, 32), (19, 33)]  a a
-[(19, 34), (19, 35)]  b b
-[(19, 36), (19, 37)]  c c
-[(19, 38), (19, 39)]  v v
-[(19, 40), (19, 41)]  d d
-[(21, 9), (21, 15)]  params params
-[(22, 4), (22, 32)]  pars pars
-[(22, 4), (22, 8)]  pars pars
-[(23, 6), (23, 43)]  evil evil
-[(23, 6), (23, 10)]  evil evil
-[(23, 13), (23, 17)]  obj2 obj2
-[(23, 18), (23, 24)]  doEvil doEvil
-[(23, 27), (23, 28)]  c c
-[(23, 29), (23, 43)]  secondProperty secondProperty
+[(6, 6), (6, 46)]  firstAuthor firstAuthor
+[(6, 6), (6, 17)]  firstAuthor firstAuthor
+[(6, 20), (6, 30)]  collection collection
+[(6, 31), (6, 36)]  books books
+[(6, 40), (6, 46)]  author author
+[(7, 6), (7, 74)]  firstActionDirector firstActionDirector
+[(7, 6), (7, 25)]  firstActionDirector firstActionDirector
+[(7, 28), (7, 38)]  collection collection
+[(7, 39), (7, 45)]  genres genres
+[(7, 56), (7, 62)]  movies movies
+[(7, 66), (7, 74)]  director director
+[(9, 0), (9, 3)]  app app
+[(9, 4), (9, 12)]  TodoView TodoView
+[(9, 15), (9, 23)]  Backbone Backbone
+[(9, 24), (9, 30)]  extend extend
+[(14, 0), (14, 3)]  obj obj
+[(14, 4), (14, 7)]  foo foo
+[(15, 0), (15, 3)]  com com
+[(18, 6), (18, 32)]  res res
+[(18, 6), (18, 9)]  res res
+[(19, 6), (19, 30)]  res2 res2
+[(19, 6), (19, 10)]  res2 res2
+[(20, 6), (20, 45)]  res3 res3
+[(20, 6), (20, 10)]  res3 res3
+[(21, 6), (21, 45)]  res4 res4
+[(21, 6), (21, 10)]  res4 res4
+[(21, 32), (21, 33)]  a a
+[(21, 34), (21, 35)]  b b
+[(21, 36), (21, 37)]  c c
+[(21, 38), (21, 39)]  v v
+[(21, 40), (21, 41)]  d d
+[(23, 9), (23, 15)]  params params
+[(24, 4), (24, 32)]  pars pars
+[(24, 4), (24, 8)]  pars pars
+[(25, 6), (25, 43)]  evil evil
+[(25, 6), (25, 10)]  evil evil
+[(25, 13), (25, 17)]  obj2 obj2
+[(25, 18), (25, 24)]  doEvil doEvil
+[(25, 27), (25, 28)]  c c
+[(25, 29), (25, 43)]  secondProperty secondProperty
 
 classes:
 
@@ -639,8 +660,8 @@ callExpressions:
 [(37, 20), (37, 28)]   sayHello   Ryan
 
 memberExpressions:
-[(23, 18), (23, 29)] [(23, 10), (23, 29)] name.undefined.toUpperCase toUpperCase
-[(23, 15), (23, 16)] [(23, 10), (23, 17)] name.
+[(23, 18), (23, 29)] [(23, 10), (23, 29)] name[0].toUpperCase toUpperCase
+[(23, 15), (23, 16)] [(23, 10), (23, 17)] name[0]
 [(23, 39), (23, 48)] [(23, 34), (23, 48)] name.substring substring
 [(28, 4), (28, 8)] [(25, 19), (28, 8)]  join
 [(27, 4), (27, 7)] [(25, 19), (27, 7)]  map

src/workers/parser/tests/closest.spec.js

@@ -37,7 +37,7 @@ describe("parser", () => {
         const source = getSource("expression");
         setSource(source);
         const expression = getClosestExpression(source.id, "secondProperty", {
-          line: 6,
+          line: 8,
           column: 32
         });
 

src/workers/parser/tests/fixtures/expression.js

@@ -3,6 +3,8 @@ const foo = obj2.c.secondProperty; // e.g. foo.obj2.c.secondProperty
 
 // computed properties
 const com = { [a]: { b: "c", [d]: "e" }, [b]: 3 }; // e.g. com[a].b
+const firstAuthor = collection.books[1].author;
+const firstActionDirector = collection.genres["sci-fi"].movies[0].director;
 
 app.TodoView = Backbone.extend({
   render: function() {}