fix(es/minifier): Don't inline functions used as arguments

[kdy1]

Description:

swc_ecma_minifier:

• Preserve a variable initialized with a function expression if it's used as an argument.

Related issue (if exists):

• swcMinify: true, spread props triggers child component re-mount vercel/next.js#33458

---

Investigation result

This is caused by the difference of the referential equality.

import { useCallback, useEffect, useState } from 'react'
import { jsx } from 'react/jsx-runtime'
import Form from '../components/Form';

function _defineProperty(obj, key, value) {
  return key in obj ? Object.defineProperty(obj, key, {
      value: value,
      enumerable: !0,
      configurable: !0,
      writable: !0
  }) : obj[key] = value, obj;
}

const Container = function (props) {
  return (0, jsx)(Form, function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = null != arguments[i] ? arguments[i] : {},
        ownKeys = Object.keys(source);
      "function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }))), ownKeys.forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    }
    return target;
  }({}, props));
};

export default function PageWithSpread() {
  const [text, setText] = useState('');

  const handleChange = useCallback((e) => {
    setText(e.target.value);
  }, []);

  

  return (
    <Container
      onChange={handleChange}
      value={text}
    />
  )
}

works properly, but

import { useCallback, useEffect, useState } from 'react'
import { jsx } from 'react/jsx-runtime'
import Form from '../components/Form';

function _defineProperty(obj, key, value) {
  return key in obj ? Object.defineProperty(obj, key, {
      value: value,
      enumerable: !0,
      configurable: !0,
      writable: !0
  }) : obj[key] = value, obj;
}

export default function PageWithSpread() {
  const [text, setText] = useState('');

  const handleChange = useCallback((e) => {
    setText(e.target.value);
  }, []);

  const Container = function (props) {
    return (0, jsx)(Form, function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = null != arguments[i] ? arguments[i] : {},
          ownKeys = Object.keys(source);
        "function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
        }))), ownKeys.forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      }
      return target;
    }({}, props));
  };

  return (
    <Container
      onChange={handleChange}
      value={text}
    />
  )
}

errors.

Only difference is the const Container