fix: example

gluestack · Sep 11, 2023 · 224580c · 224580c
1 parent 99c1964
commit 224580c
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 26 deletions.
diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx
@@ -137,16 +137,27 @@ export function ContextBasedStylesContent() {
   );
 }
 
-const renderItem = (item: any) => (
-  <Pressable
-    key={item}
-    sx={{
-      bg: '$amber400',
-    }}
-  >
-    {/* <RNText>{item}</RNText> */}
-  </Pressable>
-);
+const RenderItem = (item: any) => {
+  const [active, setActive] = React.useState(false);
+  return (
+    <Pressable
+      key={item}
+      onPressIn={() => setActive(true)}
+      onPressOut={() => setActive(false)}
+      states={{
+        active,
+      }}
+      sx={{
+        'bg': '$amber400',
+        ':active': {
+          bg: '$pink500',
+        },
+      }}
+    >
+      {/* <RNText>{item}</RNText> */}
+    </Pressable>
+  );
+};
 
 const renderItem2 = (item: any) => (
   <RNPressable key={item} style={styleshet.style}>
@@ -164,7 +175,7 @@ const MyList = React.memo(() => {
   }, []);
   const data = useMemo(
     () =>
-      Array(100)
+      Array(1000)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []
@@ -182,7 +193,9 @@ const MyList = React.memo(() => {
       >
         {endTime}
       </Text>
-      {data.map(renderItem)}
+      {data.map((_, k) => (
+        <RenderItem key={k} />
+      ))}
     </>
   );
 });

diff --git a/example/ui-examples-babel/babel.config.js b/example/ui-examples-babel/babel.config.js
@@ -1,5 +1,6 @@
 const myBabel = require('../../packages/babel-plugin-styled-resolver/src/index.js');
 const path = require('path');
+// process.env.GLUESTACK_STYLE_TARGET = 'native';
 
 module.exports = function (api) {
   api.cache(true);
@@ -11,13 +12,41 @@ module.exports = function (api) {
         {
           configPath: path.join(__dirname, './gluestack-ui.config.ts'),
           configThemePath: ['theme'],
-          // styled: [
-          //   // '@gluestack-style/react',
-          //   // path.resolve(__dirname, './gluestack-ui-components/core/styled'),
-          // ],
+          styled: [
+            // '@gluestack-style/react',
+            path.join(__dirname, '../../packages/react/src'),
+          ],
           // components: ['@gluesatck-ui/themed'],
         },
       ],
+      [
+        '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/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
+            // ['@dank-style/react']: path.join(
+            //   __dirname,
+            //   '../../packages/react/src'
+            // ),
+            // ['@gluestack-style/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
+            // ['@dank-style/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
+          },
+        },
+      ],
     ],
   };
 };
diff --git a/example/ui-examples-babel/package.json b/example/ui-examples-babel/package.json
@@ -4,11 +4,10 @@
   "scripts": {
     "start": "expo start --dev-client",
     "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
-    "run:ios": "expo start --ios",
+    "ios": "GLUESTACK_STYLE_TARGET=native expo start --ios",
+    "web": "GLUESTACK_STYLE_TARGET=web expo start --web",
     "build": "tsc",
-    "native:prod": "expo start --no-dev --minify"
+    "native:prod": "GLUESTACK_STYLE_TARGET=native expo start --no-dev --minify"
   },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.2.3",

diff --git a/example/ui-examples/babel.config.js b/example/ui-examples/babel.config.js
@@ -23,10 +23,10 @@ module.exports = function (api) {
         {
           alias: {
             // For development, we want to alias the library to the source
-            // ['@gluestack-style/react']: path.join(
-            //   __dirname,
-            //   '../../packages/react/lib/commonjs'
-            // ),
+            ['@gluestack-style/react']: path.join(
+              __dirname,
+              '../../packages/react/src'
+            ),
             // ['@gluestack-style/animation-plugin']: path.join(
             //   __dirname,
             //   '../../packages/animation-plugin/src'

diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-style/babel-plugin-styled-resolver",
-  "version": "0.2.3",
+  "version": "0.2.4-alpha.0",
   "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.",
   "keywords": [
     "css-in-js",

diff --git a/packages/react/package.json b/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": "0.2.38",
+  "version": "0.2.39-alpha.0",
   "keywords": [
     "React Native",
     "Next.js",