How to set TypeScript target to ESNext in {monaco-run} code blocks?

[val1984]

Hi,

I'm currently working on a slide regarding iterator helpers and {monaco-run} shows red squiggles for this code:

const array = [1,2,3,4,5,6,7,8,9,10];
const res = array.values()
     .map(x => 2*x)
     .filter(x => x % 3 !== 0)
     .map(x => 5*x)
     .flatMap(function* gen(x) { yield x - 1; yield x; });
console.log(...res);

I tried to find a way to set the target to ESNext by configuring code runners, monaco & shiki but I haven't been able to find how.

I also pnpm patched @slidev/client and @shikijs/twoslash but I still get the red squiggles on the above code.

Does anyone know how to do it? Maybe ESNext should be the default for TypeScript type checking?

Thanks in advance 🙂

[astrochemx]

Hello, @val1984 !

The problem is that version 0.54.0 of monaco-editor is bundled with typescript version 5.4.5. I believe that overriding the version of monaco-editor to e.g. 0.55.0-rc (which is bundled with typescript version 5.9.3) is the simplest fix at the moment.

If we don't want to override Monaco version, we can provide our own set of TypeScript libs by configuring Monaco. We can create a custom script (gen-ts-libs.mjs) in, e.g., scripts folder, that generates ts-libs.ts file in the gen directory of the workspace root:

./scripts/gen-ts-libs.mjs

import { mkdir, readFile, writeFile } from 'node:fs/promises';
import { join } from 'node:path';

const tsLibs = [
  'dom',
  'dom.asynciterable',
  'dom.iterable',
  'es5',
  'es6',
  'es2015',
  'es2015.collection',
  'es2015.core',
  'es2015.generator',
  'es2015.iterable',
  'es2015.promise',
  'es2015.proxy',
  'es2015.reflect',
  'es2015.symbol',
  'es2015.symbol.wellknown',
  'es2016',
  'es2016.array.include',
  'es2016.full',
  'es2016.intl',
  'es2017',
  'es2017.arraybuffer',
  'es2017.date',
  'es2017.full',
  'es2017.intl',
  'es2017.object',
  'es2017.sharedmemory',
  'es2017.string',
  'es2017.typedarrays',
  'es2018',
  'es2018.asyncgenerator',
  'es2018.asynciterable',
  'es2018.full',
  'es2018.intl',
  'es2018.promise',
  'es2018.regexp',
  'es2019',
  'es2019.array',
  'es2019.full',
  'es2019.intl',
  'es2019.object',
  'es2019.string',
  'es2019.symbol',
  'es2020',
  'es2020.bigint',
  'es2020.date',
  'es2020.full',
  'es2020.intl',
  'es2020.number',
  'es2020.promise',
  'es2020.sharedmemory',
  'es2020.string',
  'es2020.symbol.wellknown',
  'es2021',
  'es2021.full',
  'es2021.intl',
  'es2021.promise',
  'es2021.string',
  'es2021.weakref',
  'es2022',
  'es2022.array',
  'es2022.error',
  'es2022.full',
  'es2022.intl',
  'es2022.object',
  'es2022.regexp',
  'es2022.string',
  'es2023',
  'es2023.array',
  'es2023.collection',
  'es2023.full',
  'es2023.intl',
  'es2024',
  'es2024.arraybuffer',
  'es2024.collection',
  'es2024.full',
  'es2024.object',
  'es2024.promise',
  'es2024.regexp',
  'es2024.sharedmemory',
  'es2024.string',
  'esnext',
  'esnext.array',
  'esnext.collection',
  'esnext.decorators',
  'esnext.disposable',
  'esnext.error',
  'esnext.float16',
  'esnext.full',
  'esnext.intl',
  'esnext.iterator',
  'esnext.promise',
  'esnext.sharedmemory',
  'scripthost',
  'webworker',
  'webworker.asynciterable',
  'webworker.importscripts',
  'webworker.iterable',
];

/** @param {import('fs').PathLike} dir */
async function ensureDir(dir) {
  await mkdir(dir, { recursive: true });
}

export async function run() {
  const root = process.cwd();
  const srcDir = join(root, 'node_modules', 'typescript', 'lib');
  const outDir = join(root, 'gen');
  await ensureDir(outDir);

  let outContent = 'export const TS_LIBS = [\n';

  for (const name of tsLibs) {
    const fileName = `lib.${name}.d.ts`;
    const filePath = join(srcDir, fileName);
    try {
      const fileContent = await readFile(filePath, 'utf8');
      const jsonContent = JSON.stringify(fileContent);
      outContent += `  { fileName: "${fileName}", fileContent: ${jsonContent} },\n`;
    } catch (error) {
      console.warn('skip', fileName);
      console.error(error);
    }
  }

  outContent += '];\n';

  const outFile = join(outDir, 'ts-libs.ts');
  await writeFile(outFile, outContent, 'utf8');
  console.log('generated', outFile);
}

try {
  await run();
} catch (err) {
  console.error('gen-ts-libs failed:', err);
  process.exit(1);
}

Then we can add a script to package.json:

package.json

"gen-ts-libs": "node ./scripts/gen-ts-libs.mjs",

After executing this script and generating ./gen/ts-libs.ts, we consume it in ./setup/monaco.ts like this:

./setup/monaco.ts

import { defineMonacoSetup } from '@slidev/types';
import { ModuleDetectionKind } from 'typescript';
import { TS_LIBS } from '../gen/ts-libs';

export default defineMonacoSetup(async (monaco) => {
  // optionally
  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
    lib: [],
    // @see https://github.com/microsoft/monaco-editor/issues/2976#issuecomment-2334468503
    moduleDetection: ModuleDetectionKind.Force,
    skipLibCheck: true,
    module: monaco.languages.typescript.ModuleKind.ESNext,
    target: monaco.languages.typescript.ScriptTarget.ESNext,
  });

  const extraLibs = TS_LIBS.map(({ fileName, fileContent }) => ({
    content: fileContent,
    filePath: `ts:filename/${fileName}`,
  }));
  monaco.languages.typescript.typescriptDefaults.setExtraLibs(extraLibs);
});

Please note that, for example, lib.esnext.d.ts references lib.esnext.iterator.d.ts, which references lib.es2015.iterable.d.ts, that references lib.es2015.symbol.d.ts, so we should provide ALL those TS libs to override the default ones.