Update modules..

.devcontainer/devcontainer.json

@@ -14,7 +14,10 @@
       "wasm_tools_version": "1.0.60"
     },
     "ghcr.io/devcontainers/features/rust:1": {},
-	  "devwasm.azurecr.io/dev-wasm/dev-wasm-feature/rust-wasi:0.0.2": {}
+	  "devwasm.azurecr.io/dev-wasm/dev-wasm-feature/rust-wasi:0.0.2": {},
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "20"
+    }
   },
   "onCreateCommand": {
     "install-cargo-wasi": [

web/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import("next").NextConfig} */
+const config = {
+  output: "standalone",
+}
+
+export default config;

web/package.json

@@ -2,31 +2,33 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@codemirror/basic-setup": "^0.19.1",
-    "@codemirror/highlight": "^0.19.7",
-    "@codemirror/state": "^0.19.9",
-    "@codemirror/view": "^0.19.45",
-    "@wasmer/wasi": "^1.0.2",
-    "@wasmer/wasmfs": "^0.12.0",
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.1",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.28.2",
+    "@lezer/highlight": "^1.2.0",
     "ayu": "^8.0.1",
-    "cm-lang-dot": "^0.2.0",
+    "cm-lang-dot": "^0.3.2",
+    "codemirror": "^6.0.1",
     "empty-wasi": "^0.1.3",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "14.2.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "simple-wasi-zstd": "^0.1.5"
   },
   "devDependencies": {
-    "@types/node": "^17.0.21",
-    "@types/react": "17.0.39",
-    "eslint": "8.10.0",
-    "eslint-config-next": "12.1.0",
-    "typescript": "4.6.2"
+    "@types/node": "^20.14.8",
+    "@types/react": "18.3.3",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.2.4",
+    "typescript": "5.5.2"
   }
 }

web/src/components/editor.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { basicSetup, EditorState, EditorView } from "@codemirror/basic-setup";
-import { Compartment } from "@codemirror/state";
+import { basicSetup } from "codemirror";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
 import { keymap } from "@codemirror/view";
 import { indentWithTab } from "@codemirror/commands";
 import { linter, openLintPanel } from "@codemirror/lint";
@@ -17,7 +18,7 @@ interface Props {
 function Editor({ text, onTextChanged, errorMessage, darkTheme }: Props) {
   const element = React.useRef<HTMLDivElement>(null);
 
-  const handler = React.useCallback((text) => {
+  const handler = React.useCallback((text: string) => {
     if (onTextChanged) {
       onTextChanged(text);
     }

web/src/components/graphviz.tsx

@@ -10,7 +10,7 @@ interface Props {
 function Graphviz({ src, onError, className }: Props) {
   const [lib, setLib] = useState<LibGraphviz | null>(null);
   const [image, setImage] = useState<string | null>(null);
-  const onErrorCallback = useCallback((msg) => {
+  const onErrorCallback = useCallback((msg: string | null) => {
     if (onError) {
       onError(msg);
     }

web/src/lib/libgraphviz.ts

@@ -16,6 +16,8 @@ export class LibGraphviz {
     const stderr: Array<string> = [];
 
     const wasi = new EmptyWasi({});
+    // Not cjs module.
+    // eslint-disable-next-line @next/next/no-assign-module-variable
     const module = await WebAssembly.compileStreaming(fetch(wasmloc));
     const instance = await WebAssembly.instantiate(module, {
       ...wasi.getImports(module),

web/src/lib/theme-ayu.ts

@@ -1,9 +1,10 @@
 import {EditorView} from "@codemirror/view"
 import {Extension} from "@codemirror/state"
-import {HighlightStyle, tags as t} from "@codemirror/highlight"
+import {HighlightStyle, syntaxHighlighting} from "@codemirror/language"
+import {tags as t} from "@lezer/highlight"
 import * as ayu from "ayu";
 
-function mktheme(scheme: ayu.Scheme): [Extension, HighlightStyle] {
+function mktheme(scheme: ayu.Scheme): [Extension, Extension] {
   const {editor, syntax, ui, common} = scheme;
   const theme = EditorView.theme({
     "&": {
@@ -89,7 +90,7 @@ function mktheme(scheme: ayu.Scheme): [Extension, HighlightStyle] {
     {tag: t.invalid, color: common.error.hex()},
   ])
 
-  return [theme, highlight];
+  return [theme, syntaxHighlighting(highlight)];
 }
 
 /// Extension to enable the One Dark theme (both the editor theme and

web/src/lib/zstd.ts

@@ -152,6 +152,8 @@ export class Zstd {
 
 export async function createZstd(): Promise<Zstd> {
   const wasi = new EmptyWasi({});
+  // Not cjs module
+  // eslint-disable-next-line @next/next/no-assign-module-variable
   const module = await compile();
   const instance = await WebAssembly.instantiate(module, {
     ...wasi.getImports(module),

web/tsconfig.json

@@ -1,6 +1,7 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig.json",
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",