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

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

 # Changelog
 
+## 2.1.0
+
+- Annotating React.Fragments as a configurable option
+
 ## 2.0.1
@@ -4,0 +8,0 @@

index.js

@@ -10,2 +10,3 @@ const webComponentName = 'data-component';
 const nativeOptionName = 'native';
+const annotateFragmentsOptionName = 'annotate-fragments'
 
@@ -18,2 +19,3 @@ module.exports = function({ types: t }) {
         functionBodyPushAttributes(
+          state.opts[annotateFragmentsOptionName] === true,
           t,
@@ -29,2 +31,3 @@ path,
         functionBodyPushAttributes(
+          state.opts[annotateFragmentsOptionName] === true,
           t,
@@ -53,2 +56,3 @@ path,
             processJSXElement(
+              state.opts[annotateFragmentsOptionName] === true,
               t,
@@ -161,16 +165,26 @@ arg,
 
-function processJSXElement(t, jsxElement, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName) {
+function processJSXElement(annotateFragments, t, jsxElement, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName) {
   if (!jsxElement) {
     return
   }
+  const openingElement = jsxElement.get('openingElement')
 
-  applyAttributes(t, jsxElement.get('openingElement'), componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName)
+  applyAttributes(t, openingElement, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName)
+
   const children = jsxElement.get('children')
   if (children && children.length) {
-    // Children don't receive the data-component attribute so we pass null for componentName
-    children.forEach(element => processJSXElement(t, element, null, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName))
+    let shouldSetComponentName = annotateFragments
+    for (let i=0; i < children.length; i += 1){
+      // Children don't receive the data-component attribute so we pass null for componentName unless it's the first child of a Fragment with a node and `annotateFragments` is true
+      if (shouldSetComponentName && children[i].get('openingElement') && children[i].get('openingElement').node) {
+        shouldSetComponentName = false
+        processJSXElement(annotateFragments, t, children[i], componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName, annotateFragments)
+      } else {
+        processJSXElement(annotateFragments, t, children[i], null, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName, annotateFragments)
+      }
+    }
   }
 }
 
-function functionBodyPushAttributes(t, path, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName) {
+function functionBodyPushAttributes(annotateFragments, t, path, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName) {
   let jsxElement = null
@@ -198,4 +212,3 @@ const functionBody = path.get('body').get('body')
   if (!jsxElement) return
-
-  processJSXElement(t, jsxElement, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName)
+  processJSXElement(annotateFragments, t, jsxElement, componentName, sourceFileName, componentAttributeName, elementAttributeName, sourceFileAttributeName)
 }
@@ -202,0 +215,0 @@

package.json

 {
   "name": "@fullstory/babel-plugin-annotate-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A Babel plugin that annotates React components, making them easier to target with FullStory search",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -45,2 +45,28 @@ # Babel Plugin: Annotate React
 
+
+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.
+
+An example with no child element:
+
+    const componentName = () => (
+      <Fragment>Hello, there.</Fragment>
+    );
+
+An example with child elements:
+
+    const componentName = () => (
+      <Fragment>
+        Some text
+        <h1>Hello, there.</h1> /* This one could be annotated */
+        <a href="#foo">Click me</a>
+      </Fragment>
+    );
+
+
+If you would like the plugin to attempt to annotate the first HTML element created by a Fragment (if it exists) then set the `annotate-fragments` flag:
+
+    plugins: [
+      ["@fullstory/babel-plugin-annotate-react", { "annotate-fragments": true }]
+    ]
+
 We have a few samples to demonstrate this plugin:
@@ -47,0 +73,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

Improved metrics

Total package byte prevSize

13106

increased by15.08%

Lines of code

211

increased by6.57%

Number of lines in readme file

78

increased by50%

No dependency changes