fix(inspector) Changes to data tracing.

- Prevent tracing through spread objects or arrays. - Widen `hookCallRegex` a little.
concrete-utopia · May 13, 2024 · 5c8e5d0 · 5c8e5d0
1 parent 4ca931c
commit 5c8e5d0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/editor/src/core/data-tracing/data-tracing.spec.ts b/editor/src/core/data-tracing/data-tracing.spec.ts
@@ -12,6 +12,7 @@ import { jsIdentifier } from '../shared/element-template'
 import type { ElementPath } from '../shared/project-file-types'
 import * as PP from '../shared/property-path'
 import {
+  dataTracingFailed,
   dataTracingToAHookCall,
   dataTracingToLiteralAttribute,
   traceDataFromProp,
@@ -493,7 +494,7 @@ describe('Data Tracing', () => {
       )
     })
 
-    it('Traces back a prop to a array destructured hook', async () => {
+    it('Does not trace back a prop through an array destructured hook', async () => {
       const editor = await renderTestEditorWithCode(
         makeTestProjectCodeWithStoryboard(`
         function useArray() {
@@ -521,12 +522,7 @@ describe('Data Tracing', () => {
         [],
       )
 
-      expect(traceResult).toEqual(
-        dataTracingToAHookCall(EP.fromString('sb/app:my-component:component-root'), 'useArray', [
-          '2',
-          'rest',
-        ]),
-      )
+      expect(traceResult).toEqual(dataTracingFailed('Could not find a hook call'))
     })
 
     it('Traces back a prop to a useLoaderData() hook through assignment indirections', async () => {

diff --git a/editor/src/core/data-tracing/data-tracing.ts b/editor/src/core/data-tracing/data-tracing.ts
@@ -440,7 +440,7 @@ function walkUpInnerScopesUntilReachingComponent(
   )
 }
 
-const hookCallRegex = /^(use[A-Za-z]+)\(/
+const hookCallRegex = /^(use[A-Za-z0-9_]+)\(/
 
 function getPossibleHookCall(expression: JSExpression): string | null {
   switch (expression.type) {
@@ -482,7 +482,10 @@ function findPathToIdentifier(param: BoundParam, identifier: string): DataPath |
         }
       case 'DESTRUCTURED_OBJECT':
         for (const part of workingParam.parts) {
-          if (part.propertyName == identifier) {
+          // Prevent drilling down through spread values.
+          if (part.param.dotDotDotToken) {
+            return null
+          } else if (part.propertyName == identifier) {
             return [...currentPath, part.propertyName]
           } else if (
             part.propertyName != null &&
@@ -503,6 +506,10 @@ function findPathToIdentifier(param: BoundParam, identifier: string): DataPath |
         for (const part of workingParam.parts) {
           switch (part.type) {
             case 'PARAM':
+              // Prevent drilling down through spread values.
+              if (part.dotDotDotToken) {
+                return null
+              }
               const possibleResult = innerFindPath(part.boundParam, [
                 ...currentPath,
                 `${arrayIndex}`,