diff --git a/.eslintrc.js b/.eslintrc.js index d8b31a98..2bcd49e7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,6 +28,7 @@ module.exports = { 'import/no-cycle': 'error', 'no-unreachable': 'error', 'no-undef': 'error', + 'eqeqeq': 'error', 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'error', 'react/jsx-uses-react': 'error', diff --git a/examples/benchmarking/src/listMemoFacet.tsx b/examples/benchmarking/src/listMemoFacet.tsx index 9d8406b9..cc0e3961 100644 --- a/examples/benchmarking/src/listMemoFacet.tsx +++ b/examples/benchmarking/src/listMemoFacet.tsx @@ -18,7 +18,7 @@ export const Performance = () => { const tick = () => { setDataFacet((data) => { - if (data == NO_VALUE) return [] + if (data === NO_VALUE) return [] data[0].health = data[0].health === 10 ? 5 : 10 return data @@ -50,6 +50,7 @@ const ListItem = ({ item }: { item: Facet }) => { useFacetEffect( (health) => { randomWork(health) + return undefined }, [], [health], @@ -58,6 +59,7 @@ const ListItem = ({ item }: { item: Facet }) => { useFacetEffect( (name) => { randomWork(name) + return undefined }, [], [name], @@ -66,6 +68,7 @@ const ListItem = ({ item }: { item: Facet }) => { useFacetEffect( (name) => { randomWork(name) + return undefined }, [], [name], @@ -74,6 +77,7 @@ const ListItem = ({ item }: { item: Facet }) => { useFacetEffect( (name) => { randomWork(name) + return undefined }, [], [name], diff --git a/packages/@react-facet/core/src/components/Map.tsx b/packages/@react-facet/core/src/components/Map.tsx index 0cebf049..0710419b 100644 --- a/packages/@react-facet/core/src/components/Map.tsx +++ b/packages/@react-facet/core/src/components/Map.tsx @@ -17,7 +17,7 @@ export const Map = ({ array, children, equalityCheck }: MapProps) => { <> {times( (index) => - equalityCheck != null ? ( + equalityCheck !== undefined ? ( key={index} arrayFacet={array} diff --git a/packages/@react-facet/core/src/components/With.tsx b/packages/@react-facet/core/src/components/With.tsx index 9e57e123..183ed3c8 100644 --- a/packages/@react-facet/core/src/components/With.tsx +++ b/packages/@react-facet/core/src/components/With.tsx @@ -13,7 +13,7 @@ const hasData = (_: Facet, shouldRender: boolean | NoV } export const With = ({ data, children }: WithProps) => { - const shouldRenderFacet = useFacetMap((data) => data != null, [], [data]) + const shouldRenderFacet = useFacetMap((data) => data !== null && data !== undefined, [], [data]) const shouldRender = useFacetUnwrap(shouldRenderFacet) return hasData(data, shouldRender) ? children(data) : null } diff --git a/packages/@react-facet/core/src/createEqualityChecks.ts b/packages/@react-facet/core/src/createEqualityChecks.ts index 49f909b0..8ed2dea2 100644 --- a/packages/@react-facet/core/src/createEqualityChecks.ts +++ b/packages/@react-facet/core/src/createEqualityChecks.ts @@ -10,8 +10,8 @@ export const createNullableEqualityCheck = (comparator: EqualityCheck) => let previous: T | null | undefined | NoValue = NO_VALUE return (value: T | null | undefined) => { - if (value == null || previous == null) { - if (value != previous) { + if (value === undefined || value === null || previous === undefined || previous === null) { + if (value !== previous) { previous = value return false } else { @@ -90,7 +90,7 @@ export const createUniformArrayEqualityCheck = let isEquals = true for (let i = 0; i < longestLength; i++) { - if (previous[i] == null) { + if (previous[i] === undefined) { previous[i] = comparator() } if (!previous[i](current[i])) { @@ -158,7 +158,7 @@ export const createOptionalValueEqualityCheck = let initializedComparator = comparator() return (current: T | undefined | null) => { - if (current == null) { + if (current === undefined || current === null) { if (previousWasNullish) { return true } diff --git a/packages/@react-facet/core/src/facet/createFacet.ts b/packages/@react-facet/core/src/facet/createFacet.ts index bf397a3f..971c06c6 100644 --- a/packages/@react-facet/core/src/facet/createFacet.ts +++ b/packages/@react-facet/core/src/facet/createFacet.ts @@ -22,7 +22,7 @@ export function createFacet({ const checker = equalityCheck?.() const update = (newValue: V) => { - if (equalityCheck != null) { + if (equalityCheck !== undefined) { // we optimize for the most common scenario of using the defaultEqualityCheck (by inline its implementation) if (equalityCheck === defaultEqualityCheck) { const typeofValue = typeof newValue @@ -37,7 +37,7 @@ export function createFacet({ return } } else { - if (checker != null && checker(newValue)) { + if (checker !== undefined && checker(newValue)) { return } } diff --git a/packages/@react-facet/core/src/helpers/hasDefinedValue.ts b/packages/@react-facet/core/src/helpers/hasDefinedValue.ts index a89afb40..f8f27f90 100644 --- a/packages/@react-facet/core/src/helpers/hasDefinedValue.ts +++ b/packages/@react-facet/core/src/helpers/hasDefinedValue.ts @@ -1,3 +1,4 @@ import { NoValue, NO_VALUE, Value } from '../types' -export const hasDefinedValue = (value: Value | NoValue): value is Value => value != null && value !== NO_VALUE +export const hasDefinedValue = (value: Value | NoValue): value is Value => + value !== undefined && value !== null && value !== NO_VALUE diff --git a/packages/@react-facet/core/src/helpers/multiObserve.ts b/packages/@react-facet/core/src/helpers/multiObserve.ts index f93eaaa9..067e52d7 100644 --- a/packages/@react-facet/core/src/helpers/multiObserve.ts +++ b/packages/@react-facet/core/src/helpers/multiObserve.ts @@ -26,10 +26,10 @@ export function multiObserve[], T extends [...Y]>( for (let i = 0; i < facets.length; i++) { unsubscribes[i] = facets[i].observe((value) => { values[i] = value - hasAllDependencies = hasAllDependencies || values.every((value) => value != NO_VALUE) + hasAllDependencies = hasAllDependencies || values.every((value) => value !== NO_VALUE) if (hasAllDependencies) { - if (cleanup != null) { + if (cleanup !== undefined) { cleanup() } @@ -42,7 +42,7 @@ export function multiObserve[], T extends [...Y]>( for (let index = 0; index < unsubscribes.length; index++) { unsubscribes[index]() } - if (cleanup != null) { + if (cleanup !== undefined) { cleanup() } } diff --git a/packages/@react-facet/core/src/hooks/useFacetCallback.spec.tsx b/packages/@react-facet/core/src/hooks/useFacetCallback.spec.tsx index 741c8728..84de5a05 100644 --- a/packages/@react-facet/core/src/hooks/useFacetCallback.spec.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetCallback.spec.tsx @@ -104,6 +104,7 @@ it('should work with uninitialized values', () => { useFacetEffect( () => { handler() + return undefined }, [handler], [internalDemoFacet], diff --git a/packages/@react-facet/core/src/hooks/useFacetCallback.ts b/packages/@react-facet/core/src/hooks/useFacetCallback.ts index 22cea614..9b1d2a6a 100644 --- a/packages/@react-facet/core/src/hooks/useFacetCallback.ts +++ b/packages/@react-facet/core/src/hooks/useFacetCallback.ts @@ -70,7 +70,7 @@ export function useFacetCallback[], T extends [...Y] const values = facets.map((facet) => facet.get()) for (const value of values) { - if (value === NO_VALUE) return defaultReturnValue != null ? defaultReturnValue : NO_VALUE + if (value === NO_VALUE) return defaultReturnValue !== undefined ? defaultReturnValue : NO_VALUE } return callbackMemoized(...(values as ExtractFacetValues))(...(args as K)) diff --git a/packages/@react-facet/core/src/hooks/useFacetEffect.spec.tsx b/packages/@react-facet/core/src/hooks/useFacetEffect.spec.tsx index 625ee08b..0cc821a8 100644 --- a/packages/@react-facet/core/src/hooks/useFacetEffect.spec.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetEffect.spec.tsx @@ -42,6 +42,7 @@ it('triggers the effect when a dependency changes', () => { useFacetEffect( (value) => { callback(`${value} ${dependency}`) + return undefined }, [dependency], [demoFacet], diff --git a/packages/@react-facet/core/src/hooks/useFacetEffect.tsx b/packages/@react-facet/core/src/hooks/useFacetEffect.tsx index a52f33c4..7d22ba48 100644 --- a/packages/@react-facet/core/src/hooks/useFacetEffect.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetEffect.tsx @@ -4,7 +4,7 @@ import { cancelScheduledTask, scheduleTask } from '../scheduler' export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayoutEffect) => { return function [], T extends [...Y]>( - effect: (...args: ExtractFacetValues) => void | Cleanup, + effect: (...args: ExtractFacetValues) => undefined | Cleanup, dependencies: unknown[], facets: T, ) { @@ -12,11 +12,11 @@ export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayou const effectMemoized = useCallback(effect as (...args: unknown[]) => ReturnType, dependencies) useHook(() => { - let cleanup: void | Cleanup + let cleanup: undefined | Cleanup if (facets.length === 1) { const unsubscribe = facets[0].observe((value) => { - if (cleanup != null) { + if (cleanup !== undefined) { cleanup() } @@ -25,7 +25,7 @@ export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayou return () => { unsubscribe() - if (cleanup != null) { + if (cleanup !== undefined) { cleanup() } } @@ -36,10 +36,10 @@ export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayou const values: unknown[] = facets.map(() => NO_VALUE) const task = () => { - hasAllDependencies = hasAllDependencies || values.every((value) => value != NO_VALUE) + hasAllDependencies = hasAllDependencies || values.every((value) => value !== NO_VALUE) if (hasAllDependencies) { - if (cleanup != null) { + if (cleanup !== undefined) { cleanup() } @@ -61,7 +61,7 @@ export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayou return () => { cancelScheduledTask(task) unsubscribes.forEach((unsubscribe) => unsubscribe()) - if (cleanup != null) { + if (cleanup !== undefined) { cleanup() } } diff --git a/packages/@react-facet/core/src/hooks/useFacetMap.spec.tsx b/packages/@react-facet/core/src/hooks/useFacetMap.spec.tsx index 86f78c93..6a83b751 100644 --- a/packages/@react-facet/core/src/hooks/useFacetMap.spec.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetMap.spec.tsx @@ -105,6 +105,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value.name) + return undefined }, [], [adaptValue], @@ -147,6 +148,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -189,6 +191,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -231,6 +234,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -388,6 +392,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value.name) + return undefined }, [], [adaptValue], @@ -429,6 +434,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -470,6 +476,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -511,6 +518,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], diff --git a/packages/@react-facet/core/src/hooks/useFacetMemo.spec.tsx b/packages/@react-facet/core/src/hooks/useFacetMemo.spec.tsx index ec378acb..cc1fe33b 100644 --- a/packages/@react-facet/core/src/hooks/useFacetMemo.spec.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetMemo.spec.tsx @@ -105,6 +105,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value.name) + return undefined }, [], [adaptValue], @@ -147,6 +148,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -189,6 +191,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -231,6 +234,7 @@ describe('multiple dependencies', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -388,6 +392,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value.name) + return undefined }, [], [adaptValue], @@ -429,6 +434,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -470,6 +476,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], @@ -511,6 +518,7 @@ describe('single dependency', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [adaptValue], diff --git a/packages/@react-facet/core/src/hooks/useFacetPropSetter.ts b/packages/@react-facet/core/src/hooks/useFacetPropSetter.ts index b15a8522..cd5b69e6 100644 --- a/packages/@react-facet/core/src/hooks/useFacetPropSetter.ts +++ b/packages/@react-facet/core/src/hooks/useFacetPropSetter.ts @@ -22,7 +22,7 @@ export function useFacetPropSetter, Prop extends k ): PropSetter { return useMemo( () => (value: T[Prop]) => { - facet.setWithCallback((prev) => ({ ...(prev != NO_VALUE ? prev : {}), [prop]: value } as unknown as T)) + facet.setWithCallback((prev) => ({ ...(prev !== NO_VALUE ? prev : {}), [prop]: value } as unknown as T)) }, [facet, prop], ) diff --git a/packages/@react-facet/core/src/hooks/useFacetRef.ts b/packages/@react-facet/core/src/hooks/useFacetRef.ts index 5cc4d411..eb2251e6 100644 --- a/packages/@react-facet/core/src/hooks/useFacetRef.ts +++ b/packages/@react-facet/core/src/hooks/useFacetRef.ts @@ -6,7 +6,7 @@ export function useFacetRef(facet: Facet): MutableRefObject> export function useFacetRef(facet: Facet, defaultValue: T): MutableRefObject export function useFacetRef(facet: Facet, defaultValue?: T): MutableRefObject { let value = facet.get() - if (value === NO_VALUE && defaultValue != undefined) { + if (value === NO_VALUE && defaultValue !== undefined) { value = defaultValue } @@ -14,6 +14,7 @@ export function useFacetRef(facet: Facet, defaultValue?: T): MutableRefObj useFacetEffect( (value) => { ref.current = value + return undefined }, [], [facet], diff --git a/packages/@react-facet/core/src/hooks/useFacetWrap.spec.tsx b/packages/@react-facet/core/src/hooks/useFacetWrap.spec.tsx index db7764c7..0a141e54 100644 --- a/packages/@react-facet/core/src/hooks/useFacetWrap.spec.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetWrap.spec.tsx @@ -14,6 +14,7 @@ it('wraps a value, updating the facet when it changes', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [facetifiedValue], @@ -38,6 +39,7 @@ it('wraps a value, with the default equality check (preventing unnecessary updat useFacetEffect( (value) => { mock(value) + return undefined }, [], [facetifiedValue], @@ -62,6 +64,7 @@ it('forwards a facet', () => { useFacetEffect( (value) => { mock(value) + return undefined }, [], [facetifiedValue], @@ -104,7 +107,7 @@ describe('regressions', () => { const TestingComponent = () => { const handlerFacet = useFacetWrap(mock) - useFacetEffect(() => {}, [], [handlerFacet]) + useFacetEffect(() => undefined, [], [handlerFacet]) return null } @@ -122,6 +125,7 @@ const testEffectUpdatesOnStaticValue = (value: FacetProp, expectUpdates: useFacetEffect( () => { mock() + return undefined }, [], [undefinedFacet], diff --git a/packages/@react-facet/core/src/hooks/useFacetWrap.ts b/packages/@react-facet/core/src/hooks/useFacetWrap.ts index c64fbc43..bb70e869 100644 --- a/packages/@react-facet/core/src/hooks/useFacetWrap.ts +++ b/packages/@react-facet/core/src/hooks/useFacetWrap.ts @@ -25,7 +25,7 @@ export function useFacetWrap( [is], ) - if (inlineFacet == null) { + if (inlineFacet === undefined) { return prop as Facet } else { inlineFacet.set(prop as T) diff --git a/packages/@react-facet/core/src/mapFacets/mapIntoObserveArray.ts b/packages/@react-facet/core/src/mapFacets/mapIntoObserveArray.ts index a35b16f5..a367355c 100644 --- a/packages/@react-facet/core/src/mapFacets/mapIntoObserveArray.ts +++ b/packages/@react-facet/core/src/mapFacets/mapIntoObserveArray.ts @@ -16,9 +16,9 @@ export function mapIntoObserveArray( let hasAllDependencies = false const task = - checker == null + checker === undefined ? () => { - hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE) + hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value !== NO_VALUE) if (!hasAllDependencies) return const result = fn(...dependencyValues) @@ -28,7 +28,7 @@ export function mapIntoObserveArray( } : equalityCheck === defaultEqualityCheck ? () => { - hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE) + hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value !== NO_VALUE) if (!hasAllDependencies) return const result = fn(...dependencyValues) @@ -52,7 +52,7 @@ export function mapIntoObserveArray( listener(result) } : () => { - hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE) + hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value !== NO_VALUE) if (!hasAllDependencies) return const result = fn(...dependencyValues) diff --git a/packages/@react-facet/core/src/mapFacets/mapIntoObserveSingle.ts b/packages/@react-facet/core/src/mapFacets/mapIntoObserveSingle.ts index 28db13cb..3b756730 100644 --- a/packages/@react-facet/core/src/mapFacets/mapIntoObserveSingle.ts +++ b/packages/@react-facet/core/src/mapFacets/mapIntoObserveSingle.ts @@ -7,7 +7,7 @@ export function mapIntoObserveSingle( equalityCheck?: EqualityCheck, ): Observe { // Most common scenario is not having any equality check - if (equalityCheck == null) { + if (equalityCheck === undefined) { return (listener: Listener) => { return facet.observe((value: T) => { const result = fn(value) diff --git a/packages/@react-facet/core/src/types.ts b/packages/@react-facet/core/src/types.ts index ac6a63d0..9d08853c 100644 --- a/packages/@react-facet/core/src/types.ts +++ b/packages/@react-facet/core/src/types.ts @@ -56,7 +56,12 @@ export type Cleanup = Unsubscribe export type StartSubscription = (update: Update) => Cleanup export const isFacet = (value: Value | Facet): value is Facet => { - return value != null && (value as Facet).observe != null && (value as Facet).get != null + return ( + value !== null && + value !== undefined && + (value as Facet).observe !== undefined && + (value as Facet).get !== undefined + ) } export type FacetProp = Facet | ExcludeFacetFactory diff --git a/packages/@react-facet/deferred-mount/src/index.spec.tsx b/packages/@react-facet/deferred-mount/src/index.spec.tsx index 7e0dcf83..0b0c1f58 100644 --- a/packages/@react-facet/deferred-mount/src/index.spec.tsx +++ b/packages/@react-facet/deferred-mount/src/index.spec.tsx @@ -52,7 +52,7 @@ describe('DeferredMountWithCallback', () => { const runRaf = () => { const cb = frames.pop() - if (cb != null) act(() => cb()) + if (cb !== undefined) act(() => cb()) } const MOUNT_COMPLETION_DELAY = 1000 diff --git a/packages/@react-facet/deferred-mount/src/index.tsx b/packages/@react-facet/deferred-mount/src/index.tsx index 74bddcbe..9fbee5be 100644 --- a/packages/@react-facet/deferred-mount/src/index.tsx +++ b/packages/@react-facet/deferred-mount/src/index.tsx @@ -174,7 +174,7 @@ interface DeferredMountProps { */ export function DeferredMount({ children }: DeferredMountProps) { const pushDeferUpdateFunction = useContext(pushDeferUpdateContext) - const [deferred, setDeferred] = useState(pushDeferUpdateFunction != null) + const [deferred, setDeferred] = useState(pushDeferUpdateFunction !== undefined) useEffect(() => { if (pushDeferUpdateFunction) pushDeferUpdateFunction(setDeferred) @@ -198,12 +198,12 @@ export const useNotifyMountComplete = () => useContext(NotifyMountComplete) */ export function DeferredMountWithCallback({ children }: DeferredMountWithCallbackProps) { const pushDeferUpdateFunction = useContext(pushDeferUpdateContext) - const [deferred, setDeferred] = useState(pushDeferUpdateFunction != null) + const [deferred, setDeferred] = useState(pushDeferUpdateFunction !== undefined) const resolveMountComplete = useRef<(value: void | PromiseLike) => void>() const mountCompleteBeforeInitialization = useRef(false) const onMountComplete = useCallback(() => { - if (resolveMountComplete.current != null) { + if (resolveMountComplete.current !== undefined) { resolveMountComplete.current() } else { mountCompleteBeforeInitialization.current = true diff --git a/packages/@react-facet/dom-components/src/Div.tsx b/packages/@react-facet/dom-components/src/Div.tsx index ef91e8c0..ef1088a4 100644 --- a/packages/@react-facet/dom-components/src/Div.tsx +++ b/packages/@react-facet/dom-components/src/Div.tsx @@ -19,12 +19,12 @@ export const Div = ({ style, className, id, children, innerRef, ...handlers }: D const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) diff --git a/packages/@react-facet/dom-components/src/Img.tsx b/packages/@react-facet/dom-components/src/Img.tsx index bf2154bb..ba08c741 100644 --- a/packages/@react-facet/dom-components/src/Img.tsx +++ b/packages/@react-facet/dom-components/src/Img.tsx @@ -17,17 +17,17 @@ export const Img = ({ style, className, id, src, innerRef, ...handlers }: ImgPro const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) useSetProp(src, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.setAttribute('src', value ?? '') }) diff --git a/packages/@react-facet/dom-components/src/Input.tsx b/packages/@react-facet/dom-components/src/Input.tsx index 7cbb3020..d86e0845 100644 --- a/packages/@react-facet/dom-components/src/Input.tsx +++ b/packages/@react-facet/dom-components/src/Input.tsx @@ -34,25 +34,25 @@ export const Input = ({ const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) useSetProp(value, (value) => { - if (ref.current == null) return + if (ref.current === null) return const element = ref.current element.value = value ?? '' element.setAttribute('value', value ?? '') }) useSetProp(disabled, (value) => { - if (ref.current == null) return - if (value == null || value === false) { + if (ref.current === null) return + if (value === undefined || value === false) { ref.current.removeAttribute('disabled') } else { ref.current.setAttribute('disabled', '') @@ -60,9 +60,9 @@ export const Input = ({ }) useSetProp(maxLength, (value) => { - if (ref.current == null) return + if (ref.current === null) return - if (value != null) { + if (value !== undefined) { ref.current.maxLength = value } else { ref.current.removeAttribute('maxlength') @@ -70,8 +70,8 @@ export const Input = ({ }) useSetProp(type, (value) => { - if (ref.current == null) return - if (value != null) { + if (ref.current === null) return + if (value !== undefined) { ref.current.setAttribute('type', value) } else { ref.current.removeAttribute('type') diff --git a/packages/@react-facet/dom-components/src/Paragraph.tsx b/packages/@react-facet/dom-components/src/Paragraph.tsx index 1c741def..de4ec174 100644 --- a/packages/@react-facet/dom-components/src/Paragraph.tsx +++ b/packages/@react-facet/dom-components/src/Paragraph.tsx @@ -17,12 +17,12 @@ export const Paragraph = ({ style, className, children, id, innerRef, ...handler const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) diff --git a/packages/@react-facet/dom-components/src/Span.tsx b/packages/@react-facet/dom-components/src/Span.tsx index 823536b7..bd60df80 100644 --- a/packages/@react-facet/dom-components/src/Span.tsx +++ b/packages/@react-facet/dom-components/src/Span.tsx @@ -19,12 +19,12 @@ export const Span = ({ style, className, children, id, innerRef, ...handlers }: const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) diff --git a/packages/@react-facet/dom-components/src/Text.tsx b/packages/@react-facet/dom-components/src/Text.tsx index 0a094868..648746da 100644 --- a/packages/@react-facet/dom-components/src/Text.tsx +++ b/packages/@react-facet/dom-components/src/Text.tsx @@ -32,17 +32,17 @@ export const Text = ({ style, className, id, text, innerRef, tag = 'span' }: Tex const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) useSetProp(text, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.textContent = (value as string) ?? '' }) diff --git a/packages/@react-facet/dom-components/src/TextArea.tsx b/packages/@react-facet/dom-components/src/TextArea.tsx index 0a438e02..687f8675 100644 --- a/packages/@react-facet/dom-components/src/TextArea.tsx +++ b/packages/@react-facet/dom-components/src/TextArea.tsx @@ -32,25 +32,25 @@ export const TextArea = ({ const ref = innerRef ?? defaultRef useSetProp(className, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.className = value ?? '' }) useSetProp(id, (value) => { - if (ref.current == null) return + if (ref.current === null) return ref.current.id = value ?? '' }) useSetProp(value, (value) => { - if (ref.current == null) return + if (ref.current === null) return const element = ref.current element.value = value ?? '' element.setAttribute('value', value ?? '') }) useSetProp(disabled, (value) => { - if (ref.current == null) return - if (value == null && value === false) { + if (ref.current === null) return + if (value === undefined && value === false) { ref.current.removeAttribute('disabled') } else { ref.current.setAttribute('disabled', '') @@ -58,9 +58,9 @@ export const TextArea = ({ }) useSetProp(maxLength, (value) => { - if (ref.current == null) return + if (ref.current === null) return - if (value != null) { + if (value !== undefined) { ref.current.maxLength = value } else { ref.current.removeAttribute('maxlength') @@ -68,8 +68,8 @@ export const TextArea = ({ }) useSetProp(rows, (value) => { - if (ref.current == null) return - if (value != null) { + if (ref.current === null) return + if (value !== undefined) { ref.current.rows = value } else { ref.current.removeAttribute('rows') diff --git a/packages/@react-facet/dom-components/src/useSetStyle.ts b/packages/@react-facet/dom-components/src/useSetStyle.ts index ecad98a7..f9049d85 100644 --- a/packages/@react-facet/dom-components/src/useSetStyle.ts +++ b/packages/@react-facet/dom-components/src/useSetStyle.ts @@ -18,13 +18,13 @@ export function useSetStyle(style: FacetCSSStyleDeclaration | undefined, ref: Re const gamefaceStyleRef = useRef(null) useLayoutEffect(() => { - if (style == null) return + if (style === undefined) return const element = ref.current - if (element == null) return + if (element === null) return gamefaceStyleRef.current = element.style - if (gamefaceStyleRef.current == null) return + if (gamefaceStyleRef.current === null) return // Casting elementStyle because of issues with matching the CSS Style type and the FacetCSSStyleDeclaration const elementStyle = gamefaceStyleRef.current as unknown as LocalStyle @@ -32,9 +32,9 @@ export function useSetStyle(style: FacetCSSStyleDeclaration | undefined, ref: Re const unsubscribes = mapKeys(style, (key) => { let cache: string | number | null = null const value = style[key] - if (value == null) return + if (value === undefined) return - if (typeof value === 'string' || typeof value == 'number') { + if (typeof value === 'string' || typeof value === 'number') { if (cache !== value) { elementStyle[key] = value cache = value diff --git a/packages/@react-facet/dom-fiber/src/index.ts b/packages/@react-facet/dom-fiber/src/index.ts index 4602ce39..41b10f90 100644 --- a/packages/@react-facet/dom-fiber/src/index.ts +++ b/packages/@react-facet/dom-fiber/src/index.ts @@ -10,7 +10,7 @@ export * from './createReconciler' * Render the Facets as the root renderer */ export function render(element: ReactElement, container: HTMLElement | null) { - if (container == null) return () => {} + if (container === null) return () => {} const reconcilerInstance = createReconciler() diff --git a/packages/@react-facet/dom-fiber/src/setupAttributes.ts b/packages/@react-facet/dom-fiber/src/setupAttributes.ts index 9fc3a292..2a366e37 100644 --- a/packages/@react-facet/dom-fiber/src/setupAttributes.ts +++ b/packages/@react-facet/dom-fiber/src/setupAttributes.ts @@ -4,20 +4,20 @@ export const setupClassUpdate = (className: FacetProp, eleme const htmlElement = element as HTMLElement if (isFacet(className)) { return className.observe((className) => { - htmlElement.className = className != null ? className : '' + htmlElement.className = className !== undefined ? className : '' }) } else { - htmlElement.className = className != null ? className : '' + htmlElement.className = className !== undefined ? className : '' } } export const setupIdUpdate = (id: FacetProp, element: HTMLElement | SVGElement) => { if (isFacet(id)) { return id.observe((id) => { - element.id = id != null ? id : '' + element.id = id !== undefined ? id : '' }) } else { - element.id = id != null ? id : '' + element.id = id !== undefined ? id : '' } } @@ -25,11 +25,11 @@ export const setupMaxLengthUpdate = (maxLength: FacetProp, e if (isFacet(maxLength)) { return maxLength.observe((maxLength) => { const textElement = element as HTMLTextAreaElement - textElement.maxLength = maxLength != null ? maxLength : Number.MAX_SAFE_INTEGER + textElement.maxLength = maxLength !== undefined ? maxLength : Number.MAX_SAFE_INTEGER }) } else { const textElement = element as HTMLTextAreaElement - textElement.maxLength = maxLength != null ? maxLength : Number.MAX_SAFE_INTEGER + textElement.maxLength = maxLength !== undefined ? maxLength : Number.MAX_SAFE_INTEGER } } @@ -37,11 +37,11 @@ export const setupRowsUpdate = (rows: FacetProp, element: HT if (isFacet(rows)) { return rows.observe((rows) => { const textElement = element as HTMLTextAreaElement - textElement.rows = rows != null ? rows : Number.MAX_SAFE_INTEGER + textElement.rows = rows !== undefined ? rows : Number.MAX_SAFE_INTEGER }) } else { const textElement = element as HTMLTextAreaElement - textElement.rows = rows != null ? rows : Number.MAX_SAFE_INTEGER + textElement.rows = rows !== undefined ? rows : Number.MAX_SAFE_INTEGER } } @@ -58,7 +58,7 @@ const updateValue = (element: HTMLElement | SVGElement, value: string | undefine // Only accept numerical characters if the input type is number if (inputElement.type === 'number' && isNaN(Number(value))) return - if (value != null) { + if (value !== undefined) { inputElement.value = value inputElement.setAttribute('value', value) } else { @@ -79,11 +79,11 @@ export const setupSrcUpdate = (src: FacetProp, element: HTML if (isFacet(src)) { return src.observe((src) => { const textElement = element as HTMLImageElement - textElement.src = src != null ? src : '' + textElement.src = src !== undefined ? src : '' }) } else { const textElement = element as HTMLImageElement - textElement.src = src != null ? src : '' + textElement.src = src !== undefined ? src : '' } } @@ -91,11 +91,11 @@ export const setupTextUpdate = (text: FacetProp, el if (isFacet(text)) { return text.observe((text) => { const textElement = element as Text - textElement.nodeValue = (text != null ? text : '') as string + textElement.nodeValue = (text !== undefined ? text : '') as string }) } else { const textElement = element as Text - textElement.nodeValue = (text != null ? text : '') as string + textElement.nodeValue = (text !== undefined ? text : '') as string } } @@ -106,14 +106,14 @@ export const setupTextUpdate = (text: FacetProp, el export const setupViewBoxUpdate = (viewBox: FacetProp, element: HTMLElement | SVGElement) => { if (isFacet(viewBox)) { return viewBox.observe((value) => { - if (value != null) { + if (value !== undefined) { element.setAttributeNS(null, 'viewBox', value) } else { element.removeAttributeNS(null, 'viewBox') } }) } else { - if (viewBox != null) { + if (viewBox !== undefined) { element.setAttributeNS(null, 'viewBox', viewBox) } else { element.removeAttributeNS(null, 'viewBox') @@ -132,7 +132,7 @@ export const setupAttributeUpdate = ( element.setAttribute(attribute, '') } else if (value === false) { element.removeAttribute(attribute) - } else if (value != null) { + } else if (value !== undefined) { element.setAttribute(attribute, value) } else { element.removeAttribute(attribute) @@ -143,7 +143,7 @@ export const setupAttributeUpdate = ( element.setAttribute(attribute, '') } else if (value === false) { element.removeAttribute(attribute) - } else if (value != null) { + } else if (value !== undefined) { element.setAttribute(attribute, value) } else { element.removeAttribute(attribute) diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx index 0063da64..500e1b3b 100644 --- a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx +++ b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx @@ -865,7 +865,7 @@ describe('mount', () => { ) div = document.getElementsByClassName('testing')[0] - if (div == null) throw new Error('Root element not found') + if (div === undefined) throw new Error('Root element not found') }) it('supports onClick', () => { @@ -1649,7 +1649,7 @@ describe('update', () => { render() div = document.getElementsByClassName('testing')[0] - if (div == null) throw new Error('Root element not found') + if (div === undefined) throw new Error('Root element not found') }) it('supports onClick', () => { diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.ts b/packages/@react-facet/dom-fiber/src/setupHostConfig.ts index 78eb161e..0eee5f40 100644 --- a/packages/@react-facet/dom-fiber/src/setupHostConfig.ts +++ b/packages/@react-facet/dom-fiber/src/setupHostConfig.ts @@ -113,14 +113,14 @@ export const setupHostConfig = (): HostConfig< const typeHTML = fastTypeMapHTML[externalType as TypeHTML] ?? externalType const typeSVG = fastTypeMapSVG[externalType as TypeSVG] const element = - typeSVG != null + typeSVG !== undefined ? document.createElementNS('http://www.w3.org/2000/svg', typeSVG) : document.createElement(typeHTML) let style: CSSStyleDeclaration | undefined let styleUnsubscribers: Map | undefined - if (newProps.style != null) { + if (newProps.style !== undefined) { style = element.style styleUnsubscribers = new Map() @@ -133,7 +133,7 @@ export const setupHostConfig = (): HostConfig< for (const key in styleProp) { const value = styleProp[key] - if (value != null) { + if (value !== undefined) { if (isFacet(value)) { notNullStyleUnsubscribers.set( key, @@ -148,7 +148,7 @@ export const setupHostConfig = (): HostConfig< } } - if (newProps.dangerouslySetInnerHTML != null) { + if (newProps.dangerouslySetInnerHTML !== undefined) { element.innerHTML = newProps.dangerouslySetInnerHTML.__html } @@ -214,103 +214,114 @@ export const setupHostConfig = (): HostConfig< style, children: new Set(), - className: newProps.className != null ? setupClassUpdate(newProps.className, element) : undefined, - id: newProps.id != null ? setupIdUpdate(newProps.id, element) : undefined, - autoPlay: newProps.autoPlay != null ? setupAttributeUpdate('autoplay', newProps.autoPlay, element) : undefined, - loop: newProps.loop != null ? setupAttributeUpdate('loop', newProps.loop, element) : undefined, - href: newProps.href != null ? setupAttributeUpdate('href', newProps.href, element) : undefined, - target: newProps.target != null ? setupAttributeUpdate('target', newProps.target, element) : undefined, - disabled: newProps.disabled != null ? setupAttributeUpdate('disabled', newProps.disabled, element) : undefined, - maxLength: newProps.maxLength != null ? setupMaxLengthUpdate(newProps.maxLength, element) : undefined, - rows: newProps.rows != null ? setupRowsUpdate(newProps.rows, element) : undefined, - type: newProps.type != null ? setupAttributeUpdate('type', newProps.type, element) : undefined, - value: newProps.value != null ? setupValueUpdate(newProps.value, element) : undefined, - src: newProps.src != null ? setupSrcUpdate(newProps.src, element) : undefined, - - d: newProps.d != null ? setupAttributeUpdate('d', newProps.d, element) : undefined, - fill: newProps.fill != null ? setupAttributeUpdate('fill', newProps.fill, element) : undefined, - height: newProps.height != null ? setupAttributeUpdate('height', newProps.height, element) : undefined, - stroke: newProps.stroke != null ? setupAttributeUpdate('stroke', newProps.stroke, element) : undefined, - x: newProps.x != null ? setupAttributeUpdate('x', newProps.x, element) : undefined, - width: newProps.width != null ? setupAttributeUpdate('width', newProps.width, element) : undefined, - y: newProps.y != null ? setupAttributeUpdate('y', newProps.y, element) : undefined, - - cx: newProps.cx != null ? setupAttributeUpdate('cx', newProps.cx, element) : undefined, - cy: newProps.cy != null ? setupAttributeUpdate('cy', newProps.cy, element) : undefined, - r: newProps.r != null ? setupAttributeUpdate('r', newProps.r, element) : undefined, - rx: newProps.rx != null ? setupAttributeUpdate('rx', newProps.rx, element) : undefined, - ry: newProps.ry != null ? setupAttributeUpdate('ry', newProps.ry, element) : undefined, - - x1: newProps.x1 != null ? setupAttributeUpdate('x1', newProps.x1, element) : undefined, - x2: newProps.x2 != null ? setupAttributeUpdate('x2', newProps.x2, element) : undefined, - y1: newProps.y1 != null ? setupAttributeUpdate('y1', newProps.y1, element) : undefined, - y2: newProps.y2 != null ? setupAttributeUpdate('y2', newProps.y2, element) : undefined, + className: newProps.className !== undefined ? setupClassUpdate(newProps.className, element) : undefined, + id: newProps.id !== undefined ? setupIdUpdate(newProps.id, element) : undefined, + autoPlay: + newProps.autoPlay !== undefined ? setupAttributeUpdate('autoplay', newProps.autoPlay, element) : undefined, + loop: newProps.loop !== undefined ? setupAttributeUpdate('loop', newProps.loop, element) : undefined, + href: newProps.href !== undefined ? setupAttributeUpdate('href', newProps.href, element) : undefined, + target: newProps.target !== undefined ? setupAttributeUpdate('target', newProps.target, element) : undefined, + disabled: + newProps.disabled !== undefined ? setupAttributeUpdate('disabled', newProps.disabled, element) : undefined, + maxLength: newProps.maxLength !== undefined ? setupMaxLengthUpdate(newProps.maxLength, element) : undefined, + rows: newProps.rows !== undefined ? setupRowsUpdate(newProps.rows, element) : undefined, + type: newProps.type !== undefined ? setupAttributeUpdate('type', newProps.type, element) : undefined, + value: newProps.value !== undefined ? setupValueUpdate(newProps.value, element) : undefined, + src: newProps.src !== undefined ? setupSrcUpdate(newProps.src, element) : undefined, + + d: newProps.d !== undefined ? setupAttributeUpdate('d', newProps.d, element) : undefined, + fill: newProps.fill !== undefined ? setupAttributeUpdate('fill', newProps.fill, element) : undefined, + height: newProps.height !== undefined ? setupAttributeUpdate('height', newProps.height, element) : undefined, + stroke: newProps.stroke !== undefined ? setupAttributeUpdate('stroke', newProps.stroke, element) : undefined, + x: newProps.x !== undefined ? setupAttributeUpdate('x', newProps.x, element) : undefined, + width: newProps.width !== undefined ? setupAttributeUpdate('width', newProps.width, element) : undefined, + y: newProps.y !== undefined ? setupAttributeUpdate('y', newProps.y, element) : undefined, + + cx: newProps.cx !== undefined ? setupAttributeUpdate('cx', newProps.cx, element) : undefined, + cy: newProps.cy !== undefined ? setupAttributeUpdate('cy', newProps.cy, element) : undefined, + r: newProps.r !== undefined ? setupAttributeUpdate('r', newProps.r, element) : undefined, + rx: newProps.rx !== undefined ? setupAttributeUpdate('rx', newProps.rx, element) : undefined, + ry: newProps.ry !== undefined ? setupAttributeUpdate('ry', newProps.ry, element) : undefined, + + x1: newProps.x1 !== undefined ? setupAttributeUpdate('x1', newProps.x1, element) : undefined, + x2: newProps.x2 !== undefined ? setupAttributeUpdate('x2', newProps.x2, element) : undefined, + y1: newProps.y1 !== undefined ? setupAttributeUpdate('y1', newProps.y1, element) : undefined, + y2: newProps.y2 !== undefined ? setupAttributeUpdate('y2', newProps.y2, element) : undefined, strokeWidth: - newProps.strokeWidth != null ? setupAttributeUpdate('stroke-width', newProps.strokeWidth, element) : undefined, - viewBox: newProps.viewBox != null ? setupViewBoxUpdate(newProps.viewBox, element) : undefined, + newProps.strokeWidth !== undefined + ? setupAttributeUpdate('stroke-width', newProps.strokeWidth, element) + : undefined, + viewBox: newProps.viewBox !== undefined ? setupViewBoxUpdate(newProps.viewBox, element) : undefined, xLinkHref: - newProps.xLinkHref != null ? setupAttributeUpdate('xlink:href', newProps.xLinkHref, element) : undefined, + newProps.xLinkHref !== undefined ? setupAttributeUpdate('xlink:href', newProps.xLinkHref, element) : undefined, fillOpacity: - newProps.fillOpacity != null ? setupAttributeUpdate('fill-opacity', newProps.fillOpacity, element) : undefined, + newProps.fillOpacity !== undefined + ? setupAttributeUpdate('fill-opacity', newProps.fillOpacity, element) + : undefined, strokeOpacity: - newProps.strokeOpacity != null + newProps.strokeOpacity !== undefined ? setupAttributeUpdate('stroke-opacity', newProps.strokeOpacity, element) : undefined, strokeLinecap: - newProps.strokeLinecap != null + newProps.strokeLinecap !== undefined ? setupAttributeUpdate('stroke-linecap', newProps.strokeLinecap, element) : undefined, strokeLinejoin: - newProps.strokeLinejoin != null + newProps.strokeLinejoin !== undefined ? setupAttributeUpdate('stroke-linejoin', newProps.strokeLinejoin, element) : undefined, - points: newProps.points != null ? setupAttributeUpdate('points', newProps.points, element) : undefined, - offset: newProps.offset != null ? setupAttributeUpdate('offset', newProps.offset, element) : undefined, + points: newProps.points !== undefined ? setupAttributeUpdate('points', newProps.points, element) : undefined, + offset: newProps.offset !== undefined ? setupAttributeUpdate('offset', newProps.offset, element) : undefined, stopColor: - newProps.stopColor != null ? setupAttributeUpdate('stop-color', newProps.stopColor, element) : undefined, + newProps.stopColor !== undefined ? setupAttributeUpdate('stop-color', newProps.stopColor, element) : undefined, stopOpacity: - newProps.stopOpacity != null ? setupAttributeUpdate('stop-opacity', newProps.stopOpacity, element) : undefined, + newProps.stopOpacity !== undefined + ? setupAttributeUpdate('stop-opacity', newProps.stopOpacity, element) + : undefined, fontFamily: - newProps.fontFamily != null ? setupAttributeUpdate('font-family', newProps.fontFamily, element) : undefined, - fontSize: newProps.fontSize != null ? setupAttributeUpdate('font-size', newProps.fontSize, element) : undefined, + newProps.fontFamily !== undefined + ? setupAttributeUpdate('font-family', newProps.fontFamily, element) + : undefined, + fontSize: + newProps.fontSize !== undefined ? setupAttributeUpdate('font-size', newProps.fontSize, element) : undefined, ['data-droppable']: - newProps['data-droppable'] != null + newProps['data-droppable'] !== undefined ? setupAttributeUpdate('data-droppable', newProps['data-droppable'], element) : undefined, ['data-narrate']: - newProps['data-narrate'] != null + newProps['data-narrate'] !== undefined ? setupAttributeUpdate('data-narrate', newProps['data-narrate'], element) : undefined, ['data-narrate-as']: - newProps['data-narrate-as'] != null + newProps['data-narrate-as'] !== undefined ? setupAttributeUpdate('data-narrate-as', newProps['data-narrate-as'], element) : undefined, ['data-narrate-before']: - newProps['data-narrate-before'] != null + newProps['data-narrate-before'] !== undefined ? setupAttributeUpdate('data-narrate-before', newProps['data-narrate-before'], element) : undefined, ['data-narrate-after']: - newProps['data-narrate-after'] != null + newProps['data-narrate-after'] !== undefined ? setupAttributeUpdate('data-narrate-after', newProps['data-narrate-after'], element) : undefined, ['data-testid']: - newProps['data-testid'] != null + newProps['data-testid'] !== undefined ? setupAttributeUpdate('data-testid', newProps['data-testid'], element) : undefined, ['data-x-ray']: - newProps['data-x-ray'] != null + newProps['data-x-ray'] !== undefined ? setupAttributeUpdate('data-x-ray', newProps['data-x-ray'], element) : undefined, cohinline: - newProps.cohinline != null ? setupAttributeUpdate('cohinline', newProps.cohinline, element) : undefined, + newProps.cohinline !== undefined ? setupAttributeUpdate('cohinline', newProps.cohinline, element) : undefined, } }, @@ -355,12 +366,12 @@ export const setupHostConfig = (): HostConfig< const oldStyleProp = oldProps.style const newStyleProp = newProps.style - if (oldStyleProp != null) { + if (oldStyleProp !== undefined) { for (const key in oldStyleProp) { const oldValue = oldStyleProp[key] const newValue = newStyleProp?.[key] - if (oldValue !== newValue || newStyleProp == null) { + if (oldValue !== newValue || newStyleProp === undefined) { if (isFacet(oldValue)) { styleUnsubscribers.get(key)?.() } @@ -368,12 +379,12 @@ export const setupHostConfig = (): HostConfig< } } - if (newStyleProp != null) { + if (newStyleProp !== undefined) { for (const key in newStyleProp) { const oldValue = oldStyleProp?.[key] const newValue = newStyleProp[key] - if (oldValue !== newValue || oldStyleProp == null) { + if (oldValue !== newValue || oldStyleProp === undefined) { if (isFacet(newValue)) { styleUnsubscribers.set( key, @@ -389,8 +400,8 @@ export const setupHostConfig = (): HostConfig< } } - if (newProps.dangerouslySetInnerHTML != oldProps.dangerouslySetInnerHTML) { - if (newProps.dangerouslySetInnerHTML != null) { + if (newProps.dangerouslySetInnerHTML !== oldProps.dangerouslySetInnerHTML) { + if (newProps.dangerouslySetInnerHTML !== undefined) { element.innerHTML = newProps.dangerouslySetInnerHTML.__html } else { element.innerHTML = '' @@ -400,7 +411,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.autoPlay !== oldProps.autoPlay) { instance.autoPlay?.() - if (newProps.autoPlay == null) { + if (newProps.autoPlay === undefined) { element.removeAttribute('autoplay') } else { instance.autoPlay = setupAttributeUpdate('autoplay', newProps.autoPlay, element) @@ -410,7 +421,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.className !== oldProps.className) { instance.className?.() - if (newProps.className == null) { + if (newProps.className === undefined) { element.className = '' } else { instance.className = setupClassUpdate(newProps.className, element) @@ -420,7 +431,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.d !== oldProps.d) { instance.d?.() - if (newProps.d == null) { + if (newProps.d === undefined) { element.removeAttribute('d') } else { instance.d = setupAttributeUpdate('d', newProps.d, element) @@ -430,7 +441,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-droppable'] !== oldProps['data-droppable']) { instance['data-droppable']?.() - if (newProps['data-droppable'] == null) { + if (newProps['data-droppable'] === undefined) { element.removeAttribute('data-droppable') } else { instance['data-droppable'] = setupAttributeUpdate('data-droppable', newProps['data-droppable'], element) @@ -440,7 +451,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-narrate'] !== oldProps['data-narrate']) { instance['data-narrate']?.() - if (newProps['data-narrate'] == null) { + if (newProps['data-narrate'] === undefined) { element.removeAttribute('data-narrate') } else { instance['data-narrate'] = setupAttributeUpdate('data-narrate', newProps['data-narrate'], element) @@ -450,7 +461,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-narrate-as'] !== oldProps['data-narrate-as']) { instance['data-narrate-as']?.() - if (newProps['data-narrate-as'] == null) { + if (newProps['data-narrate-as'] === undefined) { element.removeAttribute('data-narrate-as') } else { instance['data-narrate-as'] = setupAttributeUpdate('data-narrate-as', newProps['data-narrate-as'], element) @@ -460,7 +471,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-narrate-after'] !== oldProps['data-narrate-after']) { instance['data-narrate-after']?.() - if (newProps['data-narrate-after'] == null) { + if (newProps['data-narrate-after'] === undefined) { element.removeAttribute('data-narrate-after') } else { instance['data-narrate-after'] = setupAttributeUpdate( @@ -474,7 +485,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-narrate-before'] !== oldProps['data-narrate-before']) { instance['data-narrate-before']?.() - if (newProps['data-narrate-before'] == null) { + if (newProps['data-narrate-before'] === undefined) { element.removeAttribute('data-narrate-before') } else { instance['data-narrate-before'] = setupAttributeUpdate( @@ -488,7 +499,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-testid'] !== oldProps['data-testid']) { instance['data-testid']?.() - if (newProps['data-testid'] == null) { + if (newProps['data-testid'] === undefined) { element.removeAttribute('data-testid') } else { instance['data-testid'] = setupAttributeUpdate('data-testid', newProps['data-testid'], element) @@ -498,7 +509,7 @@ export const setupHostConfig = (): HostConfig< if (newProps['data-x-ray'] !== oldProps['data-x-ray']) { instance['data-x-ray']?.() - if (newProps['data-x-ray'] == null) { + if (newProps['data-x-ray'] === undefined) { element.removeAttribute('data-x-ray') } else { instance['data-x-ray'] = setupAttributeUpdate('data-x-ray', newProps['data-x-ray'], element) @@ -508,7 +519,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.fill !== oldProps.fill) { instance.fill?.() - if (newProps.fill == null) { + if (newProps.fill === undefined) { element.removeAttribute('fill') } else { instance.fill = setupAttributeUpdate('fill', newProps.fill, element) @@ -518,7 +529,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.id !== oldProps.id) { instance.id?.() - if (newProps.id == null) { + if (newProps.id === undefined) { element.id = '' } else { instance.id = setupIdUpdate(newProps.id, element) @@ -528,7 +539,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.loop !== oldProps.loop) { instance.loop?.() - if (newProps.loop == null) { + if (newProps.loop === undefined) { element.removeAttribute('loop') } else { instance.loop = setupAttributeUpdate('loop', newProps.loop, element) @@ -538,7 +549,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.href !== oldProps.href) { instance.href?.() - if (newProps.href == null) { + if (newProps.href === undefined) { element.removeAttribute('href') } else { instance.href = setupAttributeUpdate('href', newProps.href, element) @@ -548,7 +559,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.target !== oldProps.target) { instance.target?.() - if (newProps.target == null) { + if (newProps.target === undefined) { element.removeAttribute('target') } else { instance.target = setupAttributeUpdate('target', newProps.target, element) @@ -558,7 +569,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.disabled !== oldProps.disabled) { instance.disabled?.() - if (newProps.disabled == null) { + if (newProps.disabled === undefined) { element.removeAttribute('disabled') } else { instance.disabled = setupAttributeUpdate('disabled', newProps.disabled, element) @@ -568,7 +579,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.height !== oldProps.height) { instance.height?.() - if (newProps.height == null) { + if (newProps.height === undefined) { element.removeAttribute('height') } else { instance.height = setupAttributeUpdate('height', newProps.height, element) @@ -578,7 +589,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.maxLength !== oldProps.maxLength) { instance.maxLength?.() - if (newProps.maxLength == null) { + if (newProps.maxLength === undefined) { const textElement = element as HTMLTextAreaElement textElement.removeAttribute('maxlength') } else { @@ -589,7 +600,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.rows !== oldProps.rows) { instance.rows?.() - if (newProps.rows == null) { + if (newProps.rows === undefined) { const textElement = element as HTMLTextAreaElement textElement.removeAttribute('rows') } else { @@ -600,7 +611,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.stroke !== oldProps.stroke) { instance.stroke?.() - if (newProps.stroke == null) { + if (newProps.stroke === undefined) { element.removeAttribute('stroke') } else { instance.stroke = setupAttributeUpdate('stroke', newProps.stroke, element) @@ -610,7 +621,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.type !== oldProps.type) { instance.type?.() - if (newProps.type == null) { + if (newProps.type === undefined) { const textElement = element as HTMLTextAreaElement textElement.removeAttribute('type') } else { @@ -621,7 +632,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.value !== oldProps.value) { instance.value?.() - if (newProps.value == null) { + if (newProps.value === undefined) { const textElement = element as HTMLTextAreaElement textElement.removeAttribute('value') } else { @@ -632,7 +643,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.x !== oldProps.x) { instance.x?.() - if (newProps.x == null) { + if (newProps.x === undefined) { element.removeAttribute('x') } else { instance.x = setupAttributeUpdate('x', newProps.x, element) @@ -642,7 +653,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.width !== oldProps.width) { instance.width?.() - if (newProps.width == null) { + if (newProps.width === undefined) { element.removeAttribute('width') } else { instance.width = setupAttributeUpdate('width', newProps.width, element) @@ -652,7 +663,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.y !== oldProps.y) { instance.y?.() - if (newProps.y == null) { + if (newProps.y === undefined) { element.removeAttribute('y') } else { instance.y = setupAttributeUpdate('y', newProps.y, element) @@ -662,7 +673,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.cx !== oldProps.cx) { instance.cx?.() - if (newProps.cx == null) { + if (newProps.cx === undefined) { element.removeAttribute('cx') } else { instance.cx = setupAttributeUpdate('cx', newProps.cx, element) @@ -672,7 +683,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.r !== oldProps.r) { instance.r?.() - if (newProps.r == null) { + if (newProps.r === undefined) { element.removeAttribute('r') } else { instance.r = setupAttributeUpdate('r', newProps.r, element) @@ -682,7 +693,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.cy !== oldProps.cy) { instance.cy?.() - if (newProps.cy == null) { + if (newProps.cy === undefined) { element.removeAttribute('cy') } else { instance.cy = setupAttributeUpdate('cy', newProps.cy, element) @@ -692,7 +703,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.rx !== oldProps.rx) { instance.rx?.() - if (newProps.rx == null) { + if (newProps.rx === undefined) { element.removeAttribute('rx') } else { instance.rx = setupAttributeUpdate('rx', newProps.rx, element) @@ -702,7 +713,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.ry !== oldProps.ry) { instance.ry?.() - if (newProps.ry == null) { + if (newProps.ry === undefined) { element.removeAttribute('ry') } else { instance.ry = setupAttributeUpdate('ry', newProps.ry, element) @@ -712,7 +723,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.x1 !== oldProps.x1) { instance.x1?.() - if (newProps.x1 == null) { + if (newProps.x1 === undefined) { element.removeAttribute('x1') } else { instance.x1 = setupAttributeUpdate('x1', newProps.x1, element) @@ -722,7 +733,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.x2 !== oldProps.x2) { instance.x2?.() - if (newProps.x2 == null) { + if (newProps.x2 === undefined) { element.removeAttribute('x2') } else { instance.x2 = setupAttributeUpdate('x2', newProps.x2, element) @@ -732,7 +743,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.y1 !== oldProps.y1) { instance.y1?.() - if (newProps.y1 == null) { + if (newProps.y1 === undefined) { element.removeAttribute('y1') } else { instance.y1 = setupAttributeUpdate('y1', newProps.y1, element) @@ -742,7 +753,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.y2 !== oldProps.y2) { instance.y2?.() - if (newProps.y2 == null) { + if (newProps.y2 === undefined) { element.removeAttribute('y2') } else { instance.y2 = setupAttributeUpdate('y2', newProps.y2, element) @@ -752,7 +763,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.strokeWidth !== oldProps.strokeWidth) { instance.strokeWidth?.() - if (newProps.strokeWidth == null) { + if (newProps.strokeWidth === undefined) { element.removeAttribute('strokeWidth') } else { instance.strokeWidth = setupAttributeUpdate('stroke-width', newProps.strokeWidth, element) @@ -762,7 +773,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.viewBox !== oldProps.viewBox) { instance.viewBox?.() - if (newProps.viewBox == null) { + if (newProps.viewBox === undefined) { element.removeAttribute('viewBox') } else { instance.viewBox = setupViewBoxUpdate(newProps.viewBox, element) @@ -772,7 +783,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.xLinkHref !== oldProps.xLinkHref) { instance.xLinkHref?.() - if (newProps.xLinkHref == null) { + if (newProps.xLinkHref === undefined) { element.removeAttribute('xlink:href') } else { instance.xLinkHref = setupAttributeUpdate('xlink:href', newProps.xLinkHref, element) @@ -782,7 +793,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.fillOpacity !== oldProps.fillOpacity) { instance.fillOpacity?.() - if (newProps.fillOpacity == null) { + if (newProps.fillOpacity === undefined) { element.removeAttribute('fill-opacity') } else { instance.fillOpacity = setupAttributeUpdate('fill-opacity', newProps.fillOpacity, element) @@ -792,7 +803,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.strokeOpacity !== oldProps.strokeOpacity) { instance.strokeOpacity?.() - if (newProps.strokeOpacity == null) { + if (newProps.strokeOpacity === undefined) { element.removeAttribute('stroke-opacity') } else { instance.strokeOpacity = setupAttributeUpdate('stroke-opacity', newProps.strokeOpacity, element) @@ -802,7 +813,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.strokeLinecap !== oldProps.strokeLinecap) { instance.strokeLinecap?.() - if (newProps.strokeLinecap == null) { + if (newProps.strokeLinecap === undefined) { element.removeAttribute('stroke-linecap') } else { instance.strokeLinecap = setupAttributeUpdate('stroke-linecap', newProps.strokeLinecap, element) @@ -812,7 +823,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.strokeLinejoin !== oldProps.strokeLinejoin) { instance.strokeLinejoin?.() - if (newProps.strokeLinejoin == null) { + if (newProps.strokeLinejoin === undefined) { element.removeAttribute('stroke-linejoin') } else { instance.strokeLinejoin = setupAttributeUpdate('stroke-linejoin', newProps.strokeLinejoin, element) @@ -821,7 +832,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.points !== oldProps.points) { instance.points?.() - if (newProps.points == null) { + if (newProps.points === undefined) { element.removeAttribute('points') } else { instance.points = setupAttributeUpdate('points', newProps.points, element) @@ -830,7 +841,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.offset !== oldProps.offset) { instance.offset?.() - if (newProps.offset == null) { + if (newProps.offset === undefined) { element.removeAttribute('offset') } else { instance.offset = setupAttributeUpdate('offset', newProps.offset, element) @@ -839,7 +850,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.stopColor !== oldProps.stopColor) { instance.stopColor?.() - if (newProps.stopColor == null) { + if (newProps.stopColor === undefined) { element.removeAttribute('stop-color') } else { instance.stopColor = setupAttributeUpdate('stop-color', newProps.stopColor, element) @@ -848,7 +859,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.stopOpacity !== oldProps.stopOpacity) { instance.stopOpacity?.() - if (newProps.stopOpacity == null) { + if (newProps.stopOpacity === undefined) { element.removeAttribute('stop-opacity') } else { instance.stopOpacity = setupAttributeUpdate('stop-opacity', newProps.stopOpacity, element) @@ -857,7 +868,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.fontFamily !== oldProps.fontFamily) { instance.fontFamily?.() - if (newProps.fontFamily == null) { + if (newProps.fontFamily === undefined) { element.removeAttribute('font-family') } else { instance.fontFamily = setupAttributeUpdate('font-family', newProps.fontFamily, element) @@ -866,7 +877,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.fontSize !== oldProps.fontSize) { instance.fontSize?.() - if (newProps.fontSize == null) { + if (newProps.fontSize === undefined) { element.removeAttribute('font-size') } else { instance.fontSize = setupAttributeUpdate('font-size', newProps.fontSize, element) @@ -876,7 +887,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.src !== oldProps.src) { instance.src?.() - if (newProps.src == null) { + if (newProps.src === undefined) { const textElement = element as HTMLTextAreaElement textElement.removeAttribute('src') } else { @@ -887,7 +898,7 @@ export const setupHostConfig = (): HostConfig< if (newProps.cohinline !== oldProps.cohinline) { instance.cohinline?.() - if (newProps.cohinline == null) { + if (newProps.cohinline === undefined) { element.removeAttribute('cohinline') } else { instance.cohinline = setupAttributeUpdate('cohinline', newProps.cohinline, element) diff --git a/packages/@react-facet/dom-fiber/src/types.ts b/packages/@react-facet/dom-fiber/src/types.ts index f3f05d7a..b2b1acce 100644 --- a/packages/@react-facet/dom-fiber/src/types.ts +++ b/packages/@react-facet/dom-fiber/src/types.ts @@ -252,7 +252,7 @@ export type ElementContainer = { } export const isElementContainer = (value: ElementContainer | TextContainer): value is ElementContainer => { - return value != null && 'children' in value + return 'children' in value } export type TextContainer = { diff --git a/packages/@react-facet/shared-facet/src/index.spec.tsx b/packages/@react-facet/shared-facet/src/index.spec.tsx index 569d2018..8eba1dd8 100644 --- a/packages/@react-facet/shared-facet/src/index.spec.tsx +++ b/packages/@react-facet/shared-facet/src/index.spec.tsx @@ -123,7 +123,7 @@ describe('rendering from a selector', () => { const NestedExample = () => { const value = useFacetUnwrap(useSharedFacet(fooFacet)) - if (value == NO_VALUE) return null + if (value === NO_VALUE) return null return (
diff --git a/packages/@react-facet/spring/src/useFacetSpring.ts b/packages/@react-facet/spring/src/useFacetSpring.ts index 44457c0a..8fccead5 100644 --- a/packages/@react-facet/spring/src/useFacetSpring.ts +++ b/packages/@react-facet/spring/src/useFacetSpring.ts @@ -19,10 +19,10 @@ export function useFacetSpring(targetFacet: Facet, options?: UseFacetSpr useFacetEffect( (target) => { let frameID: number - let previousTimestamp: number + let previousTimestamp: number | undefined = undefined const tick = (now: number) => { - const secondsPerFrame = previousTimestamp == null ? 1 / 60 : (now - previousTimestamp) / 1000 + const secondsPerFrame = previousTimestamp === undefined ? 1 / 60 : (now - previousTimestamp) / 1000 previousTimestamp = now setState((currentState) => {