shuding/nextra

`components` theme configuration to accept generic

Open

#1,978 opened on Jun 18, 2023

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (13,807 stars) (1,413 forks)user submission
enhancementgood first issue

Description

Hi 👋

Context

I would like to create a custom component to be reusable inside all the documentation 😍

type IframeProps = {
  url: string;
};

export const Iframe: FunctionComponent<IframeProps> = ({ url }) => {
  return <iframe src={url} allowFullScreen className={styles.main} />;
};

Problem

Regarding the following documentation 👀

Capture d’écran 2023-06-18 à 09 57 24

In the code, type is define as components?: Record<string, FC> | undefined; but it's a little bit to strict because we can't pass any additional props.

Cannot assign type 'FC<OptionTableProps>' to type 'FC'.
  Parameter types 'props' and 'props' are incompatible.
    Unable to assign type '{}' to type 'OptionTableProps'. ts(2322)

Proposal solution

What about the possibility to accept a generic to pass additional props ? Is there any side effect for this improvement ?

components?: Record<string, FC<T>> | undefined;

I could open a PR if needed to support 😇 Thanks for it 🙏

Contributor guide

Tech stack
typescriptreactnextjs
Domain
frontenddocumentationdeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScript genericsReactNextra project structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue proposes adding a generic type parameter to the `components` configuration in Nextra's theme. The current type is `components?: Record<string, FC> | undefined;` which is too restrictive. To implement, locate the type definition (likely in `packages/nextra/src/types.ts` or similar). The change would be to make the type generic: `components?: Record<string, FC<T>> | undefined;`. Consider side effects on theme component usage and ensure backward compatibility. No linked PRs or assignees, so first time contributors can pick this up.