Merge pull request #393 from gluestack/fix/perf-improvements

Fix/perf improvements

example/ui-examples-babel/App.tsx

@@ -1,22 +1,58 @@
 import React from 'react';
-import { View } from 'react-native';
-import { config } from './gluestack-ui.config';
-import { styled, StyledProvider } from '../../packages/react';
-// import { Box, Heading } from './src/core';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
 
-const Box = styled(View, {
-  bg: '$primary100',
-  h: '$10',
-  w: '$10',
-});
+import Gluestack from './BenchGlueStack';
+import ReactNative from './BenchReactNative';
+import TimedRender from './TimedRender';
 
 export default function App() {
+  const [styleType, setStyleType] = useState<any>(undefined);
+
+  const onStyleTypePress = (curry) => () => {
+    setStyleType(curry);
+  };
+
+  const renderStyleLibrary = () => {
+    switch (styleType) {
+      case 'Gluestack':
+        return <Gluestack />;
+      case 'React Native':
+        return <ReactNative />;
+      default:
+        return null;
+    }
+  };
+
   return (
-    <>
-      {/* gluestack-ui provider */}
-      <StyledProvider config={config.theme}>
-        <Box bg="$red500" />
-      </StyledProvider>
-    </>
+    <View style={styles.container}>
+      <Text style={styles.text}>Tap a style library to start rendering</Text>
+      <Button title="React Native" onPress={onStyleTypePress('React Native')} />
+      <Button title="Gluestack" onPress={onStyleTypePress('Gluestack')} />
+      {styleType ? (
+        <TimedRender key={styleType}>
+          <Text style={styles.text}>
+            Rendering with <Text style={styles.bold}>{styleType}</Text>
+          </Text>
+        </TimedRender>
+      ) : null}
+      {renderStyleLibrary()}
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    // alignItems: "center",
+    backgroundColor: '#fff',
+    // flex: 1,
+    // justifyContent: "center",
+  },
+  text: {
+    marginVertical: 12,
+  },
+  bold: {
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+});

example/ui-examples-babel/BenchGlueStack.tsx

@@ -0,0 +1,70 @@
+/* initialized with npx gluestack-ui@latest */
+import { View } from 'react-native';
+import { styled, StyledProvider } from '@gluestack-style/react';
+import React from 'react';
+import { config } from './gluestack-ui.config';
+import { Button, GluestackUIProvider } from './gluestack-components';
+
+// const Box = styled(View, {
+//   bg: '$yellow500',
+//   p: '$2',
+//   m: '$1',
+// });
+
+const Gluestack = () => {
+  return (
+    <GluestackUIProvider config={config.theme}>
+      <View style={{ display: 'flex', flexDirection: 'row' }}>
+        {new Array(1000).fill(0).map((_, i) => (
+          <Button
+            key={i}
+            sx={
+              {
+                // bg: '$amber500',
+                // p: '$2',
+                // m: '$1',
+                // _dark: {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+                // ":hover": {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+                // ":active": {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+                // ":focused": {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+                // _text: {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+                // _icon: {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+                // _spinner: {
+                //   bg: "$amber500",
+                //   p: "$2",
+                //   m: "$1",
+                // },
+              }
+            }
+          />
+        ))}
+      </View>
+    </GluestackUIProvider>
+  );
+};
+
+export default Gluestack;

example/ui-examples-babel/BenchReactNative.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const Native = () => {
+  return (
+    <View style={{ display: 'flex', flexDirection: 'row' }}>
+      {new Array(1000).fill(0).map((_, i) => (
+        <View key={i} style={styles.styledView} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  styledView: {
+    backgroundColor: 'yellow',
+    padding: 8,
+    margin: 4,
+  },
+});
+
+export default Native;

example/ui-examples-babel/TimeRenderer.js

@@ -0,0 +1,27 @@
+/* picked from Tamagui Sandbox\
+ https://github.com/tamagui/tamagui/blob/a4cc57455c71287cc0ef995c4f55e52452504f79/apps/kitchen-sink/src/Sandbox.tsx#L82
+ */
+
+import React, { useLayoutEffect, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
+function TimedRender(props) {
+  const [start] = useState(Date.now());
+  const [end, setEnd] = useState(0);
+
+  useLayoutEffect(() => {
+    setEnd(Date.now());
+  }, []);
+
+  return (
+    <>
+      {!!end && <Text style={styles.text}>Took {end - start}ms</Text>}
+      {props.children}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: { color: 'green', marginTop: 12, fontSize: 18 },
+});
+
+export default TimedRender;

example/ui-examples-babel/TimedRender.js

@@ -0,0 +1,27 @@
+/* picked from Tamagui Sandbox\
+ https://github.com/tamagui/tamagui/blob/a4cc57455c71287cc0ef995c4f55e52452504f79/apps/kitchen-sink/src/Sandbox.tsx#L82
+ */
+
+import { useLayoutEffect, useState } from "react";
+import { StyleSheet, Text } from "react-native";
+function TimedRender(props) {
+  const [start] = useState(Date.now());
+  const [end, setEnd] = useState(0);
+
+  useLayoutEffect(() => {
+    setEnd(Date.now());
+  }, []);
+
+  return (
+    <>
+      {!!end && <Text style={styles.text}>Took {end - start}ms</Text>}
+      {props.children}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: { color: "green", marginTop: 12, fontSize: 18 },
+});
+
+export default TimedRender;

example/ui-examples-babel/babel.config.js

@@ -11,21 +11,18 @@ module.exports = function (api) {
         {
           configPath: path.join(__dirname, './gluestack-ui.config.ts'),
           configThemePath: ['theme'],
-          styled: ['@gluestack-style/react', '../../packages/react'],
-          components: ['@gluesatck-ui/themed'],
-          // filename: path.resolve(__dirname, './src/core/styled'),
-          // uiLibraryPath: path.resolve(__dirname, './src/core'),
+          components: [path.join(__dirname, './gluestack-components')],
         },
       ],
       [
         'module-resolver',
         {
           alias: {
             // For development, we want to alias the library to the source
-            // ['@gluestack-style/react']: path.join(
-            //   __dirname,
-            //   '../../packages/react/src'
-            // ),
+            ['@gluestack-style/react']: path.join(
+              __dirname,
+              '../../packages/react/src'
+            ),
             // ['@gluestack-style/animation-plugin']: path.join(
             //   __dirname,
             //   '../../packages/animation-plugin/src'