Does not work properly for jsx/tsx react components

[evelant]

Describe the bug When opening a .tsx file containing react (native) components Outline Map does not display correctly. It lists every attribute of every jsx prop as a top level property of the function returning the component.

To Reproduce Open a .tsx file with content such as:

import { View, Text } from "react-native"
function Test() {
    const foo = "bar"
    return (
        <View style={{ marginLeft: 20, marginRight: 20 }}>
            <Text ref={{current: null}}>{foo}</Text>
        </View>
    )
}

Expected behavior Outline map shows "Test" and "foo".

Actual Behavior Outline map shows "Test", "foo", "marginLeft", "marginRight", "current"

Screenshots

[joshua-dean]

The built-in vscode outline also produces these symbols, which means they're getting returned by vscode.executeDocumentSymbolProvider. You can disable properties specifically for the vscode outline with the outline.showProperties setting, but this doesn't appear to apply to outline-map. I'm guessing it would be a simple enough expansion to make outline-map read the outline. or breadcrumbs. settings, or expand outline-map.workspace.excludes to be able to filter by symbol type.

These aren't really complete solutions as they would hide all properties, including ones in object declarations. Excluding properties just in JSX/TSX is tricky - I don't know if the existing vscode API can provide everything necessary, or if a custom Document Symbol Provider would have to be built.