Merge pull request #1645 from gluestack/release/@gluestack-style/reac…

…t@1.0.40 Release/@gluestack style/react@1.0.40
gluestack · Jan 16, 2024 · 3d25f0b · 3d25f0b
2 parents 5d8f292 + 98d3bf1
commit 3d25f0b
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 80 deletions.
diff --git 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
@@ -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
@@ -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
@@ -97,17 +97,18 @@ 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()
         );
         fontFamilyValue = `${fontFamilyValue}_${fontStyle}`;
       }
 
       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
@@ -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<P, Variants, ComCon>(
       // styledIds: BUILD_TIME_STYLE_IDS = [],
       // sxHash: BUILD_TIME_sxHash = '',
       ...componentProps
-    }: Omit<
-      Omit<P, keyof Variants> &
-        Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
-        Partial<UtilityProps<ITypeReactNativeStyles, Variants, P>> & {
-          as?: any;
-        },
-      'animationComponentGluestack'
-    >,
+    }: any,
     ref: React.ForwardedRef<P>
   ) => {
     const isClient = React.useRef(false);
@@ -2144,12 +2143,14 @@ export function verboseStyled<P, Variants, ComCon>(
   //@ts-ignore
   StyledComp.isStyledComponent = true;
 
-  return StyledComp as typeof StyledComp & { styledConfig?: StyledConfig };
+  return StyledComp as ForwardRefExoticComponent<
+    StyledComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>
+  >;
 }
 
 export function styled<P, Variants, ComCon>(
   Component: React.ComponentType<P>,
-  theme: ITheme<Variants, P>,
+  theme: ITheme<Variants, P> = {},
   componentStyleConfig?: IComponentStyleConfig<ComCon>,
   ExtendedConfig?: ExtendedConfigType,
   BUILD_TIME_PARAMS?: {

diff --git a/packages/styled/react/src/types.ts b/packages/styled/react/src/types.ts
@@ -7,7 +7,7 @@ import type {
   ViewStyle,
 } from 'react-native';
 import type { propertyTokenMap } from './propertyTokenMap';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ForwardRefExoticComponent } from 'react';
 
 export type RNStyledProps = ViewStyle | ImageStyle | TextStyle;
 export type RNProps = ViewProps | TextProps | ImageProps;
@@ -781,57 +781,81 @@ interface GenericComponents {
 
 /********************* COMPONENT PROPS TYPE *****************************************/
 
-export type ComponentProps<GenericComponentStyles, Variants, P, ComCon> =
-  SxStyleProps<
-    GenericComponentStyles,
-    Variants,
-    P,
-    'animationComponentGluestack' extends keyof P
-      ? P['animationComponentGluestack'] extends true
-        ? Plugins
-        : []
+export type StyledComponentProps<GenericComponentStyles, Variants, P, ComCon> =
+  Omit<
+    'sx' extends keyof P
+      ? P & VariantProps<Variants, ComCon>
+      : Partial<
+          Omit<
+            P &
+              ComponentProps<GenericComponentStyles, Variants, P> &
+              VariantProps<Variants, ComCon> &
+              UtilityProps<GenericComponentStyles, Variants, P>,
+            'animationComponentGluestack'
+          >
+        >,
+    'animationComponentGluestack'
+  >;
+
+export type GluestackComponent<GenericComponentStyles, Variants, P, ComCon> =
+  ForwardRefExoticComponent<
+    StyledComponentProps<GenericComponentStyles, Variants, P, ComCon>
+  >;
+
+export type VariantProps<Variants, ComCon> =
+  GSConfig['globalStyle'] extends object
+    ? {
+        [Key in keyof MergeNestedThree<
+          GlobalVariants,
+          Variants,
+          // @ts-ignore
+          Components[`${ComCon}`]['theme']['variants']
+        >]?: keyof MergeNestedThree<
+          GlobalVariants,
+          Variants,
+          // @ts-ignore
+          Components[`${ComCon}`]['theme']['variants']
+        >[Key] extends 'true' | 'false'
+          ? boolean
+          : keyof MergeNestedThree<
+              GlobalVariants,
+              Variants,
+              // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >[Key];
+      }
+    : {
+        [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];
+      };
+
+export type ComponentProps<GenericComponentStyles, Variants, P> = SxStyleProps<
+  GenericComponentStyles,
+  Variants,
+  P,
+  'animationComponentGluestack' extends keyof P
+    ? P['animationComponentGluestack'] extends true
+      ? Plugins
       : []
-  > & {
-    states?: {
-      [K in IState]?: boolean;
-    };
-  } & (GSConfig['globalStyle'] extends object
-      ? {
-          [Key in keyof MergeNestedThree<
-            GlobalVariants,
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >]?: keyof MergeNestedThree<
-            GlobalVariants,
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >[Key] extends 'true' | 'false'
-            ? boolean
-            : keyof MergeNestedThree<
-                GlobalVariants,
-                Variants,
-                // @ts-ignore
-                Components[`${ComCon}`]['theme']['variants']
-              >[Key];
-        } & Omit<P, keyof Variants>
-      : {
-          [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
@@ -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
@@ -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",