Data Attributes Pattern: Simple Component Hydration

import { useState, useEffect } from 'react';

interface QuantitySelectorProps {
  rootId: string; // ID of the element containing data attributes.
}

export function QuantitySelector({ rootId }: QuantitySelectorProps) {
  const [quantity, setQuantity] = useState(1);
  const [maxQuantity, setMaxQuantity] = useState(99);
  const [lineId, setLineId] = useState('');

  // Read data attributes on mount.
  useEffect(() => {
    const root = document.getElementById(rootId);
    if (!root) return;

    // Destructure data attributes from the element's dataset.
    // All values are strings - parse as needed.
    const { lineId, currentQuantity, maxQuantity, inventoryPolicy } = root.dataset;

    setLineId(lineId || '');
    setQuantity(parseInt(currentQuantity || '1', 10)); // Parse string to number.

    // Only limit quantity if inventory is tracked.
    // 'continue' policy allows overselling.
    if (inventoryPolicy !== 'continue') {
      setMaxQuantity(parseInt(maxQuantity || '99', 10));
    }
  }, [rootId]);

  // Handle quantity changes with bounds checking.
  const handleChange = (newQuantity: number) => {
    if (newQuantity < 1 || newQuantity > maxQuantity) return;
    setQuantity(newQuantity);
    // Update cart via API...
  };

  return (
    <div className="quantity-controls">
      <button onClick={() => handleChange(quantity - 1)} disabled={quantity <= 1}>
        −
      </button>
      <span>{quantity}</span>
      <button onClick={() => handleChange(quantity + 1)} disabled={quantity >= maxQuantity}>
        +
      </button>
    </div>
  );
}

/**
 * Define how each attribute should be parsed.
 * All DOM values are strings - this tells us what type to convert to.
 */
type AttributeType = 'string' | 'number' | 'boolean';

/**
 * Schema maps attribute names to their expected types.
 * Example: { productId: 'string', quantity: 'number' }
 */
type AttributeSchema = Record<string, AttributeType>;

/**
 * Reads data attributes from an element and parses them to correct types.
 * @param elementId - The ID of the DOM element to read from.
 * @param schema - Object mapping attribute names to their types.
 * @returns Parsed attributes object, or null if element not found.
 */
export function readDataAttributes(
  elementId: string,
  schema: AttributeSchema
): Record<string, unknown> | null {
  const element = document.getElementById(elementId);
  if (!element) return null;

  const result: Record<string, unknown> = {};

  for (const [key, type] of Object.entries(schema)) {
    // Dataset auto-converts kebab-case to camelCase, but we also check getAttribute.
    const dataKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
    const value = element.dataset[key] ?? element.getAttribute(`data-${dataKey}`);

    // Skip undefined/null attributes.
    if (value === undefined || value === null) {
      continue;
    }

    // Parse based on declared type.
    switch (type) {
      case 'number':
        result[key] = parseFloat(value); // Convert "42" to 42.
        break;
      case 'boolean':
        result[key] = value === 'true'; // Convert "true"/"false" to boolean.
        break;
      default:
        result[key] = value; // Keep as string.
    }
  }

  return result;
}

import { useState, useEffect } from 'react';

/**
 * Type for parsing each attribute value.
 */
type AttributeType = 'string' | 'number' | 'boolean';

/**
 * Schema mapping attribute names to their expected types.
 */
type AttributeSchema = Record<string, AttributeType>;

/**
 * React hook that reads and parses data attributes from a DOM element.
 * Returns null initially, then parsed data after mount.
 *
 * @param elementId - The ID of the element to read attributes from.
 * @param schema - Object mapping attribute names to their types.
 */
export function useDataAttributes(
  elementId: string,
  schema: AttributeSchema
): Record<string, unknown> | null {
  const [data, setData] = useState<Record<string, unknown> | null>(null);

  // Read attributes after component mounts (DOM is ready).
  useEffect(() => {
    const element = document.getElementById(elementId);
    if (!element) return;

    const result: Record<string, unknown> = {};

    // Iterate through schema and parse each attribute.
    for (const [key, type] of Object.entries(schema)) {
      const value = element.dataset[key];

      if (value === undefined) continue; // Skip missing attributes.

      // Parse based on declared type.
      switch (type) {
        case 'number':
          result[key] = parseFloat(value);
          break;
        case 'boolean':
          result[key] = value === 'true';
          break;
        default:
          result[key] = value;
      }
    }

    setData(result);
  }, [elementId]); // Re-run if elementId changes.

  return data;
}