May 23, 2022 · May 6, 2022 · May 12, 2022 · May 17, 2022 · May 18, 2022
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx

 import useDebouncedToggle from './hooks/useDebouncedToggle';

 import { createMarkdown } from './lib/markdown';
 import { createMarkdown, createMarkdownParams } from './lib/markdown';

 import type { RuleDetails } from './types';

    }
    window
      .open(
        `https://github.com/typescript-eslint/typescript-eslint/issues/new?body=${encodeURIComponent(
 createMarkdown(state),
        `https://github.com/typescript-eslint/typescript-eslint/issues/new?${createMarkdownParams(
          state,
        )}`,
        '_blank',
      )
          </Tooltip>
        </button>
        <button className={styles.optionLabel} onClick={openIssue}>
          Report Issue
          ReportasIssue
          <CopyIcon />
        </button>
      </Expander>
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
    rules: {},
    tsConfig: {},
  });
  const {isDarkTheme } = useColorMode();
  const {colorMode } = useColorMode();
  const [esAst, setEsAst] = useState<TSESTree.Program | string | null>();
  const [tsAst, setTsAST] = useState<SourceFile | string | null>();
  const [scope, setScope] = useState<Record<string, unknown> | string | null>();
            jsx={state.jsx}
            code={state.code}
            tsConfig={state.tsConfig}
            darkTheme={isDarkTheme}
            darkTheme={colorMode === 'dark'}
            sourceType={state.sourceType}
            rules={state.rules}
            showAST={state.showAST}
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
 ): Error | SandboxServices | undefined => {
  const [services, setServices] = useState<Error | SandboxServices>();
  const [loadedTs, setLoadedTs] = useState<string>(props.ts);
  const {isDarkTheme } = useColorMode();
  const {colorMode } = useColorMode();

  useEffect(() => {
    if (props.ts !== loadedTs) {
          ts,
        );
        sandboxInstance.monaco.editor.setTheme(
 isDarkTheme ? 'vs-dark' : 'vs-light',
 colorMode === 'dark' ? 'vs-dark' : 'vs-light',
        );

        const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
diff --git a/packages/website/src/components/lib/markdown.ts b/packages/website/src/components/lib/markdown.ts
  return '';
 }

 export function genVersions(state: ConfigModel): string {
  return [
    '| package | version |',
    '| -- | -- |',
    `| \`@typescript-eslint/eslint-plugin\` | \`${process.env.TS_ESLINT_VERSION}\` |`,
    `| \`@typescript-eslint/parser\` | \`${process.env.TS_ESLINT_VERSION}\` |`,
    `| \`TypeScript\` | \`${state.ts}\` |`,
    `| \`ESLint\` | \`${process.env.ESLINT_VERSION}\` |`,
    `| \`node\` | \`web\` |`,
  ].join('\n');
 }

 export function createMarkdown(state: ConfigModel): string {
  return [
    '## Repro',
    `[Playground](${document.location.toString()})`,
    createSummary(state.code, 'Code', 'ts', 30),
    createSummaryJson(state.rules, 'rules', 'Eslint config'),
    createSummaryJson(state.tsConfig, 'compilerOptions', 'TypeScript config'),
    '## Expected Result\n',
    '## Actual Result\n',
    '## Additional Info\n',
    '## Versions',
    `| package                            | version |
 | ---------------------------------- | ------- |
 | \`@typescript-eslint/eslint-plugin\` | \`${process.env.TS_ESLINT_VERSION}\` |
 | \`@typescript-eslint/parser\`        | \`${process.env.TS_ESLINT_VERSION}\` |
 | \`TypeScript\`                       | \`${state.ts}\` |
 | \`ESLint\`                           | \`${process.env.ESLINT_VERSION}\` |
 | \`Env\`                              | \`web\` |`,
    genVersions(state),
  ]
    .filter(Boolean)
    .join('\n\n');
 }

 export function createMarkdownParams(state: ConfigModel): string {
  const params = {
    template: '1-bug-report-plugin.yaml',
    title: 'Bug: [rule name here] <short description of the issue>',
    'playground-link': document.location.toString(),
    'repro-code': state.code,
    'eslint-config':
      `module.exports = ` +
      JSON.stringify(
        { parser: '@typescript-eslint/parser', rules: state.rules },
        null,
        2,
      ),
    'typescript-config': JSON.stringify(
      { compilerOptions: state.tsConfig },
      null,
      2,
    ),
    versions: genVersions(state),
  };

  return new URLSearchParams(params).toString();
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,7 +12,7 @@ import CopyIcon from '@site/src/icons/copy.svg';

		import useDebouncedToggle from './hooks/useDebouncedToggle';

		import { createMarkdown } from './lib/markdown';
		import { createMarkdown, createMarkdownParams } from './lib/markdown';

		import type { RuleDetails } from './types';

Expand DownExpand Up		@@ -97,8 +97,8 @@ function OptionsSelector({
		}
		window
		.open(
		`https://github.com/typescript-eslint/typescript-eslint/issues/new?body=${encodeURIComponent(
		createMarkdown(state),
		`https://github.com/typescript-eslint/typescript-eslint/issues/new?${createMarkdownParams(
		state,
		)}`,
		'_blank',
		)
Expand DownExpand Up		@@ -202,7 +202,7 @@ function OptionsSelector({
		</Tooltip>
		</button>
		<button className={styles.optionLabel} onClick={openIssue}>
		Report Issue
		ReportasIssue
		<CopyIcon />
		</button>
		</Expander>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,7 +48,7 @@ function Playground(): JSX.Element {
		rules: {},
		tsConfig: {},
		});
		const {isDarkTheme } = useColorMode();
		const {colorMode } = useColorMode();
		const [esAst, setEsAst] = useState<TSESTree.Program \| string \| null>();
		const [tsAst, setTsAST] = useState<SourceFile \| string \| null>();
		const [scope, setScope] = useState<Record<string, unknown> \| string \| null>();
Expand DownExpand Up		@@ -83,7 +83,7 @@ function Playground(): JSX.Element {
		jsx={state.jsx}
		code={state.code}
		tsConfig={state.tsConfig}
		darkTheme={isDarkTheme}
		darkTheme={colorMode === 'dark'}
		sourceType={state.sourceType}
		rules={state.rules}
		showAST={state.showAST}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,7 +35,7 @@ export const useSandboxServices = (
		): Error \| SandboxServices \| undefined => {
		const [services, setServices] = useState<Error \| SandboxServices>();
		const [loadedTs, setLoadedTs] = useState<string>(props.ts);
		const {isDarkTheme } = useColorMode();
		const {colorMode } = useColorMode();

		useEffect(() => {
		if (props.ts !== loadedTs) {
Expand DownExpand Up		@@ -77,7 +77,7 @@ export const useSandboxServices = (
		ts,
		);
		sandboxInstance.monaco.editor.setTheme(
		isDarkTheme ? 'vs-dark' : 'vs-light',
		colorMode === 'dark' ? 'vs-dark' : 'vs-light',
		);

		const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,25 +29,50 @@ function createSummaryJson(
		return '';
		}

		export function genVersions(state: ConfigModel): string {
		return [
		'\| package \| version \|',
		'\| -- \| -- \|',
		`\| \`@typescript-eslint/eslint-plugin\` \| \`${process.env.TS_ESLINT_VERSION}\` \|`,
		`\| \`@typescript-eslint/parser\` \| \`${process.env.TS_ESLINT_VERSION}\` \|`,
		`\| \`TypeScript\` \| \`${state.ts}\` \|`,
		`\| \`ESLint\` \| \`${process.env.ESLINT_VERSION}\` \|`,
		`\| \`node\` \| \`web\` \|`,
		].join('\n');
		}

		export function createMarkdown(state: ConfigModel): string {
		return [
		'## Repro',
		`[Playground](${document.location.toString()})`,
		createSummary(state.code, 'Code', 'ts', 30),
		createSummaryJson(state.rules, 'rules', 'Eslint config'),
		createSummaryJson(state.tsConfig, 'compilerOptions', 'TypeScript config'),
		'## Expected Result\n',
		'## Actual Result\n',
		'## Additional Info\n',
		'## Versions',
		`\| package \| version \|
		\| ---------------------------------- \| ------- \|
		\| \`@typescript-eslint/eslint-plugin\` \| \`${process.env.TS_ESLINT_VERSION}\` \|
		\| \`@typescript-eslint/parser\` \| \`${process.env.TS_ESLINT_VERSION}\` \|
		\| \`TypeScript\` \| \`${state.ts}\` \|
		\| \`ESLint\` \| \`${process.env.ESLINT_VERSION}\` \|
		\| \`Env\` \| \`web\` \|`,
		genVersions(state),
		]
		.filter(Boolean)
		.join('\n\n');
		}

		export function createMarkdownParams(state: ConfigModel): string {
		const params = {
		template: '1-bug-report-plugin.yaml',
		title: 'Bug: [rule name here] <short description of the issue>',
		'playground-link': document.location.toString(),
		'repro-code': state.code,
		'eslint-config':
		`module.exports = ` +
		JSON.stringify(
		{ parser: '@typescript-eslint/parser', rules: state.rules },
		null,
		2,
		),
		'typescript-config': JSON.stringify(
		{ compilerOptions: state.tsConfig },
		null,
		2,
		),
		versions: genVersions(state),
		};

		return new URLSearchParams(params).toString();
		}