Components using Array.map to construct children do not satisfy conditions for the transform

[alxclark]

Using a simple component that maps onto an array, the transform does not see that the children are actually using signals and does not trigger the transform.

Example:

export function App({ name }) {
  const greetings = ["Hello", "Goodbye"]
  const children = greetings.map((greeting) => <div key={greeting}>{greeting} {name.value}</div>)

  return <div>{children}</div>;
}

I opened a draft PR adding a test showing the error case: https://github.com/preactjs/signals/pull/551/files#r1552520125

[alxclark]

After digging into the babel plugin for a little while, it looks like the following happens when using a map:

• We iterate over all MemberExpression
• We find the signal access in Array.map
• We attempt to set on the parent function scope that this function uses signals
• We end up writing on the arrow function of the map instead of the component
• We iterate over function calls, check if they both contain JSX and signals
• Turns out the function is not marked as using signals since it was added to the map's arrow function scope.
• Transform ignores our component.

A naive and not performant solution would be to recursively write to the parent until we hit the root of our program, which should hopefully be just a handful of levels deep.

There's probably a better way of solving this, I'd love some feedback from folks more familiar with babel plugins. 😄

[XantreDev]

Yes, we can do it here, until reach parent

signals/packages/react-transform/src/index.ts

Line 541 in d3935e8

setOnFunctionScope(path, maybeUsesSignal, true);

[XantreDev]

I can make a pr. It shouldn't impact performance

[alxclark]

@XantreDev That would be awesome, I'm more than happy to review once you do!