Skip to content

⬅️ Back to Table of Contents

📄 TryInPlayground

📊 Analysis Summary

Metric Count
🔧 Functions 1
📦 Imports 5
💠 JSX Elements 1

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/theme/MDXComponents/TryInPlayground.tsx

📦 Imports

Name Source
Link @docusaurus/Link
clsx clsx
React react
fileTypes ../../components/options
styles ./TryInPlayground.module.css

JSX Elements

Component Type Props Children
Link component className={clsx(styles.tryInPlaygroundLink, className)}, target="_blank", to=... {children}

Functions

TryInPlayground({ children, className, codeHash…: { children?: React.ReactNode; className…): React.ReactNode

Parameters:

  • { children, className, codeHash, eslintrcHash, language, } { children?: React.ReactNode; className?: string; codeHash?: string; eslintrcHash: string; language?: string; }

Returns: React.ReactNode

Calls:

  • params.set
  • fileLanguageRegExp.test
  • clsx (from clsx)
  • params.toString

Internal Comments: 

// iterating over sorted array, so the longer extensions will be matched first

Code 
export function TryInPlayground({
  children,
  className,
  codeHash,
  eslintrcHash,
  language,
}: {
  children?: React.ReactNode;
  className?: string;
  codeHash?: string;
  eslintrcHash: string;
  language?: string;
}): React.ReactNode {
  const params = new URLSearchParams({ eslintrc: eslintrcHash });
  if (codeHash) {
    params.set('code', codeHash);
  }
  if (language) {
    // iterating over sorted array, so the longer extensions will be matched first
    for (const [
      fileExtension,
      fileLanguageRegExp,
    ] of fileExtensionsSortedByLength) {
      if (fileLanguageRegExp.test(language)) {
        params.set('fileType', `.${fileExtension}`);
        break;
      }
    }
  }

  return (
    <Link
      className={clsx(styles.tryInPlaygroundLink, className)}
      target="_blank"
      to={`/play#${params.toString()}`}
    >
      {children}
    </Link>
  );
}

Generated by Syntax Scribe