react-native-unistyles 3.0.0-rc.2 → 3.0.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -17
- package/Unistyles.podspec +1 -0
- package/components/native/ActivityIndicator/package.json +1 -0
- package/components/native/Animated/package.json +1 -0
- package/components/native/FlatList/package.json +1 -0
- package/components/native/Image/package.json +1 -0
- package/components/native/ImageBackground/package.json +1 -0
- package/components/native/KeyboardAvoidingView/package.json +1 -0
- package/components/native/NativeText/package.json +1 -0
- package/components/native/NativeView/package.json +1 -0
- package/components/native/Pressable/package.json +1 -0
- package/components/native/RefreshControl/package.json +1 -0
- package/components/native/ScrollView/package.json +1 -0
- package/components/native/SectionList/package.json +1 -0
- package/components/native/Switch/package.json +1 -0
- package/components/native/Text/package.json +1 -0
- package/components/native/TextInput/package.json +1 -0
- package/components/native/TouchableHighlight/package.json +1 -0
- package/components/native/TouchableOpacity/package.json +1 -0
- package/components/native/View/package.json +1 -0
- package/components/native/VirtualizedList/package.json +1 -0
- package/cxx/core/UnistylesCommitHook.cpp +8 -1
- package/cxx/core/UnistylesMountHook.cpp +1 -3
- package/ios/NativePlatform+ios.swift +1 -1
- package/ios/NativePlatformListener+ios.swift +12 -7
- package/lib/commonjs/components/native/Image.js +4 -3
- package/lib/commonjs/components/native/Image.js.map +1 -1
- package/lib/commonjs/components/native/ImageBackground.js +3 -2
- package/lib/commonjs/components/native/ImageBackground.js.map +1 -1
- package/lib/commonjs/core/createUnistylesElement.js +17 -5
- package/lib/commonjs/core/createUnistylesElement.js.map +1 -1
- package/lib/commonjs/core/getClassname.js +10 -4
- package/lib/commonjs/core/getClassname.js.map +1 -1
- package/lib/commonjs/core/useProxifiedUnistyles/listener.js +5 -3
- package/lib/commonjs/core/useProxifiedUnistyles/listener.js.map +1 -1
- package/lib/commonjs/core/withUnistyles/withUnistyles.js +2 -1
- package/lib/commonjs/core/withUnistyles/withUnistyles.js.map +1 -1
- package/lib/commonjs/hooks/useMedia.js +4 -4
- package/lib/commonjs/hooks/useMedia.js.map +1 -1
- package/lib/commonjs/hooks/useMedia.native.js +4 -4
- package/lib/commonjs/hooks/useMedia.native.js.map +1 -1
- package/lib/commonjs/mocks.js +203 -0
- package/lib/commonjs/mocks.js.map +1 -0
- package/lib/commonjs/mq.js +1 -23
- package/lib/commonjs/mq.js.map +1 -1
- package/lib/commonjs/reanimated/index.js +13 -0
- package/lib/commonjs/reanimated/index.js.map +1 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.js +22 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.js.map +1 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.native.js +24 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.native.js.map +1 -0
- package/lib/commonjs/server/getServerUnistyles.js +5 -3
- package/lib/commonjs/server/getServerUnistyles.js.map +1 -1
- package/lib/commonjs/server/hydrateServerUnistyles.js +4 -2
- package/lib/commonjs/server/hydrateServerUnistyles.js.map +1 -1
- package/lib/commonjs/server/resetServerUnistyles.js +4 -2
- package/lib/commonjs/server/resetServerUnistyles.js.map +1 -1
- package/lib/commonjs/utils.js +23 -1
- package/lib/commonjs/utils.js.map +1 -1
- package/lib/commonjs/web/convert/index.js +4 -7
- package/lib/commonjs/web/convert/index.js.map +1 -1
- package/lib/commonjs/web/convert/object/filter.js +7 -8
- package/lib/commonjs/web/convert/object/filter.js.map +1 -1
- package/lib/commonjs/web/create.js +6 -4
- package/lib/commonjs/web/create.js.map +1 -1
- package/lib/commonjs/web/css/state.js +1 -1
- package/lib/commonjs/web/css/state.js.map +1 -1
- package/lib/commonjs/web/index.js +7 -12
- package/lib/commonjs/web/index.js.map +1 -1
- package/lib/commonjs/web/services.js +7 -2
- package/lib/commonjs/web/services.js.map +1 -1
- package/lib/commonjs/web/shadowRegistry.js +18 -4
- package/lib/commonjs/web/shadowRegistry.js.map +1 -1
- package/lib/commonjs/web/types.js +2 -0
- package/lib/commonjs/web/types.js.map +1 -1
- package/lib/commonjs/web/utils/createUnistylesRef.js +7 -4
- package/lib/commonjs/web/utils/createUnistylesRef.js.map +1 -1
- package/lib/commonjs/web/utils/index.js +0 -11
- package/lib/commonjs/web/utils/index.js.map +1 -1
- package/lib/commonjs/web/utils/unistyle.js +40 -12
- package/lib/commonjs/web/utils/unistyle.js.map +1 -1
- package/lib/commonjs/web-only/getWebProps.js +19 -0
- package/lib/commonjs/web-only/getWebProps.js.map +1 -0
- package/lib/commonjs/web-only/index.js +13 -0
- package/lib/commonjs/web-only/index.js.map +1 -0
- package/lib/module/components/native/Image.js +4 -3
- package/lib/module/components/native/Image.js.map +1 -1
- package/lib/module/components/native/ImageBackground.js +2 -1
- package/lib/module/components/native/ImageBackground.js.map +1 -1
- package/lib/module/core/createUnistylesElement.js +18 -6
- package/lib/module/core/createUnistylesElement.js.map +1 -1
- package/lib/module/core/getClassname.js +8 -4
- package/lib/module/core/getClassname.js.map +1 -1
- package/lib/module/core/useProxifiedUnistyles/listener.js +3 -3
- package/lib/module/core/useProxifiedUnistyles/listener.js.map +1 -1
- package/lib/module/core/withUnistyles/withUnistyles.js +2 -1
- package/lib/module/core/withUnistyles/withUnistyles.js.map +1 -1
- package/lib/module/hooks/useMedia.js +1 -1
- package/lib/module/hooks/useMedia.js.map +1 -1
- package/lib/module/hooks/useMedia.native.js +1 -1
- package/lib/module/hooks/useMedia.native.js.map +1 -1
- package/lib/module/mocks.js +201 -0
- package/lib/module/mocks.js.map +1 -0
- package/lib/module/mq.js +0 -19
- package/lib/module/mq.js.map +1 -1
- package/lib/module/reanimated/index.js +4 -0
- package/lib/module/reanimated/index.js.map +1 -0
- package/lib/module/reanimated/useAnimatedTheme.js +17 -0
- package/lib/module/reanimated/useAnimatedTheme.js.map +1 -0
- package/lib/module/reanimated/useAnimatedTheme.native.js +19 -0
- package/lib/module/reanimated/useAnimatedTheme.native.js.map +1 -0
- package/lib/module/server/getServerUnistyles.js +3 -3
- package/lib/module/server/getServerUnistyles.js.map +1 -1
- package/lib/module/server/hydrateServerUnistyles.js +2 -2
- package/lib/module/server/hydrateServerUnistyles.js.map +1 -1
- package/lib/module/server/resetServerUnistyles.js +2 -2
- package/lib/module/server/resetServerUnistyles.js.map +1 -1
- package/lib/module/utils.js +19 -0
- package/lib/module/utils.js.map +1 -1
- package/lib/module/web/convert/index.js +4 -7
- package/lib/module/web/convert/index.js.map +1 -1
- package/lib/module/web/convert/object/filter.js +3 -4
- package/lib/module/web/convert/object/filter.js.map +1 -1
- package/lib/module/web/create.js +4 -4
- package/lib/module/web/create.js.map +1 -1
- package/lib/module/web/css/state.js +1 -1
- package/lib/module/web/css/state.js.map +1 -1
- package/lib/module/web/index.js +4 -10
- package/lib/module/web/index.js.map +1 -1
- package/lib/module/web/services.js +7 -1
- package/lib/module/web/services.js.map +1 -1
- package/lib/module/web/shadowRegistry.js +18 -4
- package/lib/module/web/shadowRegistry.js.map +1 -1
- package/lib/module/web/types.js +1 -1
- package/lib/module/web/types.js.map +1 -1
- package/lib/module/web/utils/createUnistylesRef.js +5 -4
- package/lib/module/web/utils/createUnistylesRef.js.map +1 -1
- package/lib/module/web/utils/index.js +0 -1
- package/lib/module/web/utils/index.js.map +1 -1
- package/lib/module/web/utils/unistyle.js +32 -9
- package/lib/module/web/utils/unistyle.js.map +1 -1
- package/lib/module/web-only/getWebProps.js +14 -0
- package/lib/module/web-only/getWebProps.js.map +1 -0
- package/lib/module/web-only/index.js +4 -0
- package/lib/module/web-only/index.js.map +1 -0
- package/lib/typescript/src/components/native/Image.d.ts.map +1 -1
- package/lib/typescript/src/components/native/ImageBackground.d.ts.map +1 -1
- package/lib/typescript/src/core/createUnistylesElement.d.ts.map +1 -1
- package/lib/typescript/src/core/getClassname.d.ts +5 -5
- package/lib/typescript/src/core/getClassname.d.ts.map +1 -1
- package/lib/typescript/src/core/withUnistyles/withUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/mocks.d.ts +2 -0
- package/lib/typescript/src/mocks.d.ts.map +1 -0
- package/lib/typescript/src/mq.d.ts +0 -8
- package/lib/typescript/src/mq.d.ts.map +1 -1
- package/lib/typescript/src/reanimated/index.d.ts +2 -0
- package/lib/typescript/src/reanimated/index.d.ts.map +1 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts +4 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts.map +1 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts +4 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts.map +1 -0
- package/lib/typescript/src/server/hydrateServerUnistyles.d.ts +0 -1
- package/lib/typescript/src/server/hydrateServerUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/server/resetServerUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/utils.d.ts +8 -0
- package/lib/typescript/src/utils.d.ts.map +1 -1
- package/lib/typescript/src/web/convert/index.d.ts +2 -1
- package/lib/typescript/src/web/convert/index.d.ts.map +1 -1
- package/lib/typescript/src/web/convert/object/filter.d.ts +2 -1
- package/lib/typescript/src/web/convert/object/filter.d.ts.map +1 -1
- package/lib/typescript/src/web/index.d.ts +0 -5
- package/lib/typescript/src/web/index.d.ts.map +1 -1
- package/lib/typescript/src/web/services.d.ts +6 -1
- package/lib/typescript/src/web/services.d.ts.map +1 -1
- package/lib/typescript/src/web/shadowRegistry.d.ts +2 -2
- package/lib/typescript/src/web/shadowRegistry.d.ts.map +1 -1
- package/lib/typescript/src/web/types.d.ts +3 -0
- package/lib/typescript/src/web/types.d.ts.map +1 -1
- package/lib/typescript/src/web/utils/createUnistylesRef.d.ts +8 -5
- package/lib/typescript/src/web/utils/createUnistylesRef.d.ts.map +1 -1
- package/lib/typescript/src/web/utils/index.d.ts +0 -1
- package/lib/typescript/src/web/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/web/utils/unistyle.d.ts +5 -1
- package/lib/typescript/src/web/utils/unistyle.d.ts.map +1 -1
- package/lib/typescript/src/web-only/getWebProps.d.ts +7 -0
- package/lib/typescript/src/web-only/getWebProps.d.ts.map +1 -0
- package/lib/typescript/src/web-only/index.d.ts +2 -0
- package/lib/typescript/src/web-only/index.d.ts.map +1 -0
- package/package.json +43 -7
- package/plugin/index.js +24 -17
- package/reanimated/package.json +6 -0
- package/src/components/native/Image.tsx +4 -3
- package/src/components/native/ImageBackground.tsx +2 -1
- package/src/core/createUnistylesElement.tsx +26 -9
- package/src/core/getClassname.ts +14 -4
- package/src/core/useProxifiedUnistyles/listener.ts +3 -3
- package/src/core/withUnistyles/withUnistyles.tsx +2 -1
- package/src/hooks/useMedia.native.ts +1 -1
- package/src/hooks/useMedia.ts +1 -1
- package/src/mocks.ts +217 -0
- package/src/mq.ts +0 -24
- package/src/reanimated/index.ts +1 -0
- package/src/reanimated/useAnimatedTheme.native.ts +21 -0
- package/src/reanimated/useAnimatedTheme.ts +19 -0
- package/src/server/getServerUnistyles.tsx +3 -3
- package/src/server/hydrateServerUnistyles.ts +3 -2
- package/src/server/resetServerUnistyles.ts +4 -3
- package/src/utils.ts +25 -0
- package/src/web/convert/index.ts +5 -7
- package/src/web/convert/object/filter.ts +4 -4
- package/src/web/create.ts +4 -4
- package/src/web/css/state.ts +1 -1
- package/src/web/index.ts +4 -16
- package/src/web/services.ts +14 -1
- package/src/web/shadowRegistry.ts +20 -5
- package/src/web/types.ts +9 -4
- package/src/web/utils/createUnistylesRef.ts +12 -8
- package/src/web/utils/index.ts +0 -1
- package/src/web/utils/unistyle.ts +47 -13
- package/src/web-only/getWebProps.ts +18 -0
- package/src/web-only/index.ts +2 -0
- package/web-only/package.json +6 -0
@@ -2,26 +2,43 @@ import React from 'react'
|
|
2
2
|
import type { ViewStyle } from 'react-native'
|
3
3
|
import type { UnistylesValues } from '../types'
|
4
4
|
import { copyComponentProperties } from '../utils'
|
5
|
-
import {
|
5
|
+
import { isServer } from '../web/utils'
|
6
|
+
import { createUnistylesRef } from '../web/utils/createUnistylesRef'
|
6
7
|
import { getClassName } from './getClassname'
|
7
8
|
import { maybeWarnAboutMultipleUnistyles } from './warn'
|
8
9
|
|
10
|
+
const STYLE_PROPS = ['style', 'contentContainerStyle', 'columnWrapperStyle'] as const
|
11
|
+
|
9
12
|
type ComponentProps = {
|
10
|
-
|
13
|
+
[K in typeof STYLE_PROPS[number]]?: UnistylesValues
|
11
14
|
}
|
12
15
|
|
13
|
-
|
14
|
-
const
|
15
|
-
|
16
|
-
|
16
|
+
const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
|
17
|
+
const componentStyleProps = STYLE_PROPS.filter(styleProp => styleProp in props)
|
18
|
+
const classNames = Object.fromEntries(componentStyleProps.map(styleProp => [styleProp, getClassName(props[styleProp])]))
|
19
|
+
const refs = componentStyleProps.map(styleProp => {
|
20
|
+
return createUnistylesRef(
|
21
|
+
classNames[styleProp],
|
22
|
+
styleProp === 'style' ? forwardedRef : undefined
|
23
|
+
)
|
24
|
+
})
|
17
25
|
|
18
|
-
|
26
|
+
componentStyleProps.forEach(styleProp => {
|
27
|
+
maybeWarnAboutMultipleUnistyles(props[styleProp] as ViewStyle, Component.displayName)
|
28
|
+
})
|
29
|
+
|
30
|
+
return {
|
31
|
+
...classNames,
|
32
|
+
ref: isServer() ? undefined : (componentRef: any) => refs.forEach(ref => ref?.(componentRef))
|
33
|
+
}
|
34
|
+
}
|
19
35
|
|
36
|
+
export const createUnistylesElement = (Component: any) => {
|
37
|
+
const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
|
20
38
|
return (
|
21
39
|
<Component
|
22
40
|
{...props}
|
23
|
-
|
24
|
-
ref={ref}
|
41
|
+
{...buildUnistylesProps(Component, props, forwardedRef)}
|
25
42
|
/>
|
26
43
|
)
|
27
44
|
})
|
package/src/core/getClassname.ts
CHANGED
@@ -1,15 +1,25 @@
|
|
1
1
|
import type { UnistylesValues } from '../types'
|
2
|
-
import
|
2
|
+
import * as unistyles from '../web/services'
|
3
|
+
import { checkForAnimated } from '../web/utils'
|
3
4
|
|
4
5
|
export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>, forChild?: boolean) => {
|
5
6
|
if (!unistyle) {
|
6
7
|
return undefined
|
7
8
|
}
|
8
9
|
|
9
|
-
const
|
10
|
-
|
10
|
+
const flattenedStyles = Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
|
11
|
+
const animatedStyles = flattenedStyles.filter(checkForAnimated)
|
12
|
+
const regularStyles = flattenedStyles.filter(style => !checkForAnimated(style))
|
13
|
+
|
14
|
+
const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(
|
15
|
+
regularStyles,
|
11
16
|
forChild
|
12
17
|
)
|
13
18
|
|
14
|
-
return hash
|
19
|
+
return hash
|
20
|
+
? [
|
21
|
+
{ $$css: true, hash, injectedClassName },
|
22
|
+
animatedStyles,
|
23
|
+
] as const
|
24
|
+
: undefined
|
15
25
|
}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import { UnistyleDependency } from '../../specs'
|
2
|
-
import
|
2
|
+
import * as unistyles from '../../web/services'
|
3
3
|
import type { ListenerProps } from './types'
|
4
4
|
|
5
5
|
export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
|
6
|
-
const disposeTheme =
|
7
|
-
const disposeRuntime =
|
6
|
+
const disposeTheme = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
|
7
|
+
const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
|
8
8
|
|
9
9
|
return () => {
|
10
10
|
disposeTheme()
|
@@ -56,10 +56,11 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
|
|
56
56
|
maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
|
57
57
|
|
58
58
|
const NativeComponent = Component as ComponentType
|
59
|
+
const [classNames] = styleClassNames ?? []
|
59
60
|
|
60
61
|
return (
|
61
62
|
<div
|
62
|
-
className={
|
63
|
+
className={classNames?.hash}
|
63
64
|
style={{ display: 'contents' }}
|
64
65
|
>
|
65
66
|
<NativeComponent {...combinedProps} ref={ref} />
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useEffect, useLayoutEffect, useState } from 'react'
|
2
|
-
import { isUnistylesMq, isValidMq, parseMq } from '../mq'
|
3
2
|
import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
|
3
|
+
import { isUnistylesMq, isValidMq, parseMq } from '../utils'
|
4
4
|
|
5
5
|
export const useMedia = (config: { mq: symbol }) => {
|
6
6
|
const computeIsVisible = (): boolean => {
|
package/src/hooks/useMedia.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { useEffect, useRef, useState } from 'react'
|
2
|
-
import { isUnistylesMq, isValidMq, parseMq } from '../
|
2
|
+
import { isUnistylesMq, isValidMq, parseMq } from '../utils'
|
3
3
|
|
4
4
|
export const useMedia = (config: { mq: symbol }) => {
|
5
5
|
const disposeRef = useRef(() => {})
|
package/src/mocks.ts
ADDED
@@ -0,0 +1,217 @@
|
|
1
|
+
import type { UnistylesBreakpoints, UnistylesThemes } from './global'
|
2
|
+
import type { UnistylesNavigationBar } from './specs/NavigtionBar'
|
3
|
+
import type { UnistylesStatusBar } from './specs/StatusBar'
|
4
|
+
import type { UnistylesConfig, UnistylesStyleSheet } from './specs/StyleSheet'
|
5
|
+
import type { UnistylesRuntimePrivate } from './specs/UnistylesRuntime'
|
6
|
+
import type { ColorScheme, Orientation } from './specs/types'
|
7
|
+
import type { IOSContentSizeCategory, UnistylesTheme } from './types'
|
8
|
+
|
9
|
+
type Registry = {
|
10
|
+
themes: UnistylesThemes
|
11
|
+
breakpoints: UnistylesBreakpoints
|
12
|
+
}
|
13
|
+
|
14
|
+
jest.mock('react-native-nitro-modules', () => ({
|
15
|
+
NitroModules: {
|
16
|
+
createHybridObject: () => ({
|
17
|
+
add: () => {},
|
18
|
+
init: () => {},
|
19
|
+
createHybridStatusBar: () => ({
|
20
|
+
setStyle: () => {},
|
21
|
+
}),
|
22
|
+
createHybridNavigationBar: () => {},
|
23
|
+
})
|
24
|
+
}
|
25
|
+
}))
|
26
|
+
|
27
|
+
jest.mock('react-native-unistyles', () => {
|
28
|
+
const React = require('react')
|
29
|
+
const _REGISTRY: Registry = {
|
30
|
+
themes: {},
|
31
|
+
breakpoints: {}
|
32
|
+
}
|
33
|
+
const miniRuntime = {
|
34
|
+
themeName: undefined,
|
35
|
+
breakpoint: undefined,
|
36
|
+
hasAdaptiveThemes: false,
|
37
|
+
colorScheme: 'unspecified' as ColorScheme,
|
38
|
+
contentSizeCategory: 'Medium' as IOSContentSizeCategory,
|
39
|
+
insets: {
|
40
|
+
top: 0,
|
41
|
+
left: 0,
|
42
|
+
right: 0,
|
43
|
+
bottom: 0,
|
44
|
+
ime: 0
|
45
|
+
},
|
46
|
+
pixelRatio: 1,
|
47
|
+
fontScale: 1,
|
48
|
+
rtl: false,
|
49
|
+
isLandscape: false,
|
50
|
+
isPortrait: true,
|
51
|
+
navigationBar: {
|
52
|
+
width: 0,
|
53
|
+
height: 0
|
54
|
+
},
|
55
|
+
screen: {
|
56
|
+
width: 0,
|
57
|
+
height: 0
|
58
|
+
},
|
59
|
+
statusBar: {
|
60
|
+
width: 0,
|
61
|
+
height: 0
|
62
|
+
}
|
63
|
+
}
|
64
|
+
const unistylesRuntime = {
|
65
|
+
colorScheme: 'unspecified' as ColorScheme,
|
66
|
+
contentSizeCategory: 'Medium' as IOSContentSizeCategory,
|
67
|
+
orientation: 'portrait' as Orientation,
|
68
|
+
breakpoints: {},
|
69
|
+
dispose: () => { },
|
70
|
+
equals: () => false,
|
71
|
+
name: 'UnistylesRuntimeMock',
|
72
|
+
miniRuntime: miniRuntime,
|
73
|
+
statusBar: {
|
74
|
+
height: 0,
|
75
|
+
width: 0,
|
76
|
+
name: 'StatusBarMock',
|
77
|
+
equals: () => false,
|
78
|
+
setHidden: () => { },
|
79
|
+
setStyle: () => { }
|
80
|
+
},
|
81
|
+
navigationBar: {
|
82
|
+
height: 0,
|
83
|
+
width: 0,
|
84
|
+
name: 'NavigationBarMock',
|
85
|
+
equals: () => false,
|
86
|
+
setHidden: () => { },
|
87
|
+
dispose: () => { }
|
88
|
+
},
|
89
|
+
fontScale: 1,
|
90
|
+
hasAdaptiveThemes: false,
|
91
|
+
pixelRatio: 0,
|
92
|
+
rtl: false,
|
93
|
+
getTheme: () => {
|
94
|
+
return {} as UnistylesTheme
|
95
|
+
},
|
96
|
+
setTheme: () => {},
|
97
|
+
updateTheme: () => {},
|
98
|
+
setRootViewBackgroundColor: () => {},
|
99
|
+
_setRootViewBackgroundColor: () => {},
|
100
|
+
createHybridStatusBar: () => {
|
101
|
+
return {} as UnistylesStatusBar
|
102
|
+
},
|
103
|
+
createHybridNavigationBar: () => {
|
104
|
+
return {} as UnistylesNavigationBar
|
105
|
+
},
|
106
|
+
setAdaptiveThemes: () => {},
|
107
|
+
setImmersiveMode: () => {},
|
108
|
+
insets: {
|
109
|
+
top: 0,
|
110
|
+
left: 0,
|
111
|
+
right: 0,
|
112
|
+
bottom: 0,
|
113
|
+
ime: 0
|
114
|
+
},
|
115
|
+
screen: {
|
116
|
+
width: 0,
|
117
|
+
height: 0
|
118
|
+
},
|
119
|
+
breakpoint: undefined
|
120
|
+
} satisfies UnistylesRuntimePrivate
|
121
|
+
|
122
|
+
return {
|
123
|
+
Hide: () => null,
|
124
|
+
Display: () => null,
|
125
|
+
ScopedTheme: () => null,
|
126
|
+
withUnistyles: <TComponent,>(Component: TComponent, mapper?: (theme: UnistylesTheme, runtime: typeof miniRuntime) => TComponent) => (props: any) =>
|
127
|
+
React.createElement(Component, {
|
128
|
+
...mapper?.((Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme, miniRuntime),
|
129
|
+
...props
|
130
|
+
}),
|
131
|
+
mq: {
|
132
|
+
only: {
|
133
|
+
width: () => ({
|
134
|
+
and: {
|
135
|
+
height: () => ({})
|
136
|
+
}
|
137
|
+
}),
|
138
|
+
height: () => ({
|
139
|
+
and: {
|
140
|
+
width: () => ({})
|
141
|
+
}
|
142
|
+
})
|
143
|
+
},
|
144
|
+
width: () => ({
|
145
|
+
and: {
|
146
|
+
height: () => ({})
|
147
|
+
}
|
148
|
+
}),
|
149
|
+
height: () => ({
|
150
|
+
and: {
|
151
|
+
width: () => ({})
|
152
|
+
}
|
153
|
+
})
|
154
|
+
},
|
155
|
+
useUnistyles: () => ({
|
156
|
+
theme: Object.values(_REGISTRY.themes).at(0) ?? {},
|
157
|
+
rt: unistylesRuntime
|
158
|
+
}),
|
159
|
+
StyleSheet: {
|
160
|
+
absoluteFillObject: {
|
161
|
+
position: 'absolute',
|
162
|
+
left: 0,
|
163
|
+
right: 0,
|
164
|
+
top: 0,
|
165
|
+
bottom: 0
|
166
|
+
},
|
167
|
+
absoluteFill: {
|
168
|
+
position: 'absolute',
|
169
|
+
left: 0,
|
170
|
+
right: 0,
|
171
|
+
top: 0,
|
172
|
+
bottom: 0
|
173
|
+
} as unknown as UnistylesStyleSheet['absoluteFill'],
|
174
|
+
compose: (styles: any) => {
|
175
|
+
return styles
|
176
|
+
},
|
177
|
+
flatten: (styles: any) => {
|
178
|
+
return styles
|
179
|
+
},
|
180
|
+
create: (styles: any) => {
|
181
|
+
if (typeof styles === 'function') {
|
182
|
+
return {
|
183
|
+
...styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime),
|
184
|
+
useVariants: () => {}
|
185
|
+
}
|
186
|
+
}
|
187
|
+
|
188
|
+
return {
|
189
|
+
...styles,
|
190
|
+
useVariants: () => {}
|
191
|
+
}
|
192
|
+
},
|
193
|
+
configure: (config: UnistylesConfig) => {
|
194
|
+
if (config.breakpoints) {
|
195
|
+
_REGISTRY.breakpoints = config.breakpoints
|
196
|
+
}
|
197
|
+
|
198
|
+
if (config.themes) {
|
199
|
+
_REGISTRY.themes = config.themes
|
200
|
+
}
|
201
|
+
},
|
202
|
+
jsMethods: {
|
203
|
+
processColor: () => null
|
204
|
+
},
|
205
|
+
hairlineWidth: 1,
|
206
|
+
unid: -1,
|
207
|
+
addChangeListener: () => () => {},
|
208
|
+
init: () => {},
|
209
|
+
name: 'StyleSheetMock',
|
210
|
+
dispose: () => {},
|
211
|
+
equals: () => false
|
212
|
+
} satisfies UnistylesStyleSheet,
|
213
|
+
UnistylesRuntime: unistylesRuntime
|
214
|
+
}
|
215
|
+
})
|
216
|
+
|
217
|
+
|
package/src/mq.ts
CHANGED
@@ -2,10 +2,6 @@ import type { UnistylesBreakpoints } from './global'
|
|
2
2
|
import { UnistylesRuntime } from './specs'
|
3
3
|
import type { Nullable } from './types'
|
4
4
|
|
5
|
-
const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
|
6
|
-
const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
|
7
|
-
const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
|
8
|
-
|
9
5
|
type MQValue = keyof UnistylesBreakpoints | number
|
10
6
|
|
11
7
|
type MQHandler = {
|
@@ -62,23 +58,3 @@ export const mq: MQHandler = {
|
|
62
58
|
})
|
63
59
|
}
|
64
60
|
|
65
|
-
export const parseMq = (mq: string) => {
|
66
|
-
const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
|
67
|
-
const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
|
68
|
-
|
69
|
-
return {
|
70
|
-
minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
|
71
|
-
maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
|
72
|
-
minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
|
73
|
-
maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
|
74
|
-
}
|
75
|
-
}
|
76
|
-
|
77
|
-
export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
|
78
|
-
|
79
|
-
export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
|
80
|
-
const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
|
81
|
-
const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
|
82
|
-
|
83
|
-
return isWidthValid && isHeightValid
|
84
|
-
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { useAnimatedTheme } from './useAnimatedTheme'
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { useEffect } from 'react'
|
2
|
+
import { type SharedValue, useSharedValue } from 'react-native-reanimated'
|
3
|
+
import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
|
4
|
+
import type { UnistylesTheme } from '../types'
|
5
|
+
|
6
|
+
export const useAnimatedTheme = () => {
|
7
|
+
const theme = useSharedValue(UnistylesRuntime.getTheme())
|
8
|
+
|
9
|
+
useEffect(() => {
|
10
|
+
// @ts-ignore this is hidden from TS
|
11
|
+
const dispose = StyleSheet.addChangeListener(changedDependencies => {
|
12
|
+
if (changedDependencies.includes(UnistyleDependency.Theme)) {
|
13
|
+
theme.set(UnistylesRuntime.getTheme())
|
14
|
+
}
|
15
|
+
})
|
16
|
+
|
17
|
+
return () => dispose()
|
18
|
+
}, [])
|
19
|
+
|
20
|
+
return theme as SharedValue<UnistylesTheme>
|
21
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { useEffect } from 'react'
|
2
|
+
import { type SharedValue, useSharedValue } from 'react-native-reanimated'
|
3
|
+
import { UnistyleDependency, UnistylesRuntime } from '../specs'
|
4
|
+
import type { UnistylesTheme } from '../types'
|
5
|
+
import { services } from '../web/services'
|
6
|
+
|
7
|
+
export const useAnimatedTheme = () => {
|
8
|
+
const theme = useSharedValue(UnistylesRuntime.getTheme())
|
9
|
+
|
10
|
+
useEffect(() => {
|
11
|
+
const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
|
12
|
+
|
13
|
+
return () => {
|
14
|
+
dispose()
|
15
|
+
}
|
16
|
+
}, [])
|
17
|
+
|
18
|
+
return theme as SharedValue<UnistylesTheme>
|
19
|
+
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { StyleSheet } from 'react-native'
|
3
|
-
import
|
3
|
+
import * as unistyles from '../web/services'
|
4
4
|
import { error, isServer } from '../web/utils'
|
5
5
|
import { serialize } from './serialize'
|
6
6
|
import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
|
@@ -12,8 +12,8 @@ export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesS
|
|
12
12
|
|
13
13
|
// @ts-ignore
|
14
14
|
const rnwStyle: string | null = includeRNWStyles ? (StyleSheet?.getSheet().textContent ?? '') : null
|
15
|
-
const css =
|
16
|
-
const state =
|
15
|
+
const css = unistyles.services.registry.css.getStyles()
|
16
|
+
const state = unistyles.services.registry.css.getState()
|
17
17
|
|
18
18
|
return (
|
19
19
|
<>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import * as unistyles from '../web/services'
|
2
2
|
import { error, isServer } from '../web/utils'
|
3
3
|
|
4
4
|
declare global {
|
@@ -12,6 +12,7 @@ export const hydrateServerUnistyles = () => {
|
|
12
12
|
if (isServer()) {
|
13
13
|
throw error('Server styles should only be hydrated on the client')
|
14
14
|
}
|
15
|
-
|
15
|
+
|
16
|
+
unistyles.services.registry.css.hydrate(window.__UNISTYLES_STATE__)
|
16
17
|
document.querySelector('#unistyles-script')?.remove()
|
17
18
|
}
|
@@ -1,9 +1,10 @@
|
|
1
|
-
import
|
1
|
+
import * as unistyles from '../web/services'
|
2
2
|
import { error, isServer } from '../web/utils'
|
3
3
|
|
4
4
|
export const resetServerUnistyles = () => {
|
5
5
|
if (!isServer()) {
|
6
6
|
throw error('Server styles should only be reset on the server')
|
7
7
|
}
|
8
|
-
|
9
|
-
|
8
|
+
|
9
|
+
unistyles.services.registry.reset()
|
10
|
+
}
|
package/src/utils.ts
CHANGED
@@ -41,3 +41,28 @@ export const copyComponentProperties = (Component: any, UnistylesComponent: any)
|
|
41
41
|
|
42
42
|
return UnistylesComponent
|
43
43
|
}
|
44
|
+
|
45
|
+
const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
|
46
|
+
const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
|
47
|
+
const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
|
48
|
+
|
49
|
+
export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
|
50
|
+
|
51
|
+
export const parseMq = (mq: string) => {
|
52
|
+
const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
|
53
|
+
const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
|
54
|
+
|
55
|
+
return {
|
56
|
+
minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
|
57
|
+
maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
|
58
|
+
minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
|
59
|
+
maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
|
64
|
+
const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
|
65
|
+
const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
|
66
|
+
|
67
|
+
return isWidthValid && isHeightValid
|
68
|
+
}
|
package/src/web/convert/index.ts
CHANGED
@@ -1,21 +1,19 @@
|
|
1
1
|
import type { UnistylesValues } from '../../types'
|
2
2
|
import { deepMergeObjects } from '../../utils'
|
3
|
+
import type { UnistylesRuntime } from '../runtime'
|
3
4
|
import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
|
4
5
|
import { isPseudo } from './pseudo'
|
5
6
|
import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
|
6
7
|
import { getStyle } from './style'
|
7
8
|
import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
|
8
9
|
|
9
|
-
export const convertUnistyles = (value: UnistylesValues) => {
|
10
|
+
export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRuntime) => {
|
10
11
|
// Flag to mark if textShadow is already created
|
11
12
|
let hasTextShadow = false
|
12
13
|
// Flag to mark if boxShadow is already created
|
13
14
|
let hasShadow = false
|
14
15
|
|
15
|
-
const stylesArray = Object.entries({
|
16
|
-
...value,
|
17
|
-
...value._web
|
18
|
-
}).flatMap(([unistylesKey, unistylesValue]) => {
|
16
|
+
const stylesArray = Object.entries(value).flatMap(([unistylesKey, unistylesValue]) => {
|
19
17
|
// Keys to omit
|
20
18
|
if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey) || unistylesKey.startsWith('unistyles_')) {
|
21
19
|
return []
|
@@ -23,7 +21,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
|
|
23
21
|
|
24
22
|
// Pseudo classes :hover, :before etc.
|
25
23
|
if (isPseudo(unistylesKey)) {
|
26
|
-
const flattenValues = convertUnistyles(unistylesValue as UnistylesValues)
|
24
|
+
const flattenValues = convertUnistyles(unistylesValue as UnistylesValues, runtime)
|
27
25
|
|
28
26
|
return { [unistylesKey]: flattenValues }
|
29
27
|
}
|
@@ -51,7 +49,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
|
|
51
49
|
}
|
52
50
|
|
53
51
|
if (isFilter(unistylesKey, unistylesValue)) {
|
54
|
-
return getFilterStyle(unistylesValue)
|
52
|
+
return getFilterStyle(unistylesValue, runtime)
|
55
53
|
}
|
56
54
|
|
57
55
|
if (isBoxShadow(unistylesKey, unistylesValue)) {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { DropShadowValue } from 'react-native'
|
2
|
-
import { isUnistylesMq } from '../../../
|
3
|
-
import {
|
2
|
+
import { isUnistylesMq } from '../../../utils'
|
3
|
+
import type { UnistylesRuntime } from '../../runtime'
|
4
4
|
import { hyphenate } from '../../utils'
|
5
5
|
import type { Filters } from '../types'
|
6
6
|
import { normalizeColor, normalizeNumericValue } from '../utils'
|
@@ -12,7 +12,7 @@ const getDropShadowStyle = (dropShadow: DropShadowValue) => {
|
|
12
12
|
return `${normalizeColor(String(color))} ${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(standardDeviation)}`
|
13
13
|
}
|
14
14
|
|
15
|
-
export const getFilterStyle = (filters: Array<Filters
|
15
|
+
export const getFilterStyle = (filters: Array<Filters>, runtime: UnistylesRuntime) => {
|
16
16
|
const restFilters = filters.filter(filter => Object.keys(filter)[0] !== 'dropShadow')
|
17
17
|
const dropShadow = (() => {
|
18
18
|
const dropShadowValue = filters.find(filter => Object.keys(filter)[0] === 'dropShadow')?.dropShadow as Record<string, any>
|
@@ -21,7 +21,7 @@ export const getFilterStyle = (filters: Array<Filters>) => {
|
|
21
21
|
return []
|
22
22
|
}
|
23
23
|
|
24
|
-
const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(
|
24
|
+
const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(runtime.breakpoints).includes(key) || isUnistylesMq(key))
|
25
25
|
const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
|
26
26
|
|
27
27
|
if (breakpoints.length === 0) {
|
package/src/web/create.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
|
2
|
-
import
|
2
|
+
import * as unistyles from './services'
|
3
3
|
import { assignSecrets, error, isServer, removeInlineStyles } from './utils'
|
4
4
|
|
5
5
|
type Variants = Record<string, string | boolean | undefined>
|
@@ -10,13 +10,13 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
|
|
10
10
|
}
|
11
11
|
|
12
12
|
// For SSR
|
13
|
-
if (!
|
13
|
+
if (!unistyles.services.state.isInitialized && !isServer()) {
|
14
14
|
const config = window?.__UNISTYLES_STATE__?.config
|
15
15
|
|
16
|
-
config &&
|
16
|
+
config && unistyles.services.state.init(config)
|
17
17
|
}
|
18
18
|
|
19
|
-
const computedStylesheet =
|
19
|
+
const computedStylesheet = unistyles.services.registry.getComputedStylesheet(stylesheet)
|
20
20
|
const addSecrets = (value: any, key: string, args = undefined as Array<any> | undefined, variants = {} as Variants) => assignSecrets(value, {
|
21
21
|
__uni__key: key,
|
22
22
|
__uni__stylesheet: stylesheet,
|
package/src/web/css/state.ts
CHANGED
@@ -61,7 +61,7 @@ export class CSSState {
|
|
61
61
|
}
|
62
62
|
|
63
63
|
add = (hash: string, values: UnistylesValues) => {
|
64
|
-
convertToCSS(hash, convertUnistyles(values), this)
|
64
|
+
convertToCSS(hash, convertUnistyles(values, this.services.runtime), this)
|
65
65
|
|
66
66
|
if (this.styleTag) {
|
67
67
|
this.styleTag.innerText = this.getStyles()
|
package/src/web/index.ts
CHANGED
@@ -3,22 +3,10 @@ import type { StyleSheet as NativeStyleSheet } from '../specs/StyleSheet'
|
|
3
3
|
import type { Runtime as NativeUnistylesRuntime } from '../specs/UnistylesRuntime'
|
4
4
|
import { deepMergeObjects } from '../utils'
|
5
5
|
import { create } from './create'
|
6
|
-
import
|
7
|
-
import { isServer } from './utils'
|
6
|
+
import * as unistyles from './services'
|
8
7
|
|
9
|
-
declare global {
|
10
|
-
// @ts-ignore
|
11
|
-
var __unistyles__: UnistylesServices
|
12
|
-
}
|
13
|
-
|
14
|
-
if (isServer() && !globalThis.__unistyles__) {
|
15
|
-
// @ts-ignore
|
16
|
-
globalThis.__unistyles__ = new UnistylesServices()
|
17
|
-
}
|
18
|
-
|
19
|
-
export const UnistylesWeb = isServer() ? globalThis.__unistyles__ : new UnistylesServices()
|
20
8
|
export const StyleSheet = {
|
21
|
-
configure:
|
9
|
+
configure: unistyles.services.state.init,
|
22
10
|
create: create,
|
23
11
|
absoluteFill: {
|
24
12
|
position: 'absolute',
|
@@ -39,8 +27,8 @@ export const StyleSheet = {
|
|
39
27
|
hairlineWidth: 1
|
40
28
|
} as unknown as typeof NativeStyleSheet
|
41
29
|
|
42
|
-
export const UnistylesRuntime =
|
43
|
-
export const UnistylesShadowRegistry =
|
30
|
+
export const UnistylesRuntime = unistyles.services.runtime as unknown as typeof NativeUnistylesRuntime
|
31
|
+
export const UnistylesShadowRegistry = unistyles.services.shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
|
44
32
|
|
45
33
|
export * from './mock'
|
46
34
|
|