react-native-reanimated 3.0.0-rc.8 → 3.0.0

package/lib/module/reanimated2/valueSetter.js

@@ -1,4 +1,3 @@
-import { getTimestamp } from './time';
 export { stopMapper } from './mappers';
 export function valueSetter(sv, value) {
   'worklet';
@@ -26,7 +25,7 @@ export function valueSetter(sv, value) {
       animation.onStart(animation, sv.value, timestamp, previousAnimation);
     };
 
-    const currentTimestamp = getTimestamp();
+    const currentTimestamp = global.__frameTimestamp || performance.now();
     initializeAnimation(currentTimestamp);
 
     const step = timestamp => {

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

@@ -1 +1 @@
-{"version":3,"names":["getTimestamp","stopMapper","valueSetter","sv","value","previousAnimation","_animation","cancelled","onFrame","undefined","animation","_value","current","isHigherOrder","callback","initializeAnimation","timestamp","onStart","currentTimestamp","step","finished","requestAnimationFrame"],"sources":["valueSetter.ts"],"sourcesContent":["import { AnimationObject, AnimatableValue } from './commonTypes';\nimport { Descriptor } from './hook/commonTypes';\nimport { getTimestamp } from './time';\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 = getTimestamp();\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,YAAT,QAA6B,QAA7B;AACA,SAASC,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,GAAGlB,YAAY,EAArC;IACAe,mBAAmB,CAACG,gBAAD,CAAnB;;IACA,MAAMC,IAAI,GAAIH,SAAD,IAAuB;MAClC,IAAIN,SAAS,CAACH,SAAd,EAAyB;QACvBG,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAM;QAAzB,CAAtB;QACA;MACD;;MACD,MAAMM,QAAQ,GAAGV,SAAS,CAACF,OAAV,CAAkBE,SAAlB,EAA6BM,SAA7B,CAAjB;MACAN,SAAS,CAACU,QAAV,GAAqB,IAArB;MACAV,SAAS,CAACM,SAAV,GAAsBA,SAAtB;MACAb,EAAE,CAACQ,MAAH,GAAYD,SAAS,CAACE,OAAtB;;MACA,IAAIQ,QAAJ,EAAc;QACZV,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAK;QAAxB,CAAtB;MACD,CAFD,MAEO;QACLO,qBAAqB,CAACF,IAAD,CAArB;MACD;IACF,CAdD;;IAgBAhB,EAAE,CAACG,UAAH,GAAgBI,SAAhB;IAEAS,IAAI,CAACD,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "3.0.0-rc.8",
+  "version": "3.0.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",
@@ -54,7 +54,7 @@
     "scripts/reanimated_utils.rb",
     "README.md",
     "mock.js",
-    "plugin.js",
+    "plugin/",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -76,6 +76,7 @@
   "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",
@@ -88,11 +89,11 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@react-native-community/eslint-config": "^0.0.5",
+    "@babel/preset-env": "^7.20.0",
+    "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
@@ -102,7 +103,7 @@
     "@types/babel__traverse": "^7.14.2",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^27.4.0",
-    "@types/react-native": "^0.66.0",
+    "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
@@ -114,6 +115,7 @@
     "eslint-config-standard": "^16.0.3",
     "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
@@ -123,9 +125,8 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.70.5",
+    "react-native": "0.71.3",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^2.4.2",
     "react-test-renderer": "17.0.2",
     "release-it": "^13.7.2",

package/{plugin.js → plugin/index.js}

@@ -4,6 +4,7 @@ const hash = require('string-hash-64');
 const traverse = require('@babel/traverse').default;
 const { transformSync } = require('@babel/core');
 const fs = require('fs');
+const convertSourceMap = require('convert-source-map');
 /**
  * holds a map of function names as keys and array of argument indexes as values which should be automatically workletized(they have to be functions)(starting from 0)
  */
@@ -32,8 +33,6 @@ const globals = new Set([
   'this',
   'console',
   'performance',
-  '_setGlobalConsole',
-  '_chronoNow',
   'Date',
   'Array',
   'ArrayBuffer',
@@ -58,6 +57,7 @@ const globals = new Set([
   'null',
   'UIManager',
   'requestAnimationFrame',
+  'setImmediate',
   '_WORKLET',
   'arguments',
   'Boolean',
@@ -77,78 +77,19 @@ const globals = new Set([
   '_removeShadowNodeFromRegistry',
   'RegExp',
   'Error',
+  'ErrorUtils',
   'global',
   '_measure',
   '_scrollTo',
   '_dispatchCommand',
   '_setGestureState',
   '_getCurrentTime',
-  '_eventTimestamp',
-  '_frameTimestamp',
   'isNaN',
   'LayoutAnimationRepository',
   '_notifyAboutProgress',
   '_notifyAboutEnd',
 ]);
 
-// leaving way to avoid deep capturing by adding 'stopCapturing' to the blacklist
-const blacklistedFunctions = new Set([
-  'stopCapturing',
-  'toString',
-  'map',
-  'filter',
-  'findIndex',
-  'forEach',
-  'valueOf',
-  'toPrecision',
-  'toExponential',
-  'constructor',
-  'toFixed',
-  'toLocaleString',
-  'toSource',
-  'charAt',
-  'charCodeAt',
-  'concat',
-  'indexOf',
-  'lastIndexOf',
-  'localeCompare',
-  'length',
-  'match',
-  'replace',
-  'search',
-  'slice',
-  'split',
-  'substr',
-  'substring',
-  'toLocaleLowerCase',
-  'toLocaleUpperCase',
-  'toLowerCase',
-  'toUpperCase',
-  'every',
-  'join',
-  'pop',
-  'push',
-  'reduce',
-  'reduceRight',
-  'reverse',
-  'shift',
-  'slice',
-  'some',
-  'sort',
-  'splice',
-  'unshift',
-  'hasOwnProperty',
-  'isPrototypeOf',
-  'propertyIsEnumerable',
-  'bind',
-  'apply',
-  'call',
-  '__callAsync',
-  'includes',
-]);
-
-const possibleOptFunction = new Set(['interpolate']);
-
 const gestureHandlerGestureObjects = new Set([
   // from https://github.com/software-mansion/react-native-gesture-handler/blob/new-api/src/handlers/gestures/gestureObjects.ts
   'Tap',
@@ -178,112 +119,6 @@ const gestureHandlerBuilderMethods = new Set([
   'onTouchesCancelled',
 ]);
 
-class ClosureGenerator {
-  constructor() {
-    this.trie = [{}, false];
-  }
-
-  mergeAns(oldAns, newAns) {
-    const [purePath, node] = oldAns;
-    const [purePathUp, nodeUp] = newAns;
-    if (purePathUp.length !== 0) {
-      return [purePath.concat(purePathUp), nodeUp];
-    } else {
-      return [purePath, node];
-    }
-  }
-
-  findPrefixRec(path) {
-    const notFound = [[], null];
-    if (!path || path.node.type !== 'MemberExpression') {
-      return notFound;
-    }
-    const memberExpressionNode = path.node;
-    if (memberExpressionNode.property.type !== 'Identifier') {
-      return notFound;
-    }
-    if (
-      memberExpressionNode.computed ||
-      memberExpressionNode.property.name === 'value' ||
-      blacklistedFunctions.has(memberExpressionNode.property.name)
-    ) {
-      // a.b[w] -> a.b.w in babel nodes
-      // a.v.value
-      // sth.map(() => )
-      return notFound;
-    }
-    if (
-      path.parent &&
-      path.parent.type === 'AssignmentExpression' &&
-      path.parent.left === path.node
-    ) {
-      /// captured.newProp = 5;
-      return notFound;
-    }
-    const purePath = [memberExpressionNode.property.name];
-    const node = memberExpressionNode;
-    const upAns = this.findPrefixRec(path.parentPath);
-    return this.mergeAns([purePath, node], upAns);
-  }
-
-  findPrefix(base, babelPath) {
-    const purePath = [base];
-    const node = babelPath.node;
-    const upAns = this.findPrefixRec(babelPath.parentPath);
-    return this.mergeAns([purePath, node], upAns);
-  }
-
-  addPath(base, babelPath) {
-    const [purePath, node] = this.findPrefix(base, babelPath);
-    let parent = this.trie;
-    let index = -1;
-    for (const current of purePath) {
-      index++;
-      if (parent[1]) {
-        continue;
-      }
-      if (!parent[0][current]) {
-        parent[0][current] = [{}, false];
-      }
-      if (index === purePath.length - 1) {
-        parent[0][current] = [node, true];
-      }
-      parent = parent[0][current];
-    }
-  }
-
-  generateNodeForBase(t, current, parent) {
-    const currentNode = parent[0][current];
-    if (currentNode[1]) {
-      return currentNode[0];
-    }
-    return t.objectExpression(
-      Object.keys(currentNode[0]).map((propertyName) =>
-        t.objectProperty(
-          t.identifier(propertyName),
-          this.generateNodeForBase(t, propertyName, currentNode),
-          false,
-          true
-        )
-      )
-    );
-  }
-
-  generate(t, variables, names) {
-    const arrayOfKeys = [...names];
-    return t.objectExpression(
-      variables.map((variable, index) =>
-        t.objectProperty(
-          t.identifier(variable.name),
-          this.generateNodeForBase(t, arrayOfKeys[index], this.trie),
-          false,
-          true
-        )
-      )
-    );
-  }
-}
-
 function isRelease() {
   return ['production', 'release'].includes(process.env.BABEL_ENV);
 }
@@ -369,7 +204,9 @@ function buildWorkletString(t, fun, closureVariables, name, inputMap) {
 
   const code = generate(workletFunction).code;
 
-  if (shouldGenerateSourceMap()) {
+  const includeSourceMap = shouldGenerateSourceMap();
+
+  if (includeSourceMap) {
     // Clear contents array (should be empty anyways)
     inputMap.sourcesContent = [];
     // Include source contents in source map, because Flipper/iframe is not
@@ -383,8 +220,8 @@ function buildWorkletString(t, fun, closureVariables, name, inputMap) {
 
   const transformed = transformSync(code, {
     plugins: [prependClosureVariablesIfNecessary()],
-    compact: !shouldGenerateSourceMap(),
-    sourceMaps: shouldGenerateSourceMap() ? 'inline' : false,
+    compact: !includeSourceMap,
+    sourceMaps: includeSourceMap,
     inputSourceMap: inputMap,
     ast: false,
     babelrc: false,
@@ -392,7 +229,17 @@ function buildWorkletString(t, fun, closureVariables, name, inputMap) {
     comments: false,
   });
 
-  return transformed.code;
+  let sourceMap;
+  if (includeSourceMap) {
+    sourceMap = convertSourceMap.fromObject(transformed.map).toObject();
+    // sourcesContent field contains a full source code of the file which contains the worklet
+    // and is not needed by the source map interpreter in order to symbolicate a stack trace.
+    // Therefore, we remove it to reduce the bandwith and avoid sending it potentially multiple times
+    // in files that contain multiple worklets. Along with sourcesContent.
+    delete sourceMap.sourcesContent;
+  }
+
+  return [transformed.code, JSON.stringify(sourceMap)];
 }
 
 function makeWorkletName(t, fun) {
@@ -405,7 +252,7 @@ function makeWorkletName(t, fun) {
   if (t.isFunctionExpression(fun) && t.isIdentifier(fun.node.id)) {
     return fun.node.id.name;
   }
-  return '_f'; // fallback for ArrowFunctionExpression and unnamed FunctionExpression
+  return 'anonymous'; // fallback for ArrowFunctionExpression and unnamed FunctionExpression
 }
 
 function makeWorklet(t, fun, state) {
@@ -415,8 +262,6 @@ function makeWorklet(t, fun, state) {
   const functionName = makeWorkletName(t, fun);
 
   const closure = new Map();
-  const closureGenerator = new ClosureGenerator();
-  const options = {};
 
   // remove 'worklet'; directive before generating string
   fun.traverse({
@@ -458,13 +303,6 @@ function makeWorklet(t, fun, state) {
     inputSourceMap: codeObject.map,
   });
 
-  if (
-    fun.parent &&
-    fun.parent.callee &&
-    fun.parent.callee.name === 'useAnimatedStyle'
-  ) {
-    options.optFlags = isPossibleOptimization(transformed.ast);
-  }
   traverse(transformed.ast, {
     ReferencedIdentifier(path) {
       const name = path.node.name;
@@ -499,7 +337,6 @@ function makeWorklet(t, fun, state) {
         currentScope = currentScope.parent;
       }
       closure.set(name, path.node);
-      closureGenerator.addPath(name, path);
     },
   });
 
@@ -514,7 +351,7 @@ function makeWorklet(t, fun, state) {
     funExpression = clone;
   }
 
-  const funString = buildWorkletString(
+  const [funString, sourceMapString] = buildWorkletString(
     t,
     transformed.ast,
     variables,
@@ -529,14 +366,45 @@ function makeWorklet(t, fun, state) {
     location = path.relative(state.cwd, location);
   }
 
-  const loc = fun && fun.node && fun.node.loc && fun.node.loc.start;
-  if (loc) {
-    const { line, column } = loc;
-    if (typeof line === 'number' && typeof column === 'number') {
-      location = `${location} (${line}:${column})`;
-    }
+  let lineOffset = 1;
+  if (closure.size > 0) {
+    // When worklet captures some variables, we append closure destructing at
+    // the beginning of the function body. This effectively results in line
+    // numbers shifting by the number of captured variables (size of the
+    // closure) + 2 (for the opening and closing brackets of the destruct
+    // statement)
+    lineOffset -= closure.size + 2;
   }
 
+  const pathForStringDefinitions = fun.parentPath.isProgram()
+    ? fun
+    : fun.findParent((path) => path.parentPath.isProgram());
+
+  const initDataId =
+    pathForStringDefinitions.parentPath.scope.generateUidIdentifier(
+      `worklet_${workletHash}_init_data`
+    );
+
+  const initDataObjectExpression = t.objectExpression([
+    t.objectProperty(t.identifier('code'), t.stringLiteral(funString)),
+    t.objectProperty(t.identifier('location'), t.stringLiteral(location)),
+  ]);
+
+  if (sourceMapString) {
+    initDataObjectExpression.properties.push(
+      t.objectProperty(
+        t.identifier('sourceMap'),
+        t.stringLiteral(sourceMapString)
+      )
+    );
+  }
+
+  pathForStringDefinitions.insertBefore(
+    t.variableDeclaration('const', [
+      t.variableDeclarator(initDataId, initDataObjectExpression),
+    ])
+  );
+
   const statements = [
     t.variableDeclaration('const', [
       t.variableDeclarator(privateFunctionId, funExpression),
@@ -545,14 +413,11 @@ function makeWorklet(t, fun, state) {
       t.assignmentExpression(
         '=',
         t.memberExpression(privateFunctionId, t.identifier('_closure'), false),
-        closureGenerator.generate(t, variables, closure.keys())
-      )
-    ),
-    t.expressionStatement(
-      t.assignmentExpression(
-        '=',
-        t.memberExpression(privateFunctionId, t.identifier('asString'), false),
-        t.stringLiteral(funString)
+        t.objectExpression(
+          variables.map((variable) =>
+            t.objectProperty(t.identifier(variable.name), variable, false, true)
+          )
+        )
       )
     ),
     t.expressionStatement(
@@ -560,10 +425,10 @@ function makeWorklet(t, fun, state) {
         '=',
         t.memberExpression(
           privateFunctionId,
-          t.identifier('__workletHash'),
+          t.identifier('__initData'),
           false
         ),
-        t.numericLiteral(workletHash)
+        initDataId
       )
     ),
     t.expressionStatement(
@@ -571,25 +436,37 @@ function makeWorklet(t, fun, state) {
         '=',
         t.memberExpression(
           privateFunctionId,
-          t.identifier('__location'),
+          t.identifier('__workletHash'),
           false
         ),
-        t.stringLiteral(location)
+        t.numericLiteral(workletHash)
       )
     ),
   ];
 
-  if (options && options.optFlags) {
+  if (!isRelease()) {
+    statements.unshift(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          t.identifier('_e'),
+          t.arrayExpression([
+            t.newExpression(t.identifier('Error'), []),
+            t.numericLiteral(lineOffset),
+            t.numericLiteral(-20), // the placement of opening bracket after Exception in line that defined '_e' variable
+          ])
+        ),
+      ])
+    );
     statements.push(
       t.expressionStatement(
         t.assignmentExpression(
           '=',
           t.memberExpression(
             privateFunctionId,
-            t.identifier('__optimalization'),
+            t.identifier('__stackDetails'),
             false
           ),
-          t.numericLiteral(options.optFlags)
+          t.identifier('_e')
         )
       )
     );
@@ -782,10 +659,14 @@ function isGestureObject(t, node) {
 }
 
 function processWorklets(t, path, state) {
+  const callee =
+    path.node.callee.type === 'SequenceExpression'
+      ? path.node.callee.expressions[path.node.callee.expressions.length - 1]
+      : path.node.callee;
+
   const name =
-    path.node.callee.type === 'MemberExpression'
-      ? path.node.callee.property.name
-      : path.node.callee.name;
+    callee.type === 'MemberExpression' ? callee.property.name : callee.name;
+
   if (
     objectHooks.has(name) &&
     path.get('arguments.0').type === 'ObjectExpression'
@@ -809,30 +690,89 @@ function processWorklets(t, path, state) {
   }
 }
 
-const FUNCTIONLESS_FLAG = 0b00000001;
-const STATEMENTLESS_FLAG = 0b00000010;
+function generateInlineStylesWarning(t, memberExpression) {
+  // replaces `sharedvalue.value` with `(()=>{console.warn(require('react-native-reanimated').getUseOfValueInStyleWarning());return sharedvalue.value;})()`
+  return t.callExpression(
+    t.arrowFunctionExpression(
+      [],
+      t.blockStatement([
+        t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(t.identifier('console'), t.identifier('warn')),
+            [
+              t.callExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier('require'), [
+                    t.stringLiteral('react-native-reanimated'),
+                  ]),
+                  t.identifier('getUseOfValueInStyleWarning')
+                ),
+                []
+              ),
+            ]
+          )
+        ),
+        t.returnStatement(memberExpression.node),
+      ])
+    ),
+    []
+  );
+}
+
+function processPropertyValueForInlineStylesWarning(t, path) {
+  // if it's something like object.value then raise a warning
+  if (t.isMemberExpression(path)) {
+    if (path.get('property').node.name === 'value') {
+      path.replaceWith(generateInlineStylesWarning(t, path));
+    }
+  }
+}
 
-function isPossibleOptimization(fun) {
-  let isFunctionCall = false;
-  let isStatement = false;
-  traverse(fun, {
-    CallExpression(path) {
-      if (!possibleOptFunction.has(path.node.callee.name)) {
-        isFunctionCall = true;
+function processTransformPropertyForInlineStylesWarning(t, path) {
+  if (t.isArrayExpression(path)) {
+    const elements = path.get('elements');
+    for (const element of elements) {
+      if (t.isObjectExpression(element)) {
+        processStyleObjectForInlineStylesWarning(t, element);
       }
-    },
-    IfStatement() {
-      isStatement = true;
-    },
-  });
-  let flags = 0;
-  if (!isFunctionCall) {
-    flags = flags | FUNCTIONLESS_FLAG;
+    }
   }
-  if (!isStatement) {
-    flags = flags | STATEMENTLESS_FLAG;
+}
+
+function processStyleObjectForInlineStylesWarning(t, path) {
+  const properties = path.get('properties');
+  for (const property of properties) {
+    const value = property.get('value');
+    if (t.isProperty(property)) {
+      if (property.get('key').node.name === 'transform') {
+        processTransformPropertyForInlineStylesWarning(t, value);
+      } else {
+        processPropertyValueForInlineStylesWarning(t, value);
+      }
+    }
+  }
+}
+
+function processInlineStylesWarning(t, path, state) {
+  if (isRelease()) return;
+  if (state.opts.disableInlineStylesWarning) return;
+  if (path.get('name').node.name !== 'style') return;
+  if (!t.isJSXExpressionContainer(path.get('value'))) return;
+
+  const expression = path.get('value').get('expression');
+  // style={[{...}, {...}]}
+  if (t.isArrayExpression(expression)) {
+    const elements = expression.get('elements');
+    for (const element of elements) {
+      if (t.isObjectExpression(element)) {
+        processStyleObjectForInlineStylesWarning(t, element);
+      }
+    }
+  }
+  // style={{...}}
+  else if (t.isObjectExpression(expression)) {
+    processStyleObjectForInlineStylesWarning(t, expression);
   }
-  return flags;
 }
 
 module.exports = function ({ types: t }) {
@@ -857,6 +797,11 @@ module.exports = function ({ types: t }) {
           processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
+      JSXAttribute: {
+        enter(path, state) {
+          processInlineStylesWarning(t, path, state);
+        },
+      },
     },
   };
 };