Monaco TypeScript enhancements

docs/docs/features/intellisense.md

@@ -20,6 +20,16 @@ These are examples for automatically loading React types with autocomplete and h
 
 ![LiveCodes Intellisense](../../static/img/screenshots/intellisense2.jpg)
 
+## TypeScript TwoSlash
+
+The code editor supports [TypeScript TwoSlash](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher). This can be very useful for debugging, sharing and teaching TypeScript.
+
+This is supported in [JavaScript](../languages/javascript.md), [TypeScript](../languages/typescript.md), [JSX](../languages/jsx.md) and [TSX](../languages/tsx.md). This also includes [Babel](../languages/babel.md), [Sucrase](../languages/sucrase.md), [Solid](../languages/solid.md), [React Native](../languages/react-native.md), etc.
+
+![TypeScript TwoSlash](../../static/img/screenshots/twoslash.png)
+
+![TwoSlash in JSX](../../static/img/screenshots/twoslash-jsx.png)
+
 ## Custom Types
 
 If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used.
@@ -127,6 +137,7 @@ The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) s
 Then, they can be used like that:
 
 export const customModules = {
+editor: 'monaco',
 activeEditor: 'script',
 script: {
 language: 'typescript',

docs/docs/languages/gleam.md

@@ -13,6 +13,8 @@ LiveCodes compiles Gleam code to JavaScript using the WebAssembly (wasm) version
 
 The compiled JavaScript code can be inspected in the [Compiled Code Viewer](../features/compiled-code.md) in the [Tools Pane](../features/tools-pane.md) (below the result page). Console output is shown in the [integrated console](../features/console.md).
 
+Please note that the compiler messages (e.g. errors and warnings) are shown in the browser console (not the integrated console).
+
 ### Standard Library
 
 [Gleam's standard library](https://hexdocs.pm/gleam_stdlib/) in addition to the following packages are available for use and can be imported as usual with no additional configuration:

scripts/build.js

@@ -13,7 +13,6 @@ const { buildStyles } = require('./styles');
 const args = process.argv.slice(2);
 const devMode = args.includes('--dev');
 const outDir = path.resolve(__dirname + '/../build');
-const monacoVersion = `v${pkg.dependencies['monaco-editor']}`;
 const codemirrorVersion = `v${pkg.dependencies['codemirror']}`;
 let appVersion, sdkVersion, gitCommit, repoUrl;
 
@@ -120,8 +119,8 @@ const baseOptions = {
     'process.env.REPO_URL': `"${repoUrl || ''}"`,
     'process.env.DOCS_BASE_URL': `"${docsBaseUrl}"`,
     'process.env.CI': `${process.env.CI || false}`,
-    'process.env.monacoVersion': `"${monacoVersion}"`,
     'process.env.codemirrorVersion': `"${codemirrorVersion}"`,
+    define: 'undefined', // prevent using AMD (e.g. in lz-string)
   },
   loader: { '.html': 'text', '.ttf': 'file' },
   logLevel: 'error',

scripts/vendors.js

@@ -28,36 +28,10 @@ const buildVendors = () => {
     sourcemap: true,
     sourcesContent: true,
     outdir: outputDir,
-    format: 'iife',
+    format: 'esm',
     define: { global: 'window', 'process.env.NODE_ENV': '"production"' },
   };
 
-  // Monaco editor
-  esbuild.buildSync({
-    ...baseOptions,
-    outdir: monacoOutDir,
-    entryPoints: [srcDir + 'monaco-editor.ts'],
-    loader: { '.ttf': 'file' },
-    format: 'esm',
-  });
-
-  // Monaco editor workers
-  const entryFiles = [
-    'node_modules/monaco-editor/esm/vs/language/json/json.worker.js',
-    'node_modules/monaco-editor/esm/vs/language/css/css.worker.js',
-    'node_modules/monaco-editor/esm/vs/language/html/html.worker.js',
-    'node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js',
-    'node_modules/monaco-editor/esm/vs/editor/editor.worker.js',
-  ];
-
-  entryFiles.forEach((entry) => {
-    esbuild.buildSync({
-      ...baseOptions,
-      outdir: monacoOutDir,
-      entryPoints: [entry],
-    });
-  });
-
   // Monaco languages
   esbuild.buildSync({
     ...baseOptions,
@@ -68,21 +42,18 @@ const buildVendors = () => {
       // 'monaco-lang-sql.ts',
       'monaco-lang-wat.ts',
     ].map((entry) => srcDir + 'languages/' + entry),
-    format: 'esm',
     outdir: outputDir,
   });
 
   // Codemirror
   esbuild.buildSync({
     ...baseOptions,
-    format: 'esm',
     outdir: codemirrorOutDir,
     entryPoints: ['src/livecodes/editor/codemirror/codemirror-core.ts'],
   });
 
   esbuild.buildSync({
     ...baseOptions,
-    format: 'esm',
     outdir: codemirrorOutDir,
     ignoreAnnotations: true, // required for codemirror-emacs
     entryPoints: [

src/livecodes/UI/info.ts

@@ -2,7 +2,7 @@
 import { infoScreen } from '../html';
 import type { createModal } from '../modal';
 import * as UI from '../UI';
-import { loadScript, loadStylesheet, removeDuplicates } from '../utils/utils';
+import { loadStylesheet, removeDuplicates } from '../utils/utils';
 import { tagifyBaseUrl } from '../vendors';
 import type { Config } from '../models';
 import type { ProjectStorage } from '../storage';
@@ -64,8 +64,8 @@ export const createProjectInfoUI = async (
   };
 
   loadStylesheet(tagifyBaseUrl + 'tagify.css', 'tagify-styles');
-  await loadScript(tagifyBaseUrl + 'tagify.min.js', 'Tagify');
-  const Tagify = (window as any).Tagify;
+
+  const Tagify = (await import(tagifyBaseUrl + 'tagify.esm.js')).default;
   if (Tagify) {
     new Tagify(tagsInput, {
       whitelist: Array.from(

src/livecodes/UI/open.ts

@@ -329,7 +329,8 @@ const organizeProjects = (
   registerLanguageFilters();
 
   loadStylesheet(tagifyBaseUrl + 'tagify.css', 'tagify-styles');
-  loadScript(tagifyBaseUrl + 'tagify.min.js', 'Tagify').then(async (Tagify: any) => {
+  import(tagifyBaseUrl + 'tagify.esm.js').then(async (tagifyMod: any) => {
+    const Tagify = tagifyMod.default;
     if (Tagify) {
       tagify = new Tagify(filterTagsInput, {
         whitelist: Array.from(new Set((await getProjects()).map((item) => item.tags).flat())).sort(