diff --git a/CHANGELOG.md b/CHANGELOG.md index be77543..0cbdc1b 100644 --- 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 index 91f0043..b58ad58 100644 --- 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 index 5f30c52..9fca3e9 100644 --- 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/packages/react-strict-dom/src/shared/strictAttributes.js b/packages/react-strict-dom/src/shared/isPropAllowed.js similarity index 94% rename from packages/react-strict-dom/src/shared/strictAttributes.js rename to packages/react-strict-dom/src/shared/isPropAllowed.js index 7ff81fb..29dfbb6 100644 --- a/packages/react-strict-dom/src/shared/strictAttributes.js +++ b/packages/react-strict-dom/src/shared/isPropAllowed.js @@ -7,7 +7,7 @@ * @flow strict */ -export const strictAttributeSet: Set = new Set([ +const strictAttributeSet: Set = new Set([ 'alt', // img 'aria-activedescendant', 'aria-atomic', @@ -62,7 +62,6 @@ export const strictAttributeSet: Set = new Set([ 'checked', // input 'children', 'crossOrigin', // img - 'data-testid', 'decoding', // img 'defaultChecked', // input 'defaultValue', // input, textarea @@ -142,8 +141,6 @@ export const strictAttributeSet: Set = 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 = 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 new file mode 100644 index 0000000..7a1db0b --- /dev/null +++ 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 index de94d8a..2dfa88c 100644 --- 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?: