@stainless-api/playgrounds 0.0.1-beta.0

package/src/codemirror/curl.ts

@@ -0,0 +1,108 @@
+import runnerWorkerURL from './typescript/runner?worker&url';
+import * as Comlink from './comlink';
+import type { Language } from './react';
+import { proxy, type Remote } from './comlink';
+import type { Logger } from '../Logs';
+import type { RunnerAPI } from './typescript/runner';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { StreamLanguage } from '@codemirror/language';
+
+export async function createCurl(signal: AbortSignal, doc: string): Promise<Language> {
+  const { SandboxWorker } = await import('../sandbox-worker/index.js');
+  const { toJavaScript } = await import('./curl/curlconverter.vendor.js');
+  let runnerWorker: Worker;
+  let runnerAPI: Remote<RunnerAPI>;
+  const startRunner = () => {
+    if (runnerWorker) {
+      runnerWorker.terminate();
+      runnerAPI[Comlink.releaseProxy]();
+    }
+    runnerWorker = new SandboxWorker(runnerWorkerURL);
+    runnerAPI = Comlink.wrap<RunnerAPI>(runnerWorker);
+    runnerAPI.setLogger(
+      proxy((...args) => {
+        logger(...args);
+      }),
+    );
+  };
+  startRunner();
+
+  let logger: Logger;
+  return {
+    transport: undefined,
+    fileName: 'playground.sh',
+    extensions: [StreamLanguage.define(shell)],
+    doc,
+    setLogger(fn) {
+      logger = (log) => {
+        if (log.type === 'clear') {
+          fn(log);
+        } else {
+          fn({
+            ...log,
+            type: log.type === 'log' ? 'stdout' : log.type,
+          });
+        }
+      };
+    },
+    async expandLogHandle(handle) {
+      return await runnerAPI.expandLogHandle(handle);
+    },
+    async freeLogHandle(handle) {
+      return await runnerAPI.freeLogHandle(handle);
+    },
+    async setEnv(vars) {
+      return await runnerAPI.setEnv(vars);
+    },
+    async run(code, signal) {
+      signal.addEventListener('abort', startRunner);
+      try {
+        const js = `
+        async function responseToCurl(res) {
+          const blob = await res.blob();
+          const bytes = new Uint8Array(await blob.arrayBuffer())
+          let text;
+          try {
+            text = new TextDecoder('utf-8', { fatal: true }).decode(bytes)
+          } catch {
+            text = '[output was binary: ' + URL.createObjectURL(blob) + ']'
+          }
+          const after = ['color:var(--stl-color-foreground-reduced)', '', res.status, res.statusText]
+          const headers = [\`%c< %cHTTP %s %s\`,
+            ...[...res.headers.entries()].map((e) => {
+              after.push('color:var(--stl-color-foreground-reduced)')
+              after.push('')
+              after.push(e[0])
+              after.push('color:var(--stl-color-foreground-reduced)')
+              after.push('color:var(--stl-color-green-foreground)')
+              after.push(e[1])
+              after.push('')
+              return "\\n%c< %c%s%c: %c%s%c"
+            })].join("")
+          try {
+            return [headers + '\\n%c< %c\\n\\n%o', ...after, 'color:var(--stl-color-foreground-reduced)', '', JSON.parse(text)]
+          } catch {
+            return [headers + '\\n%c< %c\\n\\n%s', ...after, 'color:var(--stl-color-foreground-reduced)', '', text]
+          }
+        };
+        await (async fetch => {${toJavaScript(code)}})(async (...args) => {
+          const req = new Request(...args)
+          console.log('%c>%c %s %c%s', 'color:var(--stl-color-foreground-reduced)', '', req.method, 'color:var(--stl-color-green-foreground)', req.url)
+          console.log(...await responseToCurl(await fetch(req)))
+        })`;
+        await runnerAPI.run(js, true);
+      } catch (e) {
+        if (signal.aborted) {
+          logger({ type: 'error', parts: ['Aborted.'] });
+          return;
+        }
+        throw e;
+      } finally {
+        signal.removeEventListener('abort', startRunner);
+      }
+    },
+    async format() {
+      throw new Error('todo');
+    },
+  };
+}

package/src/codemirror/deps.ts

