Ensure transforms are only applied to top level components

[zephraph]

In #1095 there was an issue with the displayName plugin where something like

export function f() {
  const dateTimeRangePicker = <div>{() => <div />}</div>
}

was converted to

export function f() {
  const dateTimeRangePicker = <div>{() => <div />}</div>;
  dateTimeRangePicker.displayName = "dateTimeRangePicker - filePath.tsx"
}

There's a few issues here. One obvious issue is that the plugin is never supposed to add displayName to something not top level. That's the bit this PR fixes (which resolves the underlying issue even though it doesn't address the actual root).

The other issue here is that dateTimeRangePicker should've never be given a displayName to begin with. The shape is all wrong. This is happening because it finds the function and looks up the tree to see if there's a parent declaration and proceeds to add the display name... this behavior is wrong and was left broadly because it made it easier to solve for the forwardRef case. I'll create a follow up to solve that one.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	Aug 31, 2022 at 4:53PM (UTC)