📄 `loadSandbox`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	2
📊 Variables & Constants	2
⚡ Async/Await Patterns	2
📐 Interfaces	1
📑 Type Aliases	2

📚 Table of Contents¶

Imports
Variables & Constants
Async/Await Patterns
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/website/src/components/editor/loadSandbox.ts

📦 Imports¶

Name	Source
`MonacoEditor`	`monaco-editor`
`WebLinterModule`	`../linter/types`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`TS_VERSION_ERROR_MESSAGE`	`"Could not find the requested TypeScr...`	const	`'Could not find the requested TypeScript version. This playground should relo...`	✓
`instance`	`Promise<SandboxModel> \\| undefined`	let/var	`not shown`	✗

Async/Await Patterns¶

Type	Function	Await Expressions	Promise Chains
promise-chain	`loadSandbox`	none	new Promise(...)
await-expression	`loadSandbox`	fetch(urlForMonaco, { method: 'HEAD' })	none

Functions¶

`sandboxSingleton(version: string): Promise<SandboxModel>`¶

Parameters:

version string

Returns: Promise<SandboxModel>

Calls:

loadSandbox

Code

(version: string): Promise<SandboxModel> => {
  if (instance) {
    return instance;
  }
  return (instance = loadSandbox(version));
}

`loadSandbox(tsVersion: string): Promise<SandboxModel>`¶

Parameters:

tsVersion string

Returns: Promise<SandboxModel>

Calls:

document.createElement
fetch
reject
window.require.config
window.require
resolve
document.body.appendChild

Internal Comments:

// https://github.com/microsoft/TypeScript-Website/blob/4559775016e7b2e9d598eae86c931cf6121d73c6/packages/typescriptlang-org/src/templates/play.tsx#L106 (x2)
// throw new Error(`Could not find the requested TypeScript version: ${tsVersion}`); (x3)
// For the monaco version you can use unpkg or the TypeScript web infra CDN (x5)
// You can see the available releases for TypeScript here: (x5)
// https://typescript.azureedge.net/indexes/releases.json (x5)
// This is something you need for monaco to work (x2)
// Grab a copy of monaco, TypeScript and the sandbox (x4)

Code

function loadSandbox(tsVersion: string): Promise<SandboxModel> {
  return new Promise((resolve, reject): void => {
    const getLoaderScript = document.createElement('script');
    getLoaderScript.src = 'https://www.typescriptlang.org/js/vs.loader.js';
    getLoaderScript.async = true;
    getLoaderScript.onload = async () => {
      // https://github.com/microsoft/TypeScript-Website/blob/4559775016e7b2e9d598eae86c931cf6121d73c6/packages/typescriptlang-org/src/templates/play.tsx#L106
      const urlForMonaco = `https://playgroundcdn.typescriptlang.org/cdn/${tsVersion}/monaco/min/vs/editor/editor.main.js`;

      const nightlyLookup = await fetch(urlForMonaco, { method: 'HEAD' });
      if (!nightlyLookup.ok) {
        // throw new Error(`Could not find the requested TypeScript version: ${tsVersion}`);
        reject(new Error(TS_VERSION_ERROR_MESSAGE));
        return;
      }

      // For the monaco version you can use unpkg or the TypeScript web infra CDN
      // You can see the available releases for TypeScript here:
      // https://typescript.azureedge.net/indexes/releases.json
      window.require.config({
        paths: {
          linter: '/sandbox',
          sandbox: 'https://www.typescriptlang.org/js/sandbox',
          vs: `https://playgroundcdn.typescriptlang.org/cdn/${tsVersion}/monaco/min/vs`,
        },
        // This is something you need for monaco to work
        ignoreDuplicateModules: ['vs/editor/editor.main'],
      });

      // Grab a copy of monaco, TypeScript and the sandbox
      window.require<[Monaco, Sandbox, WebLinterModule]>(
        ['vs/editor/editor.main', 'sandbox/index', 'linter/index'],
        (main, sandboxFactory, lintUtils) => {
          resolve({ lintUtils, main, sandboxFactory });
        },
        () => {
          reject(
            new Error('Could not get all the dependencies of sandbox set up!'),
          );
        },
      );
    };
    document.body.appendChild(getLoaderScript);
  });
}

Interfaces¶

`SandboxModel`¶

Interface Code

export interface SandboxModel {
  lintUtils: WebLinterModule;
  main: Monaco;
  sandboxFactory: Sandbox;
}

Properties¶

Name	Type	Optional	Description
`lintUtils`	`WebLinterModule`	✗	not shown
`main`	`Monaco`	✗	not shown
`sandboxFactory`	`Sandbox`	✗	not shown

Type Aliases¶

`Monaco`¶

type Monaco = typeof MonacoEditor;

`Sandbox`¶

type Sandbox = typeof SandboxFactory;

Generated by Syntax Scribe

📄 loadSandbox¶