Add toolbar with report-bug and copy-link actions (#510)

Co-authored-by: Masafumi Koba <[email protected]>

Author: jeddy3

src/components/copy-link.ts

@@ -0,0 +1,26 @@
+export type CopyLinkOptions = {
+	element: HTMLElement;
+};
+
+export function setupCopyLink({ element }: CopyLinkOptions) {
+	const button = document.createElement('button');
+	const buttonText = 'Copy link';
+
+	button.textContent = buttonText;
+	button.addEventListener('click', copy);
+	element.replaceChildren(button);
+
+	async function copy() {
+		try {
+			// eslint-disable-next-line n/no-unsupported-features/node-builtins
+			await navigator.clipboard.writeText(window.location.href);
+
+			button.textContent = 'Copied!';
+			setTimeout(() => {
+				button.textContent = buttonText;
+			}, 2000);
+		} catch {
+			// ignore
+		}
+	}
+}

src/components/deps-editor.ts

@@ -30,9 +30,12 @@ export async function setupDepsEditor({ element, listeners, init }: DepsEditorOp
 		useDiffEditor: false,
 	});
 
+	let installedPackages: PackageJsonData[] = [];
+
 	return {
 		...monacoEditor,
 		setPackages(packages: PackageJsonData[]) {
+			installedPackages = packages;
 			versionsPanel.innerHTML = '';
 
 			for (const pkg of packages) {
@@ -47,5 +50,8 @@ export async function setupDepsEditor({ element, listeners, init }: DepsEditorOp
 				versionsPanel.appendChild(li);
 			}
 		},
+		getPackages() {
+			return installedPackages;
+		},
 	};
 }

src/components/report.ts

@@ -0,0 +1,42 @@
+export type ReportOptions = {
+	element: HTMLElement;
+	getData: () => ReportData;
+};
+
+export type ReportData = {
+	config: string;
+	configFormat: string;
+	code: string;
+	fileName: string;
+	packages: { name: string; version: string }[];
+};
+
+export function setupReport({ element, getData }: ReportOptions) {
+	const link = element.querySelector('a');
+
+	if (link) {
+		link.addEventListener('click', () => {
+			const data = getData();
+			const url = new URL(link.href);
+
+			const codeLang = data.fileName.split('.').pop() ?? 'css';
+			const configLang = data.configFormat.split('.').pop() ?? 'mjs';
+
+			url.searchParams.set('reproduce-bug', `\`\`\`${codeLang}\n${data.code}\n\`\`\``);
+			url.searchParams.set(
+				'stylelint-configuration',
+				`\`\`\`${configLang}\n${data.config}\n\`\`\``,
+			);
+			url.searchParams.set('stylelint-run', `[Demo](${window.location.href})`);
+			url.searchParams.set(
+				'stylelint-version',
+				`\`\`\`json\n${JSON.stringify(
+					data.packages.reduce((acc, pkg) => ({ ...acc, [pkg.name]: pkg.version }), {}),
+					null,
+					2,
+				)}\n\`\`\``,
+			);
+			link.href = url.toString();
+		});
+	}
+}

src/demo.css

@@ -4,6 +4,7 @@
 	--sd-black-a-8: oklch(from var(--sd-black) l c h / 8%);
 	--sd-gray-20: oklch(20% 0 0deg);
 	--sd-gray-25: oklch(25% 0 0deg);
+	--sd-gray-35: oklch(35% 0 0deg);
 	--sd-gray-60: oklch(60% 0 0deg);
 	--sd-gray-90: oklch(90% 0 0deg);
 	--sd-gray-98: oklch(98% 0 0deg);
@@ -90,6 +91,27 @@
 		border-radius: 2px;
 		color: light-dark(initial, var(--sd-white));
 	}
+
+	button {
+		background: light-dark(var(--sd-white), var(--sd-gray-35));
+		border: 1px solid light-dark(var(--sd-gray-90), var(--sd-gray-60));
+		border-radius: 4px;
+		box-shadow: 0 2px 2px 0 light-dark(var(--sd-black-a-8), var(--sd-white-a-8));
+		color: light-dark(var(--sd-gray-60), var(--sd-gray-90));
+		cursor: pointer;
+		font-family: inherit;
+		padding-block: 0.125rem;
+		padding-inline: 0.5rem;
+
+		&:active {
+			box-shadow: none;
+			transform: translateY(1px);
+		}
+
+		&:hover {
+			color: light-dark(var(--sd-black), var(--sd-white));
+		}
+	}
 }
 
 @layer custom-elements {
@@ -101,7 +123,8 @@
 			'input-tabs' min-content
 			'inputs' 1fr
 			'output-tabs' min-content
-			'outputs' max(10rem, 33vb);
+			'outputs' max(10rem, 33vb)
+			'toolbar' min-content;
 
 		&:not(:has(input[data-radio-name='code']:checked)) sd-code,
 		&:not(:has(input[data-radio-name='config']:checked)) sd-config,
@@ -205,6 +228,7 @@
 
 	sd-outputs {
 		display: block;
+		grid-area: outputs;
 	}
 
 	sd-xterm-wrapper {
@@ -282,4 +306,15 @@
 			}
 		}
 	}
+
+	sd-toolbar {
+		background-color: light-dark(var(--sd-gray-98), var(--sd-gray-25));
+		display: flex;
+		gap: 1rem;
+		grid-area: toolbar;
+		padding-block: 0.5rem;
+		padding-inline: 1rem;
+		place-content: end;
+		place-items: center;
+	}
 }

src/demo.html

@@ -41,4 +41,14 @@
 		<sd-warnings></sd-warnings>
 		<sd-console><sd-xterm-wrapper></sd-xterm-wrapper></sd-console>
 	</sd-outputs>
+	<sd-toolbar>
+		<sd-report>
+			<a
+				href="https://github.com/stylelint/stylelint/issues/new?template=REPORT_A_BUG.yml"
+				target="_blank"
+				>Report a bug</a
+			>
+		</sd-report>
+		<sd-copy-link></sd-copy-link>
+	</sd-toolbar>
 </stylelint-demo>

src/demo.ts

@@ -10,8 +10,10 @@ import { loadMonaco } from './monaco-editor';
 import { setupCodeEditor } from './components/code-editor';
 import { setupConfigEditor } from './components/config-editor';
 import { setupConsoleOutput } from './components/console';
+import { setupCopyLink } from './components/copy-link';
 import { setupDepsEditor } from './components/deps-editor';
 import { setupLintServer } from './linter-service';
+import { setupReport } from './components/report';
 import { setupTabs } from './components/output-tabs';
 import { setupWarningsPanel } from './components/warnings';
 import type stylelint from 'stylelint';
@@ -104,7 +106,7 @@ export async function mount({ element, init, listeners }: MountOptions) {
 						config: value,
 					});
 				}),
-				onChangeFormat: debounce((format) => {
+				onChangeFormat: debounce(async (format) => {
 					onChangeValues({
 						configFormat: format,
 					});
@@ -120,11 +122,7 @@ export async function mount({ element, init, listeners }: MountOptions) {
 						return;
 					}
 
-					listeners?.onChange?.({
-						code: codeEditor.getLeftValue(),
-						fileName: codeEditor.getFileName(),
-						config: configEditor.getValue(),
-						configFormat: configEditor.getFormat(),
+					onChangeValues({
 						deps: value,
 					});
 
@@ -146,6 +144,21 @@ export async function mount({ element, init, listeners }: MountOptions) {
 		loadMonaco(),
 	]);
 
+	setupReport({
+		element: element.querySelector<HTMLElement>('sd-report')!,
+		getData: () => ({
+			config: configEditor.getValue(),
+			configFormat: configEditor.getFormat(),
+			code: codeEditor.getLeftValue(),
+			fileName: codeEditor.getFileName(),
+			packages: depsEditor.getPackages(),
+		}),
+	});
+
+	setupCopyLink({
+		element: element.querySelector<HTMLElement>('sd-copy-link')!,
+	});
+
 	const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 	const updateTheme = () => {
 		monaco.editor.setTheme(mediaQuery.matches ? 'vs-dark' : 'vs');
@@ -226,19 +239,22 @@ export async function mount({ element, init, listeners }: MountOptions) {
 		fileName = codeEditor.getFileName(),
 		config = configEditor.getValue(),
 		configFormat = configEditor.getFormat(),
+		deps = depsEditor.getValue(),
 	}: {
 		code?: string;
 		fileName?: string;
 		config?: string;
 		configFormat?: ConfigFormat;
+		deps?: string;
 	}) {
 		listeners?.onChange?.({
 			code,
 			fileName,
 			config,
 			configFormat,
-			deps: depsEditor.getValue(),
+			deps,
 		});
+
 		lint({
 			code,
 			fileName,