@wix/babel-plugin-jsx-dynamic-data

A Babel plugin that automatically adds a data-dynamic attribute to primitive HTML elements within your React components when their attributes or text content contain dynamic expressions.

This helps in identifying parts of the DOM that are reactive to dynamic data and disabling styling of elements that have dynamic attributes in the editor.

How it Works

The plugin traverses the JSX in your components and performs the following:

1. Identifies Dynamic Expressions: It detects expressions (variables, function calls, object access, etc.) used in JSX attributes and text content.
2. Tags Primitive Elements: If a primitive HTML element (e.g., div, span, img) has an attribute or text content that contains dynamic expressions, the plugin adds a data-dynamic attribute to that element.
   • The value of data-dynamic is a space-separated string containing the names of the attributes that are dynamic.
   • If text content is dynamic, "text" is included in the data-dynamic value.
   • For Tailwind CSS classes, the plugin maps class names to their corresponding CSS properties.
3. Exclusions:
   • It does not add data-dynamic to custom React components (e.g., <MyCustomButton />).
   • It ignores elements inside custom components.
   • It ignores key attributes and event handlers (e.g., onClick, onChange).
   • For the style attribute, if any part of the style object is dynamic, data-dynamic="style" is added.
   • For dangerouslySetInnerHTML, if its content is dynamic, data-dynamic="text" is added.
4. Component Processing: Only exported components are processed to optimize performance.

Installation

npm install --save-dev @wix/babel-plugin-jsx-dynamic-data
# or
yarn add --dev @wix/babel-plugin-jsx-dynamic-data

Usage

Add the plugin to your Babel configuration (e.g., .babelrc.js or babel.config.js):

// .babelrc.js or babel.config.js
module.exports = {
  plugins: [
    // Other plugins...
    "@wix/babel-plugin-jsx-dynamic-data",
  ],
};

Or if using JSON configuration:

{
  "plugins": ["@wix/babel-plugin-jsx-dynamic-data"]
}

Examples

Here are some examples of how the plugin transforms your code:

1. Dynamic Attributes & Text Content

Before:

function UserGreeting({ name, id, userColor }) {
  return (
    <div id={id} className="user-greeting" style={{ color: userColor }}>
      Hello, {name}!
    </div>
  );
}

After:

function UserGreeting({ name, id, userColor }) {
  return (
    <div id={id} className="user-greeting" style={{ color: userColor }} data-dynamic="id style text">
      Hello, {name}!
    </div>
  );
}

2. Dynamic Style Attribute

Before:

function HighlightBox({ isActive, highlightColor }) {
  const styles = {
    padding: '10px',
    backgroundColor: isActive ? highlightColor : 'transparent',
  };
  return <div style={styles}>Important content</div>;
}

After:

function HighlightBox({ isActive, highlightColor }) {
  const styles = {
    padding: '10px',
    backgroundColor: isActive ? highlightColor : 'transparent',
  };
  return <div style={styles} data-dynamic="style">Important content</div>;
}

3. Dynamic Text Content

Before:

function ItemCount({ count }) {
  return <p>Total items: {count}</p>;
}

After:

function ItemCount({ count }) {
  return <p data-dynamic="text">Total items: {count}</p>;
}