Skip to content

🐛 BUG: Transformer can’t reliably parse your generic polymorphic props type with documentation #1159

@SalahAdDin

Description

@SalahAdDin

What version of @astrojs/compiler are you using?

3.0.1

What package manager are you using?

pnpm

What operating system are you using?

Linux, Windows

Describe the Bug

In our standard code rules, we use to interface strictly for components.
We are creating some polymorphic components and defining them as follows:

interface Props<Tag extends HTMLTag = "button" | "a"> extends Polymorphic<
  { as: Tag } & ButtonVariants
> {
  disabled?: boolean;
  fullWidth?: boolean;
  ariaLabel?: string;
}

const {
  as: Tag = "button",
  variant = "solid",
  size = "md",
  color = "primary",
  fullWidth = false,
  disabled = false,
  ariaLabel,
  href,
  class: className,
  ...rest
} = Astro.props as Props<typeof Tag>;

const classes = cn(
  buttonVariants({
    variant,
    size,
    color,
    fullWidth,
  }),
  disabled && "pointer-events-none",
  className,
  Tag === "button" && "cursor-pointer",
);
---

<Tag
  {...rest}
  href={Tag === "a" ? (disabled ? undefined : href) : undefined}
  disabled={Tag === "button" ? disabled || undefined : undefined}
  aria-disabled={Tag === "a" ? disabled || undefined : undefined}
  aria-label={ariaLabel}
  class={classes}
>
  <slot />
</Tag>

When we save this component, the Astro language server crashes with the following error:

There was an error transforming /home/LuisAlaguna/Projects/central-mosque-bogota/frontend/src/components/actions/Button/Button.astro to TSX. An empty file will be returned instead. Please create an issue: https://github.com/withastro/astro/issues
Error: TypeError: Cannot read properties of undefined (reading 'map').
panic: runtime error: slice bounds out of range [:15370] with capacity 1792

goroutine 6 [running]:
github.com/withastro/compiler/internal/js_scanner.GetPropsType({0x1622a00, 0x6a4, 0x700})
        github.com/withastro/compiler/internal/js_scanner/js_scanner.go:430 +0x11f
github.com/withastro/compiler/internal/printer.renderTsx(0x1413838, 0x150d760, 0x1413ab0)
        github.com/withastro/compiler/internal/printer/print-to-tsx.go:336 +0xc7
github.com/withastro/compiler/internal/printer.PrintToTSX({0x1622300, 0x6a4}, 0x150d760, {0x0, 0x0}, {{0x3c714, 0x6}, {0x17ea850, 0x6c}, {0x17ea850, ...}, ...}, ...)
        github.com/withastro/compiler/internal/printer/print-to-tsx.go:35 +0x12
main.main.ConvertToTSX.func3({{}, 0x7ff8000100000089, 0x17f5698}, {0x1434260, 0x2, 0x2})
        ./astro-wasm.go:293 +0xf
syscall/js.handleEvent()
        syscall/js/func.go:100 +0x23
exit code: 2

Then, the extension does not work.

What's the expected result?

It should be able to transform the component even using polymorphic generic types and interfaces in components.

We are following this documentation: https://docs.astro.build/en/guides/typescript/#polymorphic-type

As a result of the issue reported before, IA told us this; we tested it and we found that:

It is not related to --- in documentation, but the length of the docs:

import { cn } from "@utils/styles.utils";

/**
 * @component Button
 * @title Button
 * @description Semantic button component for actions and navigation.
 * Renders either a `<button>` or an `<a>` depending on the `href` prop and
 * exposes size, color, and variant controls via class-variance-authority.
 * @figmaUrl
 * @usage
 *
 * ```astro nocollapse
 * ---
 * import Button from "@components/actions/Button/Button.astro";
 * ---
 *
 * <Button>Click me</Button>
 * ```

 */

It does not fail, but:

/**
 * @component Button
 * @title Button
 * @description Semantic button component for actions and navigation.
 * Renders either a `<button>` or an `<a>` depending on the `href` prop and
 * exposes size, color, and variant controls via class-variance-authority.
 * @figmaUrl
 *
 * @preview
 *
 * @usage
 *
 * ```astro nocollapse
 * ---
 * import Button from "@components/actions/Button/Button.astro";
 * ---
 *
 * <Button>Click me</Button>
 * ```
 *
 * ## Link
 *
 * When `href` is provided the component renders as an anchor element.
 *
 * ```astro nocollapse
 * ---
 * import Button from "@components/actions/Button/Button.astro";
 * ---
 *
 * ```
 *
 */

It fails.

For DropdownItem.astro, only the following documentation works:

/**
 * @component DropdownItem
 * @title Dropdown Item
 * @description Focusable menu item used inside dropdown content. Renders as a `<button>` by default, or as an `<a>` via `as="a"`.
 *
 * @preview
 *
 * @usage
 *
 */

Actually, it is not clear where it is failing.

Link to Minimal Reproducible Example

https://github.com/SalahAdDin/central-mosque-bogota/tree/main/frontend

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageIssue needs to be triaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions