Add data-* attrs support

.gitignore

@@ -17,3 +17,4 @@ _build
 # Editor
 /.idea/
 _opam
+.serena/

.ocamlformat

@@ -1 +1 @@
-version = 0.26.0
+version = 0.27.0

demo/main.re

@@ -221,6 +221,83 @@ module WithoutForward = {
   };
 };
 
+module DataAttrsDemo = {
+  [@react.component]
+  let make = () => {
+    <section>
+      <h3> {React.string("Data Attributes Demo")} </h3>
+      <p>
+        {React.string(
+           "Demonstrating common use cases for HTML data attributes with ReasonReact",
+         )}
+      </p>
+      <div className="demo-testing" data_testid="test-automation">
+        <h4> {React.string("Testing & QA")} </h4>
+        <button
+          data_testid="submit-btn"
+          data_cy="submit"
+          onClick={_ => Js.log("Form submitted")}>
+          {React.string("Submit Form")}
+        </button>
+        <input
+          data_testid="email-input"
+          data_cy="email"
+          placeholder="Enter email"
+        />
+      </div>
+      <div className="demo-analytics" data_analytics="user-engagement">
+        <h4> {React.string("Analytics & Tracking")} </h4>
+        <button
+          data_action="click"
+          data_category="engagement"
+          data_label="cta-button"
+          onClick={_ => Js.log("Tracked click")}>
+          {React.string("Call to Action")}
+        </button>
+        <a href="#" data_track="external-link" data_destination="docs">
+          {React.string("External Documentation")}
+        </a>
+      </div>
+      <div className="demo-state" data_theme="dark" data_variant="compact">
+        <h4> {React.string("Component State")} </h4>
+        <div data_status="active" data_priority="high">
+          {React.string("High Priority Task")}
+        </div>
+        <span data_badge="new" data_count="5">
+          {React.string("Notifications")}
+        </span>
+      </div>
+      <div className="demo-a11y">
+        <h4> {React.string("Accessibility Support")} </h4>
+        <button data_tooltip="Save your current progress" data_placement="top">
+          {React.string("Save")}
+        </button>
+        <div data_role="alert" data_level="error">
+          {React.string("Please fix validation errors")}
+        </div>
+      </div>
+      <div
+        className="demo-complex"
+        data_testid="user-card"
+        data_analytics="profile-view"
+        data_theme="light"
+        data_status="premium"
+        style={ReactDOM.Style.make(
+          ~padding="16px",
+          ~border="2px solid #0066cc",
+          (),
+        )}>
+        <h4> {React.string("Complex Example")} </h4>
+        <p>
+          {React.string(
+             "Multiple data attributes working together for testing, analytics, theming, and state management.",
+           )}
+        </p>
+      </div>
+    </section>;
+  };
+};
+
 module App = {
   [@react.component]
   let make = (~initialValue) => {
@@ -237,6 +314,7 @@ module App = {
       <UseReducerNoProblemo key="use-reducer-no-problemo" />
       <FragmentsEverywhere key="fragments-everywhere" />
       <WithoutForward key="without-forward" />
+      <DataAttrsDemo key="data-attrs-demo" />
     </main>;
   };
 };

docs/adding-data-props.md

@@ -2,21 +2,88 @@
 title: Adding data-* attributes
 ---
 
-Reason doesn't support using props with dashes right now, ie: `data-id` or `data-whatever`. You can overcome this by creating a `Spread` component:
+ReasonReact now supports data attributes directly in JSX with zero runtime overhead. Data attributes are transformed at compile-time for optimal performance.
+
+## Direct JSX Support
+
+You can now use `data_*` attributes directly in JSX:
 
 ```reason
-/* Spread.re */
 [@react.component]
-let make = (~props, ~children) => React.cloneElement(children, props);
+let make = () => {
+  <div data_testid="my-component" data_cy="cypress-test" className="container">
+    {React.string("Hello World")}
+  </div>
+};
+```
+
+This compiles to efficient code with proper `data-*` attribute names in the DOM:
+```html
+<div data-testid="my-component" data-cy="cypress-test" class="container">
+  Hello World
+</div>
 ```
 
-Using Spread:
+## How It Works
+
+The PPX automatically detects `data_*` attributes and:
+1. **Transforms names**: `data_testid` becomes `data-testid` in the DOM
+2. **Zero runtime overhead**: All transformation happens at compile-time  
+3. **Backwards compatible**: Elements without data attributes use the standard path
+
+## Examples
 
+### Basic Usage
 ```reason
-[@react.component]
-let make = () =>
-  <Spread props={"data-cy": name}>
-    /* This div will now have the `data-cy` attribute in the DOM! */
-    <div />
-  </Spread>;
+// Single data attribute
+<button data_testid="submit-btn" onClick>
+  {React.string("Submit")}
+</button>
+
+// Multiple data attributes  
+<div data_testid="user-card" data_role="card" data_index="0">
+  {React.string("User content")}
+</div>
+```
+
+### Combined with Other Props
+```reason
+<input 
+  data_testid="email-input"
+  data_automation="login-form" 
+  type_="email"
+  className="form-input"
+  placeholder="Enter email"
+/>
+```
+
+### Backwards Compatibility
+```reason
+// Elements without data attributes work exactly as before
+<div className="regular" id="normal">
+  {React.string("No data attributes")}  
+</div>
+```
+
+## Migration from Old Workarounds
+
+If you were using the `Spread` component workaround:
+
+### Before (Old Workaround)
+```reason
+<Spread props={"data-cy": "test"}>
+  <div />
+</Spread>
+```
+
+### After (Direct JSX)
+```reason
+<div data_cy="test" />
 ```
+
+## Technical Details
+
+- **Compile-time transformation**: No runtime performance impact
+- **DOM elements only**: Works with `div`, `span`, `button`, etc. 
+- **Automatic naming**: `data_testid` → `data-testid`, `data_user_id` → `data-user-id`
+- **Type safe**: Compile-time validation of attribute syntax