Merge pull request #98 from mj-studio-library/develop

Release

README.md

@@ -22,7 +22,7 @@ of the `styled-system` package commonly used on the web.
 
 ## Highlights
 
-- ⚡️ All styles are cached. So it doesn't cause any rerender if result is consistent.
+- ⚡️ All styles are allowed to be cached. So it doesn't cause any rerender if result is consistent.
 - ⭐️ Allows arguments such as `m, px, py, bg, flex, flexDirection, position` to be passed directly to Props according to the grammar of `styled-system`.
 - 🎨 Users can define the design system by directly defining and delivering themes.
 - ❤️ TypeScript can be fully used through the Type Generation process using CLI.

doc/docs/intro.mdx

@@ -8,6 +8,15 @@ title: Getting Started
 `React Native Styled System` is a React Native implementation
 of the `styled-system` package commonly used on the web.
 
+## Highlights
+
+- ⚡️ All styles are allowed to be cached. So it doesn't cause any rerender if result is consistent.
+- ⭐️ Allows arguments such as `m, px, py, bg, flex, flexDirection, position` to be passed directly to Props according to the grammar of `styled-system`.
+- 🎨 Users can define the design system by directly defining and delivering themes.
+- ❤️ TypeScript can be fully used through the Type Generation process using CLI.
+- 🚀 Logical or responsive values such as `safeAreaTop` and `sidePadding` can be injected into the theme and used as token values.
+- 💬 Text Typography
+- 🎉 Integrate Dark Theme easily.
 
 ## Why we need styled-system
 
@@ -61,14 +70,3 @@ It does not fully support the grammar of `styled-system` and there are some gram
 
 Styles such as `justifySelf` that are not yet supported in React Native obviously cannot be added in the future.
 :::
-
-
-## Highlights
-
-- ⚡️ All styles are cached. So it doesn't cause any rerender if result is consistent.
-- ⭐️ Allows arguments such as `m, px, py, bg, flex, flexDirection, position` to be passed directly to Props according to the grammar of `styled-system`.
-- 🎨 Users can define the design system by directly defining and delivering themes.
-- ❤️ TypeScript can be fully used through the Type Generation process using CLI.
-- 🚀 Logical or responsive values such as `safeAreaTop` and `sidePadding` can be injected into the theme and used as token values.
-- 💬 Text Typography
-- 🎉 Integrate Dark Theme easily.

packages/core/src/hook/useSx.test.ts

@@ -20,19 +20,21 @@ function expectResult(
  styleType,
  transform,
  fallback,
+ cache,
  }: {
  expectation: object;
  filteredPropsExpectation?: object;
  styleType?: ThemedStyleType;
  transform?: StyleTransform;
  fallback?: StyleFallback;
+ cache?: boolean;
  },
 ) {
  const {
  result: {
  current: { getStyle, filteredProps },
  },
- } = renderHook(() => useSx(props, { theme, styleType, transform, fallback }));
+ } = renderHook(() => useSx(props, { theme, styleType, transform, fallback, cache }));
 
  if (expectation) {
  expect(StyleSheet.flatten(getStyle())).toEqual(expectation);
@@ -362,6 +364,7 @@ describe('cache', () => {
  emptyTheme,
  { bg: 'red', mt: 2 },
  {
+ cache: true,
  expectation: { marginTop: 2, backgroundColor: 'red' },
  },
  );
@@ -370,6 +373,7 @@ describe('cache', () => {
  emptyTheme,
  { mt: 2, sx: { bg: 'red' } },
  {
+ cache: true,
  expectation: { marginTop: 2, backgroundColor: 'red' },
  },
  );

packages/core/src/hook/useSx.ts

@@ -23,6 +23,7 @@ export type UseSxOptions = {
  styleType?: ThemedStyleType;
  transform?: StyleTransform;
  fallback?: StyleFallback;
+ cache?: boolean;
 };
 const defaultUseSxOptions: UseSxOptions = { styleType: 'ViewStyle' };
 export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
@@ -32,6 +33,7 @@ export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
  styleType = defaultUseSxOptions.styleType,
  transform = defaultUseSxOptions.transform,
  fallback,
+ cache,
  }: UseSxOptions = defaultUseSxOptions,
 ) => {
  const styledSystemContext = useContext(StyledSystemContext);
@@ -76,14 +78,22 @@ export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
  if (is.function(transform)) {
  const transformedSx = transform(StyleSheet.flatten(composedStyle));
 
- return getCachedStyle(
- StyleSheet.compose(
- composedStyle,
- propsToThemedStyle({ theme, sx: transformedSx, styleType }) as S,
- ),
+ const ret = StyleSheet.compose(
+ composedStyle,
+ propsToThemedStyle({ theme, sx: transformedSx, styleType }),
  );
+
+ if (cache) {
+ return getCachedStyle(ret);
+ } else {
+ return ret as StyleProp<S>;
+ }
  } else {
- return getCachedStyle(composedStyle);
+ if (cache) {
+ return getCachedStyle(composedStyle);
+ } else {
+ return composedStyle as StyleProp<S>;
+ }
  }
  });
 

packages/core/src/hook/useSxStyle.ts

@@ -10,10 +10,11 @@ import { propsToThemedStyle } from '../util/propsToThemedStyle';
 
 export type UseSxStyleOptions = {
  theme?: ThemedDict;
+ cache?: boolean;
 };
 const defaultOptions: UseSxStyleOptions = {};
 
-export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOptions) => {
+export const useSxStyle = ({ theme: optionTheme, cache }: UseSxStyleOptions = defaultOptions) => {
  const styledSystemContext = useContext(StyledSystemContext);
 
  return (sx: TextSxProps): StyleProp<TextStyle> => {
@@ -25,11 +26,18 @@ export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOp
  return {};
  }
 
- return getCachedStyle(
- propsToThemedStyle({
+ if (cache) {
+ return getCachedStyle(
+ propsToThemedStyle({
+ theme,
+ sx,
+ }),
+ );
+ } else {
+ return propsToThemedStyle({
  theme,
  sx,
- }),
- );
+ });
+ }
  };
 };