@primer/react 38.30.0 → 38.30.1-rc.2d1806208

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.30.1
+
+### Patch Changes
+
+- [#8052](https://github.com/primer/react/pull/8052) [`a1b24cf`](https://github.com/primer/react/commit/a1b24cf3411566641aeb846e62069dc26505da6b) Thanks [@joshblack](https://github.com/joshblack)! - Heading, Link, Pagehead, Portal, and SideNav: Improve rendering performance with React Compiler support
+
 ## 38.30.0
 
 ### Minor Changes

package/dist/Heading/Heading.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React, { forwardRef } from 'react';
 import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
@@ -5,27 +6,76 @@ import classes from './Heading.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
-const Heading = /*#__PURE__*/forwardRef(({
-  as: Component = 'h2',
-  className,
-  variant,
-  ...props
-}, forwardedRef) => {
+const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(15);
+  let className;
+  let props;
+  let t1;
+  let variant;
+  if ($[0] !== t0) {
+    ({
+      as: t1,
+      className,
+      variant,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = variant;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    variant = $[4];
+  }
+  const Component = t1 === undefined ? "h2" : t1;
   const innerRef = React.useRef(null);
   const mergedRef = useMergedRefs(forwardedRef, innerRef);
-  useDevOnlyEffect(() => {
-    if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
-      // eslint-disable-next-line no-console
-      console.warn('This Heading component should be an instanceof of h1-h6');
-    }
-  }, [innerRef]);
-  return /*#__PURE__*/jsx(Component, {
-    className: clsx(className, classes.Heading),
-    "data-variant": variant,
-    "data-component": "Heading",
-    ...props,
-    ref: mergedRef
-  });
+  let t2;
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
+        console.warn("This Heading component should be an instanceof of h1-h6");
+      }
+    };
+    t3 = [innerRef];
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  useDevOnlyEffect(t2, t3);
+  let t4;
+  if ($[7] !== className) {
+    t4 = clsx(className, classes.Heading);
+    $[7] = className;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== Component || $[10] !== mergedRef || $[11] !== props || $[12] !== t4 || $[13] !== variant) {
+    t5 = /*#__PURE__*/jsx(Component, {
+      className: t4,
+      "data-variant": variant,
+      "data-component": "Heading",
+      ...props,
+      ref: mergedRef
+    });
+    $[9] = Component;
+    $[10] = mergedRef;
+    $[11] = props;
+    $[12] = t4;
+    $[13] = variant;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
 });
 Heading.displayName = 'Heading';
 

package/dist/Link/Link.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React from 'react';
 import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
@@ -7,34 +8,89 @@ import { jsx } from 'react/jsx-runtime';
 import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
 const UnwrappedLink = (props, ref) => {
-  const {
-    as: Component = 'a',
-    className,
-    inline,
-    muted,
-    hoverColor,
-    ...restProps
-  } = props;
+  const $ = c(19);
+  let className;
+  let hoverColor;
+  let inline;
+  let muted;
+  let restProps;
+  let t0;
+  if ($[0] !== props) {
+    ({
+      as: t0,
+      className,
+      inline,
+      muted,
+      hoverColor,
+      ...restProps
+    } = props);
+    $[0] = props;
+    $[1] = className;
+    $[2] = hoverColor;
+    $[3] = inline;
+    $[4] = muted;
+    $[5] = restProps;
+    $[6] = t0;
+  } else {
+    className = $[1];
+    hoverColor = $[2];
+    inline = $[3];
+    muted = $[4];
+    restProps = $[5];
+    t0 = $[6];
+  }
+  const Component = t0 === undefined ? "a" : t0;
   const innerRef = React.useRef(null);
   const mergedRef = useMergedRefs(ref, innerRef);
-  useDevOnlyEffect(() => {
-    if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
-      // eslint-disable-next-line no-console
-      console.error('Error: Found `Link` component that renders an inaccessible element', innerRef.current, 'Please ensure `Link` always renders as <a> or <button>');
-    }
-  }, [innerRef]);
-  return /*#__PURE__*/jsx(Component, {
-    className: clsx(className, classes.Link),
-    "data-component": "Link",
-    "data-muted": muted,
-    "data-inline": inline,
-    "data-hover-color": hoverColor,
-    ...restProps,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ref: mergedRef
-  });
+  let t1;
+  let t2;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
+        console.error("Error: Found `Link` component that renders an inaccessible element", innerRef.current, "Please ensure `Link` always renders as <a> or <button>");
+      }
+    };
+    t2 = [innerRef];
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t1 = $[7];
+    t2 = $[8];
+  }
+  useDevOnlyEffect(t1, t2);
+  let t3;
+  if ($[9] !== className) {
+    t3 = clsx(className, classes.Link);
+    $[9] = className;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const t4 = mergedRef;
+  let t5;
+  if ($[11] !== Component || $[12] !== hoverColor || $[13] !== inline || $[14] !== muted || $[15] !== restProps || $[16] !== t3 || $[17] !== t4) {
+    t5 = /*#__PURE__*/jsx(Component, {
+      className: t3,
+      "data-component": "Link",
+      "data-muted": muted,
+      "data-inline": inline,
+      "data-hover-color": hoverColor,
+      ...restProps,
+      ref: t4
+    });
+    $[11] = Component;
+    $[12] = hoverColor;
+    $[13] = inline;
+    $[14] = muted;
+    $[15] = restProps;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  return t5;
 };
-UnwrappedLink.displayName = "UnwrappedLink";
 const LinkComponent = fixedForwardRef(UnwrappedLink);
 const Link = Object.assign(LinkComponent, {
   displayName: 'Link'

package/dist/Pagehead/Pagehead.js

@@ -1,18 +1,52 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import classes from './Pagehead.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
-const Pagehead = ({
-  as: BaseComponent = 'div',
-  className,
-  ...rest
-}) => {
-  return /*#__PURE__*/jsx(BaseComponent, {
-    className: clsx(classes.Pagehead, className),
-    "data-component": "Pagehead",
-    ...rest
-  });
+const Pagehead = t0 => {
+  const $ = c(10);
+  let className;
+  let rest;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      as: t1,
+      className,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = rest;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    rest = $[2];
+    t1 = $[3];
+  }
+  const BaseComponent = t1 === undefined ? "div" : t1;
+  let t2;
+  if ($[4] !== className) {
+    t2 = clsx(classes.Pagehead, className);
+    $[4] = className;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== BaseComponent || $[7] !== rest || $[8] !== t2) {
+    t3 = /*#__PURE__*/jsx(BaseComponent, {
+      className: t2,
+      "data-component": "Pagehead",
+      ...rest
+    });
+    $[6] = BaseComponent;
+    $[7] = rest;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 };
-Pagehead.displayName = "Pagehead";
 
 export { Pagehead as default };

package/dist/SideNav.js

@@ -1,51 +1,122 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import classes from './SideNav.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 import Link from './Link/Link.js';
 
-function SideNav({
-  as: Component = 'nav',
-  variant = 'normal',
-  className,
-  bordered,
-  children,
-  'aria-label': ariaLabel
-}) {
-  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
-  const newClassName = clsx(classes.SideNav, classes[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {
-    [classes.SideNavBordered]: bordered
-  });
-  return /*#__PURE__*/jsx(Component, {
-    className: newClassName,
-    "aria-label": ariaLabel,
-    "data-component": "SideNav",
-    children: children
-  });
+function SideNav(t0) {
+  const $ = c(10);
+  const {
+    as: t1,
+    variant: t2,
+    className,
+    bordered,
+    children,
+    "aria-label": ariaLabel
+  } = t0;
+  const Component = t1 === undefined ? "nav" : t1;
+  const variant = t2 === undefined ? "normal" : t2;
+  const variantClassName = variant === "lightweight" ? "lightweight" : "normal";
+  const t3 = classes[`SideNavVariant--${variantClassName}`];
+  const t4 = `variant-${variantClassName}`;
+  let t5;
+  if ($[0] !== bordered || $[1] !== className || $[2] !== t3 || $[3] !== t4) {
+    t5 = clsx(classes.SideNav, t3, "sidenav", t4, className, {
+      [classes.SideNavBordered]: bordered
+    });
+    $[0] = bordered;
+    $[1] = className;
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const newClassName = t5;
+  let t6;
+  if ($[5] !== Component || $[6] !== ariaLabel || $[7] !== children || $[8] !== newClassName) {
+    t6 = /*#__PURE__*/jsx(Component, {
+      className: newClassName,
+      "aria-label": ariaLabel,
+      "data-component": "SideNav",
+      children: children
+    });
+    $[5] = Component;
+    $[6] = ariaLabel;
+    $[7] = children;
+    $[8] = newClassName;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
 }
-SideNav.displayName = "SideNav";
-const SideNavLink = ({
-  selected,
-  to,
-  variant,
-  className,
-  children,
-  ...rest
-}) => {
-  const isReactRouter = typeof to === 'string';
-  const newClassName = clsx(classes.SideNavLink, className, {
-    [classes.SideNavLinkFull]: variant === 'full'
-  });
-  // according to their docs, NavLink supports aria-current:
-  // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-  return /*#__PURE__*/jsx(Link, {
-    "aria-current": isReactRouter || selected ? 'page' : undefined,
-    className: newClassName,
-    ...rest,
-    "data-component": "SideNav.Link",
-    children: children
-  });
+const SideNavLink = t0 => {
+  const $ = c(15);
+  let children;
+  let className;
+  let rest;
+  let selected;
+  let to;
+  let variant;
+  if ($[0] !== t0) {
+    ({
+      selected,
+      to,
+      variant,
+      className,
+      children,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = selected;
+    $[5] = to;
+    $[6] = variant;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    selected = $[4];
+    to = $[5];
+    variant = $[6];
+  }
+  const isReactRouter = typeof to === "string";
+  const t1 = variant === "full";
+  let t2;
+  if ($[7] !== className || $[8] !== t1) {
+    t2 = clsx(classes.SideNavLink, className, {
+      [classes.SideNavLinkFull]: t1
+    });
+    $[7] = className;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const newClassName = t2;
+  const t3 = isReactRouter || selected ? "page" : undefined;
+  let t4;
+  if ($[10] !== children || $[11] !== newClassName || $[12] !== rest || $[13] !== t3) {
+    t4 = /*#__PURE__*/jsx(Link, {
+      "aria-current": t3,
+      className: newClassName,
+      ...rest,
+      "data-component": "SideNav.Link",
+      children: children
+    });
+    $[10] = children;
+    $[11] = newClassName;
+    $[12] = rest;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
 };
-SideNavLink.displayName = "SideNavLink";
 SideNavLink.displayName = 'SideNav.Link';
 /** @deprecated Use [NavList](https://primer.style/react/NavList) instead */
 var SideNav_default = Object.assign(SideNav, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.30.0",
+  "version": "38.30.1-rc.2d1806208",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",