React v18.0.0 compatibility

cucumber · Mar 18, 2024 · 063644a · 063644a
1 parent e26ad00
commit 063644a
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/try/index.tsx b/try/index.tsx
@@ -9,7 +9,7 @@ import {
 import { WasmParserAdapter } from '@cucumber/language-service/wasm'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { ConfigureEditor, configureMonaco } from '../src/index.js'
 import { MonacoEditor } from './MonacoEditor.js'
@@ -75,13 +75,15 @@ const options = {
   'semanticHighlighting.enabled': true,
 }
 
+const domEditor = document.getElementById('editor1')
+const reactEditor = document.getElementById('editor2')
+
 makeConfigureEditor()
   .then((configureEditor) => {
     // @ts-ignore
-    configureEditor(monaco.editor.create(document.getElementById('editor1'), options))
-    render(
-      <MonacoEditor options={options} className="editor" configure={configureEditor} />,
-      document.getElementById('editor2')
-    )
+    configureEditor(monaco.editor.create(domEditor, options))
+    // @ts-ignore
+    const root = createRoot(reactEditor)
+    root.render(<MonacoEditor options={options} className="editor" configure={configureEditor} />)
   })
   .catch((err) => console.error(err.stack))