@stainless-api/playgrounds 0.0.1-beta.0

package/src/codemirror/typescript/runner.ts

@@ -0,0 +1,396 @@
+/**
+ * @module
+ * This worker runs user code and handles environment setup, processes console logs,
+ * and implements the structured object logging api so users can expand and collapse
+ * logged objects.
+ */
+import { expose } from '../comlink.ts';
+import { createConsole } from './console.ts';
+import process from 'unenv/runtime/node/process/index';
+import { Entries, isProxy, specialInfo } from './special-info.ts';
+import type { Logger, Part } from '../../Logs.tsx';
+import { getSignature } from './get-signature.ts';
+
+// add the process polyfill to the global
+globalThis.process = process;
+// unenv uses a weird proxy thing for process.env, just use an object instead.
+globalThis.process.env = {};
+
+let hideSpecial = false;
+
+// WebIDL types like Request/Response/URL/etc. use getters and setters instead of value
+// properties, but we don't want to trigger user side effects when logging.
+// To fix this, keep a set of getters that are safe to call.
+const safeGetters = new Set(
+  Reflect.ownKeys(globalThis)
+    .map((e) => {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (globalThis as any)[e].prototype;
+      } catch {
+        // ignore errors
+      }
+    })
+    .filter((e) => e && e !== Function.prototype && e !== Object.prototype)
+    .flatMap((e) => Object.values(Object.getOwnPropertyDescriptors(e)))
+    .flatMap((e) => e?.get ?? []),
+);
+
+function* prototypeChain(
+  obj: object | ((..._: never[]) => unknown),
+): Generator<object | ((..._: never[]) => unknown)> {
+  while (obj) {
+    yield obj;
+    obj = Object.getPrototypeOf(obj);
+  }
+}
+
+type Properties = {
+  key: unknown;
+  configurable: boolean;
+  enumerable: boolean;
+  value: unknown;
+  get: unknown;
+  set: unknown;
+}[];
+
+async function properties(value: unknown): Promise<{
+  properties: Properties;
+  specials: { name: string; value: unknown }[];
+}> {
+  const specials = hideSpecial
+    ? []
+    : (await specialInfo(value)).map(({ name, value }) => ({
+        name,
+        value: value,
+      }));
+  const isObject = (typeof value === 'object' || typeof value === 'function') && value !== null;
+  if (isObject && isProxy(value)) {
+    return {
+      properties: [],
+      specials,
+    };
+  }
+  return {
+    properties: isObject
+      ? [
+          ...Reflect.ownKeys(value)
+            .map((key): Properties[number] | undefined => {
+              let desc: PropertyDescriptor | undefined;
+              try {
+                desc = Object.getOwnPropertyDescriptor(value, key);
+              } catch {
+                try {
+                  desc = {
+                    configurable: true,
+                    enumerable: true,
+                    value: Reflect.get(value, key, value),
+                  };
+                } catch {
+                  // ignore error
+                }
+              }
+              if (desc) {
+                return {
+                  key: key,
+                  configurable: !!desc.configurable,
+                  enumerable: !!desc.enumerable,
+                  value: desc.value,
+                  get: desc.get,
+                  set: desc.set,
+                };
+              }
+            })
+            .filter((e): e is Properties[number] => !!e),
+          ...[...prototypeChain(value)].flatMap((e) =>
+            Object.entries(Object.getOwnPropertyDescriptors(e)).flatMap(([k, v]) => {
+              try {
+                if (!safeGetters.has(v.get!)) return [];
+                const result = (value as unknown as Record<PropertyKey, unknown>)[k];
+                if (result instanceof Promise) {
+                  result.catch(() => {});
+                }
+                return {
+                  key: k,
+                  configurable: !!v.configurable,
+                  enumerable: !!v.enumerable,
+                  value: result,
+                  get: undefined,
+                  set: undefined,
+                };
+              } catch {
+                return [];
+              }
+            }),
+          ),
+        ]
+      : [],
+    specials,
+  };
+}
+async function inspect(value: unknown, color: boolean): Promise<Part> {
+  const literal = color ? 'color:var(--stl-color-green-foreground)' : '';
+  const object = color ? 'color:var(--stl-color-blue-foreground)' : '';
+  const dim = color ? 'color:var(--stl-color-foreground-reduced)' : '';
+  if (Entries.isEntries(value)) {
+    return {
+      value: [
+        {
+          value: `Entries`,
+          css: object,
+        },
+        {
+          value: ' { … }',
+          css: dim,
+        },
+      ],
+      css: '',
+      expandHandle: Handles.create(value),
+      id: id(value),
+    };
+  }
+  if (value === null || value === undefined) {
+    return {
+      value: value + '',
+      css: dim,
+    };
+  }
+  if (Object.is(value, -0)) return { value: '-0', css: literal };
+  if (typeof value === 'string') {
+    return { value: JSON.stringify(value), css: literal };
+  }
+  if (typeof value === 'bigint') {
+    return { value: value + 'n', css: literal };
+  }
+  switch (typeof value) {
+    case 'number':
+    case 'boolean':
+      return { value: value + '', css: literal };
+    case 'symbol':
+      return { value: `Symbol(${value.description})`, css: literal };
+    case 'function':
+      return {
+        value: getSignature(functionToString(value)),
+        css: object,
+        expandHandle: Handles.create(value),
+        id: id(value),
+        lowPriority: true,
+      };
+    default: {
+      const className = isProxy(value) ? 'Proxy' : objectToString(value).slice('[Object '.length, -1);
+      const err =
+        (void 0,
+        // @ts-expect-error not in our lib yet
+        Error.isError
+          ? // @ts-expect-error not in our lib yet
+            Error.isError(value)
+          : Object.prototype.toString.call(value) === '[object Error]');
+      return {
+        value: err
+          ? [
+              {
+                value: `${className}`,
+                css: object,
+              },
+              {
+                value: ': ',
+                css: dim,
+              },
+              await inspect((value as Error).message, color),
+            ]
+          : [
+              {
+                value: `${className}`,
+                css: object,
+              },
+              {
+                value: Array.isArray(value) ? ' [ … ]' : ' { … }',
+                css: dim,
+              },
+            ],
+        css: '',
+        expandHandle: Handles.create(value),
+        id: id(value),
+        lowPriority: err,
+      };
+    }
+  }
+}
+Object.defineProperty(globalThis, 'console', {
+  configurable: true,
+  writable: true,
+  value: createConsole(async (type, params?) => {
+    if (type === 'clear') {
+      logger!({ type });
+    } else {
+      logger!({
+        type,
+        parts: await Promise.all(
+          params.map(async (e) =>
+            typeof e === 'string'
+              ? { css: '', value: e }
+              : e.type === 'string'
+                ? {
+                    css: e.css,
+                    value: e.value + '',
+                  }
+                : inspect(e.value, true),
+          ),
+        ),
+      });
+    }
+  }),
+});
+export type Handle = string & { readonly _handle: unique symbol };
+const ids = new WeakMap<WeakKey, string>();
+const idsMap = new Map<unknown, string>();
+const id = (obj: unknown) => {
+  const cached = typeof obj === 'object' && obj !== null ? ids.get(obj) : idsMap.get(obj);
+  if (cached) return cached;
+  const id = crypto.randomUUID();
+  if (typeof obj === 'object' && obj !== null) {
+    ids.set(obj, id);
+  } else {
+    idsMap.set(obj, id);
+  }
+  return id;
+};
+class Handles {
+  static #handles: Record<string, unknown> = {};
+  static #freed = Symbol();
+  static create(value: unknown): Handle {
+    const handle = crypto.randomUUID() as Handle;
+    this.#handles[handle] = value;
+    return handle;
+  }
+  static deref(handle: Handle): unknown {
+    if (!Object.hasOwn(this.#handles, handle)) {
+      throw new TypeError('handle does not exist');
+    }
+    const value = this.#handles[handle];
+    if (value === this.#freed) throw new TypeError('handle was freed');
+    return value;
+  }
+  static free(handle: Handle) {
+    this.deref(handle); // ensure it exists
+    this.#handles[handle] = this.#freed;
+  }
+}
+const functionToString = Function.prototype.call.bind(Function.prototype.toString);
+const objectToString = Function.prototype.call.bind(Object.prototype.toString);
+addEventListener('unhandledrejection', async (e) => {
+  e.preventDefault();
+  logger({ type: 'error', parts: ['Uncaught (in promise) ', await inspect(e.reason, true)] });
+});
+
+let logger: Logger;
+const api = {
+  setLogger(logger_: Logger) {
+    logger = logger_;
+  },
+  async expandLogHandle(handle: string): Promise<Part[]> {
+    let value;
+    try {
+      value = Handles.deref(handle as Handle);
+    } catch {
+      return [];
+    }
+    if (Entries.isEntries(value)) {
+      return Promise.all(
+        value.value.map(async (e, i) => ({
+          css: '',
+          value: await Promise.all([
+            {
+              value: i + '',
+              css: 'color:var(--stl-color-foreground)',
+            },
+            { value: `: `, css: 'color:var(--stl-color-foreground-reduced)' },
+            ...(value.pairs && Array.isArray(e)
+              ? [
+                  inspect(e[0], true),
+                  {
+                    value: ` → `,
+                    css: 'color:var(--stl-color-foreground-reduced)',
+                  },
+                  inspect(e[1], true),
+                ]
+              : [inspect(e, true)]),
+          ]),
+        })),
+      );
+    }
+    const props = await properties(value);
+    const formatted: Promise<Part>[] = [
+      ...props.properties.map(async ({ get, set, key, value }): Promise<Part> => {
+        return {
+          value: await Promise.all([
+            typeof key === 'string' &&
+            (parseInt(key, 10) + '' === key ||
+              /(?=[$_\p{ID_Start}\\])[$_\u200C\u200D\p{ID_Continue}]+/u.test(key))
+              ? {
+                  value: key + '',
+                  css: 'color:var(--stl-color-foreground)',
+                }
+              : {
+                  ...(await inspect(key, false)),
+                  css: 'color:var(--stl-color-foreground)',
+                },
+            { value: `: `, css: 'color:var(--stl-color-foreground-reduced)' },
+            typeof get === 'function'
+              ? typeof set === 'function'
+                ? {
+                    value: '[Getter/Setter]',
+                    css: 'color:var(--stl-color-foreground-reduced)',
+                  }
+                : {
+                    value: '[Getter]',
+                    css: 'color:var(--stl-color-foreground-reduced)',
+                  }
+              : typeof set === 'function'
+                ? {
+                    value: '[Setter]',
+                    css: 'color:var(--stl-color-foreground-reduced)',
+                  }
+                : inspect(value, true),
+          ]),
+          css: '',
+        };
+      }),
+      ...props.specials.map(async (e): Promise<Part> => {
+        return {
+          value: await Promise.all([
+            {
+              value: `<${e.name}>: `,
+              css: 'color:var(--stl-color-foreground-reduced)',
+            },
+            { ...(await inspect(e.value, true)), lowPriority: true },
+          ]),
+          css: '',
+        };
+      }),
+    ];
+    return await Promise.all(formatted);
+  },
+  freeLogHandle(handle: string) {
+    try {
+      Handles.free(handle as Handle);
+    } catch {
+      // ignore error
+    }
+  },
+  setEnv(vars: Record<string, string>) {
+    Object.assign(process.env, vars);
+  },
+  async run(code: string, hideSpecial_ = false): Promise<void> {
+    try {
+      hideSpecial = hideSpecial_;
+      await import(
+        /* @vite-ignore */ 'data:text/javascript;charset=utf-8,' + encodeURIComponent(code) + '#' + Date.now()
+      );
+    } catch (error) {
+      logger({ type: 'error', parts: ['Uncaught (in promise) ', await inspect(error, true)] });
+    }
+  },
+};
+export type RunnerAPI = typeof api;
+expose(api);

package/src/codemirror/typescript/special-info.ts

@@ -0,0 +1,171 @@
+/**
+ * @module
+ * Exposes synthetic properties that are useful when logging objects.
+ * Supports
+ *  - Boxed primitive values
+ *  - Promise state
+ *  - Map/Set/MapLike/SetLike entries
+ *  - Proxy targets and handlers
+ */
+
+const specials: ((o: unknown, infos: { name: string; value: unknown }[]) => undefined)[] = [];
+for (const e of [Boolean, Date, Number, String, BigInt, Symbol]) {
+  const fn = Function.prototype.call.bind(e.prototype.valueOf);
+  specials.push((v, infos) => {
+    try {
+      infos.push({ name: 'primitive value', value: fn(v) });
+    } catch {
+      // ignore error (brand check failed, try next primitive)
+    }
+  });
+}
+const promisePrototypeThen = Function.prototype.call.bind(Promise.prototype.then);
+const promiseResolve = Promise.resolve.bind(Promise);
+specials.push((v, infos) => {
+  try {
+    let state: 'fulfilled' | 'rejected' | 'pending';
+    let value: unknown;
+    let reason: unknown;
+    promisePrototypeThen(
+      v,
+      (val: unknown) => {
+        if (state) return;
+        value = val;
+        state = 'fulfilled';
+      },
+      (err: unknown) => {
+        if (state) return;
+        reason = err;
+        state = 'rejected';
+      },
+    );
+    promisePrototypeThen(promiseResolve(), () => {
+      state ??= 'pending';
+      infos.push({ name: 'state', value: state });
+      if (state === 'rejected') {
+        infos.push({ name: 'reason', value: reason });
+      }
+      if (state === 'fulfilled') {
+        infos.push({ name: 'value', value: value });
+      }
+    });
+  } catch {
+    // ignore error (not a promise)
+  }
+});
+export class Entries {
+  #brand: undefined;
+  pairs: boolean;
+  value: unknown[];
+  constructor(pairs: boolean, value: unknown[]) {
+    this.pairs = pairs;
+    this.value = value;
+    this.#brand = undefined;
+  }
+  static isEntries(obj: unknown): obj is Entries {
+    return typeof obj === 'object' && obj !== null && #brand in obj;
+  }
+}
+for (const name of Object.getOwnPropertyNames(globalThis)) {
+  let entries, proto, pairs;
+  try {
+    proto = Object.getOwnPropertyDescriptor(globalThis, name)!.value?.prototype;
+    entries = proto?.forEach && (proto?.keys === proto?.values ? proto?.values : proto?.entries);
+    pairs = proto?.keys !== proto?.values;
+  } catch {
+    continue;
+  }
+  if (
+    typeof entries === 'function' &&
+    entries !== Array.prototype.entries &&
+    entries !== Uint8Array.prototype.entries
+  ) {
+    try {
+      const result = entries();
+      if ('then' in result) {
+        (result as Promise<unknown>).then(
+          () => {},
+          () => {},
+        );
+      }
+    } catch {
+      const fn = Function.prototype.call.bind(entries);
+      specials.push((v, infos) => {
+        try {
+          infos.push({
+            name: 'entries',
+            value: new Entries(pairs, [...fn(v)]),
+          });
+        } catch {
+          // ignore error (brand check failed)
+        }
+      });
+    }
+  }
+}
+const proxyMap = new WeakMap<object, { target: object; handler: ProxyHandler<object> }>();
+const realProxy = Proxy;
+const realRevocable = Proxy.revocable;
+realProxy.revocable = new realProxy(realRevocable, {
+  apply(_, { 0: target, 1: handler }) {
+    const result = realRevocable(target, handler);
+    proxyMap.set(result.proxy, { target, handler });
+    return result;
+  },
+});
+globalThis.Proxy = new realProxy(realProxy, {
+  construct(_, { 0: target, 1: handler }) {
+    const proxy = new realProxy(target, handler);
+    proxyMap.set(proxy, { target, handler });
+    return proxy;
+  },
+});
+specials.push((o, infos) => {
+  const proxyInfo = proxyMap.get(o as object);
+  if (proxyInfo) {
+    infos.push({ name: 'target', value: proxyInfo.target });
+    infos.push({ name: 'handler', value: proxyInfo.handler });
+  }
+});
+specials.push((o, infos) => {
+  Promise.resolve().then(() => {
+    if (!isProxy(o) && o !== null && o !== undefined) {
+      infos.push({ name: 'prototype', value: Object.getPrototypeOf(o) });
+    }
+  });
+});
+export const isProxy: (o: unknown) => boolean = proxyMap.has.bind(proxyMap) as (o: unknown) => boolean;
+Object.freeze(specials);
+export const specialInfo = (
+  v: unknown,
+): Promise<
+  {
+    name: string;
+    value: unknown;
+  }[]
+> => {
+  const infos: {
+    name: string;
+    value: unknown;
+  }[] = [];
+  for (let i = 0; i < specials.length; i++) {
+    specials[i]!(v, infos);
+  }
+  return Promise.resolve().then(() => infos);
+};
+/*
+console.log(await specialInfo(Promise.resolve(1)));
+console.log(await specialInfo(Promise.reject(1)));
+console.log(await specialInfo(new Promise(() => {})));
+console.log(await specialInfo(new Map([[1, 2], [3, 4]])));
+console.log(await specialInfo(new Set([1, 2, 3, 4])));
+console.log(await specialInfo(new FormData()));
+console.log(await specialInfo(new Headers({ a: "b" })));
+console.log(await specialInfo(new URLSearchParams("a=1")));
+console.log(await specialInfo(new Boolean()));
+console.log(await specialInfo(new Number()));
+console.log(await specialInfo(new String()));
+console.log(await specialInfo(Object(1n)));
+console.log(await specialInfo(Object(Symbol.iterator)));
+console.log(await specialInfo(new Proxy({}, {})));
+*/