How to add a new prop to eject component in the TypeScript project

[jcubic]

When you swizzle you get JavaScript files. But the TypeScript definition is fixed so you can't add a new prop to the component when ejecting with swizzle. I want to add a theme prop to overwrite the default prism theme in the codeblock. I want a different theme for the Home page.

const prismTheme = theme ?? usePrismTheme();

But when using:

import { themes as prismThemes } from 'prism-react-renderer';

<CodeBlock language="scheme" theme={prismThemes.github}>
  {example.code}
</CodeBlock>

I got an error that there is not a valid prop.

Is there a way to update the typeScript definition of the component that was ejected?

I've tried this (found in some closed issue):

npm run swizzle @docusaurus/theme-classic --typescript

But it doesn't work and ejected files are JavaScript files.

[slorber]

please create a repro of the problem and I'll show you a possible solution if I have one

[jcubic]

Here is a repro: https://codesandbox.io/p/devbox/fragrant-resonance-y7n9vp?file=%2Fsrc%2Fpages%2Findex.tsx

Note that you can't add --typescript to the swizzle command. But anyway, the option is ignored.

[slorber]

[jcubic]

It seems that every time you create a sandbox with docusaurs.new it's private.

Try now:
https://codesandbox.io/p/devbox/fragrant-resonance-y7n9vp?file=%2Fsrc%2Fpages%2Findex.tsx

[slorber]

To be honest I'm not a fan of the CodeSandbox UX lately, and only use StackBlitz now.

You can use TS interface declaration merging feature to "enhance" the existing theme props types and add yours. Normally all our theme components export a Props interface.

This compiles with:

declare module "@theme/CodeBlock" {
  export interface Props {
    readonly theme: PrismTheme;
  }
}

https://codesandbox.io/p/devbox/exciting-mountain-fmh3z6?file=%2Fsrc%2Fpages%2Findex.tsx%3A62%2C2&workspaceId=cfc1fcc6-71a5-4f69-aa36-2cb4bfd3697d

[jcubic]

Now your link gives 404. But it looks like this is what I need. Thanks.