@@ -0,0 +1,12 @@
+import './fix-lsp-markdown';
+export * as view from '@codemirror/view';
+export * as state from '@codemirror/state';
+export * as language from '@codemirror/language';
+export * as search from '@codemirror/search';
+export * as autocomplete from '@codemirror/autocomplete';
+export * as lint from '@codemirror/lint';
+export * as commands from '@codemirror/commands';
+export * as lsp from '@codemirror/lsp-client';
+export { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
+export { createLSPClient } from './lsp';
+export { shikiHighlighter } from './shiki';

package/src/codemirror/fix-lsp-markdown.ts

@@ -0,0 +1,50 @@
+import { LSPPlugin } from '@codemirror/lsp-client';
+import { Marked } from 'marked';
+import { sanitizeHTML } from './sanitize-html';
+import { highlighter } from './shiki';
+// @ts-expect-error TODO: make independent from stl-starlight
+import { HIGHLIGHT_THEMES } from 'virtual:stl-starlight-virtual-module';
+type MarkupKind = 'plaintext' | 'markdown';
+interface MarkupContent {
+  /**
+   * The type of the Markup
+   */
+  kind: MarkupKind;
+  /**
+   * The content itself
+   */
+  value: string;
+}
+function escHTML(text: string) {
+  return text.replace(/[\n<&]/g, (ch) => (ch == '\n' ? '<br>' : ch == '<' ? '&lt;' : '&amp;'));
+}
+
+const marked = new Marked({
+  walkTokens(token) {
+    if (token.type != 'code') return;
+    token.escaped = true;
+    token.text = highlighter.codeToHtml(token.text, {
+      lang: token.lang,
+      themes: HIGHLIGHT_THEMES ?? {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      structure: 'inline',
+    });
+  },
+});
+
+export function docToHTML(value: string | MarkupContent, defaultKind: MarkupKind = 'plaintext') {
+  let kind = defaultKind,
+    text = value;
+  if (typeof text != 'string') {
+    kind = text.kind;
+    text = text.value;
+  }
+  if (kind == 'plaintext') {
+    return escHTML(text);
+  } else {
+    return sanitizeHTML(marked.parse(text, { async: false }));
+  }
+}
+LSPPlugin.prototype.docToHTML = docToHTML;

package/src/codemirror/lsp.ts

@@ -0,0 +1,87 @@
+import type * as lsp from 'vscode-languageserver-protocol';
+import type { Transport } from '@codemirror/lsp-client';
+import { sanitizeHTML } from './sanitize-html';
+
+export interface WorkerTransportHooks {
+  onMessage?: (message: unknown) => void;
+  onSend?: (message: unknown) => unknown;
+}
+
+export interface WorkerTransportConfig {
+  worker: Worker;
+  hooks?: WorkerTransportHooks;
+}
+
+export function workerTransport({ worker, hooks = {} }: WorkerTransportConfig): Transport {
+  let handlers: ((value: string) => void)[] = [];
+
+  worker.onmessage = (e) => {
+    if (e.data.result?.items?.[0]?.sortText) {
+      e.data.result.items.forEach((e: { detail: string; sortText: string }) => {
+        const prevDetail = e.detail;
+        e.detail = '\0' + JSON.stringify({ detail: prevDetail, sortText: e.sortText });
+      });
+    }
+    hooks.onMessage?.(e.data);
+    const s = JSON.stringify(e.data);
+    for (const h of handlers) h(s);
+  };
+
+  return {
+    send(message: string) {
+      let j = JSON.parse(message);
+      if (hooks.onSend) {
+        const sent = hooks.onSend(j);
+        if (sent) {
+          j = sent;
+        } else {
+          return;
+        }
+      }
+      worker.postMessage(j);
+    },
+    subscribe(handler: (value: string) => void) {
+      handlers.push(handler);
+    },
+    unsubscribe(handler: (value: string) => void) {
+      handlers = handlers.filter((h) => h != handler);
+      if (handlers.length === 0) {
+        worker.terminate();
+      }
+    },
+  };
+}
+
+export interface LSPClientConfig {
+  rootUri: string;
+  onDiagnostics?: (diagnostics: lsp.Diagnostic[]) => void;
+  onNotification?: (method: string, params: unknown) => void;
+}
+
+export async function createLSPClient(
+  LSPClient: typeof import('@codemirror/lsp-client').LSPClient,
+  config: LSPClientConfig,
+  transport: Transport,
+) {
+  const { rootUri, onDiagnostics, onNotification } = config;
+
+  const client = new LSPClient({
+    rootUri,
+    unhandledNotification(_client: unknown, method: string, params: unknown) {
+      if (method === 'textDocument/publishDiagnostics' && onDiagnostics) {
+        const diagnosticsParams = params as lsp.PublishDiagnosticsParams;
+        onDiagnostics(diagnosticsParams.diagnostics);
+      } else if (onNotification) {
+        onNotification(method, params);
+      }
+    },
+    sanitizeHTML,
+  });
+  // @ts-expect-error accessing private field
+  client.timeout = 1000 * 60;
+  client.connect(transport);
+  await client.initializing;
+  // @ts-expect-error accessing private field
+  client.timeout = 3000;
+  return client;
+}

package/src/codemirror/python/anser.ts

@@ -0,0 +1,398 @@
+// This file was originally written by @drudru (https://github.com/drudru/ansi_up), MIT, 2011
+
+// Type definitions for Anser
+// Project: https://github.com/IonicaBizau/anser
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Anser {
+  type DecorationName =
+    | 'bold'
+    | 'dim'
+    | 'italic'
+    | 'underline'
+    | 'blink'
+    | 'reverse'
+    | 'hidden'
+    | 'strikethrough';
+
+  export interface AnserJsonEntry {
+    /** The text. */
+    content: string;
+    /** The foreground color. */
+    fg: string;
+    /** The background color. */
+    bg: string;
+    /** `true` if a carriageReturn \r was fount at end of line. */
+    clearLine: boolean;
+    /** The decoration last declared before the text. */
+    decoration: null | DecorationName;
+    /** All decorations that apply to the text. */
+    decorations: Array<DecorationName>;
+    /** `true` if the colors were processed, `false` otherwise. */
+    was_processed: boolean;
+  }
+
+  export interface AnserOptions {
+    clearLine?: boolean;
+  }
+}
+
+const ANSI_COLORS = [
+  [
+    {
+      color: 'light-dark(var(--stl-color-foreground), var(--stl-color-foreground-muted))',
+      class: 'ansi-black',
+    },
+    { color: 'var(--stl-color-red)', class: 'ansi-red' },
+    { color: 'var(--stl-color-green)', class: 'ansi-green' },
+    { color: 'var(--stl-color-yellow)', class: 'ansi-yellow' },
+    { color: 'var(--stl-color-blue)', class: 'ansi-blue' },
+    { color: 'var(--stl-color-purple)', class: 'ansi-magenta' },
+    { color: 'var(--stl-color-cyan)', class: 'ansi-cyan' },
+    { color: 'var(--stl-color-foreground-reduced)', class: 'ansi-white' },
+  ],
+  [
+    { color: 'var(--stl-color-foreground-reduced)', class: 'ansi-bright-black' },
+    { color: 'var(--stl-color-red)', class: 'ansi-bright-red' },
+    { color: 'var(--stl-color-green)', class: 'ansi-bright-green' },
+    {
+      color: 'var(--stl-color-yellow)',
+      class: 'ansi-bright-yellow',
+    },
+    { color: 'var(--stl-color-blue)', class: 'ansi-bright-blue' },
+    {
+      color: 'var(--stl-color-purple)',
+      class: 'ansi-bright-magenta',
+    },
+    { color: 'var(--stl-color-cyan)', class: 'ansi-bright-cyan' },
+    {
+      color: 'light-dark(var(--stl-color-foreground-muted), var(--stl-color-foreground))',
+      class: 'ansi-bright-white',
+    },
+  ],
+];
+
+class Anser {
+  fg: string | null;
+  bg: string | null;
+  decorations: Anser.DecorationName[];
+  PALETTE_COLORS?: string[];
+
+  /**
+   * Anser
+   * The `Anser` class.
+   *
+   * @name Anser
+   * @function
+   */
+  constructor() {
+    this.fg = this.bg = null;
+    this.decorations = [];
+  }
+
+  /**
+   * setupPalette
+   * Sets up the palette.
+   *
+   * @name setupPalette
+   * @function
+   */
+  setupPalette() {
+    this.PALETTE_COLORS = [];
+
+    // Index 0..15 : System color
+    for (let i = 0; i < 2; ++i) {
+      for (let j = 0; j < 8; ++j) {
+        this.PALETTE_COLORS.push(ANSI_COLORS[i]![j]!.color);
+      }
+    }
+
+    // Index 16..231 : RGB 6x6x6
+    // https://gist.github.com/jasonm23/2868981#file-xterm-256color-yaml
+    const levels = [0, 95, 135, 175, 215, 255];
+    const format = (r: number, g: number, b: number) =>
+      'rgb(' + levels[r] + ', ' + levels[g] + ', ' + levels[b] + ')';
+    for (let r = 0; r < 6; ++r) {
+      for (let g = 0; g < 6; ++g) {
+        for (let b = 0; b < 6; ++b) {
+          this.PALETTE_COLORS.push(format(r, g, b));
+        }
+      }
+    }
+
+    // Index 232..255 : Grayscale
+    let level = 8;
+    for (let i = 0; i < 24; ++i, level += 10) {
+      this.PALETTE_COLORS.push(format(level, level, level));
+    }
+  }
+
+  /**
+   * ansiToJson
+   * Converts ANSI input into HTML output.
+   *
+   * @name ansiToJson
+   * @function
+   * @param {String} txt The input text.
+   * @param {Object} options The options passed ot the `process` method.
+   * @returns {String} The JSON output.
+   */
+  ansiToJson(txt: string): Anser.AnserJsonEntry[] {
+    return this.process(txt, { clearLine: false }, true);
+  }
+
+  /**
+   * process
+   * Processes the input.
+   *
+   * @name process
+   * @function
+   * @param {String} txt The input text.
+   * @param {Object} options An object passed to `processChunk` method, extended with:
+   * @param {Boolean} markup
+   */
+  process(txt: string, options: Anser.AnserOptions, markup?: boolean): Anser.AnserJsonEntry[] {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    // eslint-disable-next-line no-control-regex
+    const raw_text_chunks = txt.split(/\x1B\[/);
+    const first_chunk = raw_text_chunks.shift()!; // the first chunk is not the result of the split
+
+    if (options === undefined || options === null) {
+      options = {};
+    }
+    options.clearLine = /\r/.test(txt); // check for Carriage Return
+    const color_chunks = raw_text_chunks.map((chunk) => this.processChunk(chunk, options, markup));
+
+    const first = self.processChunkJson('');
+    first.content = first_chunk;
+    first.clearLine = options.clearLine;
+    color_chunks.unshift(first);
+    return color_chunks;
+  }
+
+  /**
+   * processChunkJson
+   * Processes the current chunk into json output.
+   *
+   * @name processChunkJson
+   * @function
+   * @param {String} text The input text.
+   * @param {Object} options An object containing the following fields:
+   * @param {Boolean} markup If false, the colors will not be parsed.
+   * @return {Object} The result object:
+   *
+   *  - `content` (String): The text.
+   *  - `fg` (String|null): The foreground color.
+   *  - `bg` (String|null): The background color.
+   *  - `clearLine` (Boolean): `true` if a carriageReturn \r was fount at end of line.
+   *  - `was_processed` (Boolean): `true` if the colors were processed, `false` otherwise.
+   */
+  processChunkJson(text: string, options?: Anser.AnserOptions, markup?: boolean): Anser.AnserJsonEntry {
+    // Are we using classes or styles?
+    options = typeof options == 'undefined' ? {} : options;
+
+    const result: Anser.AnserJsonEntry = {
+      content: text,
+      fg: '',
+      bg: '',
+      clearLine: options.clearLine ?? false,
+      decoration: null,
+      decorations: [],
+      was_processed: false,
+    };
+
+    // Each "chunk" is the text after the CSI (ESC + "[") and before the next CSI/EOF.
+    //
+    // This regex matches four groups within a chunk.
+    //
+    // The first and third groups match code type.
+    // We supported only SGR command. It has empty first group and "m" in third.
+    //
+    // The second group matches all of the number+semicolon command sequences
+    // before the "m" (or other trailing) character.
+    // These are the graphics or SGR commands.
+    //
+    // The last group is the text (including newlines) that is colored by
+    // the other group"s commands.
+    const matches = text.match(/^([!\x3c-\x3f]*)([\d;]*)([\x20-\x2c]*[\x40-\x7e])([\s\S]*)/m);
+
+    if (!matches) return result;
+
+    result.content = matches[4]!;
+    const numbers = matches[2]!.split(';');
+
+    // We currently support only "SGR" (Select Graphic Rendition)
+    // Simply ignore if not a SGR command.
+    if (matches[1] !== '' || matches[3] !== 'm') {
+      return result;
+    }
+
+    if (!markup) {
+      return result;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+
+    while (numbers.length > 0) {
+      const num_str = numbers.shift()!;
+      const num = parseInt(num_str);
+
+      if (isNaN(num) || num === 0) {
+        self.fg = self.bg = null;
+        self.decorations = [];
+      } else if (num === 1) {
+        self.decorations.push('bold');
+      } else if (num === 2) {
+        self.decorations.push('dim');
+        // Enable code 2 to get string
+      } else if (num === 3) {
+        self.decorations.push('italic');
+      } else if (num === 4) {
+        self.decorations.push('underline');
+      } else if (num === 5) {
+        self.decorations.push('blink');
+      } else if (num === 7) {
+        self.decorations.push('reverse');
+      } else if (num === 8) {
+        self.decorations.push('hidden');
+        // Enable code 9 to get strikethrough
+      } else if (num === 9) {
+        self.decorations.push('strikethrough');
+        /**
+         * Add several widely used style codes
+         * @see https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_(Select_Graphic_Rendition)_parameters
+         */
+      } else if (num === 21) {
+        self.removeDecoration('bold');
+      } else if (num === 22) {
+        self.removeDecoration('bold');
+        self.removeDecoration('dim');
+      } else if (num === 23) {
+        self.removeDecoration('italic');
+      } else if (num === 24) {
+        self.removeDecoration('underline');
+      } else if (num === 25) {
+        self.removeDecoration('blink');
+      } else if (num === 27) {
+        self.removeDecoration('reverse');
+      } else if (num === 28) {
+        self.removeDecoration('hidden');
+      } else if (num === 29) {
+        self.removeDecoration('strikethrough');
+      } else if (num === 39) {
+        self.fg = null;
+      } else if (num === 49) {
+        self.bg = null;
+        // Foreground color
+      } else if (num >= 30 && num < 38) {
+        self.fg = ANSI_COLORS[0]![num % 10]!.color;
+        // Foreground bright color
+      } else if (num >= 90 && num < 98) {
+        self.fg = ANSI_COLORS[1]![num % 10]!.color;
+        // Background color
+      } else if (num >= 40 && num < 48) {
+        self.bg = ANSI_COLORS[0]![num % 10]!.color;
+        // Background bright color
+      } else if (num >= 100 && num < 108) {
+        self.bg = ANSI_COLORS[1]![num % 10]!.color;
+      } else if (num === 38 || num === 48) {
+        // extend color (38=fg, 48=bg)
+        const is_foreground = num === 38;
+        if (numbers.length >= 1) {
+          const mode = numbers.shift();
+          if (mode === '5' && numbers.length >= 1) {
+            // palette color
+            const palette_index = parseInt(numbers.shift()!);
+            if (palette_index >= 0 && palette_index <= 255) {
+              if (!this.PALETTE_COLORS) {
+                self.setupPalette();
+              }
+              if (is_foreground) {
+                self.fg = this.PALETTE_COLORS![palette_index]!;
+              } else {
+                self.bg = this.PALETTE_COLORS![palette_index]!;
+              }
+            }
+          } else if (mode === '2' && numbers.length >= 3) {
+            // true color
+            const r = parseInt(numbers.shift()!);
+            const g = parseInt(numbers.shift()!);
+            const b = parseInt(numbers.shift()!);
+            if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
+              const color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
+              if (is_foreground) {
+                self.fg = color;
+              } else {
+                self.bg = color;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    if (self.fg === null && self.bg === null && self.decorations.length === 0) {
+      return result;
+    } else {
+      result.fg = self.fg!;
+      result.bg = self.bg!;
+      result.decorations = self.decorations;
+      result.decoration = self.decorations.slice(-1).pop() || null;
+      result.was_processed = true;
+
+      return result;
+    }
+  }
+
+  /**
+   * processChunk
+   * Processes the current chunk of text.
+   *
+   * @name processChunk
+   * @function
+   * @param {String} text The input text.
+   * @param {Object} options An object containing the following fields:
+   *
+   *  - `json` (Boolean): If `true`, the result will be an object.
+   *  - `use_classes` (Boolean): If `true`, HTML classes will be appended to the HTML output.
+   *
+   * @param {Boolean} markup If false, the colors will not be parsed.
+   * @return {Object|String} The result (object if `json` is wanted back or string otherwise).
+   */
+  processChunk(text: string, options: Anser.AnserOptions, markup?: boolean): Anser.AnserJsonEntry {
+    options = options || {};
+    const jsonChunk = this.processChunkJson(text, options, markup ?? false);
+
+    // "reverse" decoration reverses foreground and background colors
+    jsonChunk.decorations = jsonChunk.decorations.filter((decoration) => {
+      if (decoration === 'reverse') {
+        // when reversing, missing colors are defaulted to black (bg) and white (fg)
+        if (!jsonChunk.fg) {
+          jsonChunk.fg = ANSI_COLORS[0]![7]!.color;
+        }
+        if (!jsonChunk.bg) {
+          jsonChunk.bg = ANSI_COLORS[0]![0]!.color;
+        }
+        const tmpFg = jsonChunk.fg;
+        jsonChunk.fg = jsonChunk.bg;
+        jsonChunk.bg = tmpFg;
+        return false;
+      }
+      return true;
+    });
+
+    return jsonChunk;
+  }
+
+  removeDecoration(decoration: Anser.DecorationName) {
+    const index = this.decorations.indexOf(decoration);
+
+    if (index >= 0) {
+      this.decorations.splice(index, 1);
+    }
+  }
+}
+
+export default Anser;