fix: upgrade monaco editor (#163)

deno.json

@@ -20,6 +20,7 @@
   },
   "lint": {
     "rules": {
+      "include": ["verbatim-module-syntax"],
       "exclude": ["no-explicit-any", "no-sloppy-imports"]
     },
     "exclude": [

package.json

@@ -12,15 +12,15 @@
     "@viz-js/viz": "^3.3.1",
     "allotment": "^1.20.0",
     "circular-json": "^0.5.9",
-    "code-block-writer": "^13.0.2",
+    "code-block-writer": "^13.0.3",
     "lz-string": "^1.4.4",
-    "monaco-editor": "^0.44.0",
+    "monaco-editor": "^0.52.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-monaco-editor": "0.55.0",
+    "react-monaco-editor": "0.56.2",
     "react-spinners": "^0.13.6",
     "react-treeview": "^0.4.7",
-    "ts-morph": "^23.0.0"
+    "ts-morph": "^25.0.0"
   },
   "devDependencies": {
     "@types/circular-json": "^0.4.0",
@@ -32,7 +32,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "glob": "^10.3.10",
     "ts-factory-code-generator-generator": "^0.7.0",
-    "typescript": "5.0.2",
+    "typescript": "5.7.2",
     "vite": "^5.2.9",
     "vite-plugin-monaco-editor": "^1.1.0"
   }

scripts/analyzers/TsAnalyzer.ts

@@ -1,4 +1,4 @@
-import { Project, Symbol, Type } from "ts-morph";
+import { Project, type Symbol, type Type } from "ts-morph";
 
 export class TsAnalyzer {
   private readonly tsSymbol: Symbol;

src/AppContext.tsx

@@ -4,12 +4,12 @@ import {
   compilerVersionCollection,
   getCompilerApi,
   hasLoadedCompilerApi,
-  ScriptKind,
-  ScriptTarget,
+  type ScriptKind,
+  type ScriptTarget,
 } from "./compiler/index.js";
-import { CodeEditorTheme } from "./components/index.js";
+import type { CodeEditorTheme } from "./components/index.js";
 import { appReducer, deriveEditorTheme } from "./reducers/index.js";
-import { ApiLoadingState, StoreState } from "./types/index.js";
+import { ApiLoadingState, type StoreState } from "./types/index.js";
 import { sleep, StateSaver, UrlSaver } from "./utils/index.js";
 
 const initialScriptTarget: ScriptTarget = 99 /* Latest */;

src/actions/index.tsx

@@ -1,6 +1,6 @@
-import { CompilerApi, Node } from "../compiler/index.js";
+import type { CompilerApi, Node } from "../compiler/index.js";
 import { actions as constants } from "../constants/index.js";
-import { ApiLoadingState, OptionsState } from "../types/index.js";
+import type { ApiLoadingState, OptionsState } from "../types/index.js";
 
 export interface SetCode {
   type: constants.SET_CODE;

src/compiler/CompilerApi.ts

@@ -1,5 +1,18 @@
-import * as ts from "typescript";
-import { CompilerPackageNames } from "./compilerVersions.generated.js";
+import type * as ts from "typescript";
+import type { CompilerPackageNames } from "./compilerVersions.generated.js";
+
+export declare enum FlowFlags {
+  TrueCondition,
+  FalseCondition,
+  Start,
+  Assignment,
+  BranchLabel,
+  LoopLabel,
+  Call,
+  SwitchClause,
+  Shared,
+  Referenced,
+}
 
 export interface CompilerApi {
   createSourceFile: typeof ts.createSourceFile;
@@ -15,7 +28,7 @@ export interface CompilerApi {
   ObjectFlags: typeof ts.ObjectFlags;
   SymbolFlags: typeof ts.SymbolFlags;
   TypeFlags: typeof ts.TypeFlags;
-  FlowFlags: typeof ts.FlowFlags;
+  FlowFlags: typeof FlowFlags;
   // Internal enum
   CheckFlags: object;
   // Internal enum
@@ -48,4 +61,13 @@ export type TypeFlags = ts.TypeFlags;
 export type SyntaxKind = ts.SyntaxKind;
 export type CompilerHost = ts.CompilerHost;
 export type CommentRange = ts.CommentRange;
-export type FlowNode = ts.FlowNode;
+
+export interface FlowNode {
+  id?: object;
+  node?: {
+    getText(): string;
+  };
+  antecedents: FlowNode[];
+  flags: FlowFlags;
+  getText(): string;
+}

src/compiler/convertOptions.test.ts

@@ -1,6 +1,6 @@
 import { expect } from "@std/expect";
 import { Theme } from "../types/index.js";
-import { CompilerApi } from "./CompilerApi.js";
+import type { CompilerApi } from "./CompilerApi.js";
 import { convertOptions } from "./convertOptions.js";
 
 function getCompilerApi(scriptKind: any, scriptTarget: any) {

src/compiler/convertOptions.ts

@@ -1,5 +1,5 @@
-import { OptionsState } from "../types/index.js";
-import { CompilerApi, ScriptKind, ScriptTarget } from "./CompilerApi.js";
+import type { OptionsState } from "../types/index.js";
+import type { CompilerApi, ScriptKind, ScriptTarget } from "./CompilerApi.js";
 
 export function convertOptions(apiFrom: CompilerApi | undefined, apiTo: CompilerApi, options: OptionsState) {
   if (apiFrom == null || apiFrom === apiTo) {

src/compiler/createSourceFile.ts

@@ -1,5 +1,5 @@
 import { assertNever } from "../utils/index.js";
-import {
+import type {
   CompilerApi,
   CompilerHost,
   CompilerOptions,

src/compiler/getChildrenFunction.ts

@@ -1,6 +1,6 @@
 import { TreeMode } from "../types/index.js";
 import { assertNever } from "../utils/index.js";
-import { Node, SourceFile } from "./CompilerApi.js";
+import type { Node, SourceFile } from "./CompilerApi.js";
 
 export function getChildrenFunction(mode: TreeMode, sourceFile: SourceFile) {
   switch (mode) {

src/compiler/getCompilerApi.ts

@@ -1,6 +1,6 @@
 import { importCompilerApi, importLibFiles } from "./compiler.generated.js";
-import { CompilerApi } from "./CompilerApi.js";
-import { CompilerPackageNames } from "./compilerVersions.generated.js";
+import type { CompilerApi } from "./CompilerApi.js";
+import type { CompilerPackageNames } from "./compilerVersions.generated.js";
 
 const compilerTypes: { [name: string]: Promise<CompilerApi> } = {};
 const compilerTypesLoaded: { [name: string]: true } = {};

src/compiler/getDescendantAtRange.ts

@@ -1,5 +1,5 @@
-import { TreeMode } from "../types/index.js";
-import { CompilerApi, Node, SourceFile } from "./CompilerApi.js";
+import type { TreeMode } from "../types/index.js";
+import type { CompilerApi, Node, SourceFile } from "./CompilerApi.js";
 import { getChildrenFunction } from "./getChildrenFunction.js";
 import { getStartSafe } from "./getStartSafe.js";
 

src/compiler/getFactoryCodeGenerator.ts

@@ -1,5 +1,5 @@
-import { FactoryCodeGenerator, getGenerateFactoryCodeFunction } from "./compiler.generated.js";
-import { CompilerPackageNames } from "./compilerVersions.generated.js";
+import { type FactoryCodeGenerator, getGenerateFactoryCodeFunction } from "./compiler.generated.js";
+import type { CompilerPackageNames } from "./compilerVersions.generated.js";
 
 const cache: { [packageName: string]: Promise<FactoryCodeGenerator> } = {};
 const hasLoadedVersion: { [packageName: string]: true } = {};

src/compiler/getStartSafe.ts

@@ -1,4 +1,4 @@
-import { Node, SourceFile } from "./CompilerApi.js";
+import type { Node, SourceFile } from "./CompilerApi.js";
 
 export function getStartSafe(node: Node, sourceFile: SourceFile) {
   // workaround for compiler api bug with getStart(sourceFile, true) (see PR #35029 in typescript repo)

src/components/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import type * as monacoEditorForTypes from "monaco-editor";
 import React from "react";
-import * as ReactMonacoEditorForTypes from "react-monaco-editor";
+import type * as ReactMonacoEditorForTypes from "react-monaco-editor";
 import type { EditorDidMount } from "react-monaco-editor";
 import { LineAndColumnComputer } from "../utils/index.js";
 import { Spinner } from "./Spinner.js";
@@ -170,7 +170,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
           minimap: { enabled: false },
           readOnly: this.props.readOnly,
           quickSuggestions: false,
-          occurrencesHighlight: false,
+          occurrencesHighlight: "off",
           selectionHighlight: false,
           codeLens: false,
           suggestOnTriggerCharacters: false,

src/components/ExternalLink.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export function ExternalLink(props: { text: string; url: string }): React.ReactElement {
   return <a href={props.url} target="_blank" rel="noopener noreferrer">{props.text}</a>;

src/components/FactoryCodeEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { FactoryCodeGenerator, getFactoryCodeGenerator } from "../compiler/index.js";
-import { CompilerState } from "../types/index.js";
+import { type FactoryCodeGenerator, getFactoryCodeGenerator } from "../compiler/index.js";
+import type { CompilerState } from "../types/index.js";
 import { Box } from "../utils/index.js";
 import { CodeEditor } from "./CodeEditor.js";
 import { Spinner } from "./Spinner.js";

src/components/FlowNodeGraph.tsx

@@ -1,9 +1,8 @@
-import { instance as vizJsInstance, Viz } from "@viz-js/viz";
+import { instance as vizJsInstance, type Viz } from "@viz-js/viz";
 import React from "react";
 
-import { FlowFlags, FlowNode } from "typescript";
 import { useAppContext } from "../AppContext.js";
-import { CompilerApi } from "../compiler/index.js";
+import type { CompilerApi, FlowFlags, FlowNode } from "../compiler/index.js";
 import { enumUtils } from "../utils/index.js";
 
 export interface FlowNodeGraphProps {
@@ -16,6 +15,7 @@ function quoted(txt: string): string {
 }
 
 function getFlagText(api: CompilerApi, flags: FlowFlags) {
+  const { FlowFlags } = api;
   // These are optimizations, not semantic flags.
   flags = flags & ~(FlowFlags.Shared | FlowFlags.Referenced);
   switch (flags) {

src/components/Options.tsx

@@ -1,14 +1,15 @@
-import React, { useRef, useState } from "react";
+import type React from "react";
+import { useRef, useState } from "react";
 import {
-  CompilerApi,
-  CompilerPackageNames,
+  type CompilerApi,
+  type CompilerPackageNames,
   compilerVersionCollection,
-  ScriptKind,
-  ScriptTarget,
+  type ScriptKind,
+  type ScriptTarget,
 } from "../compiler/index.js";
 import { useOnClickOutside } from "../hooks/index.js";
-import { OptionsState } from "../types/index.js";
-import { Theme, TreeMode } from "../types/index.js";
+import type { OptionsState } from "../types/index.js";
+import { type Theme, TreeMode } from "../types/index.js";
 import { enumUtils } from "../utils/index.js";
 import { ExternalLink } from "./ExternalLink.js";