Minimal example

[ggoodman]

Hey team, I've started playing with this amazing tool. Instead of starting from the full-fledged demo, I've been trying to figure out what a minimal solution looks like.

Specifically, I was trying to take the workbench approach and gradually add services / code until I had an MVP. I haven't had much success. It has been a challenge to tease out from the kitchen sink demo what is essential vs is what is nice-to-have.

Are you aware of any more bare-bones examples?

Do you have anywhere or thing you'd suggest I look at to familiarize myself with the essentials of bootstrapping this lib?

I really appreciate you folks putting this powerful tool together! ❤️

[CGNonofr]

I'm aware there is a big entry barrier.

It really depends on your needs, it can be as simple as:

import { initialize as initializeMonacoService} from 'vscode/services'
import * as monaco from 'monaco-editor'

const workerLoaders: Partial<Record<string, WorkerLoader>> = {
  editorWorkerService: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' })
}

window.MonacoEnvironment = {
  getWorker: function (moduleId, label) {
    const workerFactory = workerLoaders[label]
    if (workerFactory != null) {
      return workerFactory()
    }
    throw new Error(`Unimplemented worker ${label} (${moduleId})`)
  }
}

// Call it once before doing anything else
await initializeMonacoService({})

monaco.editor.create(...)

And you'll have something pretty similar to what you can achieve with the official monaco-editor-core

Now you can have a look at the available service overrides: https://github.com/CodinGame/monaco-vscode-api?tab=readme-ov-file#monaco-standalone-services there are some relationship between them but the graph is quite complex so... the best is probably to use what you think you need to see if it works.

For example:

• for syntax highlighting, you'll need the textmate, theme and languages services overrides, them import the relevant default extension
• If you want to use the languages features (via LSP or the language workers) or UI components (views or workbench service overrides) I hightly recommend using the model and editor services overrides and using the reference way of creating models

Apart from those, most service overrides are optional and independent, feel free to browser them and cherry-pick what you need

[CGNonofr]

I am not aware of any "bare-bones" examples though, feel free to contribute by adding one, I'll be happy to reference it :)

[ggoodman]

OK, I'll mark this as closed for the time being. If my explorations produce something usable and minimal, I'll reference this back.

Thanks for the help!

[brianjenkins94]

I am also interested in this after having mixed success trying to build something from the demo.

[brianjenkins94]

Let's open this up and work on it :)

[CGNonofr]

Minimal means something different for everyone

[brianjenkins94]

Let's try to address this problem then:

I'm aware there is a big entry barrier.

[CGNonofr]

I've already done anything I can think of, do you have any suggestion?

[brianjenkins94]

A demo where you isolate out just the editor component.

Then a demo where you add the terminal component.

Then a demo where you add the sidebar component.

[CGNonofr]

Unfortunately, not everything can be achieved

A demo where you isolate out just the editor component.

Yup, basically the stub I've added on my first comment? good idea

Then a demo where you add the terminal component. Then a demo where you add the sidebar component.

You can't JUST take a component and render it. As soon as you take UI parts, you kind of have to take all the layout stuff and most other parts as well