Generic Components

[louiss0]

Body

Summary

I want for there to be support for passing in generic argument's inside components.

Background & Motivation

I recently found out that in Astro Generic arguments in components were not supported.

In other words you can't do.

<Component<number> value={5}  /> 

For this

type Props<T> = {
  value: T
}

I talked about this in this issue but instead. Nate said that this was not planned. I know that Astro components are not supposed to be serious components. But this limitation does not make them as useful as they could be.

Goals

• Allow developers to write generic components
• Make Astro more consistent with the JSX spec.

[lilnasy]

While explicitly passing the generic argument is not supported, you can allow the component to infer it using one of the props.

See the documentation for the Polymorphic for an example: https://docs.astro.build/en/guides/typescript/#polymorphic-type

I'm curious if there's a use case where this isn't sufficient.

[ringods]

@lilnasy I bumped into this conversation while investigating the following case.

I'm using the astro-nomy theme in which they use a single content collection named docs. There are references to this content collection in some of the components:

https://github.com/mickasmt/astro-nomy/blob/d958dfeee0d59d835cf28d75861c7da76c5b03fb/src/components/pager.astro#L8-L10

When trying to generalize this for more than one "documentation" content collection using the same schema, I ended up with this:

import type { CollectionEntry, CollectionKey } from "astro:content";
import type { DocsConfig } from "@/types";

type Props<C> = {
  slug: CollectionEntry<C extends CollectionKey>["slug"];
  docsConfig: DocsConfig;
};

My ask for a "generic" component is not to vary on the rendering, but to vary on which content collection it can accept.

A way to solve this is to refer to a type representing the schema of a content collection, rather than the collection itself.

Any help on my case is welcome.

[emilienbidet]

Hello @lilnasy, here is my use case to help you.

I built a Table astro element :

---
import TableHeader from "./table-header.astro";
import TableHead from "./table-head.astro";
import TableBody from "./table-body.astro";
import TableCell from "./table-cell.astro";
import TableRow from "./table-row.astro";

type TRow = {
  [key: string]: string;
};

interface THeader<T extends TRow> {
  key: keyof T;
  label: string;
}

interface Props<T extends TRow> {
  headers: THeader<T>[];
  rows: T[];
}

const { headers, rows } = Astro.props as Props<TRow>;

if (!headers || !rows) {
  throw new Error("Table component requires headers and rows");
}
---

<div class="rounded-md border bg-background">
  <div class="w-full overflow-auto">
    <table class="w-full text-sm">
      <TableHeader>
        <TableRow>
          {headers.map((header) => <TableHead>{header.label}</TableHead>)}
        </TableRow>
      </TableHeader>
      <TableBody>
        {
          rows.map((row) => (
            <TableRow>
              {headers.map((header) => (
                <TableCell>{row[header.key]}</TableCell>
              ))}
            </TableRow>
          ))
        }
        {
          rows.length === 0 && (
            <TableRow>
              <TableCell colspan={headers.length} class="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )
        }
      </TableBody>
    </table>
  </div>
</div>

And now I can't type it properly

---
import Table from "@/components/table.astro";
import { database, userTable } from "database";

const users = await database.select().from(userTable);
const headers = [
  {
    key: "name",
    label: "Name",
  },
  {
    key: "email",
    label: "Email",
  },
];
---
<Table headers={headers} rows={users} />

I got

Property 'headers' does not exist on type 'IntrinsicAttributes'.ts(2322)

[stefanoverna]

Exactly the same issue here... did someone managed to find a solution?

[kylecarhart]

Im trying to do this same sort of thing. Cant use interface Props with a generic 😭

interface Props<T extends string> {
  href: T;
  openInNewTab?: T extends `#${string}` ? never : boolean;
}

Attempting to use this component gives:

Property 'href' does not exist on type 'IntrinsicAttributes'.ts(2322)