diff --git a/example/expo-router-example/app/_layout.tsx b/example/expo-router-example/app/_layout.tsx index 447fab7a3c..7d7b00822e 100644 --- a/example/expo-router-example/app/_layout.tsx +++ b/example/expo-router-example/app/_layout.tsx @@ -9,7 +9,7 @@ import { SplashScreen, Stack } from 'expo-router'; import React, { useEffect } from 'react'; import { useColorScheme } from 'react-native'; import { StyledProvider } from '@gluestack-style/react'; -import { config } from '../gluestack-ui.config'; +import { config } from '@gluestack-ui/config'; export { // Catch any errors thrown by the Layout component. diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md index 2ea4c56c20..11ea2254c5 100644 --- a/packages/styled/react/CHANGELOG.md +++ b/packages/styled/react/CHANGELOG.md @@ -1,11 +1,18 @@ # @gluestack-style/react +## 1.0.40 + +### Patch Changes + +- Fixed typescript performance for composed components [PR](https://github.com/gluestack/gluestack-ui/pull/1603) +- Fixed font resolver style declaration [PR](https://github.com/gluestack/gluestack-ui/pull/1643) + ## 1.0.39 ### Patch Changes -- - Fixed useToken hook with theme support [PR](https://github.com/gluestack/gluestack-ui/pull/1634) - - Fixed resolved props tokenization for mobile [PR](https://github.com/gluestack/gluestack-ui/pull/1632) +- Fixed useToken hook with theme support [PR](https://github.com/gluestack/gluestack-ui/pull/1634) +- Fixed resolved props tokenization for mobile [PR](https://github.com/gluestack/gluestack-ui/pull/1632) ## 1.0.38 diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json index 151f05f37a..dc77a5f9eb 100644 --- a/packages/styled/react/package.json +++ b/packages/styled/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "1.0.39", + "version": "1.0.40", "keywords": [ "React Native", "Next.js", diff --git a/packages/styled/react/src/plugins/font-resolver.tsx b/packages/styled/react/src/plugins/font-resolver.tsx index 81e4b748aa..79e266056c 100644 --- a/packages/styled/react/src/plugins/font-resolver.tsx +++ b/packages/styled/react/src/plugins/font-resolver.tsx @@ -97,7 +97,11 @@ export class FontResolver implements IStyledPlugin, FontPlugin { } else { fontFamilyValue = `${fontFamilyValue}_400Regular`; } - if (style.fontStyle && typeof style.fontStyle === 'string') { + if ( + style.fontStyle && + style.fontStyle !== 'normal' && + typeof style.fontStyle === 'string' + ) { const fontStyle = style.fontStyle.replace(/^\w/, (c: any) => c.toUpperCase() ); @@ -105,9 +109,6 @@ export class FontResolver implements IStyledPlugin, FontPlugin { } style.fontFamily = fontFamilyValue; - - this.#fontFamily = fontFamilyValue; - delete style.fontWeight; delete style.fontStyle; } @@ -139,6 +140,9 @@ export class FontResolver implements IStyledPlugin, FontPlugin { this.register(styledUtils); this.name = 'FontHandler'; this.mapFonts = mapFonts || this.mapFonts; + this.#fontFamily = {}; + this.#fontFamilyTokenConfig = {}; + this.#fontWeightsTokenConfig = {}; } inputMiddleWare( @@ -161,7 +165,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { return [modifiedStyledObject, shouldUpdate, _, Component, ignoreKeys]; } - #fontFamily: any = {}; + #fontFamily: any; #fontFamilyTokenConfig: any = {}; @@ -191,7 +195,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { ignoreKeys.add(styledObjectKey); this.#fontFamily = setObjectKeyValue( - { ...this.#fontFamily }, + this.#fontFamily, [...keyPath, styledObjectKey], styledObject[styledObjectKey] ); @@ -200,7 +204,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { if (styledObjectKey === 'fontWeight') { ignoreKeys.add(styledObjectKey); this.#fontFamily = setObjectKeyValue( - { ...this.#fontFamily }, + this.#fontFamily, [...keyPath, styledObjectKey], styledObject[styledObjectKey] ); @@ -209,7 +213,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { if (styledObjectKey === 'fontStyle') { ignoreKeys.add(styledObjectKey); this.#fontFamily = setObjectKeyValue( - { ...this.#fontFamily }, + this.#fontFamily, [...keyPath, styledObjectKey], styledObject[styledObjectKey] ); diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx index ea92541f76..b8df51cbe2 100644 --- a/packages/styled/react/src/styled.tsx +++ b/packages/styled/react/src/styled.tsx @@ -1,16 +1,22 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { + ForwardRefExoticComponent, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import type { OrderedSXResolved, StyleIds, - ComponentProps, IVerbosedTheme, ITheme, ExtendedConfigType, IComponentStyleConfig, - StyledConfig, - UtilityProps, + StyledComponentProps, } from './types'; import { deepMerge, @@ -1024,14 +1030,7 @@ export function verboseStyled
( // styledIds: BUILD_TIME_STYLE_IDS = [], // sxHash: BUILD_TIME_sxHash = '', ...componentProps - }: Omit< - Omit
&
- Partial
) => {
const isClient = React.useRef(false);
@@ -2144,12 +2143,14 @@ export function verboseStyled (
//@ts-ignore
StyledComp.isStyledComponent = true;
- return StyledComp as typeof StyledComp & { styledConfig?: StyledConfig };
+ return StyledComp as ForwardRefExoticComponent<
+ StyledComponentProps (
Component: React.ComponentType ,
- theme: ITheme
- : {
- [Key in keyof MergeNested<
- Variants,
- // @ts-ignore
- Components[`${ComCon}`]['theme']['variants']
- >]?: keyof MergeNested<
- Variants, // @ts-ignore
- Components[`${ComCon}`]['theme']['variants']
- >[Key] extends 'true' | 'false'
- ? boolean
- : keyof MergeNested<
- Variants,
- // @ts-ignore
- Components[`${ComCon}`]['theme']['variants']
- >[Key];
- });
+ : []
+> & {
+ states?: {
+ [K in IState]?: boolean;
+ };
+ as?: any;
+};
export type VerbosedUtilityProps<
GenericComponentStyles,
diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
index bd6fa7d2e1..1b097e4a6a 100644
--- a/packages/themed/CHANGELOG.md
+++ b/packages/themed/CHANGELOG.md
@@ -1,5 +1,12 @@
# @gluestack-ui/themed
+## 1.0.36
+
+### Patch Changes
+
+- Updated dependencies
+ - `@gluestack-style/react@1.0.40`
+
## 1.0.35
### Patch Changes
diff --git a/packages/themed/package.json b/packages/themed/package.json
index 6f97026d71..338978fb76 100644
--- a/packages/themed/package.json
+++ b/packages/themed/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/themed",
- "version": "1.0.35",
+ "version": "1.0.36",
"main": "build/index.js",
"types": "build/index.d.ts",
"module": "build/index",
@@ -69,7 +69,7 @@
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
- "@gluestack-style/react": "^1.0.32",
+ "@gluestack-style/react": "^1.0.40",
"@types/react-native": "^0.72.3",
"file-loader": "^6.2.0",
"react": "^18.2.0",
@@ -82,7 +82,7 @@
"webpack-cli": "^5.1.4"
},
"peerDependencies": {
- "@gluestack-style/react": ">=1.0",
+ "@gluestack-style/react": ">=1.0.40",
"@types/react-native": ">=0.72",
"react": ">=16",
"react-dom": ">=16",
diff --git a/yarn.lock b/yarn.lock
index 197f06bcb8..61fe1c3157 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3260,6 +3260,60 @@
dependencies:
"@legendapp/motion" "^2.2.0"
+"@gluestack-style/react@*", "@gluestack-style/react@^1.0.22", "@gluestack-style/react@^1.0.27", "@gluestack-style/react@^1.0.7":
+ version "1.0.39"
+ resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.39.tgz#85dba26577291f1443a858245d99dbe1e788b15d"
+ integrity sha512-Vw3uhVHUakiQxWdQbPlAam6PDIqSBy4ac+5ztzZnqTF5BJnzn+IhslCM9th/zAgz1P+11JVUW279RAkhbBjnVA==
+ dependencies:
+ inline-style-prefixer "^6.0.1"
+ normalize-css-color "^1.0.2"
+
+"@gluestack-ui/config@^1.0.7":
+ version "1.0.12"
+ resolved "https://registry.yarnpkg.com/@gluestack-ui/config/-/config-1.0.12.tgz#a2bad93f03de5edaf8aab57149b92f2cb98f9a13"
+ integrity sha512-T8cGsRdWHMpt9iVxac/hxpdoqq0rq83t+b5tZik9cKy8LLljRpXgy4zTELHbBFvHnDJmjlFgzhFsZavU90hbSg==
+
+"@gluestack-ui/themed@^1.0.20":
+ version "1.0.35"
+ resolved "https://registry.yarnpkg.com/@gluestack-ui/themed/-/themed-1.0.35.tgz#4129fcbc055351f335fdf4d1195d43e2acdcb5d9"
+ integrity sha512-zozkKnuCOuAKBrArgzt703EHcbXYL5Y4S8irhPL9Vvu9bs9QywqXLZA8PkK9RNUIk8A62A2jIKEtFpVaMqjiUA==
+ dependencies:
+ "@expo/html-elements" latest
+ "@gluestack-style/animation-resolver" "1.0.3"
+ "@gluestack-style/legend-motion-animation-driver" "1.0.3"
+ "@gluestack-ui/accordion" "1.0.0"
+ "@gluestack-ui/actionsheet" "0.2.36"
+ "@gluestack-ui/alert" "0.1.12"
+ "@gluestack-ui/alert-dialog" "0.1.24"
+ "@gluestack-ui/avatar" "0.1.15"
+ "@gluestack-ui/button" "0.1.34"
+ "@gluestack-ui/checkbox" "0.1.22"
+ "@gluestack-ui/divider" "0.1.8"
+ "@gluestack-ui/fab" "0.1.17"
+ "@gluestack-ui/form-control" "0.1.15"
+ "@gluestack-ui/icon" "0.1.20"
+ "@gluestack-ui/image" "0.1.7"
+ "@gluestack-ui/input" "0.1.23"
+ "@gluestack-ui/linear-gradient" "0.1.2"
+ "@gluestack-ui/link" "0.1.16"
+ "@gluestack-ui/menu" "0.2.26"
+ "@gluestack-ui/modal" "0.1.28"
+ "@gluestack-ui/overlay" "0.1.12"
+ "@gluestack-ui/popover" "0.1.28"
+ "@gluestack-ui/pressable" "0.1.13"
+ "@gluestack-ui/progress" "0.1.12"
+ "@gluestack-ui/provider" "0.1.10"
+ "@gluestack-ui/radio" "0.1.23"
+ "@gluestack-ui/select" "0.1.21"
+ "@gluestack-ui/slider" "0.1.19"
+ "@gluestack-ui/spinner" "0.1.14"
+ "@gluestack-ui/switch" "0.1.17"
+ "@gluestack-ui/tabs" "0.1.14"
+ "@gluestack-ui/textarea" "0.1.19"
+ "@gluestack-ui/toast" "1.0.3"
+ "@gluestack-ui/tooltip" "0.1.25"
+ "@legendapp/motion" latest
+
"@gluestack-ui/toast@^0.1.7":
version "0.1.20"
resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320"