Merge branch 'feat/animation-plugin-new-drivers' of github.com:gluest…

…ack/gluestack-style into feat/animation-plugin-new-drivers
gluestack · Sep 15, 2023 · 7c474a9 · 7c474a9
2 parents 8268c58 + 286208a
commit 7c474a9
Show file tree

Hide file tree

Showing 14 changed files with 512 additions and 379 deletions.
diff --git a/README.md b/README.md
@@ -59,11 +59,11 @@ function App({ children }) {
 }
 ```
 
-1. Now you can use `@gluestack-style/react` to style your components by using the `styled` function provided by the library. For example:
+2. Now you can use `@gluestack-style/react` to style your components by using the `styled` function provided by the library. For example:
 
 ```jsx
 import React from 'react';
-import { styled } from '@gluestack-style/react';
+import { styled, StyledProvider } from '@gluestack-style/react';
 
 const StyledButton = styled(
   Pressable,

diff --git a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx
@@ -14,6 +14,32 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 @gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
 
+## Installation Steps:
+
+1. Installing babel-plugin-styled-resolver:
+
+   ```bash
+   yarn add @gluestack-style/babel-plugin-styled-resolver
+   ```
+
+2. Add Babel plugin to your app babel.config.js
+
+   ```bash
+   const path = require('path');
+   const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+   module.exports = function (api) {
+     api.cache(true);
+     return {
+       presets: ['babel-preset-expo'],
+       plugins: [
+         gluestackStyleResolver,
+       ],
+     };
+   };
+   ```
+
+3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.
+
 ### **Let us see how this Babel plugin works.**
 
 - First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`.
@@ -54,33 +80,7 @@ Here’s a small diagram explaining how the flow works:
   </Box>
 </AppProvider>
 
-Your code gets transpiled in the build files like this:
-
-## Installation Steps:
-
-1. Installing babel-plugin-styled-resolver:
-
-   ```bash
-   yarn add @gluestack-style/babel-plugin-styled-resolver
-   ```
-
-2. Add Babel plugin to your app babel.config.js
-
-   ```bash
-   const path = require('path');
-   const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
-   module.exports = function (api) {
-     api.cache(true);
-     return {
-       presets: ['babel-preset-expo'],
-       plugins: [
-         gluestackStyleResolver,
-       ],
-     };
-   };
-   ```
-
-3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.
+Your code gets transpiled in the build files like this.
 
 ## Advanced
 

diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx
@@ -1,33 +1,34 @@
+// @ts-nocheck
 import React, {
-  useCallback,
+  // useCallback,
   useEffect,
-  useLayoutEffect,
+  // useLayoutEffect,
   useMemo,
-  useRef,
+  // useRef,
   useState,
 } from 'react';
 
 import {
   Pressable as RNPressable,
   Text as RNText,
-  StyleSheet,
-  View,
+  // StyleSheet,
+  // View,
 } from 'react-native';
 import {
-  AsForwarder,
+  // AsForwarder,
   styled,
-  Theme,
+  // Theme,
   StyledProvider,
 } from '@gluestack-style/react';
 import { config } from './gluestack-ui.config';
 
-const styleshet = StyleSheet.create({
-  style: {
-    padding: 12,
-    backgroundColor: 'red',
-    margin: 4,
-  },
-});
+// const styleshet = StyleSheet.create({
+//   style: {
+//     padding: 12,
+//     backgroundColor: 'red',
+//     margin: 4,
+//   },
+// });
 
 const Pressable = styled(
   RNPressable,
@@ -118,7 +119,7 @@ export function ContextBasedStylesContent() {
           width: 200,
           backgroundColor: 'red',
           position: 'absolute',
-          top: 0,
+          // top: 0,
           left: 0,
           top: 132,
         }}
@@ -137,34 +138,45 @@ 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}>
-    {/* <RNText>{item}</RNText>r */}
-  </RNPressable>
-);
+// const renderItem2 = (item: any) => (
+//   <RNPressable key={item} style={styleshet.style}>
+//     {/* <RNText>{item}</RNText>r */}
+//   </RNPressable>
+// );
 
 const MyList = React.memo(() => {
   const time = React.useRef(Date.now());
   const [endTime, setEndTime] = React.useState(0);
   useEffect(() => {
     const end = Date.now() - time.current;
-    console.log(end, '>>>');
+    // console.log(end, '>>>');
     setEndTime(end);
   }, []);
   const data = useMemo(
     () =>
-      Array(100)
+      Array(1000)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []
@@ -182,7 +194,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",
   "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/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js
@@ -447,6 +447,7 @@ module.exports = function (b) {
   const components = ['@gluestack-ui/themed'];
   let isStyledPathConfigured = false;
   let isComponentsPathConfigured = false;
+  let targetPlatform = process.env.GLUESTACK_STYLE_TARGET;
 
   return {
     name: 'ast-transform', // not required
@@ -884,6 +885,17 @@ module.exports = function (b) {
             let orderResolvedArrayExpression = [];
 
             orderedResolvedTheme.forEach((styledResolved) => {
+              if (targetPlatform === 'native') {
+                delete styledResolved.original;
+                delete styledResolved.value;
+                delete styledResolved.meta.cssRulesSet;
+                delete styledResolved.meta.weight;
+                delete styledResolved.meta.weight;
+                delete styledResolved.type;
+                delete styledResolved.componentHash;
+                delete styledResolved.extendedConfig;
+                delete styledResolved.value;
+              }
               let orderedResolvedAst = generateObjectAst(styledResolved);
               orderResolvedArrayExpression.push(orderedResolvedAst);
             });
@@ -898,12 +910,6 @@ module.exports = function (b) {
                 t.jsxExpressionContainer(styleIdsAst)
               )
             );
-            jsxOpeningElementPath.node.attributes.push(
-              t.jsxAttribute(
-                t.jsxIdentifier('toBeInjected'),
-                t.jsxExpressionContainer(toBeInjectedAst)
-              )
-            );
             jsxOpeningElementPath.node.attributes.push(
               t.jsxAttribute(
                 t.jsxIdentifier('orderedResolved'),
@@ -912,15 +918,6 @@ module.exports = function (b) {
                 )
               )
             );
-            jsxOpeningElementPath.node.attributes.push(
-              t.jsxAttribute(t.jsxIdentifier('sxHash'), t.stringLiteral(sxHash))
-            );
-            jsxOpeningElementPath.node.attributes.push(
-              t.jsxAttribute(
-                t.jsxIdentifier('styledIds'),
-                t.jsxExpressionContainer(orderedStyleIdsArrayAst)
-              )
-            );
           }
 
           if (

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.39-alpha.3",
+  "version": "0.2.42",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts
@@ -147,11 +147,10 @@ export function generateStylePropsFromCSSIds(
       const nativeStyleMap = GluestackStyleSheet.getStyleMap();
       styleCSSIds.forEach((cssId: any) => {
         const nativeStyle = nativeStyleMap.get(cssId);
+
         if (nativeStyle) {
           const queryCondition = nativeStyle?.meta?.queryCondition;
-          const styleSheetIds = nativeStyle?.value;
-          const styleSheet = styleSheetIds;
-
+          const styleSheet = nativeStyle?.resolved;
           if (queryCondition) {
             if (isValidBreakpoint(config, queryCondition)) {
               styleObj.push(styleSheet);

diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx
@@ -140,7 +140,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
     this.mapFonts = mapFonts || this.mapFonts;
   }
 
-  inputMiddleWare(styledObj: any = {}, shouldUpdate: boolean = true) {
+  inputMiddleWare(styledObj: any = {}, shouldUpdate: boolean = true): void {
     const modifiedStyledObject = this.fontHandler(styledObj, shouldUpdate);
 
     if (shouldUpdate) {