search

fullstorydev / fullstory-babel-plugin-annotate-react

A Babel plugin that annotates React components, making them easier to target with FullStory search
MIT License
30 stars 13 forks source link

README inaccuracy #181

Closed van-fs closed 3 months ago

van-fs commented 7 months ago

Describe the bug The readme states, "For React on the web the attributes are data-component, data-element, and data-source-file. For React Native the attributes are dataComponent, dataElement, and dataSourceFile."

To Reproduce N/A

Expected behavior From looking at selectors in a native mobile org, data- attribute selectors definitely index for Mobile Apps platform dependent criteria. I'm not seeing any for dataComponent though. Kevin and Prashanth both said that's a doc bug FWIW. Can we remove the incorrect distinction between web and mobile? My understanding is that its data-* regardless of platform but could use someone more knowledge to clarify.

Actual behavior N/A

Node env (please complete the following information): N/A

Additional comments

Logs N/A

JoshMiers-FS commented 7 months ago

It depends on where you look or what it is actually referring to. In order to get React Native to compile, internally the attributes actually are camel case. However, that is later changed to kebab-case when it hits our backend (I forget where).

JoshMiers-FS commented 7 months ago

Ah, here it is: https://github.com/fullstorydev/fullstory-react-native/blob/master/android/src/main/java/com/fullstory/reactnative/FullStoryNativeProps.java

This is for Android, but you can see we add the kebabe-case as the actual attribute name when it gets set.

JoshMiers-FS commented 7 months ago

I don't mind it being changed, but we should at least be clear that, for the babel plugin, it adds them as camelCase and then changed back to kebab-case when set so that you see them as kebab-case (just like for React web) in FSTA.

van-fs commented 6 months ago

@JoshMiers-FS Perhaps we append the text in bold to the paragraph. WDYT?

For React on the web the attributes are data-component, data-element, and data-source-file. For React Native the attributes are dataComponent, dataElement, and dataSourceFile. Note that for both React web and Native, these attributes will appear as kebab-case in the Fullstory application due to backend processing. End users of Fullstory should create search filters (i.e. segments, metrics, etc) using kebab-case.

JoshMiers-FS commented 6 months ago

That sounds good to me.