@fullstory/babel-plugin-annotate-react - npm Package Compare versions

Comparing version 2.2.2 to 2.3.0

index.js

@@ -8,4 +8,4 @@ const webComponentName = 'data-component';
 const nativeSourceFileName = 'dataSourceFile';
+const fsTagName = 'fsTagName'
 
-const nativeOptionName = 'native';
 const annotateFragmentsOptionName = 'annotate-fragments';
@@ -56,2 +56,5 @@ const ignoreComponentsOptionName = 'ignoreComponents';
       this.ignoreComponentsFromOption = this.opts[ignoreComponentsOptionName] || [];
+      if (this.opts.setFSTagName && !this.opts.native) {
+        throw new Error('`setFSTagName: true` is invalid unless `native: true` is also set in the configuration for @fullstory/babel-plugin-annotate-react')
+      }
     },
@@ -162,4 +165,8 @@ visitor: {
 function attributeNamesFromState(state) {
-  if (state.opts[nativeOptionName] === true) {
-    return [nativeComponentName, nativeElementName, nativeSourceFileName]
+  if (state.opts.native) {
+    if (state.opts.setFSTagName) {
+      return [fsTagName, fsTagName, nativeSourceFileName];
+    } else {
+      return [nativeComponentName, nativeElementName, nativeSourceFileName];
+    }
   }
@@ -219,3 +226,5 @@ return [webComponentName, webElementName, webSourceFileName]
     !ignoredComponentFromOptions &&
-    !hasNodeNamed(openingElement, componentAttributeName)
+    !hasNodeNamed(openingElement, componentAttributeName) &&
+    // if componentAttributeName and elementAttributeName are set to the same thing (fsTagName), then only set the element attribute when we don't have a component attribute
+    ((componentAttributeName !== elementAttributeName) || !componentName)
   ) {
@@ -222,0 +231,0 @@ if (defaultIgnoredElements.includes(elementName)) {

package.json

 {
   "name": "@fullstory/babel-plugin-annotate-react",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "A Babel plugin that annotates React components, making them easier to target with FullStory search",
@@ -24,4 +24,7 @@ "main": "index.js",
     "babel-core": "^7.0.0-0",
-    "jest": "^27.2.4"
+    "jest": "^28.1.3"
+  },
+  "overrides": {
+    "semver": "^7.5.3"
   }
 }

README.md

@@ -39,2 +39,4 @@ # Babel Plugin: Annotate React
 
+## React Native
+
 To activate React Native support you must pass in a `native` plugin option like so:
@@ -46,3 +48,28 @@
 
+See [Getting Started with FullStory React Native Capture](https://help.fullstory.com/hc/en-us/articles/360052419133-Getting-Started-with-FullStory-React-Native-Capture) for more info.
 
+### `setFSTagName` setting
+
+When using this library with [FullStory for Mobile Apps](https://www.fullstory.com/platform/mobile-apps/), we recommend setting `setFSTagName: true` to generate better privacy selectors. This setting will automatically set [`fsTagName`](https://developer.fullstory.com/mobile/react-native/auto-capture/set-tag-name/) with the value of `dataElement` or `dataComponent`, which will truncate the privacy selector and avoid duplicate naming.
+
+Example:
+* Before `RCTSafeAreaView[data-source-file="App.tsx"][data-element="SafeAreaView"][data-component="App"]`
+* After `App[data-source-file="App.tsx"]`
+
+```
+plugins: [
+  '@fullstory/react-native',
+  ["@fullstory/annotate-react", {
+    native: true,
+    setFSTagName: true,
+  }]
+]
+```
+
+⚠️ Important: Existing FullStory privacy selectors and defined elements may need to be updated if the app was previously published without `setFSTagName: true`.
+<!-- todo: write up a KB article to walk customers through transitioning to `fsTagName` if they have pre-existing privacy selectors or defined elements; link to it here -->
+
+
+## Fragments
+
 By default, the plugin does not annotate `React.Fragment`s because they may or may not contain a child that ends up being an HTML element.
@@ -73,2 +100,4 @@
 
+## Ignoring Components
+
 If you would like the plugin to skip the annotation for certain components, use the `ignoreComponents` option:
@@ -79,3 +108,3 @@
       [
-        '../..',
+        "@fullstory/annotate-react",
         {
@@ -95,2 +124,4 @@ ignoreComponents:[
 
+## Sample Apps
+
 We have a few samples to demonstrate this plugin:
@@ -97,0 +128,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19773

increased by11.13%

Lines of code

323

increased by2.87%

Number of lines in readme file

137

increased by29.25%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes