@ttsc/playground 0.14.0-dev.20250530.1

package/src/react/ResultViewer.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Editor from "@monaco-editor/react";
+import { useEffect, useRef, useState } from "react";
+
+interface ResultViewerProps {
+  language: "typescript" | "javascript" | "json";
+  value: string;
+}
+
+/**
+ * Read-only Monaco pane used to render the compiled / transformed output
+ * with a copy button. Wraps `<Editor readOnly>` and adds the toast UI.
+ */
+export function ResultViewer({ language, value }: ResultViewerProps) {
+  const [copied, setCopied] = useState(false);
+  const copiedTimer = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copiedTimer.current !== null)
+        window.clearTimeout(copiedTimer.current);
+    },
+    [],
+  );
+
+  const onCopy = () => {
+    void navigator.clipboard.writeText(value);
+    setCopied(true);
+    if (copiedTimer.current !== null) window.clearTimeout(copiedTimer.current);
+    copiedTimer.current = window.setTimeout(() => {
+      setCopied(false);
+      copiedTimer.current = null;
+    }, 1500);
+  };
+
+  return (
+    <div className="relative h-full w-full">
+      {value && (
+        <button
+          onClick={onCopy}
+          className="absolute top-2 right-3 z-10 px-2 py-1 text-[10px] font-mono text-neutral-300 bg-neutral-900/80 border border-neutral-700 rounded-md hover:bg-neutral-800 transition-colors"
+        >
+          {copied ? "Copied ✓" : "Copy"}
+        </button>
+      )}
+      <Editor
+        height="100%"
+        language={language}
+        theme="vs-dark"
+        value={value}
+        path={`output.${
+          language === "typescript"
+            ? "ts"
+            : language === "javascript"
+              ? "js"
+              : "json"
+        }`}
+        options={{
+          readOnly: true,
+          tabSize: 2,
+          minimap: { enabled: false },
+          padding: { top: 12, bottom: 12 },
+          fontSize: 13,
+          fontFamily:
+            "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Consolas, monospace",
+          smoothScrolling: true,
+          scrollBeyondLastLine: false,
+          renderLineHighlight: "none",
+          wordWrap: "on",
+        }}
+      />
+    </div>
+  );
+}

package/src/react/SourceEditor.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import Editor, { type Monaco } from "@monaco-editor/react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { DEFAULT_PLAYGROUND_COMPILER_OPTIONS } from "../compiler/DEFAULT_PLAYGROUND_COMPILER_OPTIONS";
+import type { ISourceEditorProps } from "../structures/ISourceEditorProps";
+
+export function SourceEditor({
+  value,
+  onChange,
+  extraLibs,
+  path = "file:///src/playground.ts",
+}: ISourceEditorProps) {
+  const monacoRef = useRef<Monaco | null>(null);
+  const libDisposables = useRef<{ dispose(): void }[]>([]);
+  const allExtraLibs = useMemo(
+    () => (extraLibs ? Object.entries(extraLibs) : []),
+    [extraLibs],
+  );
+
+  const installExtraLibs = useCallback(
+    (monaco: Monaco) => {
+      for (const disposable of libDisposables.current) disposable.dispose();
+      libDisposables.current = [];
+      const tsd = monaco.languages.typescript.typescriptDefaults;
+      for (const [file, content] of allExtraLibs) {
+        libDisposables.current.push(tsd.addExtraLib(content, file));
+      }
+    },
+    [allExtraLibs],
+  );
+
+  useEffect(() => {
+    if (monacoRef.current) installExtraLibs(monacoRef.current);
+    return () => {
+      for (const disposable of libDisposables.current) disposable.dispose();
+      libDisposables.current = [];
+    };
+  }, [installExtraLibs]);
+
+  const handleMount = (_editor: unknown, monaco: Monaco) => {
+    monacoRef.current = monaco;
+    const tsd = monaco.languages.typescript.typescriptDefaults;
+    tsd.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ESNext,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      moduleResolution:
+        monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      esModuleInterop: DEFAULT_PLAYGROUND_COMPILER_OPTIONS.esModuleInterop,
+      strict: DEFAULT_PLAYGROUND_COMPILER_OPTIONS.strict,
+      experimentalDecorators:
+        DEFAULT_PLAYGROUND_COMPILER_OPTIONS.experimentalDecorators,
+      allowNonTsExtensions: true,
+      // External .d.ts packs (typia, etc.) routinely reference transitive types
+      // Monaco cannot reach (deep paths in JSDoc, optional peers). skipLibCheck
+      // keeps the editor lean by not type-checking the lib pack.
+      skipLibCheck: true,
+    });
+    tsd.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+      diagnosticCodesToIgnore: [
+        // 2307: Cannot find module — JSDoc-only stubbed deps still occasionally
+        //       leak through Monaco's module resolution.
+        2307,
+      ],
+    });
+    installExtraLibs(monaco);
+  };
+
+  return (
+    <Editor
+      height="100%"
+      defaultLanguage="typescript"
+      theme="vs-dark"
+      value={value}
+      onChange={(v) => onChange(v ?? "")}
+      onMount={handleMount}
+      path={path}
+      options={{
+        tabSize: 2,
+        minimap: { enabled: false },
+        padding: { top: 12, bottom: 12 },
+        fontSize: 13,
+        fontFamily:
+          "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Consolas, monospace",
+        smoothScrolling: true,
+        cursorBlinking: "smooth",
+        scrollBeyondLastLine: false,
+        renderLineHighlight: "line",
+        wordWrap: "on",
+      }}
+    />
+  );
+}

package/src/react/createCompilerClient.ts

@@ -0,0 +1,80 @@
+"use client";
+
+import { WorkerConnector } from "tgrid";
+
+import type { ICompilerService } from "../structures/ICompilerService";
+import type { ICreateCompilerClientOptions } from "../structures/ICreateCompilerClientOptions";
+
+/**
+ * UI-side singleton: connect to the playground worker over tgrid and return the
+ * typed `ICompilerService` driver.
+ *
+ * The promise is cached; the first call boots, every subsequent call shares the
+ * same connection. If the boot rejects the cache is cleared so the next call
+ * retries — otherwise every retry would resolve to the same rejection.
+ */
+export function createCompilerClient(options: ICreateCompilerClientOptions): {
+  connect(): Promise<ICompilerService>;
+  reset(): Promise<void>;
+} {
+  let connectionPromise: Promise<ICompilerService> | null = null;
+  // Track the active connector AND the in-flight connector promise so
+  // reset() can dispose either one — disposing only the resolved
+  // `activeConnector` leaks the connector when reset() is called during
+  // an in-flight `await connector.connect(...)` (the connector reference
+  // exists but isn't yet assigned to activeConnector).
+  let activeConnector: WorkerConnector<null, null, null> | null = null;
+  let pendingConnector: Promise<WorkerConnector<null, null, null>> | null =
+    null;
+
+  return {
+    connect(): Promise<ICompilerService> {
+      if (connectionPromise) return connectionPromise;
+      const connector: WorkerConnector<null, null, null> = new WorkerConnector(
+        null,
+        null,
+      );
+      const connectPromise = connector
+        .connect(options.workerUrl)
+        .then(() => connector);
+      pendingConnector = connectPromise;
+      connectionPromise = (async () => {
+        try {
+          await connectPromise;
+        } catch (err) {
+          connectionPromise = null;
+          if (pendingConnector === connectPromise) pendingConnector = null;
+          throw err;
+        }
+        if (pendingConnector === connectPromise) pendingConnector = null;
+        activeConnector = connector;
+        return connector.getDriver() as unknown as ICompilerService;
+      })();
+      return connectionPromise;
+    },
+    async reset(): Promise<void> {
+      const inflight = pendingConnector;
+      const active = activeConnector;
+      connectionPromise = null;
+      pendingConnector = null;
+      activeConnector = null;
+      // Swallow close errors: the worker is already being torn down,
+      // and a Retry that fails to close cleanly should not block the
+      // next connect attempt. Cover both code paths — the in-flight
+      // connector (await it first, then close) and the resolved active
+      // connector. Either may be null; both may be the same instance
+      // after a successful connect().
+      if (inflight) {
+        try {
+          const c = await inflight;
+          if (c !== active) await c.close().catch(() => {});
+        } catch {
+          // connect() rejected — nothing to close.
+        }
+      }
+      if (active) {
+        await active.close().catch(() => {});
+      }
+    },
+  };
+}

package/src/sandbox/createSandboxRequire.ts

@@ -0,0 +1,275 @@
+// CJS-flavored sandbox `require` over an in-memory pack of `.js` / `.json`
+// modules. Used by the playground Execute lane to run compiled JS in the
+// browser without round-tripping through a CDN.
+//
+// Resolution algorithm (minimal):
+//   - Bare specifier `typia/lib/X`:
+//       try `typia/lib/X.js`, then `typia/lib/X/index.js`, then honor the
+//       package's `exports` / `main` (read from <pkg>/package.json) before
+//       giving up.
+//   - Relative `./Y` / `../Y` (encountered when one pack module requires a
+//       sibling): resolved against the caller's pack key.
+//   - Bare `name` (no subpath): honors the package `main` field, falling back
+//       to `name/index.js`.
+//
+// Every successful load is cached so cyclic graphs settle. Module evaluation
+// wraps the source text in the standard CJS wrapper:
+//   (function(require, module, exports, __dirname, __filename, console) {...})
+
+interface IPackJson {
+  name?: string;
+  main?: string;
+  exports?: unknown;
+}
+
+interface ISandboxRequireOptions {
+  /** Console replacement injected into every sandbox module. */
+  console:
+    | Console
+    | typeof globalThis.console
+    | Record<string, (...args: unknown[]) => void>;
+}
+
+/**
+ * Build a sandboxed `require` function over a runtime pack. Resolves typia /
+ * `@typia/*` / randexp specifiers from the pack; throws on anything else so the
+ * caller sees the unsupported dependency.
+ */
+export function createSandboxRequire(
+  pack: Record<string, string>,
+  opts: ISandboxRequireOptions,
+): (specifier: string) => unknown {
+  type ModuleObj = { exports: unknown };
+  const cache = new Map<string, ModuleObj>();
+
+  const has = (key: string): boolean =>
+    Object.prototype.hasOwnProperty.call(pack, key);
+
+  const tryPaths = (...candidates: string[]): string | null => {
+    for (const c of candidates) if (has(c)) return c;
+    return null;
+  };
+
+  // Read package.json from pack and resolve via main/exports.
+  const resolvePackageEntry = (
+    pkg: string,
+    subpath: string | null,
+  ): string | null => {
+    const pjKey = `${pkg}/package.json`;
+    if (!has(pjKey)) return null;
+    let pj: IPackJson;
+    try {
+      pj = JSON.parse(pack[pjKey]!) as IPackJson;
+    } catch {
+      return null;
+    }
+    if (subpath === null) {
+      // bare "name": honor exports["."] → string, else main, else index.
+      const exportsAny = pj.exports;
+      if (typeof exportsAny === "object" && exportsAny !== null) {
+        const root = (exportsAny as Record<string, unknown>)["."];
+        const r = pickConditionalExport(root);
+        if (r) {
+          const resolved = `${pkg}/${stripDotSlash(r)}`;
+          return has(resolved) ? resolved : null;
+        }
+      }
+      if (typeof pj.main === "string") {
+        return tryPaths(
+          `${pkg}/${stripDotSlash(pj.main)}`,
+          `${pkg}/${stripDotSlash(pj.main)}.js`,
+          `${pkg}/${stripDotSlash(pj.main)}.cjs`,
+          `${pkg}/${stripDotSlash(pj.main)}.mjs`,
+          `${pkg}/${stripDotSlash(pj.main)}.json`,
+          `${pkg}/${stripDotSlash(pj.main)}/index.js`,
+          `${pkg}/${stripDotSlash(pj.main)}/index.cjs`,
+        );
+      }
+      return tryPaths(`${pkg}/index.js`, `${pkg}/index.cjs`);
+    }
+    // Subpath: honor exports["./subpath"] or exports["./subpath/*"] patterns.
+    const exportsAny = pj.exports;
+    if (typeof exportsAny === "object" && exportsAny !== null) {
+      const entries = exportsAny as Record<string, unknown>;
+      // Exact match first.
+      const exact = entries[`./${subpath}`];
+      const ex = pickConditionalExport(exact);
+      if (ex) {
+        const resolved = `${pkg}/${stripDotSlash(ex)}`;
+        if (has(resolved)) return resolved;
+      }
+      // Wildcard match.
+      for (const [pattern, target] of Object.entries(entries)) {
+        if (!pattern.endsWith("/*")) continue;
+        const prefix = pattern.slice(2, -1); // strip "./" and trailing "*"
+        if (!subpath.startsWith(prefix)) continue;
+        const rest = subpath.slice(prefix.length);
+        const targetStr = pickConditionalExport(target);
+        if (!targetStr) continue;
+        const resolved = `${pkg}/${stripDotSlash(targetStr.replace("*", rest))}`;
+        if (has(resolved)) return resolved;
+      }
+    }
+    return null;
+  };
+
+  // Resolve a specifier (with optional `fromKey` for relative imports) to a
+  // pack key, or null if unknown.
+  const resolveSpecifier = (
+    specifier: string,
+    fromKey: string | null,
+  ): string | null => {
+    if (specifier.startsWith("./") || specifier.startsWith("../")) {
+      if (!fromKey) return null;
+      const baseDir = dirname(fromKey);
+      const joined = posixJoin(baseDir, specifier);
+      return tryPaths(
+        joined,
+        `${joined}.js`,
+        `${joined}.cjs`,
+        `${joined}.mjs`,
+        `${joined}.json`,
+        `${joined}/index.js`,
+        `${joined}/index.cjs`,
+      );
+    }
+    // Bare specifier. Split into package name + subpath.
+    const { pkg, subpath } = splitBareSpecifier(specifier);
+    if (subpath === null) {
+      return resolvePackageEntry(pkg, null);
+    }
+    // First try direct paths (covers the common typia/lib/internal/X case).
+    const direct = tryPaths(
+      `${pkg}/${subpath}`,
+      `${pkg}/${subpath}.js`,
+      `${pkg}/${subpath}.cjs`,
+      `${pkg}/${subpath}.mjs`,
+      `${pkg}/${subpath}.json`,
+      `${pkg}/${subpath}/index.js`,
+      `${pkg}/${subpath}/index.cjs`,
+    );
+    if (direct) return direct;
+    // Fall back to package.json exports map.
+    return resolvePackageEntry(pkg, subpath);
+  };
+
+  const evaluate = (key: string): ModuleObj => {
+    const cached = cache.get(key);
+    if (cached) return cached;
+    const code = pack[key]!;
+    const mod: ModuleObj = { exports: {} };
+    // Cache before evaluation so cyclic requires see the partial exports.
+    cache.set(key, mod);
+    if (key.endsWith(".json")) {
+      mod.exports = JSON.parse(code) as unknown;
+      return mod;
+    }
+    const localRequire = (specifier: string): unknown => {
+      const resolved = resolveSpecifier(specifier, key);
+      if (!resolved) {
+        throw new Error(
+          `require("${specifier}") is not available in the playground sandbox (from ${key})`,
+        );
+      }
+      return evaluate(resolved).exports;
+    };
+    const filename = "/sandbox/" + key;
+    const dir = "/sandbox/" + dirname(key);
+    try {
+      const factory = new Function(
+        "require",
+        "module",
+        "exports",
+        "__dirname",
+        "__filename",
+        "console",
+        code,
+      ) as (
+        req: (s: string) => unknown,
+        m: ModuleObj,
+        e: Record<string, unknown>,
+        d: string,
+        f: string,
+        c: unknown,
+      ) => void;
+      factory(
+        localRequire,
+        mod,
+        mod.exports as Record<string, unknown>,
+        dir,
+        filename,
+        opts.console,
+      );
+    } catch (err) {
+      // Surface eval-time errors with context so debugging the sandbox is
+      // easier when typia ships a module that depends on something missing.
+      const message = err instanceof Error ? err.message : String(err);
+      throw new Error(`evaluating ${key}: ${message}`);
+    }
+    return mod;
+  };
+
+  return (specifier: string): unknown => {
+    const resolved = resolveSpecifier(specifier, null);
+    if (!resolved) {
+      throw new Error(
+        `require("${specifier}") is not available in the playground sandbox`,
+      );
+    }
+    return evaluate(resolved).exports;
+  };
+}
+
+function pickConditionalExport(value: unknown): string | null {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value as Record<string, unknown>;
+    // Prefer require (CJS) > default > node.
+    const pick = obj.require ?? obj.default ?? obj.node;
+    if (typeof pick === "string") return pick;
+    if (pick && typeof pick === "object") return pickConditionalExport(pick);
+  }
+  return null;
+}
+
+function stripDotSlash(p: string): string {
+  return p.startsWith("./") ? p.slice(2) : p;
+}
+
+function dirname(p: string): string {
+  const i = p.lastIndexOf("/");
+  return i < 0 ? "" : p.slice(0, i);
+}
+
+function posixJoin(base: string, rel: string): string {
+  const baseParts = base.split("/").filter(Boolean);
+  for (const seg of rel.split("/")) {
+    if (seg === "" || seg === ".") continue;
+    if (seg === "..") baseParts.pop();
+    else baseParts.push(seg);
+  }
+  return baseParts.join("/");
+}
+
+function splitBareSpecifier(specifier: string): {
+  pkg: string;
+  subpath: string | null;
+} {
+  // Handle @scope/name[/subpath]
+  if (specifier.startsWith("@")) {
+    const slash1 = specifier.indexOf("/");
+    if (slash1 < 0) return { pkg: specifier, subpath: null };
+    const slash2 = specifier.indexOf("/", slash1 + 1);
+    if (slash2 < 0) return { pkg: specifier, subpath: null };
+    return {
+      pkg: specifier.slice(0, slash2),
+      subpath: specifier.slice(slash2 + 1),
+    };
+  }
+  const slash = specifier.indexOf("/");
+  if (slash < 0) return { pkg: specifier, subpath: null };
+  return {
+    pkg: specifier.slice(0, slash),
+    subpath: specifier.slice(slash + 1),
+  };
+}

package/src/sandbox/loadTypiaRuntimePack.ts

@@ -0,0 +1,36 @@
+// Loads a CommonJS-style runtime pack for the playground's Execute sandbox.
+//
+// The pack JSON itself is built by the site (e.g. `pack-typia-runtime.cjs`
+// in the ttsc website) and served at a site-chosen URL. It mirrors the
+// layout the typia transform's emit references — `typia/lib/internal/*`,
+// `@typia/utils/lib/*`, etc. — so a bundle's `require("typia/lib/internal/X")`
+// resolves to the matching pack entry.
+
+const packCache = new Map<string, Promise<Record<string, string>>>();
+
+/**
+ * Fetches the prebuilt runtime pack once per URL. Re-entrant on the same
+ * in-flight promise. On rejection the cache entry is cleared so the next call
+ * retries — otherwise a transient fetch failure (CDN blip, offline at first
+ * Execute) would permanently break every later Execute attempt.
+ */
+export async function loadTypiaRuntimePack(
+  url: string,
+): Promise<Record<string, string>> {
+  const cached = packCache.get(url);
+  if (cached) return cached;
+  const promise = (async () => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(
+        `loadTypiaRuntimePack: failed to fetch ${url}: ${response.status}`,
+      );
+    }
+    return (await response.json()) as Record<string, string>;
+  })().catch((err) => {
+    packCache.delete(url);
+    throw err;
+  });
+  packCache.set(url, promise);
+  return promise;
+}

package/src/structures/IBuildTsconfigOptions.ts

@@ -0,0 +1,19 @@
+/** Options accepted by {@link buildTsconfigJSON}. */
+export interface IBuildTsconfigOptions {
+  /**
+   * Module emit shape. Sites preview-render ESM, then re-run as CommonJS for
+   * the in-page `new Function` sandbox.
+   */
+  module: "ESNext" | "CommonJS";
+  /** Output directory relative to project root. Defaults to `"dist"`. */
+  outDir?: string;
+  /** Source root relative to project root. Defaults to `"src"`. */
+  rootDir?: string;
+  /**
+   * Extra entries spliced into `compilerOptions`. Use for plugins, paths, lib
+   * overrides, etc.
+   */
+  compilerOptions?: Record<string, unknown>;
+  /** Project `include` globs. Defaults to `["src"]`. */
+  include?: readonly string[];
+}

package/src/structures/ICompilerService.ts

@@ -0,0 +1,96 @@
+import type { ITransformOptions } from "./ITransformOptions";
+
+/**
+ * Worker ↔ UI RPC contract for the playground compiler service.
+ *
+ * `createWorkerCompiler` (worker side) implements this. `createCompilerClient`
+ * (UI side) returns a tgrid Driver bound to this shape. Sites that need an
+ * `extraTabs` lane should layer additional verbs over this base interface in
+ * their own ICompilerService subtype.
+ */
+export interface ICompilerService {
+  /**
+   * Mount external npm package files into the worker's MemFS under
+   * `node_modules/`. Driven by the dependency installer in
+   * `@ttsc/playground/npm`.
+   */
+  installDependencies(
+    props: ICompilerService.IInstallDependenciesProps,
+  ): Promise<ICompilerService.IInstallDependenciesResult>;
+
+  /**
+   * Compile the user's source into JavaScript with diagnostics. Plugin
+   * transforms (typia, when enabled in options) run first; the result is the
+   * post-transform emit.
+   */
+  compile(props: ICompilerService.IProps): Promise<ICompilerService.IResult>;
+
+  /**
+   * Same pipeline as `compile`, but using the bundle-flavored tsconfig
+   * (typically `module: "CommonJS"` for in-page `new Function` sandboxing).
+   * Sites that don't run user code may treat this identically to `compile`.
+   */
+  bundle(props: ICompilerService.IProps): Promise<ICompilerService.IResult>;
+
+  /**
+   * Run the lint plugin and parse its findings into the same diagnostic shape
+   * as `compile`. Returns an empty list when no lint plugin is wired into the
+   * worker.
+   */
+  lint(props: ICompilerService.IProps): Promise<ICompilerService.ILintResult>;
+}
+
+export namespace ICompilerService {
+  export interface IProps {
+    source: string;
+    options?: ITransformOptions;
+  }
+
+  export interface IInstallDependenciesProps {
+    /** Node_modules-relative paths to text content. */
+    files: Record<string, string>;
+    /** Metadata for the packages whose files are in `files`. */
+    packages: IInstalledPackage[];
+  }
+
+  export interface IInstalledPackage {
+    name: string;
+    version: string;
+  }
+
+  export interface IInstallDependenciesResult {
+    installed: IInstalledPackage[];
+    fileCount: number;
+  }
+
+  export type IResult = ISuccess | IFailure | IError;
+
+  export interface ISuccess extends IBase<"success", string> {}
+  export interface IFailure extends IBase<"failure", string> {
+    diagnostics: IDiagnostic[];
+  }
+  export interface IError extends IBase<"error", unknown> {}
+
+  interface IBase<Type extends string, Value> {
+    type: Type;
+    target: "javascript";
+    value: Value;
+  }
+
+  export interface IDiagnostic {
+    /** 1-based line number. */
+    line: number;
+    /** 1-based column number. */
+    column: number;
+    /** Length of the span in source characters; at least 1. */
+    length: number;
+    severity: "error" | "warning";
+    message: string;
+    /** Diagnostic code, e.g. `"TS2322"` or a lint rule id. */
+    code?: string;
+  }
+
+  export interface ILintResult {
+    diagnostics: IDiagnostic[];
+  }
+}

package/src/structures/IConsoleMessage.ts

@@ -0,0 +1,10 @@
+/**
+ * One captured `console.*` invocation. `value` is the argv (the spread of
+ * `console.log(...args)`), so `console.log("user:", user)` shows up as a single
+ * row with both pieces rendered inline, separated by a space — same as a real
+ * DevTools console.
+ */
+export interface IConsoleMessage {
+  type: "debug" | "dir" | "error" | "info" | "log" | "table" | "warn";
+  value: unknown[];
+}