We have run the benchmark, and we are getting great results compared to other libraries. We don't want the comparison with other libraries to be the ultimate scoring system. It doesn't give the full picture of any library. There are other important metrics too. Also, we may go wrong in how we run the benchmark, we may end up with selection bias too (unintentionally).
diff --git a/example/storybook/src/plugins/FontsPlugin/index.stories.mdx b/example/storybook/src/plugins/FontsPlugin/index.stories.mdx
index aeb8dc30b..56628938e 100644
--- a/example/storybook/src/plugins/FontsPlugin/index.stories.mdx
+++ b/example/storybook/src/plugins/FontsPlugin/index.stories.mdx
@@ -21,7 +21,7 @@ The font plugin, a utility for the styled function, provides a unified way to pa
Include the `FontResolver` plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor.
```js
-import { FontResolver } from '@gluetsack-style/react';
+import { FontResolver } from '@gluestack-style/react';
export const config = {
aliases: {},
diff --git a/package.json b/package.json
index be1075f10..52f52d998 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
"scripts": {
"test": "bash ./scripts/test.sh",
"dev": "turbo run dev",
- "build": "turbo run build --filter=@gluestack-style* --no-cache",
+ "build": "turbo run build --filter=@gluestack-style/react --no-cache && yarn build:rest",
+ "build:rest": "turbo run build --filter=@gluestack-style* --no-cache --ignore=@gluestack-style/react",
"clean": "turbo run clean && rm -rf node_modules",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore",
"release": "changeset publish",
diff --git a/packages/animation-legend-motion-driver/package.json b/packages/animation-legend-motion-driver/package.json
index 5fcec3c2c..91529a4d8 100644
--- a/packages/animation-legend-motion-driver/package.json
+++ b/packages/animation-legend-motion-driver/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-style/legend-motion-animation-driver",
- "version": "1.0.1",
+ "version": "1.0.2",
"description": "A gluestack-style plugin for animation support using legendapp motion library",
"keywords": [
"react",
diff --git a/packages/animation-legend-motion-driver/src/index.tsx b/packages/animation-legend-motion-driver/src/index.tsx
index 0a0333cc3..6ae0813b2 100644
--- a/packages/animation-legend-motion-driver/src/index.tsx
+++ b/packages/animation-legend-motion-driver/src/index.tsx
@@ -1,63 +1,18 @@
-import { useStyled } from '@gluestack-style/react';
import type {
IAnimationDriverPlugin,
IAnimationResolver,
} from '@gluestack-style/react';
-import React, { useMemo } from 'react';
-import {
- deepMerge,
- deepMergeObjects,
- setObjectKeyValue,
- resolvedTokenization,
-} from './utils';
+import React from 'react';
+import { deepMerge } from './utils';
import {
Motion,
AnimatePresence as MotionAnimatePresence,
createMotionAnimatedComponent,
} from '@legendapp/motion';
+import { MotionSvg } from '@legendapp/motion/svg';
import { propertyTokenMap } from './propertyTokenMap';
import { Pressable } from 'react-native';
-function tokenizeAnimationPropsFromConfig(
- props: any = {},
- config: any,
- animationAliases: any,
- path: any = [],
- tokenizedAnimatedProps: any = {}
-) {
- for (const prop in props) {
- if (Array.isArray(props[prop])) {
- path.push(prop);
- setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
- path.pop();
- } else if (animationAliases[prop]) {
- path.push(prop);
- const tokenizedValue = resolvedTokenization(props[prop], config);
- setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
- path.pop();
- } else if (typeof props[prop] === 'object') {
- path.push(prop);
- const tokenizedValue = resolvedTokenization(props[prop], config);
- setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
- // path.pop();
- tokenizeAnimationPropsFromConfig(
- props[prop],
- config,
- animationAliases,
- path,
- tokenizedAnimatedProps
- );
- path.pop();
- } else {
- path.push(prop);
- setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
- path.pop();
- }
- }
-
- return tokenizedAnimatedProps;
-}
-
function getVariantProps(props: any, theme: any) {
const variantTypes = theme?.variants ? Object.keys(theme.variants) : [];
@@ -91,15 +46,7 @@ function resolveVariantAnimationProps(variantProps: any, styledObject: any) {
const AnimatePresence = React.forwardRef(
({ children, ...props }: any, ref?: any) => {
- const ctx = useStyled();
const clonedChildren: any = [];
- const CONFIG = useMemo(
- () => ({
- ...ctx.config,
- propertyTokenMap,
- }),
- [ctx.config]
- );
React.Children.toArray(children).forEach((child: any) => {
if (
@@ -107,49 +54,30 @@ const AnimatePresence = React.forwardRef(
child?.type?.displayName.includes('Gluestack-AnimatedResolver')) ||
child?.type?.isStyledComponent
) {
- let tokenizedAnimatedProps: any = {};
- const animationAliases = {};
-
const componentStyledObject = child?.type?.getStyledData()?.config;
const { variantProps, restProps } = getVariantProps(
- child?.props,
+ { ...componentStyledObject?.props, ...child?.props },
componentStyledObject
);
- const config = CONFIG;
-
- const variantStyledObject = resolveVariantAnimationProps(
+ const variantStyledObject: any = resolveVariantAnimationProps(
variantProps,
componentStyledObject
);
- const componentStyledObjectWithVariants = deepMergeObjects(
- componentStyledObject,
- variantStyledObject
- );
- tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig(
- componentStyledObjectWithVariants,
- config,
- animationAliases
- );
-
- const tokenizedSxAnimationProps: any = tokenizeAnimationPropsFromConfig(
- child?.props?.sx,
- config,
- animationAliases
- );
-
- const mergedAnimatedProps = deepMergeObjects(
- {},
- tokenizedSxAnimationProps,
- tokenizedAnimatedProps
- );
+ const exit = {
+ ...componentStyledObject?.[':exit'],
+ ...variantStyledObject?.[':exit'],
+ ...restProps?.sx?.[':exit'],
+ ...restProps?.exit,
+ };
const clonedChild = React.cloneElement(child, {
+ exit,
...restProps,
- exit: mergedAnimatedProps?.baseStyle?.[':exit'],
});
+
clonedChildren.push(clonedChild);
} else {
clonedChildren.push(child);
@@ -167,9 +95,17 @@ const AnimatePresence = React.forwardRef(
const AnimatedPressable = createMotionAnimatedComponent(
Pressable
) as React.ComponentType( - theme, - true, - true, - Component - ); + [nonVerbosedTheme, , , Component] = plugins[ + pluginName + ]?.inputMiddleWare
(nonVerbosedTheme, true, true, Component);
}
+ nonVerbosedTheme = convertStyledToStyledVerbosed(nonVerbosedTheme);
}
// for extended components end
@@ -1131,12 +1138,18 @@ export function verboseStyled