Workaround to allow arbitrary data-* types with Flow

Allow arbitrary data-* props at runtime. On web, the check is only performed during development. To workaround Flow's lack of support for typing arbitary data-* props, a separate type is created just for data-* props which can be used to maintain an app's list of supported data-* props. Ref #71 Close #75
facebook · Apr 4, 2024 · 43b8181 · 43b8181
1 parent 8c8aba3
commit 43b8181
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 12 deletions.
diff --git a/CHANGELOG.md b/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)
 

diff --git a/packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js b/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];

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js b/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`);

diff --git a/...strict-dom/src/shared/strictAttributes.js → ...ct-strict-dom/src/shared/isPropAllowed.js b/...strict-dom/src/shared/strictAttributes.js → ...ct-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;
+}
diff --git a/packages/react-strict-dom/src/types/DataProps.js b/packages/react-strict-dom/src/types/DataProps.js
@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+
+export type DataProps = $ReadOnly<{
+  'data-testid'?: string
+}>;
diff --git a/packages/react-strict-dom/src/types/StrictReactDOMProps.js b/packages/react-strict-dom/src/types/StrictReactDOMProps.js
@@ -8,6 +8,7 @@
  */
 
 import type { StrictElement } from './StrictElement';
+import type { DataProps } from './DataProps';
 import type { ReactRef } from './Utilities';
 import type { Styles } from './styles';
 
@@ -202,12 +203,10 @@ type EventProps = $ReadOnly<{
 export type StrictReactDOMProps = $ReadOnly<{
   ...AriaProps,
   ...EventProps,
+  ...DataProps,
   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?: