js-doc merging new properties into existing object type

15 views Asked by At

I am using material-ui in react project and I created some new button variants ribbon, ribbon-filled and ribbon-text in the theme like stated in their docs. I have written a custom react component that utilizes material-ui Button component. I have merged props received in this component with material UI's ButtonProps. In addition to merging, I also want to patch specific Material UI's object 'types' with new properties. Precisely, I want to add new variants to the Material UI's button variants. Here is the code for this component:

// CustomBtn.jsx
/**
 * @typedef {import("react").JSX.Element} ReactElement
 * @typedef {import("@mui/material").ButtonProps} MuiBtnProps
 */

/**
 * @typedef {object} MyBtnProps
 * @property {string} [title] - Title to show on floating menu
 * @property {string} [text] - Text to dispaly in the button
 * @property {(function | ReactElement)} renderMenu - The content to show on the floating Menu.
 * @property {function} [onClose] - Function called when menu closes
 *
 * @typedef {MuiBtnProps & MyBtnProps} MyCustomBtnProps
 */

/**
 * Renders Button with a controlled a floating menu
 * @param {MyCustomBtnProps} props
 * @returns {ReactElement}
 */
const CustomBtn = (props) => {
  const {
    text,
    renderMenu,
    title,
    onClose,
    children,
    ...rest
  } = props;

  const ariaDesc = "open-popup-menu";

  const handleTriggerMenu = () => {
    // ...
  };

  return (
    <>
      <Button
        aria-describedby={ariaDesc}
        variant="ribbon"
        onClick={handleTriggerMenu}
        size="small"
        {...rest}
      >
        {text || children}
      </Button>

      // Other code ...
    </>
  );
};

When using this custom button, intellisense works in VS Code. The problem I have is: Intellisense is only aware of variants coming from Material-ui, i.e my variants as stated above do not appear in suggestions:VS Code intellisense when using my CustomBtn

I have tried to modify MyBtnProps in the jsDoc comments like this:

// ...
/**
 * @typedef {object} MyBtnProps
 * @property {string} [title] - Title to show on floating menu
 * @property {string} [text] - Text to dispaly in the button
 * @property {("ribbon"|"ribbon-filled"|"ribbon-text")} [variant] - Button variant
 * @property {(Function | ReactElement)} renderMenu - The content to show on the floating Menu.
 * @property {function} [onClose] - Function called when menu closes
 *
 * @typedef {MuiBtnProps & MyBtnProps} MyCustomBtnProps
 */
// ...

The change made is: I added the line @property {("ribbon"|"ribbon-filled"|"ribbon-text")} [variant] - Button variant. I expected this to merge new variants given here with what Material UI has. Instead this resulted in me getting no intellisense at all(when utilizing my CustomBtn in another file).

Is there a way I can get my created variants to appear alongside Material UI's variants in VS Code intellisense?

Just to be clear, the project does not use Typescript. So using jsDoc comments to document components is a viable option.

0

There are 0 answers