readd compiler explorer integration

Author: Tsche

README.md

@@ -41,6 +41,11 @@ Supported attributes are:
 
 - `compiler`: Compiler Explorer compiler ID, defaulting to `clang2110`.
 - `args`: arguments sent unchanged to Compiler Explorer.
+- `ce-url`: Compiler Explorer base URL, defaulting to `https://godbolt.org/`.
+- `ce-language`: language stored in the Compiler Explorer client state, defaulting to `c++`.
+- `ce-compiler`: override the linked Compiler Explorer compiler without changing Run.
+- `ce-options`: override the linked Compiler Explorer arguments without changing Run.
+- `ce-filters`: JSON object overriding Compiler Explorer output filters, such as `'{"intel":false,"demangle":true}'`.
 - `theme`: `auto`, `light`, or `dark`.
 - `debug`: show the basic/full editor and light/dark switches. These are hidden by default.
 - `width`: any valid CSS width for the complete block.
@@ -73,9 +78,33 @@ Supported attributes are:
 </script>
 ```
 
-Call `CodeBlocks.configure(options)` before a block is upgraded to set defaults for later blocks. The available options are `theme`, `showDebugControls`, `compiler`, `args`, `compilerExplorerUrl`, `editorOptions`, `styles`, and `onStatus`.
+Call `CodeBlocks.configure(options)` before a block is upgraded to set defaults for later blocks. The available options are `theme`, `showDebugControls`, `compiler`, `args`, `compilerExplorer`, `editorOptions`, `styles`, and `onStatus`.
+
+The Compiler Explorer link contains the active source, filename, compiler, arguments, and output filters in its `/clientstate/` URL. No upload or short-link request is needed. Client-state fields can be overridden globally or when creating an individual block:
+
+```js
+CodeBlocks.configure({
+  compilerExplorer: {
+    baseUrl: "https://godbolt.org/",
+    language: "c++",
+    compiler: "gsnapshot",
+    options: "-std=c++26 -O2",
+    filters: {
+      intel: false,
+      demangle: true,
+      commentOnly: false,
+    },
+    libs: [],
+    specialoutputs: [],
+    tools: [],
+    overrides: [],
+  },
+});
+```
+
+The legacy `compilerExplorerUrl` JavaScript option remains available as an alias for `compilerExplorer.baseUrl`.
 
-`CodeBlocks.get(element)` returns the upgraded block instance. It exposes `getValue`, `setValue`, `getTabs`, `selectTab`, `focus`, `run`, `setTheme`, `dispose`, `onDidChange`, `editorReady`, `monacoReady`, and `clangdReady`. `getValue` and `setValue` act on the active tab. `monacoReady` resolves to the underlying Monaco standalone editor for integrations that need the native editor API.
+`CodeBlocks.get(element)` returns the upgraded block instance. It exposes `getValue`, `setValue`, `getTabs`, `selectTab`, `getCompilerExplorerUrl`, `focus`, `run`, `setTheme`, `dispose`, `onDidChange`, `editorReady`, `monacoReady`, and `clangdReady`. `getValue` and `setValue` act on the active tab. `monacoReady` resolves to the underlying Monaco standalone editor for integrations that need the native editor API.
 
 Styling uses CSS custom properties. Common properties include:
 

public/index.html

@@ -26,7 +26,12 @@
     <main>
       <h1>C++ code blocks</h1>
       <p>Edit and run this example in your browser.</p>
-      <codeblock compiler="gsnapshot" args="-std=c++26 -freflection" debug>
+      <codeblock
+        compiler="gsnapshot"
+        args="-std=c++26 -freflection"
+        ce-filters='{"intel":false}'
+        debug
+      >
         <codeblock-tab name="main.cpp">
 #include &lt;print&gt;
 int main() {

src/codeblocks.css

@@ -134,6 +134,33 @@ codeblock,
 .codeblocks-root button:disabled { opacity: .65; cursor: wait; }
 .codeblocks-root a { color: var(--codeblocks-link); text-decoration: none; }
 .codeblocks-root a:hover { text-decoration: underline; }
+.codeblocks-root .codeblocks-compiler-link {
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
+  gap: 7px;
+  margin-left: auto;
+  border: 1px solid #57ae20;
+  border-radius: 5px;
+  padding: 5px 10px;
+  background: #67c52a;
+  color: #102600;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+.codeblocks-root .codeblocks-compiler-link:hover {
+  border-color: #71d832;
+  background: #71d832;
+  color: #0b1d00;
+  text-decoration: none;
+}
+.codeblocks-compiler-link svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
 .codeblocks-debug { display: inline-flex; gap: 8px; }
 .codeblocks-debug[hidden] { display: none; }
 .codeblocks-output {

src/codeblocks.ts

@@ -6,11 +6,39 @@ import "./codeblocks.css";
 
 export type CodeBlockTheme = "auto" | "light" | "dark";
 
+export interface CompilerExplorerFilters {
+  binary: boolean;
+  binaryObject: boolean;
+  commentOnly: boolean;
+  demangle: boolean;
+  directives: boolean;
+  execute: boolean;
+  intel: boolean;
+  labels: boolean;
+  libraryCode: boolean;
+  trim: boolean;
+  debugCalls: boolean;
+}
+
+export interface CompilerExplorerConfiguration {
+  baseUrl?: string;
+  language?: string;
+  compiler?: string;
+  options?: string;
+  filters?: Partial<CompilerExplorerFilters>;
+  libs?: unknown[];
+  specialoutputs?: string[];
+  tools?: unknown[];
+  overrides?: unknown[];
+}
+
 export interface CodeBlocksConfiguration {
   theme?: CodeBlockTheme;
   showDebugControls?: boolean;
   compiler?: string;
   args?: string;
+  compilerExplorer?: CompilerExplorerConfiguration;
+  /** @deprecated Use compilerExplorer.baseUrl. */
   compilerExplorerUrl?: string;
   editorOptions?: MonacoEditor.IStandaloneEditorConstructionOptions;
   styles?: Record<string, string>;
@@ -27,6 +55,7 @@ export interface CodeBlock {
   setValue(value: string): void;
   getTabs(): Array<{ name: string; value: string }>;
   selectTab(tab: string | number): void;
+  getCompilerExplorerUrl(): string;
   focus(): void;
   run(): Promise<void>;
   setTheme(theme: CodeBlockTheme): Promise<void>;
@@ -111,10 +140,10 @@ export function createCodeBlock(options: CreateCodeBlockOptions): CodeBlock {
   themeToggle.dataset.themeToggle = "";
   debugControls.append(editorToggle, themeToggle);
   const compilerLink = document.createElement("a");
-  compilerLink.href = options.compilerExplorerUrl ?? "https://compiler-explorer.com/";
+  compilerLink.className = "codeblocks-compiler-link";
   compilerLink.target = "_blank";
   compilerLink.rel = "noopener";
-  compilerLink.textContent = "Open in Compiler Explorer";
+  compilerLink.append("View on Compiler Explorer", externalLinkIcon());
   toolbar.append(runButton, debugControls, compilerLink);
 
   const outputDrawer = document.createElement("section");
@@ -157,6 +186,7 @@ export function createCodeBlock(options: CreateCodeBlockOptions): CodeBlock {
   let lastLoggedDownload = -1;
   const changeListeners = new Set<(value: string) => void>();
   let unsubscribeActive = fallback.onDidChange(notifyChange);
+  compilerLink.href = getCompilerExplorerUrl();
 
   let resolveClangd!: () => void;
   let rejectClangd!: (error: unknown) => void;
@@ -167,6 +197,9 @@ export function createCodeBlock(options: CreateCodeBlockOptions): CodeBlock {
   void clangdReady.catch(() => {});
 
   runButton.addEventListener("click", run);
+  compilerLink.addEventListener("click", updateCompilerExplorerLink);
+  compilerLink.addEventListener("pointerdown", updateCompilerExplorerLink);
+  compilerLink.addEventListener("focus", updateCompilerExplorerLink);
   editorToggle.addEventListener("click", toggleEditor);
   themeToggle.addEventListener("click", toggleTheme);
   const media = matchMedia("(prefers-color-scheme: dark)");
@@ -323,6 +356,18 @@ export function createCodeBlock(options: CreateCodeBlockOptions): CodeBlock {
     changeListeners.forEach((listener) => listener(value));
   }
 
+  function getCompilerExplorerUrl(): string {
+    return createCompilerExplorerUrl(
+      activeEditor.getValue(),
+      tabs[activeTab].name,
+      options,
+    );
+  }
+
+  function updateCompilerExplorerLink(): void {
+    compilerLink.href = getCompilerExplorerUrl();
+  }
+
   function selectTab(tab: string | number): void {
     const index = typeof tab === "number"
       ? tab
@@ -350,13 +395,17 @@ export function createCodeBlock(options: CreateCodeBlockOptions): CodeBlock {
       value: index === activeTab ? activeEditor.getValue() : tab.value,
     })),
     selectTab,
+    getCompilerExplorerUrl,
     focus: () => activeEditor.focus(),
     run,
     setTheme,
     dispose() {
       if (disposed) return;
       disposed = true;
       runButton.removeEventListener("click", run);
+      compilerLink.removeEventListener("click", updateCompilerExplorerLink);
+      compilerLink.removeEventListener("pointerdown", updateCompilerExplorerLink);
+      compilerLink.removeEventListener("focus", updateCompilerExplorerLink);
       editorToggle.removeEventListener("click", toggleEditor);
       themeToggle.removeEventListener("click", toggleTheme);
       media.removeEventListener("change", systemThemeChanged);
@@ -397,6 +446,10 @@ function upgradeWithin(root: ParentNode): void {
       showDebugControls: element.hasAttribute("debug") || configuration.showDebugControls,
       compiler: element.getAttribute("compiler") ?? configuration.compiler,
       args: element.getAttribute("args") ?? configuration.args,
+      compilerExplorer: compilerExplorerAttributes(
+        element,
+        configuration.compilerExplorer,
+      ),
     });
     instances.set(element, instance);
   }
@@ -429,6 +482,43 @@ function attributeTheme(element: HTMLElement): CodeBlockTheme | undefined {
   return value === "auto" || value === "light" || value === "dark" ? value : undefined;
 }
 
+function compilerExplorerAttributes(
+  element: HTMLElement,
+  configured: CompilerExplorerConfiguration | undefined,
+): CompilerExplorerConfiguration | undefined {
+  const baseUrl = element.getAttribute("ce-url");
+  const language = element.getAttribute("ce-language");
+  const compiler = element.getAttribute("ce-compiler");
+  const options = element.getAttribute("ce-options");
+  const filters = jsonAttribute<Partial<CompilerExplorerFilters>>(
+    element,
+    "ce-filters",
+  );
+  if (!configured && !baseUrl && !language && !compiler && !options && !filters) {
+    return undefined;
+  }
+  return {
+    ...configured,
+    ...(baseUrl && { baseUrl }),
+    ...(language && { language }),
+    ...(compiler && { compiler }),
+    ...(options && { options }),
+    filters: { ...configured?.filters, ...filters },
+  };
+}
+
+function jsonAttribute<T>(element: HTMLElement, name: string): T | undefined {
+  const value = element.getAttribute(name);
+  if (!value) return undefined;
+  try {
+    return JSON.parse(value) as T;
+  } catch (error) {
+    throw new SyntaxError(
+      `${name} must contain valid JSON: ${errorMessage(error)}`,
+    );
+  }
+}
+
 function button(label: string, secondary = false): HTMLButtonElement {
   const element = document.createElement("button");
   element.type = "button";
@@ -437,6 +527,21 @@ function button(label: string, secondary = false): HTMLButtonElement {
   return element;
 }
 
+function externalLinkIcon(): SVGSVGElement {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M9 2h5v5M14 2 7.5 8.5M12 9.5V14H2V4h4.5");
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", "currentColor");
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("stroke-width", "1.5");
+  svg.append(path);
+  return svg;
+}
+
 function resolveTheme(theme: CodeBlockTheme): "light" | "dark" {
   if (theme === "light" || theme === "dark") return theme;
   return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -481,6 +586,70 @@ function formatMegabytes(bytes: number): string {
   return (bytes / (1024 * 1024)).toFixed(1);
 }
 
+const DEFAULT_COMPILER_EXPLORER_FILTERS: CompilerExplorerFilters = {
+  binary: false,
+  binaryObject: false,
+  commentOnly: true,
+  demangle: true,
+  directives: true,
+  execute: false,
+  intel: true,
+  labels: true,
+  libraryCode: false,
+  trim: false,
+  debugCalls: false,
+};
+
+function createCompilerExplorerUrl(
+  source: string,
+  filename: string,
+  options: CreateCodeBlockOptions,
+): string {
+  const explorer = options.compilerExplorer ?? {};
+  const compiler = explorer.compiler ?? options.compiler ?? "clang2110";
+  const compilerOptions = explorer.options ?? options.args ??
+    "-std=c++2c -Wall -Wextra -pedantic-errors";
+  const state = {
+    sessions: [{
+      id: 1,
+      language: explorer.language ?? "c++",
+      source,
+      filename,
+      compilers: [{
+        id: compiler,
+        options: compilerOptions,
+        filters: {
+          ...DEFAULT_COMPILER_EXPLORER_FILTERS,
+          ...explorer.filters,
+        },
+        libs: explorer.libs ?? [],
+        specialoutputs: explorer.specialoutputs ?? [],
+        tools: explorer.tools ?? [],
+        overrides: explorer.overrides ?? [],
+      }],
+      executors: [],
+    }],
+    trees: [],
+  };
+  const baseUrl = new URL(
+    explorer.baseUrl ?? options.compilerExplorerUrl ?? "https://godbolt.org/",
+  );
+  if (!baseUrl.pathname.endsWith("/")) baseUrl.pathname += "/";
+  return new URL(`clientstate/${base64Url(JSON.stringify(state))}`, baseUrl).href;
+}
+
+function base64Url(value: string): string {
+  const bytes = new TextEncoder().encode(value);
+  let binary = "";
+  for (let offset = 0; offset < bytes.length; offset += 0x8000) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + 0x8000));
+  }
+  return btoa(binary)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
 interface CompilerLine { text: string }
 interface CompilerResult {
   didExecute: boolean;