https://github.com/terrysahaidak/expression-node.macro

Expression node macro
https://github.com/terrysahaidak/expression-node.macro

Last synced: about 2 months ago
JSON representation

Expression node macro

• Host: GitHub
• URL: https://github.com/terrysahaidak/expression-node.macro
• Owner: terrysahaidak
• License: unlicense
• Created: 2019-12-25T21:27:19.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:40:21.000Z (almost 2 years ago)
• Last Synced: 2023-03-02T20:05:45.221Z (almost 2 years ago)
• Language: JavaScript
• Size: 212 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# expression-node.macro

## Intro

This macro will transform a javascript block to be react native animated expression. Example:

```js

import { Animated } from 'react-native';

const { E } = Animated;

import re from 'expression-node.macro';

useOnFrameExpression(() => {

  const normalizedPan = re(panY - panYOffset);

  const min = (a, b) => re(a < b ? a : b);

  const canSwipeMore = re(

    gestureState === State.ACTIVE && scrollY <= 0,

  );

  return re(() => {

    // memoize last panY value in order to subtract it later from the real panY

    if (gestureState === State.BEGAN) {

      panYOffset = scrollY;

    }

    // check if the user has already scrolled all the way to the top

    if (canSwipeMore) {

      // if so - allow user to scroll more to the top

      // in order to show the refresh controls

      marginTop = panY >= 0 ? min(MAX_OVERSCROLL, normalizedPan) : 0;

    }

  });

});

```

Will transform to:

```js

import { Animated } from 'react-native';

const { E } = Animated;

import re from 'expression-node.macro';

useOnFrameExpression(() => {

  const normalizedPan = E.sub(panY, panYOffset);

  const min = (a, b) => E.cond(E.lessThan(a, b), a, b);

  const canSwipeMore = E.and(

    E.eq(gestureState, State.ACTIVE),

    E.lessOrEq(scrollY, 0),

  );

  return E.block(

    E.block([

      E.cond(

        E.eq(gestureState, State.BEGAN),

        E.block([E.set(panYOffset, scrollY)]),

      ),

      E.cond(

        canSwipeMore,

        E.block([

          E.set(

            marginTop,

            E.cond(

              E.greaterOrEq(panY, 0),

              min(MAX_OVERSCROLL, normalizedPan),

              0,

            ),

          ),

        ]),

      ),

    ]),

  );

});

```

## Installation

```sh

npm add -D terrysahaidak/expression-node.macro

```

## Usage

Make sure you have Animated.E in scope:

```js

import { Animated } from 'react-native';

const { E } = Animated;

```

Then you should be able to import `re` from the package. See example for usage cases. 

## Config

Define the identifier to the reanimated config name to tell the macro what identifier holds the Reanimated value.

```js

const plugins = [

	['macros',{

		expressionNode: {

			identifier: 'Animated'

		}

	}]

];

```

## License

Based on [js-to-reanimated.macro](https://github.com/kkirby/js-to-reanimated.macro) by [kkirby](https://github.com/kkirby).

MIT