[unminify] improve jsxs unminify when main tag is a ternary

[0xdevalias]

Originally shared in #36 (comment)

Describe the bug

When attempting to unminify certain jsxs JSX code, I encountered an issue where the output does not correctly reflect the original structure. Specifically, a piece of code in module-63390.js seems to improperly handle the conditional selection of tags ("a" or "div").

Input code

Unminifying this source (Ref), and looking at module-63390.js

Reproduction

No response

Steps to reproduce

1. Unminify the source code (Ref) and inspect module-63390.js.
2. Observe the handling of the conditional tag selection, especially in the jsxs(url ? "a" : "div", {...}) part.

Expected behavior

Running it through ChatGPT, it suggested that a canonical way to implement that pattern would be to seperate the ternary out from the main JSX block into a 'helper tag', similar to this:

// Helper function for conditionally setting tag type
const Tag = url ? 'a' : 'div';

// Dynamic class names
const classNames = Z$0(
  "flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]",
  className
);

return (
    <Tag
      className={classNames}
      href={url}
      target={url ? "_blank" : ""}
      onClick={h}
    >
    //..snip..

Actual behavior

Source (unpacked)

// module-63390.js, lines 186-225
  return (0, o.jsxs)(r ? "a" : "div", {
    className: (0, l.Z)(
      "flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]",
      s
    ),
    href: r,
    target: r ? "_blank" : "",
    onClick: h,
    children: [
      c &&
        (0, o.jsx)(H, {
          children: (0, o.jsx)("div", {
            className: "absolute inset-0",
            children: (0, o.jsx)("img", {
              src: a,
              alt: "image of ".concat(n),
              className: "h-full w-full border-b border-black/10 object-cover",
            }),
          }),
        }),
      (0, o.jsxs)("div", {
        className: "flex flex-1 flex-col justify-between gap-1.5 p-3",
        children: [
          (0, o.jsx)(z, { $clamp: (void 0 !== u && u) || c, children: n }),
          (0, o.jsxs)("div", {
            className: "flex items-center gap-1",
            children: [
              i
                ? (0, o.jsx)(R.Z, { url: i, name: t, size: 13 })
                : (0, o.jsx)(U.Z, { url: r, size: 13 }),
              (0, o.jsx)("div", {
                className: "text-[10px] leading-3 text-gray-500 line-clamp-1",
                children: t,
              }),
            ],
          }),
        ],
      }),
    ],
  });

Transformed (unminified)

// module-63390.js, lines 213-252
return jsxs(url ? "a" : "div", {
    className: Z$0(
      "flex h-full w-full flex-col overflow-hidden rounded-md border border-black/10 bg-gray-50 shadow-[0_2px_24px_rgba(0,0,0,0.05)]",
      className
    ),
    href: url,
    target: url ? "_blank" : "",
    onClick: h,
    children: [
      c && (
        <H>
          {
            <div className="absolute inset-0">
              {
                <img
                  src={imageUrl}
                  alt={`image of ${title}`}
                  className="h-full w-full border-b border-black/10 object-cover"
                />
              }
            </div>
          }
        </H>
      ),
      <div className="flex flex-1 flex-col justify-between gap-1.5 p-3">
        <Z$2 $clamp={(mini !== undefined && mini) || c}>{title}</Z$2>
        <div className="flex items-center gap-1">
          {logoUrl ? (
            <R.Z url={logoUrl} name={t} size={13} />
          ) : (
            <U.Z url={url} size={13} />
          )}
          <div className="text-[10px] leading-3 text-gray-500 line-clamp-1">
            {t}
          </div>
        </div>
      </div>,
    ],
  });
}

While I haven't looked deeply into it, I suspect that perhaps this part that conditionally chooses which tag to use is possibly confusing the unminify?

jsxs(url ? "a" : "div", {

[0xdevalias]

@pionxzh Just checked this, works well, thanks! 🎉