How to use @typefox/monaco-editor-react with vite

[Yokozuna59]

Hi,

I'm currently trying to create a React application using @typefox/monaco-editor-react and vite. I tried making several changes to the project, but none of them worked for me, and errors were thrown everywhere. There is no need for a language server or syntax highlighting or other services; just a plain editor would be fine. 

Could you please provide me with a minimal functional example?

[kaisalmen]

Hi @Yokozuna59 that is strange because we use this combination for the examples here and I quite recently fixed multiple issues with vite/rollup production builds. We don't have a minimum functional example here, but only examples that make use of a language server:
https://github.com/TypeFox/monaco-languageclient/tree/main/packages/examples/src/python/client/reactPython.tsx
https://github.com/TypeFox/monaco-languageclient/tree/main/packages/examples/src/langium/statemachine/main-react.tsx

A minimum configuration can be something like this:

const htmlElement = document.getElementById('monaco-editor-root');
const comp = <MonacoEditorReactComp
userConfig={{
	wrapperConfig: {
		editorAppConfig: {
			$type: 'classic',
			codeResources: {},
			useDiffEditor: false
		}
	}
}}
style={{
	'paddingTop': '5px',
	'height': '80vh'
}}
ReactDOM.createRoot(htmlElement!).render({comp});

[kaisalmen]

You should aim for an es bundle like we do with the vite/rollup production config. The TS config here aims for a modern target/module format, It's a pity you still need to use commonjs for VSCode extensions.

[CGNonofr]

I don't think they'll be able to opt out of commonjs for extensions though, as it's the only format allowing to "mock" require and exports in the browser. I don't think this is possible to do the same with ES modules

[Yokozuna59]

@CGNonofr I'm not sure I'm following correctly; the only use of cjs is in the VSCode node extension, whereas the VSCode browser extension uses iife format, so I need to generate a new file with esm to be used for the WebWorker, don't I?

The issue I'm currently facing is that I can't run the bundled language server in esm format because jsonc-parser isn't "bundler friendly", see microsoft/node-jsonc-parser#57. It should be resolved by this PR: microsoft/node-jsonc-parser#78, but I'm not sure when it will merged.

[CGNonofr]

I was just reacting to It's a pity you still need to use commonjs for VSCode extensions. from @kaisalmen

Not sure what you call IIFE format, doesn't it just means you create a function you invoke immediately? I'm not sure why it changes anything for VScode, it looks like an implementation detail from the VSCode perspective.

VSCode just allows the extension to use the require function (to load the vscode api) and to set stuff in the exports global object. That's what I call the CJS format, and doing the same injection for ES modules would be much more complicated (and probably require code transformations)

[Yokozuna59]

Not sure what you call IIFE format, doesn't it just means you create a function you invoke immediately? I'm not sure why it changes anything for VScode, it looks like an implementation detail from the VSCode perspective.

I'm not really sure myself. I followed some examples of projects that use similar packages to mine and how to integrate the VSCode web. Here is one:

https://github.com/TypeFox/langium-sql/blob/c20515756c30779a34c73d81238da8ec94cc1ab3/packages/langium-sql-vscode/esbuild.mjs#L67