();
const errors = new CompilerError();
for (const [, block] of fn.body.blocks) {
for (const phi of block.phis) {
env.set(
- phi.id.id,
+ phi.place.identifier.id,
joinRefAccessTypes(
...Array(...phi.operands.values()).map(
- operand => env.get(operand.id) ?? ({kind: 'None'} as const),
+ operand =>
+ env.get(operand.identifier.id) ?? ({kind: 'None'} as const),
),
),
);
@@ -237,11 +293,15 @@ function validateNoRefAccessInRenderImpl(
if (objType?.kind === 'Structure') {
lookupType = objType.value;
} else if (objType?.kind === 'Ref') {
- lookupType = {kind: 'RefValue', loc: instr.loc};
+ lookupType = {
+ kind: 'RefValue',
+ loc: instr.loc,
+ refId: objType.refId,
+ };
}
env.set(
instr.lvalue.identifier.id,
- lookupType ?? refTypeOfType(instr.lvalue.identifier),
+ lookupType ?? refTypeOfType(instr.lvalue),
);
break;
}
@@ -250,7 +310,7 @@ function validateNoRefAccessInRenderImpl(
env.set(
instr.lvalue.identifier.id,
env.get(instr.value.place.identifier.id) ??
- refTypeOfType(instr.lvalue.identifier),
+ refTypeOfType(instr.lvalue),
);
break;
}
@@ -259,12 +319,12 @@ function validateNoRefAccessInRenderImpl(
env.set(
instr.value.lvalue.place.identifier.id,
env.get(instr.value.value.identifier.id) ??
- refTypeOfType(instr.value.lvalue.place.identifier),
+ refTypeOfType(instr.value.lvalue.place),
);
env.set(
instr.lvalue.identifier.id,
env.get(instr.value.value.identifier.id) ??
- refTypeOfType(instr.lvalue.identifier),
+ refTypeOfType(instr.lvalue),
);
break;
}
@@ -276,13 +336,10 @@ function validateNoRefAccessInRenderImpl(
}
env.set(
instr.lvalue.identifier.id,
- lookupType ?? refTypeOfType(instr.lvalue.identifier),
+ lookupType ?? refTypeOfType(instr.lvalue),
);
for (const lval of eachPatternOperand(instr.value.lvalue.pattern)) {
- env.set(
- lval.identifier.id,
- lookupType ?? refTypeOfType(lval.identifier),
- );
+ env.set(lval.identifier.id, lookupType ?? refTypeOfType(lval));
}
break;
}
@@ -353,7 +410,11 @@ function validateNoRefAccessInRenderImpl(
types.push(env.get(operand.identifier.id) ?? {kind: 'None'});
}
const value = joinRefAccessTypes(...types);
- if (value.kind === 'None') {
+ if (
+ value.kind === 'None' ||
+ value.kind === 'Guard' ||
+ value.kind === 'Nullable'
+ ) {
env.set(instr.lvalue.identifier.id, {kind: 'None'});
} else {
env.set(instr.lvalue.identifier.id, {
@@ -368,7 +429,18 @@ function validateNoRefAccessInRenderImpl(
case 'PropertyStore':
case 'ComputedDelete':
case 'ComputedStore': {
- validateNoRefAccess(errors, env, instr.value.object, instr.loc);
+ const safe = safeBlocks.get(block.id);
+ const target = env.get(instr.value.object.identifier.id);
+ if (
+ instr.value.kind === 'PropertyStore' &&
+ safe != null &&
+ target?.kind === 'Ref' &&
+ target.refId === safe
+ ) {
+ safeBlocks.delete(block.id);
+ } else {
+ validateNoRefAccess(errors, env, instr.value.object, instr.loc);
+ }
for (const operand of eachInstructionValueOperand(instr.value)) {
if (operand === instr.value.object) {
continue;
@@ -380,6 +452,38 @@ function validateNoRefAccessInRenderImpl(
case 'StartMemoize':
case 'FinishMemoize':
break;
+ case 'Primitive': {
+ if (instr.value.value == null) {
+ env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
+ }
+ break;
+ }
+ case 'BinaryExpression': {
+ const left = env.get(instr.value.left.identifier.id);
+ const right = env.get(instr.value.right.identifier.id);
+ let nullish: boolean = false;
+ let refId: RefId | null = null;
+ if (left?.kind === 'RefValue' && left.refId != null) {
+ refId = left.refId;
+ } else if (right?.kind === 'RefValue' && right.refId != null) {
+ refId = right.refId;
+ }
+
+ if (left?.kind === 'Nullable') {
+ nullish = true;
+ } else if (right?.kind === 'Nullable') {
+ nullish = true;
+ }
+
+ if (refId !== null && nullish) {
+ env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
+ } else {
+ for (const operand of eachInstructionValueOperand(instr.value)) {
+ validateNoRefValueAccess(errors, env, operand);
+ }
+ }
+ break;
+ }
default: {
for (const operand of eachInstructionValueOperand(instr.value)) {
validateNoRefValueAccess(errors, env, operand);
@@ -387,16 +491,28 @@ function validateNoRefAccessInRenderImpl(
break;
}
}
- if (isUseRefType(instr.lvalue.identifier)) {
+
+ // Guard values are derived from ref.current, so they can only be used in if statement targets
+ for (const operand of eachInstructionOperand(instr)) {
+ guardCheck(errors, operand, env);
+ }
+
+ if (
+ isUseRefType(instr.lvalue.identifier) &&
+ env.get(instr.lvalue.identifier.id)?.kind !== 'Ref'
+ ) {
env.set(
instr.lvalue.identifier.id,
joinRefAccessTypes(
env.get(instr.lvalue.identifier.id) ?? {kind: 'None'},
- {kind: 'Ref'},
+ {kind: 'Ref', refId: nextRefId()},
),
);
}
- if (isRefValueType(instr.lvalue.identifier)) {
+ if (
+ isRefValueType(instr.lvalue.identifier) &&
+ env.get(instr.lvalue.identifier.id)?.kind !== 'RefValue'
+ ) {
env.set(
instr.lvalue.identifier.id,
joinRefAccessTypes(
@@ -406,12 +522,24 @@ function validateNoRefAccessInRenderImpl(
);
}
}
+
+ if (block.terminal.kind === 'if') {
+ const test = env.get(block.terminal.test.identifier.id);
+ if (test?.kind === 'Guard') {
+ safeBlocks.set(block.terminal.consequent, test.refId);
+ }
+ }
+
for (const operand of eachTerminalOperand(block.terminal)) {
if (block.terminal.kind !== 'return') {
validateNoRefValueAccess(errors, env, operand);
+ if (block.terminal.kind !== 'if') {
+ guardCheck(errors, operand, env);
+ }
} else {
// Allow functions containing refs to be returned, but not direct ref values
validateNoDirectRefValueAccess(errors, operand, env);
+ guardCheck(errors, operand, env);
returnValues.push(env.get(operand.identifier.id));
}
}
@@ -443,6 +571,23 @@ function destructure(
return type;
}
+function guardCheck(errors: CompilerError, operand: Place, env: Env): void {
+ if (env.get(operand.identifier.id)?.kind === 'Guard') {
+ errors.push({
+ severity: ErrorSeverity.InvalidReact,
+ reason:
+ 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
+ loc: operand.loc,
+ description:
+ operand.identifier.name !== null &&
+ operand.identifier.name.kind === 'named'
+ ? `Cannot access ref value \`${operand.identifier.name.value}\``
+ : null,
+ suggestions: null,
+ });
+ }
+}
+
function validateNoRefValueAccess(
errors: CompilerError,
env: Env,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.expect.md
new file mode 100644
index 0000000000000..560cef900ffa0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+ const r = useRef(null);
+ if (r.current == null) {
+ r.current = 1;
+ }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: C,
+ params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function C() {
+ const r = useRef(null);
+ if (r.current == null) {
+ r.current = 1;
+ }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: C,
+ params: [{}],
+};
+
+```
+
+### Eval output
+(kind: ok)
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.js
new file mode 100644
index 0000000000000..7c7c3d9cb90ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.js
@@ -0,0 +1,14 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+ const r = useRef(null);
+ if (r.current == null) {
+ r.current = 1;
+ }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: C,
+ params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.expect.md
new file mode 100644
index 0000000000000..32e2c9fd6483e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {CONST_TRUE, Stringify, mutate, useIdentity} from 'shared-runtime';
+
+/**
+ * Fixture showing an edge case for ReactiveScope variable propagation.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * Forget:
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * [[ (exception in render) Error: invariant broken ]]
+ *
+ */
+function Component() {
+ const obj = CONST_TRUE ? {inner: {value: 'hello'}} : null;
+ const boxedInner = [obj?.inner];
+ useIdentity(null);
+ mutate(obj);
+ if (boxedInner[0] !== obj?.inner) {
+ throw new Error('invariant broken');
+ }
+ return ;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: Component,
+ params: [{arg: 0}],
+ sequentialRenders: [{arg: 0}, {arg: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_TRUE, Stringify, mutate, useIdentity } from "shared-runtime";
+
+/**
+ * Fixture showing an edge case for ReactiveScope variable propagation.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * Forget:
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * [[ (exception in render) Error: invariant broken ]]
+ *
+ */
+function Component() {
+ const $ = _c(4);
+ const obj = CONST_TRUE ? { inner: { value: "hello" } } : null;
+ let t0;
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+ t0 = [obj?.inner];
+ $[0] = t0;
+ } else {
+ t0 = $[0];
+ }
+ const boxedInner = t0;
+ useIdentity(null);
+ mutate(obj);
+ if (boxedInner[0] !== obj?.inner) {
+ throw new Error("invariant broken");
+ }
+ let t1;
+ if ($[1] !== obj || $[2] !== boxedInner) {
+ t1 = ;
+ $[1] = obj;
+ $[2] = boxedInner;
+ $[3] = t1;
+ } else {
+ t1 = $[3];
+ }
+ return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: Component,
+ params: [{ arg: 0 }],
+ sequentialRenders: [{ arg: 0 }, { arg: 1 }],
+};
+
+```
+
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.tsx
new file mode 100644
index 0000000000000..a1a78bfa7e6b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.tsx
@@ -0,0 +1,30 @@
+import {CONST_TRUE, Stringify, mutate, useIdentity} from 'shared-runtime';
+
+/**
+ * Fixture showing an edge case for ReactiveScope variable propagation.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * Forget:
+ * {"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}
+ * [[ (exception in render) Error: invariant broken ]]
+ *
+ */
+function Component() {
+ const obj = CONST_TRUE ? {inner: {value: 'hello'}} : null;
+ const boxedInner = [obj?.inner];
+ useIdentity(null);
+ mutate(obj);
+ if (boxedInner[0] !== obj?.inner) {
+ throw new Error('invariant broken');
+ }
+ return ;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: Component,
+ params: [{arg: 0}],
+ sequentialRenders: [{arg: 0}, {arg: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.expect.md
new file mode 100644
index 0000000000000..56ca1f7722e45
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject: {value: {inner: number}} | null) {
+ const y = [];
+ try {
+ y.push(identity(maybeNullObject.value.inner));
+ } catch {
+ y.push('null');
+ }
+
+ return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: useFoo,
+ params: [null],
+ sequentialRenders: [null, {value: 2}, {value: 3}, null],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject) {
+ const $ = _c(2);
+ let y;
+ if ($[0] !== maybeNullObject.value.inner) {
+ y = [];
+ try {
+ y.push(identity(maybeNullObject.value.inner));
+ } catch {
+ y.push("null");
+ }
+ $[0] = maybeNullObject.value.inner;
+ $[1] = y;
+ } else {
+ y = $[1];
+ }
+ return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: useFoo,
+ params: [null],
+ sequentialRenders: [null, { value: 2 }, { value: 3 }, null],
+};
+
+```
+
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.ts
new file mode 100644
index 0000000000000..555ace19405a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.ts
@@ -0,0 +1,22 @@
+import {identity} from 'shared-runtime';
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject: {value: {inner: number}} | null) {
+ const y = [];
+ try {
+ y.push(identity(maybeNullObject.value.inner));
+ } catch {
+ y.push('null');
+ }
+
+ return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+ fn: useFoo,
+ params: [null],
+ sequentialRenders: [null, {value: 2}, {value: 3}, null],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md
new file mode 100644
index 0000000000000..f1399a41b6fec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @enableCustomTypeDefinitionForReanimated
+
+/**
+ * Test that a global (i.e. non-imported) useSharedValue is treated as an
+ * unknown hook.
+ */
+function SomeComponent() {
+ const sharedVal = useSharedValue(0);
+ return (
+