react-native-reanimated 3.0.2 → 3.1.0

package/lib/module/reanimated2/valueSetter.js.map

@@ -1 +1 @@
-{"version":3,"names":["stopMapper","valueSetter","sv","value","previousAnimation","_animation","cancelled","onFrame","undefined","animation","_value","current","isHigherOrder","callback","initializeAnimation","timestamp","onStart","currentTimestamp","global","__frameTimestamp","performance","now","step","finished","requestAnimationFrame"],"sources":["valueSetter.ts"],"sourcesContent":["import { AnimationObject, AnimatableValue } from './commonTypes';\nimport { Descriptor } from './hook/commonTypes';\nexport { stopMapper } from './mappers';\n\nexport function valueSetter(sv: any, value: any): void {\n  'worklet';\n  const previousAnimation = sv._animation;\n  if (previousAnimation) {\n    previousAnimation.cancelled = true;\n    sv._animation = null;\n  }\n  if (\n    typeof value === 'function' ||\n    (value !== null &&\n      typeof value === 'object' &&\n      (value as AnimationObject).onFrame !== undefined)\n  ) {\n    const animation: AnimationObject =\n      typeof value === 'function'\n        ? (value as () => AnimationObject)()\n        : (value as AnimationObject);\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)\n    // built in animations that are not higher order(withTiming, withSpring) hold target value in .current\n    if (sv._value === animation.current && !animation.isHigherOrder) {\n      animation.callback && animation.callback(true);\n      return;\n    }\n    // animated set\n    const initializeAnimation = (timestamp: number) => {\n      animation.onStart(animation, sv.value, timestamp, previousAnimation);\n    };\n    const currentTimestamp = global.__frameTimestamp || performance.now();\n    initializeAnimation(currentTimestamp);\n    const step = (timestamp: number) => {\n      if (animation.cancelled) {\n        animation.callback && animation.callback(false /* finished */);\n        return;\n      }\n      const finished = animation.onFrame(animation, timestamp);\n      animation.finished = true;\n      animation.timestamp = timestamp;\n      sv._value = animation.current;\n      if (finished) {\n        animation.callback && animation.callback(true /* finished */);\n      } else {\n        requestAnimationFrame(step);\n      }\n    };\n\n    sv._animation = animation;\n\n    step(currentTimestamp);\n  } else {\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    if (sv._value === value) {\n      return;\n    }\n    sv._value = value as Descriptor | AnimatableValue;\n  }\n}\n"],"mappings":"AAEA,SAASA,UAAT,QAA2B,WAA3B;AAEA,OAAO,SAASC,WAAT,CAAqBC,EAArB,EAA8BC,KAA9B,EAAgD;EACrD;;EACA,MAAMC,iBAAiB,GAAGF,EAAE,CAACG,UAA7B;;EACA,IAAID,iBAAJ,EAAuB;IACrBA,iBAAiB,CAACE,SAAlB,GAA8B,IAA9B;IACAJ,EAAE,CAACG,UAAH,GAAgB,IAAhB;EACD;;EACD,IACE,OAAOF,KAAP,KAAiB,UAAjB,IACCA,KAAK,KAAK,IAAV,IACC,OAAOA,KAAP,KAAiB,QADlB,IAEEA,KAAD,CAA2BI,OAA3B,KAAuCC,SAJ3C,EAKE;IACA,MAAMC,SAA0B,GAC9B,OAAON,KAAP,KAAiB,UAAjB,GACKA,KAAD,EADJ,GAEKA,KAHP,CADA,CAKA;IACA;IACA;IACA;;IACA,IAAID,EAAE,CAACQ,MAAH,KAAcD,SAAS,CAACE,OAAxB,IAAmC,CAACF,SAAS,CAACG,aAAlD,EAAiE;MAC/DH,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB,IAAnB,CAAtB;MACA;IACD,CAZD,CAaA;;;IACA,MAAMC,mBAAmB,GAAIC,SAAD,IAAuB;MACjDN,SAAS,CAACO,OAAV,CAAkBP,SAAlB,EAA6BP,EAAE,CAACC,KAAhC,EAAuCY,SAAvC,EAAkDX,iBAAlD;IACD,CAFD;;IAGA,MAAMa,gBAAgB,GAAGC,MAAM,CAACC,gBAAP,IAA2BC,WAAW,CAACC,GAAZ,EAApD;IACAP,mBAAmB,CAACG,gBAAD,CAAnB;;IACA,MAAMK,IAAI,GAAIP,SAAD,IAAuB;MAClC,IAAIN,SAAS,CAACH,SAAd,EAAyB;QACvBG,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAM;QAAzB,CAAtB;QACA;MACD;;MACD,MAAMU,QAAQ,GAAGd,SAAS,CAACF,OAAV,CAAkBE,SAAlB,EAA6BM,SAA7B,CAAjB;MACAN,SAAS,CAACc,QAAV,GAAqB,IAArB;MACAd,SAAS,CAACM,SAAV,GAAsBA,SAAtB;MACAb,EAAE,CAACQ,MAAH,GAAYD,SAAS,CAACE,OAAtB;;MACA,IAAIY,QAAJ,EAAc;QACZd,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAK;QAAxB,CAAtB;MACD,CAFD,MAEO;QACLW,qBAAqB,CAACF,IAAD,CAArB;MACD;IACF,CAdD;;IAgBApB,EAAE,CAACG,UAAH,GAAgBI,SAAhB;IAEAa,IAAI,CAACL,gBAAD,CAAJ;EACD,CA3CD,MA2CO;IACL;IACA;IACA,IAAIf,EAAE,CAACQ,MAAH,KAAcP,KAAlB,EAAyB;MACvB;IACD;;IACDD,EAAE,CAACQ,MAAH,GAAYP,KAAZ;EACD;AACF"}
+{"version":3,"names":["stopMapper","valueSetter","sv","value","previousAnimation","_animation","cancelled","onFrame","undefined","animation","_value","current","isHigherOrder","callback","initializeAnimation","timestamp","onStart","currentTimestamp","global","__frameTimestamp","performance","now","step","finished","requestAnimationFrame"],"sources":["valueSetter.ts"],"sourcesContent":["import { AnimationObject, AnimatableValue } from './commonTypes';\nimport { Descriptor } from './hook/commonTypes';\nexport { stopMapper } from './mappers';\n\nexport function valueSetter(sv: any, value: any): void {\n  'worklet';\n  const previousAnimation = sv._animation;\n  if (previousAnimation) {\n    previousAnimation.cancelled = true;\n    sv._animation = null;\n  }\n  if (\n    typeof value === 'function' ||\n    (value !== null &&\n      typeof value === 'object' &&\n      (value as AnimationObject).onFrame !== undefined)\n  ) {\n    const animation: AnimationObject =\n      typeof value === 'function'\n        ? (value as () => AnimationObject)()\n        : (value as AnimationObject);\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)\n    // built in animations that are not higher order(withTiming, withSpring) hold target value in .current\n    if (sv._value === animation.current && !animation.isHigherOrder) {\n      animation.callback && animation.callback(true);\n      return;\n    }\n    // animated set\n    const initializeAnimation = (timestamp: number) => {\n      animation.onStart(animation, sv.value, timestamp, previousAnimation);\n    };\n    const currentTimestamp = global.__frameTimestamp || performance.now();\n    initializeAnimation(currentTimestamp);\n    const step = (timestamp: number) => {\n      if (animation.cancelled) {\n        animation.callback && animation.callback(false /* finished */);\n        return;\n      }\n      const finished = animation.onFrame(animation, timestamp);\n      animation.finished = true;\n      animation.timestamp = timestamp;\n      sv._value = animation.current;\n      if (finished) {\n        animation.callback && animation.callback(true /* finished */);\n      } else {\n        requestAnimationFrame(step);\n      }\n    };\n\n    sv._animation = animation;\n\n    step(currentTimestamp);\n  } else {\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    if (sv._value === value) {\n      return;\n    }\n    sv._value = value as Descriptor | AnimatableValue;\n  }\n}\n"],"mappings":"AAEA,SAASA,UAAU,QAAQ,WAAW;AAEtC,OAAO,SAASC,WAAWA,CAACC,EAAO,EAAEC,KAAU,EAAQ;EACrD,SAAS;;EACT,MAAMC,iBAAiB,GAAGF,EAAE,CAACG,UAAU;EACvC,IAAID,iBAAiB,EAAE;IACrBA,iBAAiB,CAACE,SAAS,GAAG,IAAI;IAClCJ,EAAE,CAACG,UAAU,GAAG,IAAI;EACtB;EACA,IACE,OAAOF,KAAK,KAAK,UAAU,IAC1BA,KAAK,KAAK,IAAI,IACb,OAAOA,KAAK,KAAK,QAAQ,IACxBA,KAAK,CAAqBI,OAAO,KAAKC,SAAU,EACnD;IACA,MAAMC,SAA0B,GAC9B,OAAON,KAAK,KAAK,UAAU,GACtBA,KAAK,EAA4B,GACjCA,KAAyB;IAChC;IACA;IACA;IACA;IACA,IAAID,EAAE,CAACQ,MAAM,KAAKD,SAAS,CAACE,OAAO,IAAI,CAACF,SAAS,CAACG,aAAa,EAAE;MAC/DH,SAAS,CAACI,QAAQ,IAAIJ,SAAS,CAACI,QAAQ,CAAC,IAAI,CAAC;MAC9C;IACF;IACA;IACA,MAAMC,mBAAmB,GAAIC,SAAiB,IAAK;MACjDN,SAAS,CAACO,OAAO,CAACP,SAAS,EAAEP,EAAE,CAACC,KAAK,EAAEY,SAAS,EAAEX,iBAAiB,CAAC;IACtE,CAAC;IACD,MAAMa,gBAAgB,GAAGC,MAAM,CAACC,gBAAgB,IAAIC,WAAW,CAACC,GAAG,EAAE;IACrEP,mBAAmB,CAACG,gBAAgB,CAAC;IACrC,MAAMK,IAAI,GAAIP,SAAiB,IAAK;MAClC,IAAIN,SAAS,CAACH,SAAS,EAAE;QACvBG,SAAS,CAACI,QAAQ,IAAIJ,SAAS,CAACI,QAAQ,CAAC,KAAK,CAAC,eAAe;QAC9D;MACF;MACA,MAAMU,QAAQ,GAAGd,SAAS,CAACF,OAAO,CAACE,SAAS,EAAEM,SAAS,CAAC;MACxDN,SAAS,CAACc,QAAQ,GAAG,IAAI;MACzBd,SAAS,CAACM,SAAS,GAAGA,SAAS;MAC/Bb,EAAE,CAACQ,MAAM,GAAGD,SAAS,CAACE,OAAO;MAC7B,IAAIY,QAAQ,EAAE;QACZd,SAAS,CAACI,QAAQ,IAAIJ,SAAS,CAACI,QAAQ,CAAC,IAAI,CAAC,eAAe;MAC/D,CAAC,MAAM;QACLW,qBAAqB,CAACF,IAAI,CAAC;MAC7B;IACF,CAAC;IAEDpB,EAAE,CAACG,UAAU,GAAGI,SAAS;IAEzBa,IAAI,CAACL,gBAAgB,CAAC;EACxB,CAAC,MAAM;IACL;IACA;IACA,IAAIf,EAAE,CAACQ,MAAM,KAAKP,KAAK,EAAE;MACvB;IACF;IACAD,EAAE,CAACQ,MAAM,GAAGP,KAAqC;EACnD;AACF"}

