Merge pull request #470 from gluestack/fix/web-perf

Fix/web perf

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -116,8 +116,12 @@ const Text1 = styled(
   }
 );
 
-const MyLink = styled(Link, {});
+const Box = styled(View, {
+  bg: '$blue500',
+  p: '$10',
+});
 export function ContextBasedStyles() {
+  console.log('>>>>>  component');
   return (
     <Wrapper colorMode="dark">
       {/* <StyledIcon as={CameraIcon} /> */}
@@ -129,14 +133,12 @@ export function ContextBasedStyles() {
       >
         vdkbkdfbv
       </Text1> */}
-      <MyLink
-        href={'/'}
+      <Box
+        // href={'/'}
         sx={{
-          color: '$red500',
+          bg: '$red500',
         }}
-      >
-        next link
-      </MyLink>
+      ></Box>
     </Wrapper>
   );
 }

packages/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.2-alpha.0",
+  "version": "1.0.2-alpha.8",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/StyledProvider.tsx

@@ -6,6 +6,7 @@ import type { COLORMODES } from './types';
 import { platformSpecificSpaceUnits } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
 import { createGlobalStyles } from './createGlobalStyles';
+
 type Config = any;
 let colorModeSet = false;
 
@@ -50,6 +51,11 @@ export const StyledProvider: React.FC<{
   globalStyles,
   _experimentalNestedProvider,
 }) => {
+  const inlineStyleMap: any = React.useRef({
+    initialStyleInjected: false,
+  });
+  inlineStyleMap.current.initialStyleInjected = false;
+
   const currentConfig: any = React.useMemo(() => {
     //TODO: Add this later
     return platformSpecificSpaceUnits(config, Platform.OS);
@@ -107,6 +113,38 @@ export const StyledProvider: React.FC<{
     setCurrentColorMode(currentColorMode);
   }, [currentColorMode]);
 
+  React.useLayoutEffect(() => {
+    if (Platform.OS === 'web') {
+      const toBeInjectedStyles: any = {};
+
+      if (inlineStyleMap.current.initialStyleInjected) {
+        return;
+      }
+
+      Object.keys(inlineStyleMap.current).forEach((key: any) => {
+        if (key !== 'initialStyleInjected') {
+          const styles = inlineStyleMap.current[key];
+          if (!toBeInjectedStyles[key]) {
+            toBeInjectedStyles[key] = document.createDocumentFragment();
+          }
+
+          styles.forEach((style: any) => {
+            if (!document.getElementById(style.id)) {
+              toBeInjectedStyles[key].appendChild(style);
+            }
+          });
+        }
+      });
+      Object.keys(toBeInjectedStyles).forEach((key) => {
+        let wrapperElement = document.querySelector('#' + key);
+        if (wrapperElement) {
+          wrapperElement.appendChild(toBeInjectedStyles[key]);
+        }
+        // delete inlineStyleMap.current[key];
+      });
+      inlineStyleMap.current.initialStyleInjected = true;
+    }
+  });
   // // Set colormode for the first time
   if (!colorModeSet) {
     setCurrentColorMode(currentColorMode);
@@ -122,6 +160,7 @@ export const StyledProvider: React.FC<{
       globalStyle: globalStyleMap,
       animationDriverData,
       setAnimationDriverData,
+      inlineStyleMap: inlineStyleMap.current,
     };
     if (_experimentalNestedProvider) {
       //@ts-ignore

packages/react/src/resolver/injectComponentAndDescendantStyles.ts

@@ -12,7 +12,8 @@ export function injectComponentAndDescendantStyles(
   styleTagId?: string,
   type: 'boot' | 'inline' = 'boot',
   _GluestackStyleSheet: StyleInjector = GluestackStyleSheet,
-  platform: string = ''
+  platform: string = '',
+  inlineStyleMap?: any
 ) {
   const [
     componentOrderResolvedBaseStyle,
@@ -84,7 +85,7 @@ export function injectComponentAndDescendantStyles(
   );
 
   if (platform === 'web') {
-    GluestackStyleSheet.inject(toBeInjected);
+    GluestackStyleSheet.inject(toBeInjected, inlineStyleMap);
   }
 
   return styleCSSIdsArr;

packages/react/src/style-sheet/index.ts

@@ -109,10 +109,15 @@ export class StyleInjector {
     return toBeInjected;
   }
 
-  inject(toBeInjected: any = {}) {
+  inject(toBeInjected: any = {}, inlineStyleMap: any) {
     Object.keys(toBeInjected).forEach((type) => {
       Object.keys(toBeInjected[type]).forEach((styleTag) => {
-        this.injectStyles(toBeInjected[type][styleTag], type, styleTag);
+        this.injectStyles(
+          toBeInjected[type][styleTag],
+          type,
+          styleTag,
+          inlineStyleMap
+        );
       });
     });
   }
@@ -162,9 +167,19 @@ export class StyleInjector {
     return this.#globalStyleMap;
   }
 
-  injectStyles(cssRuleset: any, _wrapperType: any, _styleTagId: any) {
+  injectStyles(
+    cssRuleset: any,
+    _wrapperType: any,
+    _styleTagId: any,
+    inlineStyleMap: any
+  ) {
     if (cssRuleset) {
-      inject(`@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId);
+      inject(
+        `@media screen {${cssRuleset}}`,
+        _wrapperType as any,
+        _styleTagId,
+        inlineStyleMap
+      );
     }
   }
 }

packages/react/src/styled.tsx

@@ -906,7 +906,7 @@ export function verboseStyled<P, Variants, ComCon>(
     styleIds = BUILD_TIME_PARAMS?.verbosedStyleIds;
   }
 
-  function injectSx(sx: any, type: any = 'inline') {
+  function injectSx(sx: any, type: any = 'inline', inlineStyleMap?: any) {
     const inlineSxTheme = {
       baseStyle: sx,
     };
@@ -965,7 +965,8 @@ export function verboseStyled<P, Variants, ComCon>(
       sxHash,
       type,
       GluestackStyleSheet,
-      Platform.OS
+      Platform.OS,
+      inlineStyleMap
     );
 
     return orderedSXResolved;
@@ -1059,7 +1060,6 @@ export function verboseStyled<P, Variants, ComCon>(
         // const resolvedComponentExtendedTheme = EXTENDED_THEME;
 
         theme = deepMerge(theme, resolvedComponentExtendedTheme.theme);
-
         // @ts-ignore
         Object.assign(themeDefaultProps, theme?.baseStyle?.props);
         if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) {
@@ -1070,7 +1070,8 @@ export function verboseStyled<P, Variants, ComCon>(
             EXTENDED_THEME_BUILD_TIME_PARAMS?.verbosedStyleIds
           );
           GluestackStyleSheet.inject(
-            EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected
+            EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected,
+            styledContext.inlineStyleMap
           );
         } else {
           // Merge of Extended Config Style ID's with Component Style ID's
@@ -1084,7 +1085,10 @@ export function verboseStyled<P, Variants, ComCon>(
             CONFIG,
             componentExtendedConfig
           );
-          GluestackStyleSheet.inject(extendedStylesToBeInjected);
+          GluestackStyleSheet.inject(
+            extendedStylesToBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
       }
 
@@ -1133,12 +1137,18 @@ export function verboseStyled<P, Variants, ComCon>(
           componentExtendedConfig
         );
         if (Platform.OS === 'web') {
-          GluestackStyleSheet.inject(toBeInjected);
+          GluestackStyleSheet.inject(
+            toBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
       } else {
         if (Platform.OS === 'web') {
           //@ts-ignore
-          GluestackStyleSheet.inject(BUILD_TIME_PARAMS.toBeInjected);
+          GluestackStyleSheet.inject(
+            BUILD_TIME_PARAMS.toBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
       }
 
@@ -1229,7 +1239,10 @@ export function verboseStyled<P, Variants, ComCon>(
         );
 
         if (Platform.OS === 'web') {
-          GluestackStyleSheet.inject(toBeInjected);
+          GluestackStyleSheet.inject(
+            toBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
         isInjected = true;
       }
@@ -1432,11 +1445,19 @@ export function verboseStyled<P, Variants, ComCon>(
 
     function injectAndUpdateSXProps(filteredPassingSx: any) {
       if (Object.keys(filteredComponentSx).length > 0) {
-        orderedComponentSXResolved = injectSx(filteredComponentSx, 'inline');
+        orderedComponentSXResolved = injectSx(
+          filteredComponentSx,
+          'inline',
+          styledContext.inlineStyleMap
+        );
       }
 
       if (Object.keys(filteredPassingSx).length > 0) {
-        orderedPassingSXResolved = injectSx(filteredPassingSx, 'passing');
+        orderedPassingSXResolved = injectSx(
+          filteredPassingSx,
+          'passing',
+          styledContext.inlineStyleMap
+        );
       }
 
       const orderedSXResolved = [

packages/react/src/utils/css-injector/utils/inject.ts

@@ -5,13 +5,16 @@ type IWrapperType =
   | 'boot-descendant'
   | 'inline-descendant';
 
+export const WRAPPER_BLOCK_PREFIX = 'gs-injected';
+
 export const hasCss = (_id: any, _text: any) => {};
 
 export const addCss = (_id: any, _text: any) => {};
 export const injectCss = (
   _css: any,
   _wrapperType: IWrapperType,
-  _styleTagId: string
+  _styleTagId: string,
+  _inlineStyleMap?: any
 ) => {};
 export const injectGlobalCss = (
   _css: any,

packages/react/src/utils/css-injector/utils/inject.web.ts

@@ -117,7 +117,8 @@ const createStyle = (styleTagId: any, css: any) => {
 export const injectCss = (
   css: any,
   wrapperType: IWrapperType,
-  styleTagId: string
+  styleTagId: string,
+  inlineStyleMap?: any
 ) => {
   // let modifiedStylesheet = {} as any;
   if (!toBeFlushedStyles[wrapperType]) {
@@ -138,8 +139,23 @@ export const injectCss = (
 
       if (!style) {
         style = createStyle(styleTagId, css);
-        // wrapperElement.insertBefore(style, wrapperElement.firstChild);
-        wrapperElement.appendChild(style);
+        // console.log(inlineStyleMap, 'append child here >>>>>');
+        if (inlineStyleMap) {
+          if (!inlineStyleMap?.initialStyleInjected) {
+            const styleMapId = `${WRAPPER_BLOCK_PREFIX}-${wrapperType}`;
+            const inlineMapStyles = inlineStyleMap[styleMapId];
+
+            if (inlineMapStyles) {
+              inlineMapStyles.push(style);
+            } else {
+              inlineStyleMap[styleMapId] = [style];
+            }
+            // console.log('hello here >>>> there');
+          } else {
+            // console.log('hello here >>>>');
+            wrapperElement.appendChild(style);
+          }
+        }
       }
     }
   }