Allow a component to accept is:raw from a type perspective | Astro Lounge | Page 1

mystic quest Jun 24, 2024, 10:21 PM

How do I allow the following component to be called with is:raw. Currently, Typescript is complaining that error ts(2322): Type '{ children: string; "is:raw": true; }' is not assignable to type 'IntrinsicAttributes & Props'.
Type '{ children: string; "is:raw": true; }' is missing the following properties from type 'Props': t, o

import katex, { KaTeXOptions } from "katex";
export interface Props {
t: string,
o: KaTeXOptions,
};
const slotcontent = await Astro.slots.render('default');
const { t = slotcontent, o = {} } = Astro.props as Props;
o.displayMode = false;
o.fleqn = true;

const html: string = katex.renderToString(t, o);

west windBOT Jun 24, 2024, 10:21 PM

Hi @mystic quest. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

The is:raw directive in Astro is used to instruct the Astro compiler to treat any children of that element as text, meaning that all special Astro templating syntax will be ignored inside of this component. This is useful when you want to prevent Astro from interpreting certain syntax within a component.

However, the is:raw directive is not a prop that can be passed to a component, and thus it cannot be included in the Props interface of a TypeScript component. The error you're seeing is because TypeScript is expecting the Props interface to include properties t and o, but instead it's receiving children and is:raw.

If you want to use is:raw with your component, you would use it in the component's usage, not in its definition. Here's an example:

<Katex is:raw>Some conflicting {syntax} here</Katex>

In this case, is:raw is not a prop being passed to the Katex component, but a directive telling Astro how to handle the children of the Katex component.

For more information, you can refer to the Astro documentation on the `is:raw` directive (https://docs.astro.build/en/reference/directives-reference/#israw).

#Allow a component to accept is:raw from a type perspective

const html: string = katex.renderToString(t, o);

For more information, you can refer to the Astro documentation on the `is:raw` directive (https://docs.astro.build/en/reference/directives-reference/#israw).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#Allow a component to accept is:raw from a type perspective

const html: string = katex.renderToString(t, o);

For more information, you can refer to the Astro documentation on the is:raw directive (https://docs.astro.build/en/reference/directives-reference/#israw).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on the `is:raw` directive (https://docs.astro.build/en/reference/directives-reference/#israw).