chore: Split out data attributes to separate files

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### New features
 
-* [Native] Add `del`, `ins`, `kbd`, `s`, `u` semantic elements ([#57](https://github.com/facebook/react-strict-dom/pull/57))
+* [Native] Add `del`, `ins`, `kbd`, `s`, `u` semantic elements ([#57](https://github.com/facebook/react-strict-dom/pull/57)).
 
 ## 0.0.3 (Mar 10, 2024)
 

flow-typed/react-strict-dom.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+// This type allows Meta (and other users) to define data-*
+// props used by their components to work around Flow's current
+// lack of support for typing arbitrary data-* props.
+declare type ReactStrictDOMDataProps = {};
+
+// This type allows Meta to internally override it with an
+// internationalization type which is a string at runtime…
+// but Flow doesn't know that.
+declare type Stringish = string;

packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js

@@ -13,13 +13,13 @@ import type { StrictHTMLElement } from '../../types/StrictHTMLElement';
 
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { strictAttributeSet } from '../../shared/strictAttributes';
 import { errorMsg } from '../../shared/errorMsg';
+import { isPropAllowed } from '../../shared/isPropAllowed';
 
 // $FlowFixMe[unclear-type]
 function validateStrictProps(props: any) {
   Object.keys(props).forEach((key) => {
-    const isValid = strictAttributeSet.has(key);
+    const isValid = isPropAllowed(key);
     if (!isValid) {
       errorMsg(`"${key}" is not a valid prop`);
       delete props[key];

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -28,8 +28,8 @@ import { flattenStyle } from './flattenStyle';
 import { errorMsg } from '../../shared/errorMsg';
 import { extractStyleThemes } from './extractStyleThemes';
 import { getLocaleDirection } from '../../shared/getLocaleDirection';
+import { isPropAllowed } from '../../shared/isPropAllowed';
 import { mergeRefs } from '../../shared/mergeRefs';
-import { strictAttributeSet } from '../../shared/strictAttributes';
 import { useHoverHandlers } from './useHoverHandlers';
 import { useStrictDOMElement } from './useStrictDOMElement';
 import { useStyleProps } from './useStyleProps';
@@ -124,7 +124,7 @@ function isString(str: mixed): boolean %checks {
 
 function validateStrictProps(props: any) {
   Object.keys(props).forEach((key) => {
-    const isValidProp = strictAttributeSet.has(key);
+    const isValidProp = isPropAllowed(key);
     const isUnsupportedProp = unsupportedProps.has(key);
     if (!isValidProp) {
       errorMsg(`"${key}" is not a valid prop`);

packages/react-strict-dom/src/shared/strictAttributes.js → packages/react-strict-dom/src/shared/isPropAllowed.js

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export const strictAttributeSet: Set<string> = new Set([
+const strictAttributeSet: Set<string> = new Set([
   'alt', // img
   'aria-activedescendant',
   'aria-atomic',
@@ -62,7 +62,6 @@ export const strictAttributeSet: Set<string> = new Set([
   'checked', // input
   'children',
   'crossOrigin', // img
-  'data-testid',
   'decoding', // img
   'defaultChecked', // input
   'defaultValue', // input, textarea
@@ -142,8 +141,6 @@ export const strictAttributeSet: Set<string> = new Set([
   'value', // input
   'width', // img
 
-  'data-imgperflogname', // TEMPORARY
-  'data-visualcompletion', // TEMPORARY
   'onMouseDown', // TEMPORARY
   'onMouseEnter', // TEMPORARY
   'onMouseLeave', // TEMPORARY
@@ -156,3 +153,7 @@ export const strictAttributeSet: Set<string> = new Set([
   'onTouchMove', // TEMPORARY
   'onTouchStart' // TEMPORARY
 ]);
+
+export function isPropAllowed(key: string): boolean {
+  return strictAttributeSet.has(key) || key.indexOf('data-') > -1;
+}

packages/react-strict-dom/src/types/StrictReactDOMProps.js

@@ -202,12 +202,11 @@ type EventProps = $ReadOnly<{
 export type StrictReactDOMProps = $ReadOnly<{
   ...AriaProps,
   ...EventProps,
+  ...ReactStrictDOMDataProps,
   autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
   autoFocus?: boolean,
   children?: React$Node,
-  'data-imgperflogname'?: string, // TEMPORARY
   'data-testid'?: string,
-  'data-visualcompletion'?: string, // TEMPORARY
   dir?: 'auto' | 'ltr' | 'rtl',
   elementTiming?: string,
   enterKeyHint?: