From 807848be254b174b56b5e960811cc6ff24f40787 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Barbet?= Date: Tue, 4 Feb 2025 09:29:36 +0000 Subject: [PATCH 1/3] feat: run biome check on src files --- biome.json | 100 +++++++++--------- package.json | 1 + src/components/Display.tsx | 4 +- src/components/Hide.tsx | 4 +- src/components/ScopedTheme.tsx | 8 +- src/components/native/Animated.tsx | 6 +- src/components/native/ImageBackground.tsx | 72 +++++++------ src/components/native/NativeText.native.tsx | 2 +- src/components/native/NativeView.native.tsx | 2 +- src/components/native/Pressable.native.tsx | 17 ++- src/components/native/Pressable.tsx | 38 +++---- src/core/createUnistylesElement.native.tsx | 2 +- src/core/createUnistylesElement.tsx | 52 ++++----- src/core/createUnistylesImageBackground.tsx | 2 +- src/core/getClassname.ts | 2 +- src/core/passForwardRef.ts | 6 +- src/core/useProxifiedUnistyles/listener.ts | 10 +- src/core/useProxifiedUnistyles/types.ts | 4 +- .../useProxifiedUnistyles.ts | 10 +- src/core/useUnistyles.ts | 2 +- src/core/warn.ts | 8 +- src/core/withUnistyles/types.ts | 11 +- .../withUnistyles/withUnistyles.native.tsx | 57 ++++++---- src/core/withUnistyles/withUnistyles.tsx | 39 ++++--- src/global.ts | 4 +- src/hooks/useMedia.native.ts | 4 +- src/hooks/useMedia.ts | 8 +- src/mq.ts | 42 +++++--- src/server/getServerUnistyles.tsx | 25 +++-- src/server/hydrateServerUnistyles.ts | 2 +- src/server/index.ts | 1 - src/server/resetServerUnistyles.ts | 4 +- src/server/types.ts | 2 +- src/server/useServerUnistyles.tsx | 8 +- .../NativePlatform/NativePlatform.nitro.ts | 56 +++++----- .../UnistylesNavigationBar.nitro.ts | 6 +- .../ShadowRegistry/ShadowRegistry.nitro.ts | 2 +- src/specs/ShadowRegistry/index.ts | 37 +++---- src/specs/ShadowRegistry/types.ts | 20 ++-- .../StatusBar/UnistylesStatusBar.nitro.ts | 8 +- src/specs/StatusBar/index.ts | 12 +-- .../StyleSheet/UnistylesStyleSheet.nitro.ts | 2 +- src/specs/StyleSheet/index.ts | 43 ++++---- .../UnistylesRuntime.nitro.ts | 46 ++++---- src/specs/UnistylesRuntime/index.ts | 44 ++++---- src/specs/index.native.ts | 26 ++--- src/specs/types.ts | 16 +-- src/types/accessibility.ts | 4 +- src/types/breakpoints.ts | 91 ++++++++-------- src/types/core.ts | 35 +++--- src/types/index.ts | 4 +- src/types/stylesheet.ts | 53 ++++++---- src/types/variants.ts | 14 +-- src/utils.ts | 24 ++--- src/web/convert/index.ts | 22 ++-- src/web/convert/object/boxShadow.ts | 38 ++++--- src/web/convert/object/filter.ts | 41 ++++--- src/web/convert/object/objectStyle.ts | 48 +++++---- src/web/convert/object/transform.ts | 21 ++-- src/web/convert/pseudo.ts | 3 +- src/web/convert/shadow/boxShadow.ts | 10 +- src/web/convert/shadow/textShadow.ts | 10 +- src/web/convert/style.ts | 50 ++++----- src/web/convert/types.ts | 8 +- src/web/convert/utils.ts | 25 +++-- src/web/create.ts | 42 +++++--- src/web/css/state.ts | 12 ++- src/web/index.ts | 11 +- src/web/listener.ts | 10 +- src/web/mock.ts | 4 +- src/web/registry.ts | 18 +++- src/web/runtime.ts | 14 +-- src/web/shadowRegistry.ts | 24 +++-- src/web/state.ts | 52 +++++---- src/web/types.ts | 16 +-- src/web/utils/common.ts | 12 +-- src/web/utils/unistyle.ts | 70 +++++++----- src/web/variants.ts | 29 +++-- 78 files changed, 919 insertions(+), 773 deletions(-) diff --git a/biome.json b/biome.json index 01bcf23d..14d5280d 100644 --- a/biome.json +++ b/biome.json @@ -1,55 +1,55 @@ { - "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", - "files": { - "include": ["src/**/*.ts", "src/**/*.tsx"], - "ignore": ["example", "expo-example", "docs", "plugin", "lib"] - }, - "formatter": { - "enabled": true, - "indentStyle": "tab" - }, - "linter": { - "enabled": true, - "rules": { - "recommended": true, - "suspicious": { - "noEmptyInterface": "off", - "noExplicitAny": "off" - }, - "complexity": { - "noForEach": "off", - "noUselessSwitchCase": "off", - "noBannedTypes": "off" - }, - "correctness": { - "useExhaustiveDependencies": "off" - } - } - }, - "organizeImports": { - "enabled": true - }, - "javascript": { - "formatter": { - "enabled": true, - "quoteStyle": "single", - "jsxQuoteStyle": "double", - "trailingCommas": "all", - "semicolons": "asNeeded", - "arrowParentheses": "asNeeded", - "indentStyle": "tab", - "indentWidth": 4, - "lineWidth": 120 + "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", + "files": { + "include": ["src/**/*.ts", "src/**/*.tsx"], + "ignore": ["example", "expo-example", "docs", "plugin", "lib"] }, - "globals": [], - "jsxRuntime": "reactClassic" - }, - "json": { "formatter": { - "enabled": true, - "indentWidth": 2, - "indentStyle": "tab", - "lineWidth": 120 + "enabled": true, + "indentStyle": "space" + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "suspicious": { + "noEmptyInterface": "off", + "noExplicitAny": "off" + }, + "complexity": { + "noForEach": "off", + "noUselessSwitchCase": "off", + "noBannedTypes": "off" + }, + "correctness": { + "useExhaustiveDependencies": "off" + } + } + }, + "organizeImports": { + "enabled": true + }, + "javascript": { + "formatter": { + "enabled": true, + "quoteStyle": "single", + "jsxQuoteStyle": "double", + "trailingCommas": "all", + "semicolons": "asNeeded", + "arrowParentheses": "asNeeded", + "indentStyle": "space", + "indentWidth": 4, + "lineWidth": 120 + }, + "globals": [], + "jsxRuntime": "reactClassic" + }, + "json": { + "formatter": { + "enabled": true, + "indentWidth": 4, + "indentStyle": "space", + "lineWidth": 120 + } } - } } diff --git a/package.json b/package.json index d771ed60..25c4c1b8 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "test:coverage": "jest --passWithNoTests --coverage", "tsc": "node_modules/typescript/bin/tsc --noEmit", "lint": "biome lint", + "check": "biome check --write", "prepare": "husky && bob build", "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'", "release": "release-it" diff --git a/src/components/Display.tsx b/src/components/Display.tsx index 75c81cf7..1d390f82 100644 --- a/src/components/Display.tsx +++ b/src/components/Display.tsx @@ -6,7 +6,5 @@ type DisplayProps = { mq: symbol } & PropsWithChildren export const Display: React.FunctionComponent = ({ children, ...props }) => { const { isVisible } = useMedia(props) - return isVisible - ? children - : null + return isVisible ? children : null } diff --git a/src/components/Hide.tsx b/src/components/Hide.tsx index 7df33d8c..08eefcae 100644 --- a/src/components/Hide.tsx +++ b/src/components/Hide.tsx @@ -6,7 +6,5 @@ type HideProps = { mq: symbol } & PropsWithChildren export const Hide: React.FunctionComponent = ({ children, ...props }) => { const { isVisible } = useMedia(props) - return !isVisible - ? children - : null + return !isVisible ? children : null } diff --git a/src/components/ScopedTheme.tsx b/src/components/ScopedTheme.tsx index b2ad83d2..405fd229 100644 --- a/src/components/ScopedTheme.tsx +++ b/src/components/ScopedTheme.tsx @@ -21,12 +21,8 @@ export const ScopedTheme: React.FunctionComponent, children, - + , ] - return ( - - {mappedChildren} - - ) + return <>{mappedChildren} } diff --git a/src/components/native/Animated.tsx b/src/components/native/Animated.tsx index 1ca9daf6..640ac3c3 100644 --- a/src/components/native/Animated.tsx +++ b/src/components/native/Animated.tsx @@ -1,10 +1,10 @@ import { Animated as RNAnimated } from 'react-native' -import { View } from './View' -import { Text } from './Text' import { FlatList } from './FlatList' import { Image } from './Image' import { ScrollView } from './ScrollView' import { SectionList } from './SectionList' +import { Text } from './Text' +import { View } from './View' export const Animated = { ...RNAnimated, @@ -13,5 +13,5 @@ export const Animated = { FlatList: RNAnimated.createAnimatedComponent(FlatList), Image: RNAnimated.createAnimatedComponent(Image), ScrollView: RNAnimated.createAnimatedComponent(ScrollView), - SectionList: RNAnimated.createAnimatedComponent(SectionList) + SectionList: RNAnimated.createAnimatedComponent(SectionList), } diff --git a/src/components/native/ImageBackground.tsx b/src/components/native/ImageBackground.tsx index 7a430a10..4eae8fb1 100644 --- a/src/components/native/ImageBackground.tsx +++ b/src/components/native/ImageBackground.tsx @@ -1,11 +1,11 @@ import React from 'react' -import { ImageBackground as NativeImageBackground } from 'react-native' import { forwardRef } from 'react' -import type { UnistylesValues } from '../../types' +import { ImageBackground as NativeImageBackground } from 'react-native' import { getClassName } from '../../core' -import { isServer } from '../../web/utils' -import { UnistylesShadowRegistry } from '../../web' +import type { UnistylesValues } from '../../types' import { copyComponentProperties } from '../../utils' +import { UnistylesShadowRegistry } from '../../web' +import { isServer } from '../../web/utils' type Props = { style?: UnistylesValues @@ -24,34 +24,42 @@ const UnistylesImageBackground = forwardRef((props, forwardedRef {...props} style={styleClassNames} imageStyle={imageClassNames} - ref={isServer() ? undefined : ref => { - if (!ref) { - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash) - } - - storedRef = ref - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.add(ref, styleClassNames?.hash) - - if (typeof forwardedRef === 'function') { - return forwardedRef(ref) - } - - if (forwardedRef) { - forwardedRef.current = ref - } - }} - imageRef={isServer() ? undefined : ref => { - if (!ref) { - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash) - } - - storedImageRef = ref - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.add(ref, imageClassNames?.hash) - }} + ref={ + isServer() + ? undefined + : ref => { + if (!ref) { + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash) + } + + storedRef = ref + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.add(ref, styleClassNames?.hash) + + if (typeof forwardedRef === 'function') { + return forwardedRef(ref) + } + + if (forwardedRef) { + forwardedRef.current = ref + } + } + } + imageRef={ + isServer() + ? undefined + : ref => { + if (!ref) { + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash) + } + + storedImageRef = ref + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.add(ref, imageClassNames?.hash) + } + } /> ) }) diff --git a/src/components/native/NativeText.native.tsx b/src/components/native/NativeText.native.tsx index 78bd655b..66e4f381 100644 --- a/src/components/native/NativeText.native.tsx +++ b/src/components/native/NativeText.native.tsx @@ -1,5 +1,5 @@ -import type { TextProps } from 'react-native' import { type ComponentType, createElement, forwardRef } from 'react' +import type { TextProps } from 'react-native' import { createUnistylesElement } from '../../core' // credits to @hirbod diff --git a/src/components/native/NativeView.native.tsx b/src/components/native/NativeView.native.tsx index a64c518c..2fa748ed 100644 --- a/src/components/native/NativeView.native.tsx +++ b/src/components/native/NativeView.native.tsx @@ -1,5 +1,5 @@ -import type { ViewProps } from 'react-native' import { type ComponentType, createElement, forwardRef } from 'react' +import type { ViewProps } from 'react-native' import { createUnistylesElement } from '../../core' // credits to @hirbod diff --git a/src/components/native/Pressable.native.tsx b/src/components/native/Pressable.native.tsx index b51b5fd2..36b00a8c 100644 --- a/src/components/native/Pressable.native.tsx +++ b/src/components/native/Pressable.native.tsx @@ -1,17 +1,15 @@ import React, { forwardRef, useLayoutEffect, useRef } from 'react' import { Pressable as NativePressableReactNative } from 'react-native' import type { PressableProps as Props, View } from 'react-native' -import { UnistylesShadowRegistry } from '../../specs' import { passForwardedRef } from '../../core' +import { UnistylesShadowRegistry } from '../../specs' type PressableProps = Props & { variants?: Record } const getStyles = (styleProps: Record = {}) => { - const unistyleKey = Object - .keys(styleProps) - .find(key => key.startsWith('unistyles-')) + const unistyleKey = Object.keys(styleProps).find(key => key.startsWith('unistyles-')) if (!unistyleKey) { return styleProps @@ -20,7 +18,7 @@ const getStyles = (styleProps: Record = {}) => { return { // styles without C++ state ...styleProps[unistyleKey].uni__getStyles(), - [unistyleKey]: styleProps[unistyleKey].uni__getStyles() + [unistyleKey]: styleProps[unistyleKey].uni__getStyles(), } } @@ -40,9 +38,7 @@ export const Pressable = forwardRef(({ variants, style, .. { - const unistyles = typeof style === 'function' - ? style({ pressed: false }) - : style + const unistyles = typeof style === 'function' ? style({ pressed: false }) : style // @ts-expect-error - this is hidden from TS UnistylesShadowRegistry.add(ref, unistyles) @@ -54,9 +50,8 @@ export const Pressable = forwardRef(({ variants, style, .. return passForwardedRef(props, ref, forwardedRef) }} style={state => { - const unistyles = typeof style === 'function' - ? style(state) - : getStyles(style as unknown as Record) + const unistyles = + typeof style === 'function' ? style(state) : getStyles(style as unknown as Record) if (!storedRef.current) { return unistyles diff --git a/src/components/native/Pressable.tsx b/src/components/native/Pressable.tsx index e5d0a440..415f78b4 100644 --- a/src/components/native/Pressable.tsx +++ b/src/components/native/Pressable.tsx @@ -1,15 +1,15 @@ import React, { forwardRef } from 'react' import { Pressable as NativePressableReactNative } from 'react-native' import type { PressableProps as Props, View } from 'react-native' +import { getClassName } from '../../core' import { UnistylesShadowRegistry } from '../../specs' import type { UnistylesValues } from '../../types' -import { getClassName } from '../../core' import { isServer } from '../../web/utils' type Variants = Record type WebPressableState = { - pressed: boolean, - hovered: boolean, + pressed: boolean + hovered: boolean focused: boolean } @@ -17,7 +17,7 @@ type WebPressableStyle = ((state: WebPressableState) => UnistylesValues) | Unist type PressableProps = Props & { variants?: Variants - style?: WebPressableStyle, + style?: WebPressableStyle } export const Pressable = forwardRef(({ style, ...props }, forwardedRef) => { @@ -28,23 +28,25 @@ export const Pressable = forwardRef(({ style, ...props }, return ( { - storedRef = ref as unknown as HTMLElement - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.add(storedRef, classNames?.hash) + ref={ + isServer() + ? undefined + : ref => { + storedRef = ref as unknown as HTMLElement + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.add(storedRef, classNames?.hash) - if (typeof forwardedRef === 'function') { - return forwardedRef(ref) - } + if (typeof forwardedRef === 'function') { + return forwardedRef(ref) + } - if (forwardedRef) { - forwardedRef.current = ref - } - }} + if (forwardedRef) { + forwardedRef.current = ref + } + } + } style={state => { - const styleResult = typeof style === 'function' - ? style(state as WebPressableState) - : style + const styleResult = typeof style === 'function' ? style(state as WebPressableState) : style const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme() UnistylesShadowRegistry.setScopedTheme(scopedTheme) diff --git a/src/core/createUnistylesElement.native.tsx b/src/core/createUnistylesElement.native.tsx index 9ea86a3f..625bb98c 100644 --- a/src/core/createUnistylesElement.native.tsx +++ b/src/core/createUnistylesElement.native.tsx @@ -1,8 +1,8 @@ import React, { useLayoutEffect, useRef } from 'react' import { UnistylesShadowRegistry } from '../specs' +import { copyComponentProperties } from '../utils' import { passForwardedRef } from './passForwardRef' import { maybeWarnAboutMultipleUnistyles } from './warn' -import { copyComponentProperties } from '../utils' const getNativeRef = (Component: any, ref: any) => { switch (Component.name) { diff --git a/src/core/createUnistylesElement.tsx b/src/core/createUnistylesElement.tsx index e5e236ba..88e9544f 100644 --- a/src/core/createUnistylesElement.tsx +++ b/src/core/createUnistylesElement.tsx @@ -1,10 +1,10 @@ import React from 'react' import type { UnistylesValues } from '../types' -import { getClassName } from './getClassname' -import { isServer } from '../web/utils' +import { copyComponentProperties } from '../utils' import { UnistylesShadowRegistry } from '../web' +import { isServer } from '../web/utils' +import { getClassName } from './getClassname' import { maybeWarnAboutMultipleUnistyles } from './warn' -import { copyComponentProperties } from '../utils' type ComponentProps = { style?: UnistylesValues | Array @@ -19,27 +19,31 @@ export const createUnistylesElement = (Component: any) => { { - // @ts-ignore we don't know the type of the component - maybeWarnAboutMultipleUnistyles(props.style, Component.displayName) - - if (!ref) { - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.remove(storedRef, classNames?.hash) - } - - storedRef = ref - // @ts-expect-error hidden from TS - UnistylesShadowRegistry.add(ref, classNames?.hash) - - if (typeof forwardedRef === 'function') { - return forwardedRef(ref) - } - - if (forwardedRef) { - forwardedRef.current = ref - } - }} + ref={ + isServer() + ? undefined + : (ref: HTMLElement | null) => { + // @ts-ignore we don't know the type of the component + maybeWarnAboutMultipleUnistyles(props.style, Component.displayName) + + if (!ref) { + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.remove(storedRef, classNames?.hash) + } + + storedRef = ref + // @ts-expect-error hidden from TS + UnistylesShadowRegistry.add(ref, classNames?.hash) + + if (typeof forwardedRef === 'function') { + return forwardedRef(ref) + } + + if (forwardedRef) { + forwardedRef.current = ref + } + } + } /> ) }) diff --git a/src/core/createUnistylesImageBackground.tsx b/src/core/createUnistylesImageBackground.tsx index 5f864e84..8d4c1418 100644 --- a/src/core/createUnistylesImageBackground.tsx +++ b/src/core/createUnistylesImageBackground.tsx @@ -1,9 +1,9 @@ import React, { useLayoutEffect, useRef } from 'react' import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native' import { UnistylesShadowRegistry } from '../specs' +import { copyComponentProperties } from '../utils' import { passForwardedRef } from './passForwardRef' import { maybeWarnAboutMultipleUnistyles } from './warn' -import { copyComponentProperties } from '../utils' export const createUnistylesImageBackground = (Component: typeof ImageBackground) => { const UnistylesImageBackground = React.forwardRef((props, forwardedRef) => { diff --git a/src/core/getClassname.ts b/src/core/getClassname.ts index 59278fd3..b4f373f4 100644 --- a/src/core/getClassname.ts +++ b/src/core/getClassname.ts @@ -7,7 +7,7 @@ export const getClassName = (unistyle: UnistylesValues | undefined | Array( - props: any, - ref: T, - forwardedRef: React.ForwardedRef -) => { +export const passForwardedRef = (props: any, ref: T, forwardedRef: React.ForwardedRef) => { const passForwardedRef = () => { if (typeof forwardedRef === 'function') { return forwardedRef(ref) diff --git a/src/core/useProxifiedUnistyles/listener.ts b/src/core/useProxifiedUnistyles/listener.ts index 0faa9566..a6ea6039 100644 --- a/src/core/useProxifiedUnistyles/listener.ts +++ b/src/core/useProxifiedUnistyles/listener.ts @@ -3,8 +3,14 @@ import { UnistylesWeb } from '../../web' import type { ListenerProps } from './types' export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => { - const disposeTheme = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme) - const disposeRuntime = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime) + const disposeTheme = UnistylesWeb.listener.addListeners( + dependencies.filter(dependency => dependency === UnistyleDependency.Theme), + updateTheme, + ) + const disposeRuntime = UnistylesWeb.listener.addListeners( + dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), + updateRuntime, + ) return () => { disposeTheme() diff --git a/src/core/useProxifiedUnistyles/types.ts b/src/core/useProxifiedUnistyles/types.ts index 11a48e64..182de7e4 100644 --- a/src/core/useProxifiedUnistyles/types.ts +++ b/src/core/useProxifiedUnistyles/types.ts @@ -1,7 +1,7 @@ import type { UnistyleDependency } from '../../specs' export type ListenerProps = { - updateTheme: VoidFunction, - updateRuntime: VoidFunction, + updateTheme: VoidFunction + updateRuntime: VoidFunction dependencies: Array } diff --git a/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts b/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts index 74e3c84a..0b0c848d 100644 --- a/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts +++ b/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts @@ -1,5 +1,5 @@ import { useEffect, useReducer, useRef, useState } from 'react' -import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime } from '../../specs' +import { type UnistylesMiniRuntime, UnistylesRuntime, UnistylesShadowRegistry } from '../../specs' // It's imported that way because of circular dependency import { UnistyleDependency } from '../../specs/NativePlatform' import type { UnistylesTheme } from '../../types' @@ -44,7 +44,7 @@ export const useProxifiedUnistyles = () => { setTheme(UnistylesRuntime.getTheme(scopedTheme)) }, - updateRuntime: () => runtimeChanged() + updateRuntime: () => runtimeChanged(), }) } @@ -59,7 +59,7 @@ export const useProxifiedUnistyles = () => { dependencies.add(UnistyleDependency.Theme) return target[prop] - } + }, }) const proxifiedRuntime = new Proxy(getMiniRuntime(), { get: (target, prop) => { @@ -68,7 +68,7 @@ export const useProxifiedUnistyles = () => { } return target[prop as keyof typeof target] - } + }, }) return { @@ -86,6 +86,6 @@ export const useProxifiedUnistyles = () => { } reinitListener() - } + }, } } diff --git a/src/core/useUnistyles.ts b/src/core/useUnistyles.ts index 7496cc4b..a3ad0523 100644 --- a/src/core/useUnistyles.ts +++ b/src/core/useUnistyles.ts @@ -6,6 +6,6 @@ export const useUnistyles = () => { return { theme: proxifiedTheme as UnistylesTheme, - rt: proxifiedRuntime + rt: proxifiedRuntime, } } diff --git a/src/core/warn.ts b/src/core/warn.ts index add47ee0..e910489f 100644 --- a/src/core/warn.ts +++ b/src/core/warn.ts @@ -2,12 +2,12 @@ import type { ViewStyle } from 'react-native' export const maybeWarnAboutMultipleUnistyles = (style: ViewStyle, displayName = 'Unknown') => { if (__DEV__ && style && !Array.isArray(style)) { - const unistylesKeys = Object - .keys(style) - .filter(key => key.startsWith('unistyles-')) + const unistylesKeys = Object.keys(style).filter(key => key.startsWith('unistyles-')) if (unistylesKeys.length > 1) { - console.warn(`Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`) + console.warn( + `Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`, + ) } } } diff --git a/src/core/withUnistyles/types.ts b/src/core/withUnistyles/types.ts index 9c065c54..5d2cf1d8 100644 --- a/src/core/withUnistyles/types.ts +++ b/src/core/withUnistyles/types.ts @@ -1,7 +1,10 @@ -import type { UnistylesMiniRuntime } from '../../specs'; -import type { UnistylesTheme } from '../../types'; +import type { UnistylesMiniRuntime } from '../../specs' +import type { UnistylesTheme } from '../../types' export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const -export type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number] -export type Mappings = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit, SupportedStyleProps> +export type SupportedStyleProps = (typeof SUPPORTED_STYLE_PROPS)[number] +export type Mappings = ( + theme: UnistylesTheme, + rt: UnistylesMiniRuntime, +) => Omit, SupportedStyleProps> diff --git a/src/core/withUnistyles/withUnistyles.native.tsx b/src/core/withUnistyles/withUnistyles.native.tsx index f764f219..84c25e8e 100644 --- a/src/core/withUnistyles/withUnistyles.native.tsx +++ b/src/core/withUnistyles/withUnistyles.native.tsx @@ -2,31 +2,34 @@ import React, { forwardRef, useEffect, type ComponentType } from 'react' import type { UnistyleDependency } from '../../specs' import type { PartialBy } from '../../types/common' import { deepMergeObjects } from '../../utils' -import type { Mappings, SupportedStyleProps } from './types' -import { maybeWarnAboutMultipleUnistyles } from '../warn' import { useProxifiedUnistyles } from '../useProxifiedUnistyles' +import { maybeWarnAboutMultipleUnistyles } from '../warn' +import type { Mappings, SupportedStyleProps } from './types' // @ts-expect-error type GenericComponentProps

= ComponentProps

// @ts-expect-error type GenericComponentRef = ComponentRef -export const withUnistyles = >(Component: TComponent, mappings?: Mappings) => { +export const withUnistyles = >( + Component: TComponent, + mappings?: Mappings, +) => { type TProps = GenericComponentProps type PropsWithUnistyles = PartialBy & { uniProps?: Mappings } - const getSecrets = (styleProps: Record = {}): { uni__getStyles(): any, uni__dependencies: Array } => { - const unistyleKey = Object - .keys(styleProps) - .find(key => key.startsWith('unistyles-')) + const getSecrets = ( + styleProps: Record = {}, + ): { uni__getStyles(): any; uni__dependencies: Array } => { + const unistyleKey = Object.keys(styleProps).find(key => key.startsWith('unistyles-')) return unistyleKey ? styleProps[unistyleKey] : { - uni__getStyles: () => styleProps, - uni__dependencies: [], - } + uni__getStyles: () => styleProps, + uni__dependencies: [], + } } return forwardRef, PropsWithUnistyles>((props, ref) => { @@ -34,9 +37,15 @@ export const withUnistyles = + return }) } diff --git a/src/core/withUnistyles/withUnistyles.tsx b/src/core/withUnistyles/withUnistyles.tsx index b5368a80..776f25c1 100644 --- a/src/core/withUnistyles/withUnistyles.tsx +++ b/src/core/withUnistyles/withUnistyles.tsx @@ -1,24 +1,27 @@ import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react' +import type { UnistylesValues } from '../../types' import type { PartialBy } from '../../types/common' import { deepMergeObjects } from '../../utils' -import type { Mappings, SupportedStyleProps } from './types' -import type { UnistylesValues } from '../../types' import { getClassName } from '../getClassname' -import { maybeWarnAboutMultipleUnistyles } from '../warn' import { useProxifiedUnistyles } from '../useProxifiedUnistyles' +import { maybeWarnAboutMultipleUnistyles } from '../warn' +import type { Mappings, SupportedStyleProps } from './types' // @ts-expect-error type GenericComponentProps = ComponentProps // @ts-expect-error type GenericComponentRef = ComponentRef -export const withUnistyles = >(Component: TComponent, mappings?: Mappings) => { +export const withUnistyles = >( + Component: TComponent, + mappings?: Mappings, +) => { type TProps = GenericComponentProps type PropsWithUnistyles = PartialBy & { uniProps?: Mappings } type UnistyleStyles = { - style?: UnistylesValues, + style?: UnistylesValues contentContainerStyle?: UnistylesValues } @@ -33,18 +36,28 @@ export const withUnistyles = { const computeIsVisible = (): boolean => { @@ -60,6 +60,6 @@ export const useMedia = (config: { mq: symbol }) => { }, [config.mq]) return { - isVisible + isVisible, } } diff --git a/src/hooks/useMedia.ts b/src/hooks/useMedia.ts index 7df64897..4e2af0b6 100644 --- a/src/hooks/useMedia.ts +++ b/src/hooks/useMedia.ts @@ -26,8 +26,10 @@ export const useMedia = (config: { mq: symbol }) => { minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined, maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined, minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined, - maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined - ].filter(Boolean).join(' and ') + maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined, + ] + .filter(Boolean) + .join(' and ') const media = window.matchMedia(mediaQuery) const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches) @@ -42,6 +44,6 @@ export const useMedia = (config: { mq: symbol }) => { useEffect(() => () => disposeRef.current(), []) return { - isVisible + isVisible, } } diff --git a/src/mq.ts b/src/mq.ts index 63f8bc93..7ea98159 100644 --- a/src/mq.ts +++ b/src/mq.ts @@ -1,6 +1,6 @@ -import type { Nullable } from './types' import type { UnistylesBreakpoints } from './global' import { UnistylesRuntime } from './specs' +import type { Nullable } from './types' const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/ const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/ @@ -10,15 +10,21 @@ type MQValue = keyof UnistylesBreakpoints | number type MQHandler = { only: { - width(wMin?: Nullable, wMax?: MQValue): symbol, - height(hMin?: Nullable, hMax?: MQValue): symbol, - }, - width(wMin?: Nullable, wMax?: MQValue): { + width(wMin?: Nullable, wMax?: MQValue): symbol + height(hMin?: Nullable, hMax?: MQValue): symbol + } + width( + wMin?: Nullable, + wMax?: MQValue, + ): { and: { height(hMin?: Nullable, hMax?: MQValue): symbol } - }, - height(hMin?: Nullable, hMax?: MQValue): { + } + height( + hMin?: Nullable, + hMax?: MQValue, + ): { and: { width(wMin?: Nullable, wMax?: MQValue): symbol } @@ -45,21 +51,23 @@ const getMQValue = (value: Nullable) => { */ export const mq: MQHandler = { only: { - width: (wMin: Nullable = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol), - height: (hMin: Nullable = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol) + width: (wMin: Nullable = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => + `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol, + height: (hMin: Nullable = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => + `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol, }, width: (wMin: Nullable = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => ({ and: { height: (hMin: Nullable = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => - (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol) - } + `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol, + }, }), height: (hMin: Nullable = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => ({ and: { width: (wMin: Nullable = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => - (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol) - } - }) + `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol, + }, + }), } export const parseMq = (mq: string) => { @@ -77,8 +85,10 @@ export const parseMq = (mq: string) => { export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq) export const isValidMq = (parsedMQ: ReturnType) => { - const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth - const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight + const isWidthValid = + parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth + const isHeightValid = + parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight return isWidthValid && isHeightValid } diff --git a/src/server/getServerUnistyles.tsx b/src/server/getServerUnistyles.tsx index 687eeaff..c8220281 100644 --- a/src/server/getServerUnistyles.tsx +++ b/src/server/getServerUnistyles.tsx @@ -1,10 +1,12 @@ import React from 'react' import { StyleSheet } from 'react-native' -import { error, isServer } from '../web/utils' import { UnistylesWeb } from '../web' +import { error, isServer } from '../web/utils' import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types' -export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesSettings = DefaultServerUnistylesSettings) => { +export const getServerUnistyles = ({ + includeRNWStyles = true, +}: ServerUnistylesSettings = DefaultServerUnistylesSettings) => { if (!isServer()) { throw error('Server styles should only be read on the server') } @@ -12,10 +14,15 @@ export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesS const rnwStyle: string | null = includeRNWStyles ? (StyleSheet?.getSheet().textContent ?? '') : null const css = UnistylesWeb.registry.css.getStyles() const state = UnistylesWeb.registry.css.getState() - return <> - {rnwStyle && } - - {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Needs the json quotes to be unescaped */} -