[pull] main from facebook:main

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

@@ -356,7 +356,7 @@ function* runWithEnvironment(
   });
 
   if (env.config.inferEffectDependencies) {
-    inferEffectDependencies(env, hir);
+    inferEffectDependencies(hir);
   }
 
   if (env.config.inlineJsxTransform) {

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -242,9 +242,40 @@ const EnvironmentConfigSchema = z.object({
   enableOptionalDependencies: z.boolean().default(true),
 
   /**
-   * Enables inference and auto-insertion of effect dependencies. Still experimental.
+   * Enables inference and auto-insertion of effect dependencies. Takes in an array of
+   * configurable module and import pairs to allow for user-land experimentation. For example,
+   * [
+   *   {
+   *     module: 'react',
+   *     imported: 'useEffect',
+   *     numRequiredArgs: 1,
+   *   },{
+   *     module: 'MyExperimentalEffectHooks',
+   *     imported: 'useExperimentalEffect',
+   *     numRequiredArgs: 2,
+   *   },
+   * ]
+   * would insert dependencies for calls of `useEffect` imported from `react` and calls of
+   * useExperimentalEffect` from `MyExperimentalEffectHooks`.
+   *
+   * `numRequiredArgs` tells the compiler the amount of arguments required to append a dependency
+   *  array to the end of the call. With the configuration above, we'd insert dependencies for
+   *  `useEffect` if it is only given a single argument and it would be appended to the argument list.
+   *
+   * numRequiredArgs must always be greater than 0, otherwise there is no function to analyze for dependencies
+   *
+   * Still experimental.
    */
-  inferEffectDependencies: z.boolean().default(false),
+  inferEffectDependencies: z
+    .nullable(
+      z.array(
+        z.object({
+          function: ExternalFunctionSchema,
+          numRequiredArgs: z.number(),
+        }),
+      ),
+    )
+    .default(null),
 
   /**
    * Enables inlining ReactElement object literals in place of JSX
@@ -614,6 +645,22 @@ const testComplexConfigDefaults: PartialEnvironmentConfig = {
     source: 'react-compiler-runtime',
     importSpecifierName: 'useContext_withSelector',
   },
+  inferEffectDependencies: [
+    {
+      function: {
+        source: 'react',
+        importSpecifierName: 'useEffect',
+      },
+      numRequiredArgs: 1,
+    },
+    {
+      function: {
+        source: 'shared-runtime',
+        importSpecifierName: 'useSpecialEffect',
+      },
+      numRequiredArgs: 2,
+    },
+  ],
 };
 
 /**

compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts

@@ -8,7 +8,6 @@ import {
   HIRFunction,
   IdentifierId,
   Instruction,
-  isUseEffectHookType,
   makeInstructionId,
   TInstruction,
   InstructionId,
@@ -23,20 +22,33 @@ import {
   markInstructionIds,
 } from '../HIR/HIRBuilder';
 import {eachInstructionOperand, eachTerminalOperand} from '../HIR/visitors';
+import {getOrInsertWith} from '../Utils/utils';
 
 /**
  * Infers reactive dependencies captured by useEffect lambdas and adds them as
  * a second argument to the useEffect call if no dependency array is provided.
  */
-export function inferEffectDependencies(
-  env: Environment,
-  fn: HIRFunction,
-): void {
+export function inferEffectDependencies(fn: HIRFunction): void {
   let hasRewrite = false;
   const fnExpressions = new Map<
     IdentifierId,
     TInstruction<FunctionExpression>
   >();
+
+  const autodepFnConfigs = new Map<string, Map<string, number>>();
+  for (const effectTarget of fn.env.config.inferEffectDependencies!) {
+    const moduleTargets = getOrInsertWith(
+      autodepFnConfigs,
+      effectTarget.function.source,
+      () => new Map<string, number>(),
+    );
+    moduleTargets.set(
+      effectTarget.function.importSpecifierName,
+      effectTarget.numRequiredArgs,
+    );
+  }
+  const autodepFnLoads = new Map<IdentifierId, number>();
+
   const scopeInfos = new Map<
     ScopeId,
     {pruned: boolean; deps: ReactiveScopeDependencies; hasSingleInstr: boolean}
@@ -74,15 +86,23 @@ export function inferEffectDependencies(
           lvalue.identifier.id,
           instr as TInstruction<FunctionExpression>,
         );
+      } else if (
+        value.kind === 'LoadGlobal' &&
+        value.binding.kind === 'ImportSpecifier'
+      ) {
+        const moduleTargets = autodepFnConfigs.get(value.binding.module);
+        if (moduleTargets != null) {
+          const numRequiredArgs = moduleTargets.get(value.binding.imported);
+          if (numRequiredArgs != null) {
+            autodepFnLoads.set(lvalue.identifier.id, numRequiredArgs);
+          }
+        }
       } else if (
         /*
-         * This check is not final. Right now we only look for useEffects without a dependency array.
-         * This is likely not how we will ship this feature, but it is good enough for us to make progress
-         * on the implementation and test it.
+         * TODO: Handle method calls
          */
         value.kind === 'CallExpression' &&
-        isUseEffectHookType(value.callee.identifier) &&
-        value.args.length === 1 &&
+        autodepFnLoads.get(value.callee.identifier.id) === value.args.length &&
         value.args[0].kind === 'Identifier'
       ) {
         const fnExpr = fnExpressions.get(value.args[0].identifier.id);
@@ -132,7 +152,7 @@ export function inferEffectDependencies(
             loc: GeneratedSource,
           };
 
-          const depsPlace = createTemporaryPlace(env, GeneratedSource);
+          const depsPlace = createTemporaryPlace(fn.env, GeneratedSource);
           depsPlace.effect = Effect.Read;
 
           newInstructions.push({
@@ -142,8 +162,8 @@ export function inferEffectDependencies(
             value: deps,
           });
 
-          // Step 2: insert the deps array as an argument of the useEffect
-          value.args[1] = {...depsPlace, effect: Effect.Freeze};
+          // Step 2: push the inferred deps array as an argument of the useEffect
+          value.args.push({...depsPlace, effect: Effect.Freeze});
           rewriteInstrs.set(instr.id, newInstructions);
         }
       }

compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts

@@ -6,7 +6,6 @@
  */
 
 import {
-  ArrayPattern,
   BlockId,
   HIRFunction,
   Identifier,
@@ -184,29 +183,28 @@ function rewriteInstruction(instr: Instruction, state: State): void {
     switch (instr.value.lvalue.pattern.kind) {
       case 'ArrayPattern': {
         /*
-         * For arrays, we can only eliminate unused items from the end of the array,
-         * so we iterate from the end and break once we find a used item. Note that
-         * we already know at least one item is used, from the pruneableValue check.
+         * For arrays, we can prune items prior to the end by replacing
+         * them with a hole. Items at the end can simply be dropped.
          */
-        let nextItems: ArrayPattern['items'] | null = null;
-        const originalItems = instr.value.lvalue.pattern.items;
-        for (let i = originalItems.length - 1; i >= 0; i--) {
-          const item = originalItems[i];
+        let lastEntryIndex = 0;
+        const items = instr.value.lvalue.pattern.items;
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
           if (item.kind === 'Identifier') {
-            if (state.isIdOrNameUsed(item.identifier)) {
-              nextItems = originalItems.slice(0, i + 1);
-              break;
+            if (!state.isIdOrNameUsed(item.identifier)) {
+              items[i] = {kind: 'Hole'};
+            } else {
+              lastEntryIndex = i;
             }
           } else if (item.kind === 'Spread') {
-            if (state.isIdOrNameUsed(item.place.identifier)) {
-              nextItems = originalItems.slice(0, i + 1);
-              break;
+            if (!state.isIdOrNameUsed(item.place.identifier)) {
+              items[i] = {kind: 'Hole'};
+            } else {
+              lastEntryIndex = i;
             }
           }
         }
-        if (nextItems !== null) {
-          instr.value.lvalue.pattern.items = nextItems;
-        }
+        items.length = lastEntryIndex + 1;
         break;
       }
       case 'ObjectPattern': {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md

@@ -16,7 +16,7 @@ function component() {
 import { c as _c } from "react/compiler-runtime";
 function component() {
   const $ = _c(1);
-  const [x, setX] = useState(0);
+  const [, setX] = useState(0);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const handler = (v) => setX(v);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.expect.md

@@ -35,8 +35,7 @@ function Component(props) {
   }
   let d;
   if ($[2] !== props.c) {
-    const [c, ...t0] = props.c;
-    d = t0;
+    [, ...d] = props.c;
     $[2] = props.c;
     $[3] = d;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.expect.md

@@ -24,7 +24,7 @@ function Component(props) {
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(2);
-  const [value, setValue] = useState(null);
+  const [, setValue] = useState(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = (e) => setValue((value_0) => value_0 + e.target.value);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-deps-custom-config.expect.md

@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {print, useSpecialEffect} from 'shared-runtime';
+
+function CustomConfig({propVal}) {
+  // Insertion
+  useSpecialEffect(() => print(propVal), [propVal]);
+  // No insertion
+  useSpecialEffect(() => print(propVal), [propVal], [propVal]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { print, useSpecialEffect } from "shared-runtime";
+
+function CustomConfig(t0) {
+  const $ = _c(7);
+  const { propVal } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== propVal) {
+    t1 = () => print(propVal);
+    t2 = [propVal];
+    $[0] = propVal;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useSpecialEffect(t1, t2, [propVal]);
+  let t3;
+  let t4;
+  let t5;
+  if ($[3] !== propVal) {
+    t3 = () => print(propVal);
+    t4 = [propVal];
+    t5 = [propVal];
+    $[3] = propVal;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useSpecialEffect(t3, t4, t5);
+}
+
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-deps-custom-config.js

@@ -0,0 +1,9 @@
+// @inferEffectDependencies
+import {print, useSpecialEffect} from 'shared-runtime';
+
+function CustomConfig({propVal}) {
+  // Insertion
+  useSpecialEffect(() => print(propVal), [propVal]);
+  // No insertion
+  useSpecialEffect(() => print(propVal), [propVal], [propVal]);
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies.expect.md

@@ -3,6 +3,8 @@
 
 ```javascript
 // @inferEffectDependencies
+import {useEffect, useRef} from 'react';
+
 const moduleNonReactive = 0;
 
 function Component({foo, bar}) {
@@ -45,6 +47,8 @@ function Component({foo, bar}) {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useRef } from "react";
+
 const moduleNonReactive = 0;
 
 function Component(t0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies.js

@@ -1,4 +1,6 @@
 // @inferEffectDependencies
+import {useEffect, useRef} from 'react';
+
 const moduleNonReactive = 0;
 
 function Component({foo, bar}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md

@@ -39,7 +39,7 @@ import { useState } from "react";
 
 function Component(props) {
   const $ = _c(1);
-  const [_state, setState] = useState();
+  const [, setState] = useState();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const a = () => b();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md

@@ -28,7 +28,7 @@ import { useCallback, useTransition } from "react";
 
 function useFoo() {
   const $ = _c(1);
-  const [t, start] = useTransition();
+  const [, start] = useTransition();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md

@@ -32,7 +32,7 @@ function Component(props) {
   const $ = _c(5);
   React.useContext(FooContext);
   const ref = React.useRef();
-  const [x, setX] = React.useState(false);
+  const [, setX] = React.useState(false);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md

@@ -61,8 +61,8 @@ import { useState } from "react";
 
 function Component(props) {
   const $ = _c(5);
-  const [x, setX] = useState(false);
-  const [y, setY] = useState(false);
+  const [, setX] = useState(false);
+  const [, setY] = useState(false);
   let setState;
   if (props.cond) {
     setState = setX;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.expect.md

@@ -52,8 +52,7 @@ function Component(props) {
   const { buttons } = props;
   let nonPrimaryButtons;
   if ($[0] !== buttons) {
-    const [primaryButton, ...t0] = buttons;
-    nonPrimaryButtons = t0;
+    [, ...nonPrimaryButtons] = buttons;
     $[0] = buttons;
     $[1] = nonPrimaryButtons;
   } else {