added literals for computed member expressions (#5818)

Author: bomsy

src/actions/preview.js

@@ -73,21 +73,19 @@ function isInvalidTarget(target: HTMLElement) {
   const cursorPos = target.getBoundingClientRect();
 
   // exclude literal tokens where it does not make sense to show a preview
-  const invaildType = ["cm-string", "cm-number", "cm-atom"].includes(
-    target.className
-  );
+  const invalidType = ["cm-atom", ""].includes(target.className);
 
   // exclude syntax where the expression would be a syntax error
   const invalidToken =
-    tokenText === "" || tokenText.match(/[(){}\|&%,.;=<>\+-/\*\s]/);
+    tokenText === "" || tokenText.match(/^[(){}\|&%,.;=<>\+-/\*\s](?=)/);
 
   // exclude codemirror elements that are not tokens
   const invalidTarget =
     (target.parentElement &&
       !target.parentElement.closest(".CodeMirror-line")) ||
     cursorPos.top == 0;
 
-  return invalidTarget || invalidToken || invaildType;
+  return invalidTarget || invalidToken || invalidType;
 }
 
 export function getExtra(

src/actions/tests/__snapshots__/ast.spec.js.snap

@@ -123,6 +123,7 @@ Object {
     },
   ],
   "imports": Array [],
+  "literals": Array [],
   "memberExpressions": Array [],
   "objectProperties": Array [],
   "variables": Array [

src/utils/ast.js

@@ -19,21 +19,23 @@ export function findBestMatchExpression(
   symbols: SymbolDeclarations,
   tokenPos: Position
 ) {
-  const { memberExpressions, identifiers } = symbols;
+  const { memberExpressions, identifiers, literals } = symbols;
   const { line, column } = tokenPos;
-  return identifiers.concat(memberExpressions).reduce((found, expression) => {
-    const overlaps =
-      expression.location.start.line == line &&
-      expression.location.start.column <= column &&
-      expression.location.end.column >= column &&
-      !expression.computed;
+  return identifiers
+    .concat(memberExpressions, literals)
+    .reduce((found, expression) => {
+      const overlaps =
+        expression.location.start.line == line &&
+        expression.location.start.column <= column &&
+        expression.location.end.column >= column &&
+        !expression.computed;
 
-    if (overlaps) {
-      return expression;
-    }
+      if (overlaps) {
+        return expression;
+      }
 
-    return found;
-  }, null);
+      return found;
+    }, null);
 }
 
 export function findEmptyLines(

src/workers/parser/getSymbols.js

@@ -129,7 +129,7 @@ function getSpecifiers(specifiers) {
 
   return specifiers.map(specifier => specifier.local && specifier.local.name);
 }
-
+/* eslint-disable complexity */
 function extractSymbol(path: SimplePath, symbols) {
   if (isVariable(path)) {
     symbols.variables.push(...getVariableNames(path));
@@ -189,6 +189,19 @@ function extractSymbol(path: SimplePath, symbols) {
     });
   }
 
+  if (
+    (t.isStringLiteral(path) || t.isNumericLiteral(path)) &&
+    t.isMemberExpression(path.parentPath)
+  ) {
+    // We only need literals that are part of computed memeber expressions
+    const { start, end } = path.node.loc;
+    symbols.literals.push({
+      name: path.node.value,
+      location: { start, end },
+      expression: getSnippet(path.parentPath)
+    });
+  }
+
   if (t.isCallExpression(path)) {
     const callee = path.node.callee;
     const args = path.node.arguments;
@@ -249,6 +262,7 @@ function extractSymbol(path: SimplePath, symbols) {
     });
   }
 }
+/* eslint-enable complexity */
 
 function extractSymbols(sourceId) {
   const symbols = {
@@ -261,6 +275,7 @@ function extractSymbols(sourceId) {
     identifiers: [],
     classes: [],
     imports: [],
+    literals: [],
     hasJsx: false,
     hasTypes: false
   };

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

@@ -89,6 +89,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -131,6 +134,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -181,6 +187,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -333,6 +342,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: true
 
 hasTypes: false"
@@ -421,6 +433,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -455,6 +470,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -634,6 +652,11 @@ classes:
 imports:
 
 
+literals:
+[(6, 37), (6, 38)]  collection.books[1] 1
+[(7, 46), (7, 54)]  collection.genres[\\"sci-fi\\"] sci-fi
+[(7, 63), (7, 64)]  collection.genres[\\"sci-fi\\"].movies[0] 0
+
 hasJsx: false
 
 hasTypes: false"
@@ -713,6 +736,9 @@ classes:
 imports:
 
 
+literals:
+[(23, 15), (23, 16)]  name[0] 0
+
 hasJsx: false
 
 hasTypes: false"
@@ -753,6 +779,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: true"
@@ -809,6 +838,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -955,6 +987,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -992,6 +1027,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: true
 
 hasTypes: false"
@@ -1050,6 +1088,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -1109,6 +1150,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -1146,6 +1190,9 @@ classes:
 imports:
 [(1, 0), (1, 41)]     React, Component
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"
@@ -1192,6 +1239,9 @@ classes:
 imports:
 
 
+literals:
+
+
 hasJsx: false
 
 hasTypes: false"

src/workers/parser/utils/formatSymbols.js

@@ -29,7 +29,7 @@ function summarize(symbol) {
     : "";
   const expression = symbol.expression || "";
   const klass = symbol.klass || "";
-  const name = symbol.name || "";
+  const name = symbol.name == undefined ? "" : symbol.name;
   const names = symbol.specifiers ? symbol.specifiers.join(", ") : "";
   const values = symbol.values ? symbol.values.join(", ") : "";