package/lib/module/setAndForwardRef.js

@@ -32,6 +32,7 @@
  *
  *   module.exports = MyViewWithRef;
  */
+
 function setAndForwardRef(_ref) {
   let {
     getForwardedRef,
@@ -39,8 +40,9 @@ function setAndForwardRef(_ref) {
   } = _ref;
   return function forwardRef(ref) {
     const forwardedRef = getForwardedRef();
-    setLocalRef(ref); // Forward to user ref prop (if one has been specified)
+    setLocalRef(ref);
 
+    // Forward to user ref prop (if one has been specified)
     if (typeof forwardedRef === 'function') {
       // Handle function-based refs. String-based refs are handled as functions.
       forwardedRef(ref);
@@ -50,6 +52,5 @@ function setAndForwardRef(_ref) {
     }
   };
 }
-
 export default setAndForwardRef;
 //# sourceMappingURL=setAndForwardRef.js.map

package/lib/module/setAndForwardRef.js.map

@@ -1 +1 @@
-{"version":3,"names":["setAndForwardRef","getForwardedRef","setLocalRef","forwardRef","ref","forwardedRef","current"],"sources":["setAndForwardRef.ts"],"sourcesContent":["/**\n * imported from react-native\n */\n\nimport { MutableRefObject } from 'react';\n\n/**\n * This is a helper function for when a component needs to be able to forward a ref\n * to a child component, but still needs to have access to that component as part of\n * its implementation.\n *\n * Its main use case is in wrappers for native components.\n *\n * Usage:\n *\n *   class MyView extends React.Component {\n *     _nativeRef = null;\n *\n *     _setNativeRef = setAndForwardRef({\n *       getForwardedRef: () => this.props.forwardedRef,\n *       setLocalRef: ref => {\n *         this._nativeRef = ref;\n *       },\n *     });\n *\n *     render() {\n *       return <View ref={this._setNativeRef} />;\n *     }\n *   }\n *\n *   const MyViewWithRef = React.forwardRef((props, ref) => (\n *     <MyView {...props} forwardedRef={ref} />\n *   ));\n *\n *   module.exports = MyViewWithRef;\n */\n\nexport type ForwardedRef<T> = () => MutableRefObject<T> | ((ref: T) => void);\n\nfunction setAndForwardRef<T>({\n  getForwardedRef,\n  setLocalRef,\n}: {\n  getForwardedRef: ForwardedRef<T>;\n  setLocalRef: (ref: T) => void;\n}): (ref: T) => void {\n  return function forwardRef(ref: T) {\n    const forwardedRef = getForwardedRef();\n\n    setLocalRef(ref);\n\n    // Forward to user ref prop (if one has been specified)\n    if (typeof forwardedRef === 'function') {\n      // Handle function-based refs. String-based refs are handled as functions.\n      forwardedRef(ref);\n    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {\n      // Handle createRef-based refs\n      forwardedRef.current = ref;\n    }\n  };\n}\n\nexport default setAndForwardRef;\n"],"mappings":"AAAA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,gBAAT,OAMqB;EAAA,IANQ;IAC3BC,eAD2B;IAE3BC;EAF2B,CAMR;EACnB,OAAO,SAASC,UAAT,CAAoBC,GAApB,EAA4B;IACjC,MAAMC,YAAY,GAAGJ,eAAe,EAApC;IAEAC,WAAW,CAACE,GAAD,CAAX,CAHiC,CAKjC;;IACA,IAAI,OAAOC,YAAP,KAAwB,UAA5B,EAAwC;MACtC;MACAA,YAAY,CAACD,GAAD,CAAZ;IACD,CAHD,MAGO,IAAI,OAAOC,YAAP,KAAwB,QAAxB,IAAoCA,YAAY,IAAI,IAAxD,EAA8D;MACnE;MACAA,YAAY,CAACC,OAAb,GAAuBF,GAAvB;IACD;EACF,CAbD;AAcD;;AAED,eAAeJ,gBAAf"}
+{"version":3,"names":["setAndForwardRef","_ref","getForwardedRef","setLocalRef","forwardRef","ref","forwardedRef","current"],"sources":["setAndForwardRef.ts"],"sourcesContent":["/**\n * imported from react-native\n */\n\nimport { MutableRefObject } from 'react';\n\n/**\n * This is a helper function for when a component needs to be able to forward a ref\n * to a child component, but still needs to have access to that component as part of\n * its implementation.\n *\n * Its main use case is in wrappers for native components.\n *\n * Usage:\n *\n *   class MyView extends React.Component {\n *     _nativeRef = null;\n *\n *     _setNativeRef = setAndForwardRef({\n *       getForwardedRef: () => this.props.forwardedRef,\n *       setLocalRef: ref => {\n *         this._nativeRef = ref;\n *       },\n *     });\n *\n *     render() {\n *       return <View ref={this._setNativeRef} />;\n *     }\n *   }\n *\n *   const MyViewWithRef = React.forwardRef((props, ref) => (\n *     <MyView {...props} forwardedRef={ref} />\n *   ));\n *\n *   module.exports = MyViewWithRef;\n */\n\nexport type ForwardedRef<T> = () => MutableRefObject<T> | ((ref: T) => void);\n\nfunction setAndForwardRef<T>({\n  getForwardedRef,\n  setLocalRef,\n}: {\n  getForwardedRef: ForwardedRef<T>;\n  setLocalRef: (ref: T) => void;\n}): (ref: T) => void {\n  return function forwardRef(ref: T) {\n    const forwardedRef = getForwardedRef();\n\n    setLocalRef(ref);\n\n    // Forward to user ref prop (if one has been specified)\n    if (typeof forwardedRef === 'function') {\n      // Handle function-based refs. String-based refs are handled as functions.\n      forwardedRef(ref);\n    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {\n      // Handle createRef-based refs\n      forwardedRef.current = ref;\n    }\n  };\n}\n\nexport default setAndForwardRef;\n"],"mappings":"AAAA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,gBAAgBA,CAAAC,IAAA,EAMJ;EAAA,IANQ;IAC3BC,eAAe;IACfC;EAIF,CAAC,GAAAF,IAAA;EACC,OAAO,SAASG,UAAUA,CAACC,GAAM,EAAE;IACjC,MAAMC,YAAY,GAAGJ,eAAe,EAAE;IAEtCC,WAAW,CAACE,GAAG,CAAC;;IAEhB;IACA,IAAI,OAAOC,YAAY,KAAK,UAAU,EAAE;MACtC;MACAA,YAAY,CAACD,GAAG,CAAC;IACnB,CAAC,MAAM,IAAI,OAAOC,YAAY,KAAK,QAAQ,IAAIA,YAAY,IAAI,IAAI,EAAE;MACnE;MACAA,YAAY,CAACC,OAAO,GAAGF,GAAG;IAC5B;EACF,CAAC;AACH;AAEA,eAAeL,gBAAgB"}

package/package.json

@@ -1,31 +1,34 @@
 {
   "name": "react-native-reanimated",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
     "test:unit": "jest",
-    "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java && yarn lint:ios && yarn lint:docs",
-    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
+    "lint": "yarn lint:js && yarn lint:plugin && yarn lint:cpp && yarn lint:java && yarn lint:ios && yarn lint:docs",
+    "lint:js": "eslint --ext '.js,.ts,.tsx' src __tests__ __typetests__ && yarn prettier --check src __tests__ __typetests__",
+    "lint:plugin": "cd plugin && yarn lint && cd ..",
     "lint:docs": "cd docs && yarn lint && cd ..",
     "lint:java": "./android/gradlew -p android spotlessCheck -q",
     "lint:cpp": "./scripts/cpplint.sh",
     "lint:ios": "./scripts/validate-ios.sh && yarn format:ios --dry-run",
-    "format": "yarn format:js && yarn format:java && yarn format:ios && yarn format:android && yarn format:common",
-    "format:js": "prettier --write --list-different './src/'",
+    "format": "yarn format:js && yarn format:plugin && yarn format:java && yarn format:ios && yarn format:android && yarn format:common",
+    "format:js": "prettier --write --list-different src __tests__ __typetests__",
+    "format:plugin": "cd plugin && yarn format && cd ..",
     "format:java": "node ./scripts/format-java.js",
     "format:ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm -o -iname *.cpp | xargs clang-format -i --Werror",
     "format:android": "find android/src/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "format:common": "find Common/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
-    "release": "npm login && release-it",
-    "type:check": "yarn tsc --noEmit",
-    "prepare": "bob build && husky install",
+    "type:check": "yarn tsc --noEmit && cd plugin && yarn type:check && cd ..",
+    "prepare": "bob build && husky install && yarn plugin && yarn app",
     "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular src lib",
     "setup": "yarn && cd Example && yarn && cd ios && pod install --verbose && cd ../..",
     "clean": "rm -rf node_modules && cd Example && rm -rf node_modules && cd ios && pod deintegrate && cd ../..",
     "reset": "yarn clean && yarn setup",
     "clean:deep": "cd android && rm -rf .cxx .gradle build && cd ../Example/android && rm -rf .gradle build app/build && cd ../.. && yarn clean",
-    "reset:deep": "yarn clean:deep && yarn setup"
+    "reset:deep": "yarn clean:deep && yarn setup",
+    "plugin": "cd plugin && yarn && cd ..",
+    "app": "cd app && yarn && cd .."
   },
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -36,28 +39,29 @@
     "Common/",
     "src/",
     "lib/",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!lib/typescript",
     "react-native-reanimated.d.ts",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
     "android/",
     "ios/",
-    "!ios/build/",
-    "!android/build/",
-    "!android/.cxx/",
-    "!android/.gradle/",
     "RNReanimated.podspec",
     "scripts/reanimated_utils.rb",
     "README.md",
     "mock.js",
     "plugin/",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!lib/typescript",
+    "!ios/build/",
+    "!android/build/",
+    "!android/.cxx/",
+    "!android/.gradle/",
     "!__snapshots__",
     "!*.test.js",
-    "!*.test.js.map"
+    "!*.test.js.map",
+    "!**/node_modules"
   ],
   "repository": {
     "type": "git",
@@ -76,40 +80,49 @@
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "convert-source-map": "^1.7.0",
-    "invariant": "^2.2.4",
-    "lodash.isequal": "^4.5.0",
-    "setimmediate": "^1.0.5",
-    "string-hash-64": "^1.0.3"
+    "convert-source-map": "^2.0.0",
+    "invariant": "^2.2.4"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0-0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+    "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+    "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+    "@babel/plugin-transform-template-literals": "^7.0.0-0",
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
+    "@babel/cli": "^7.20.0",
     "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-transform-arrow-functions": "^7.0.0",
+    "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+    "@babel/plugin-transform-template-literals": "^7.0.0",
     "@babel/preset-env": "^7.20.0",
-    "@react-native-community/eslint-config": "^3.2.0",
+    "@babel/types": "^7.20.0",
+    "@react-native/eslint-config": "^0.72.1",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
-    "@types/babel-types": "^7.0.11",
-    "@types/babel__core": "^7.1.18",
+    "@types/babel__core": "^7.20.0",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.14.2",
+    "@types/convert-source-map": "^2.0.0",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^27.4.0",
+    "@types/node": "^18.0.0",
     "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.5.1",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "clang-format": "^1.6.0",
+    "code-tag": "^1.1.0",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
@@ -125,18 +138,18 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.71.3",
+    "react-native": "0.72.0-rc.1",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-gesture-handler": "^2.4.2",
+    "react-native-gesture-handler": "^2.9.0",
     "react-test-renderer": "17.0.2",
-    "release-it": "^13.7.2",
     "typescript": "^4.1.3"
   },
   "lint-staged": {
     "*.(js|ts|tsx)": [
-      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts --ignore-pattern docs",
+      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts --ignore-pattern docs --ignore-pattern plugin",
       "prettier --write"
     ],
+    "plugin/**/*.ts": "yarn lint:plugin",
     "**/*.{h,cpp}": "yarn lint:cpp",
     "android/src/**/*.java": "yarn format:java",
     "android/src/**/*.{h,cpp}": "yarn format:android",
@@ -144,13 +157,6 @@
     "Common/**/*.{h,cpp}": "yarn format:common",
     "docs/**/*.{md,mdx}": "yarn lint:docs"
   },
-  "release-it": {
-    "hooks": {
-      "before:git:bump": [
-        "# check if version corresponds to changes in native files  \n  if git diff --name-only ${latestVersion} HEAD | egrep '(android/.*)|(ios/.*)' -q ; then egrep '\\.0$' -q <<< ${version} ; else true ; fi ;"
-      ]
-    }
-  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

package/plugin/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+  rules: {
+    'curly': 'error',
+  }
+};

package/plugin/README.md

@@ -0,0 +1,241 @@
+# Reanimated Babel plugin
+
+To compile it, either use `yarn` or explicitly use `yarn plugin` in the root directory or `yarn` in `plugin/`.
+If you want to make any changes to Reanimated Babel plugin, do not edit anything in `build/` or `lib/`, those are directories for automatically bundled files. Commit your changes to `.ts` files in `src/` instead and make sure to compile them afterwards.
+
+Use of `yarn watch` in `plugin/` is highly recommended, as it will automatically compile and bundle your changes for testing and committing.
+
+If you want to compile `lib/` files only, use `yarn tsc` (or if you want to keep them).
+If you want to build the plugin but without using explicit `yarn`, do `yarn generate` instead.
+
+## Table of contents:
+
+1. [Basics](#basics)
+   1. [Why do we need this plugin?](#why-do-we-need-this-plugin)
+   1. [What is a worklet?](#what-is-a-worklet)
+   1. [How does a worklet work?](#how-does-a-worklet-work)
+   1. [Why transform worklets?](#why-transform-worklets)
+   1. [Automatic workletization](#automatic-workletization)
+   1. [Something doesn't work!](#something-doesnt-work-in-reanimated-plugin)
+1. [Plugin's applications](#plugins-applications)
+   1. [What can be a worklet?](#what-can-be-a-worklet)
+   1. [Inline styles support](#inline-styles-support)
+   1. [How to debug?](#how-to-debug-reanimated-babel-plugin)
+1. [Implementation](#implementation)
+   1. [Logic flowchart](#reanimated-babel-plugin-flowchart)
+   1. [Plugin's dependencies](#dependencies-of-reanimated-babel-plugin)
+
+## Basics
+
+### Why do we need this plugin?
+
+Reanimated is all about executing the code directly on the UI thread whenever possible to avoid expensive and troublesome communication between those two threads. Since UI and JS (React-Native) contexts are separate, we somehow need to pass the functions (and their arguments) from the JS thread to the UI thread. That's why we need **worklets**. If you haven't yet, we strongly recommend reading [the official documentation on worklets](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/worklets/) first.
+
+### What is a worklet?
+
+Worklets are **Arrow Function Expressions**, **Function Declarations**, **Function Expressions**, or **Object Methods** (for more information, refer to [official ECMAScript](https://262.ecma-international.org/), [types in Babel](https://babeljs.io/docs/babel-types), [AST Explorer](https://astexplorer.net/) - with @babel/parser) that contain a `'worklet'` directive at their very top. And that's it. It might be quite disappointing, but all the fun begins once we make such a worklet. It's a function that can be called on JS and UI threads. That's why Reanimated is able to produce smooth and responsive animations - functions that control those animations are not executed on JS thread, from where their results would need to be transported to UI thread and then applied.
+
+### How does a worklet work?
+
+The sole principle is (seemingly) simple. Once the Babel parser has transformed the code of the worklet function it appends some information to the function (since functions are objects in JavaScript). Once `runOnUI` has been called with our worklet, this extra information, which mostly is just JavaScript code, is injected into UI thread. Then UI thread calls `eval`, on this code and is happily able to run it autonomously.
+
+If it's just `eval` you might ask:
+
+### Why transform worklets?
+
+Well, we have to remember that UI thread is a completely different context. It does not have access to the scope we called the function from, nor anything present on the JS thread. Obviously, we could just copy the entire JS thread and inject it into the UI, but that's in direct conflict with one of Reanimated's principles - _speed_. We want to inject _as little data as possible_ - that's why we don't copy the context and we don't copy all the function closures. We only copy the variables we need (that are used in the worklet) and pass _only them_. For that, we need some transforming and transforming only for the parts that we will need to inject. But we can do better. One of Reanimated's strong points is transparency. We can just inject some code into the UI thread, why not, but once something crashes, we'd like to know what. That's why we also append some debugging information - reference to the original code - using simple source maps. That allows us to get information about what failed in the worklet even though it was executed on another thread. Pretty neat, right?
+
+To sum up, the process of worklet transformation appends to the JS function:
+
+- its UI code (as a string),
+- closure with only required variables,
+- debugging information (source maps).
+
+### Automatic workletization
+
+You might have asked yourself: is that it? Of course not. Reanimated Plugin does a lot more than that. We also perform _automatic workletization_. It's a functionality that allows the developers to have less boilerplate code. When you use `useAnimatedStyle` or `useAnimatedGestureHandler` we **cannot** give them non-worklet functions. So, simply put, Plugin detects if it should workletize a non-worklet function and then workletizes it. Thanks to it, we can type:
+
+```TypeScript
+ const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (e) => {
+      position.value = e.contentOffset.x;
+    },
+    onEndDrag: (e) => {
+      scrollToNearestItem(e.contentOffset.x);
+    },
+    onMomentumEnd: (e) => {
+      scrollToNearestItem(e.contentOffset.x);
+    },
+  });
+```
+
+instead of
+
+```TypeScript
+ const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (e) => {
+      'worklet';
+      position.value = e.contentOffset.x;
+    },
+    onEndDrag: (e) => {
+      'worklet';
+      scrollToNearestItem(e.contentOffset.x);
+    },
+    onMomentumEnd: (e) => {
+      'worklet';
+      scrollToNearestItem(e.contentOffset.x);
+    },
+  });
+```
+
+This might not seem to be a lot but it really helps with development and allows us to delegate some tedious tasks to babel.
+
+### Something doesn't work in Reanimated Plugin!
+
+It's certainly possible. It was being created ad-hoc from our experience and needs, not pre-planned in general:
+
+```mermaid
+flowchart LR
+a([we had a need to transform something]) ==> b([we looked up how it's structured in AST explorer]) ==> c([we added certain functionality to the plugin])
+```
+
+Some use cases might've been overlooked and on the other hand - some might work but were not designed (considered) to be transformed. That's why we strongly suggest that before you do something unusual with Reanimated you should check if it's conforming to Plugin. If it's not and you think it would be useful - you are more than welcome to contribute and submit a pull request on our [repo](https://www.github.com/software-mansion/react-native-reanimated).
+
+## Plugin's applications
+
+To get some more information about certain edge cases or use cases not listed here, try looking them up in our [tests](https://github.com/software-mansion/react-native-reanimated/blob/main/__tests__/plugin.test.js).
+
+### What can be a worklet?
+
+As stated in [this paragraph](#what-is-a-worklet), a worklet is supposed to be one of those:
+
+- Arrow Function Expression:
+
+```TypeScript
+const foo = () => {
+  'worklet';
+  console.log('Hello from ArrowFunctionExpression');
+}
+```
+
+- Function Declaration:
+
+```TypeScript
+function foo (){
+  'worklet';
+  console.log('Hello from FunctionDeclaration');
+}
+```
+
+- Function Expression:
+
+```TypeScript
+const foo = function () {
+  'worklet';
+  console.log('Hello from FunctionExpression');
+};
+```
+
+- Object Method:
+
+```TypeScript
+const obj = {
+  foo() {
+    'worklet';
+    console.log('Hello from ObjectMethod');
+  },
+};
+```
+
+In addition, workletization will work with:
+
+- Sequence Expression (only last element):
+
+```TypeScript
+function foo() {
+  (0, bar, foobar)({ // only foobar will get workletized!
+    barfoo() {
+      'worklet';
+      console.log('Hello from Sequence Expression');
+    },
+  });
+}
+```
+
+### Inline styles support
+
+For more information read [official docs](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations/#animations-in-inline-styles).
+
+### How to debug Reanimated Babel plugin?
+
+It's simple. After compilation we have generated `.js.map` file. We strongly recommend using **Visual Studio Code** and **JavaScript Debug Terminal**. Just open a new debugging session, type in your terminal (in project's root directory) `yarn babel <filename>` or `npx babel <filename>` respectively, and voilà. Add some breakpoints in `plugin/src/` in files that are of your debugging interest or just use step-by-step tools. Some knowledge of JavaScript's AST and Babel will be required to understand what exactly is happening during code transformation, as it's quite a complicated process.
+
+## Implementation
+
+### Reanimated Babel plugin flowchart
+
+This flowchart represents the high-level logic of our plugin's control flow. It's not perfect at the moment and one of our goals is to make this graph more understandable and fix all the gaps and remove unnecessary steps in its logic through meticulous refactoring of the code, but hey, at least it's planar!
+
+```mermaid
+flowchart TB
+node([ASTnode])
+iv([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/injectVersion.ts'>injectVersion</a><br><i>only once</i>])
+pw([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/processForCalleesWorklets.ts'>processForCalleesWorklets</a>])
+pwsbw{{should be workletized?}}
+pwgwa([get workletizable arguments])
+pwn([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/processIfWorkletNode.ts'>processIfWorkletNode</a>])
+pwnsbw{{should be workletized?}}
+pgh([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/processIfGestureHandlerEventCallbackFunctionNode.ts'>processIfGestureHandlerEventCallbackFunctionNode</a>])
+pghsbw{{should be workletized?}}
+pwf([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/processIfWorkletFunction.ts'>processIfWorkletFunction</a>])
+pwom([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/processWorkletObjectMethod.ts'>processWorkletObjectMethod</a>])
+pisw([<a href='https://github.com/software-mansion/react-native-reanimated/tree/main/plugin/src/processInlineStylesWarning.ts'>processInlineStylesWarning</a>])
+node-->|isDirectiveLiteral|iv
+node-->|isCallExpression|pw
+node-->|isArrowFunctionExpression|pwn
+node-->|isFunctionDeclaration|pwn
+node-->|isFunctionExpression|pwn
+node-->|isJSXAttribute|pisw
+pwn-->pwnsbw
+pwnsbw-->|yes|pwf
+pwnsbw-->|no|pgh
+pgh-->pghsbw
+pghsbw-->|yes|pwf
+pw-->pwsbw
+pwsbw-->|yes|pwgwa
+pwgwa-->|others|pwf
+pwgwa-->|objectMethods|pwom
+```
+
+### Dependencies of Reanimated Babel plugin
+
+This topic is a bit difficult. Our philosophy at the moment is to keep everything required to _build_ plugin in `plugin/package.json` as _devDependencies_ and everything that is needed to _run_ plugin in main `package.json`, mostly as _devDependencies_.
+
+This might seem a bit weird regarding two issues:
+
+- Why are they not fully in `plugin/package.json`?
+- Why are some dependencies **required to run** devDependencies?
+
+It's understandable that dependencies required to run plugin are not in `plugin/package.json`, as plugin itself is not a dependency required by Reanimated thus its' dependencies wouldn't ever be installed by the user.
+
+The hard part begins if we consider the latter issue.
+The fact is, from theoretical perspective, dependencies required to run should just be _dependencies_, not _dev_ ones. But in reality, all of those listed as _devs_ are _dependencies_ for _dependencies_ of _react-native_ ( :dizzy*face: ) - hence, if user doesn't have them, react-native won't (or shouldn't) work at all.
+What is more, we want to avoid potential issues with forcing users to install multiple versions of the same package. Thus, the solution is to \_trust* that user will have those packages and NodeJS will be able to resolve them for the plugin. The only thing we can do is to list them as _peerDependencies_ for clarity and to simplify potential troubleshooting and keep them as _devDependencies_ for us to be sure we have them.
+It's not an ideal solution, but definitely best we have at the moment.
+
+Keep in mind this was the situation as of March 2023.
+
+Dependencies that are required for plugin to run:
+
+- `@babel/core`,
+  included in it as _dependencies_:
+  - `@babel/traverse`,
+  - `@babel/generator`,
+- `convert-source-map`,
+- `@babel/preset-typescript`,
+- `@babel/@babel/plugin-transform-shorthand-properties`,
+- `@babel/plugin-transform-shorthand-properties`,
+- `@babel/plugin-transform-arrow-functions`,
+- `@babel/plugin-proposal-optional-chaining`,
+- `@babel/plugin-proposal-nullish-coalescing-operator`,
+- `@babel/plugin-transform-template-literals`.