Typescript / ESLint issues

[cjones26]

Hi,

I have a project configured with Typescript & ESLint (using AirBNB Typescript guide) and I am struggling to figure out how to get a simple example working properly. I am relatively new at utilizing Typescript, so please forgive an ignorance. The basic code I'm attempting to use looks like this:

import React from 'react';
import Highlight, { defaultProps, Language } from 'prism-react-renderer';

interface CodeBlockProps {
  children: string;
  className: string;
}

export default ({ children, className }: CodeBlockProps) => {
  // Pull the className
  const language: Language = className.replace(/language-/, '') || '';

  return (
    <Highlight {...defaultProps} code={children} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style }}>
          {tokens.map((line, index) => {
            const lineProps = getLineProps({ line, key: index });
            return (
              <div key={index} {...lineProps}>
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </div>
            );
          })}
        </pre>
      )}
    </Highlight>
  );
};

Unfortunately, this is not working properly, as I have the following ESLint issues:

I've tried resolving the first ESLint issue with the following code:

const language: Language | string = className.replace(/language-/, '') || '';

But this doesn't work either, as then a new error pops for the language prop in the Highlight component.

As for the react/jsx-props-no-spreading, I am guessing I can manually attempt to pass in the props instead of destructruing them, but I am worried this could break in future releases--should I just disable this rule for this file? I also don't know how I can handle this when using getTokenProps--I'm guessing a similar way, where I manually destructure the TokenOutputProps, but I am worried this also may break in the future.

I also have no idea how to fix the @typescript-eslint/no-shadow, as I believe the className is automatically going to be passed in from my MDXRenderer when I override the pre tag.

Finally, is there any other unique identifer for tokens in order to resolve the react/no-array-index-key issue?

I figure I could just disable ESLint and make this a JSX file, but I would really like to know the proper way to structure this file according to TS and ESLint standards.

Thanks!

[cjones26]

It seems this sample code was extremely outdated....I was able to get this all working properly with the following code (and only disabling react/no-array-index-key, which should be fine since there is not going to be any sorting / addition / removal):

/* eslint-disable react/no-array-index-key */
import React from 'react';
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
import dracula from 'prism-react-renderer/themes/dracula';

interface CodeBlockProps {
  children: {
    props: {
      children: string;
      className: string;
    };
  };
  className: string;
}

export default ({ children }: CodeBlockProps) => {
  // Pull the className
  const language: Language | string = children.props.className?.replace(/language-/, '') || '';

  return (
    <Highlight
      Prism={defaultProps.Prism}
      theme={dracula}
      code={children.props.children.trim()}
      language={language as Language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style }}>
          {tokens.map((line, index) => {
            const lineProps = getLineProps({ line, key: index });
            return (
              <div key={`item-${index}`} className={lineProps.className} style={lineProps.style}>
                {line.map((token, key) => {
                  const tokenProps = getTokenProps({ token, key });
                  return (
                    <span key={`line-${key}`} style={tokenProps.style} className={tokenProps.className}>
                      {tokenProps.children}
                    </span>
                  );
                })}
              </div>
            );
          })}
        </pre>
      )}
    </Highlight>
  );
};

I'm going to close this for now, but if anyone has any suggestion on a better way to do this, it would be greatly appreciated.

Thanks!