Can init model ref, getting textModelService.createModelReference is not a function, what service am I missing?

[invm]

Hi there, would like some assistance in creating a model ref.
I'm able to run the demo but as it is a kitchen sink demo, its hard to get the relevant parts from it.

Based on some previous discussion I was able to make this example but I thin I'm missing some service override, I'm getting this error: textModelService.createModelReference is not a function.

This this my full code is solidjs:

import { initialize } from "vscode/services";
import * as monaco from "monaco-editor";
import * as vscode from "vscode";
import getEditorServiceOverride from "@codingame/monaco-vscode-editor-service-override";
import getLanguageServiceOverride from "@codingame/monaco-vscode-languages-service-override";
import getTextmateServiceOverride from "@codingame/monaco-vscode-textmate-service-override";
import getThemeServceOverride from "@codingame/monaco-vscode-theme-service-override";
import getModelServiceOverride from "@codingame/monaco-vscode-model-service-override";
import getLanguageDetectionWorkerServiceOverride from "@codingame/monaco-vscode-language-detection-worker-service-override";
import {
  RegisteredFileSystemProvider,
  RegisteredMemoryFile,
  registerFileSystemOverlay,
} from "@codingame/monaco-vscode-files-service-override";
import "@codingame/monaco-vscode-json-default-extension";

import { createEffect, onCleanup } from "solid-js";

export type WorkerLoader = () => Worker;

function App() {
  createEffect(async () => {
    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})`);
      },
    };
    const fileSystemProvider = new RegisteredFileSystemProvider(false);

    fileSystemProvider.registerFile(
      new RegisteredMemoryFile(
        vscode.Uri.file("/tmp/test.js"),
        `// import anotherfile
let variable = 1
function inc () {
  variable++
}

while (variable < 5000) {
  inc()
  console.log('Hello world', variable);
}`,
      ),
    );

    registerFileSystemOverlay(1, fileSystemProvider);

    // Call it once before doing anything else
    await initialize({
      ...getEditorServiceOverride(),
      ...getTextmateServiceOverride(),
      ...getModelServiceOverride(),
      ...getThemeServceOverride(),
      ...getLanguageServiceOverride(),
      ...getLanguageDetectionWorkerServiceOverride(),
    });

    const modelRef = await monaco.editor.createModelReference(
      monaco.Uri.parse("file:///tmp/test.js"),
      JSON.stringify({ hello: "world" }, null, 2),
    );

    const editor = monaco.editor.create(document.getElementById("editor")!, {
      language: "json",
      model: modelRef.object.textEditorModel,
    });

    registerFileSystemOverlay(1, fileSystemProvider);

    onCleanup(() => {
      modelRef.dispose();
      editor.dispose();
    });
  });

  return <div id="editor"></div>;
}

export default App;

[CGNonofr]

I've just tried your code (with just a little changes):

import { initialize } from "vscode/services";
import * as monaco from "monaco-editor";
import * as vscode from "vscode";
import getEditorServiceOverride from "@codingame/monaco-vscode-editor-service-override";
import getLanguageServiceOverride from "@codingame/monaco-vscode-languages-service-override";
import getTextmateServiceOverride from "@codingame/monaco-vscode-textmate-service-override";
import getThemeServceOverride from "@codingame/monaco-vscode-theme-service-override";
import getModelServiceOverride from "@codingame/monaco-vscode-model-service-override";
import getLanguageDetectionWorkerServiceOverride from "@codingame/monaco-vscode-language-detection-worker-service-override";
import {
  RegisteredFileSystemProvider,
  RegisteredMemoryFile,
  registerFileSystemOverlay,
} from "@codingame/monaco-vscode-files-service-override";
import "@codingame/monaco-vscode-json-default-extension";

export type WorkerLoader = () => Worker;

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})`);
  },
};
const fileSystemProvider = new RegisteredFileSystemProvider(false);

fileSystemProvider.registerFile(
  new RegisteredMemoryFile(
    vscode.Uri.file("/tmp/test.js"),
    `// import anotherfile
let variable = 1
function inc () {
variable++
}

while (variable < 5000) {
inc()
console.log('Hello world', variable);
}`,
  ),
);

registerFileSystemOverlay(1, fileSystemProvider);

// Call it once before doing anything else
await initialize({
  ...getEditorServiceOverride(async () => {
    return undefined
  }),
  ...getTextmateServiceOverride(),
  ...getModelServiceOverride(),
  ...getThemeServceOverride(),
  ...getLanguageServiceOverride(),
  ...getLanguageDetectionWorkerServiceOverride(),
});

const modelRef = await monaco.editor.createModelReference(
  monaco.Uri.parse("file:///tmp/test.js")
);

 monaco.editor.create(document.getElementById("editor")!, {
  language: "json",
  model: modelRef.object.textEditorModel,
});

and I'm unable to reproduce any issue, can your please provide a reproduction repo?

[invm]

This works in a vanilla js vite project? You basically removed all the solidjs part, could that be the issue?

[invm]

I've managed to get your example to work on a vanilla ts vite project, might be something with solid, I'll check on my end and close once I figured it out, appreciate the help.

[invm]

It looks like the issue occurs when packages are installed from different versions, once I've deleted pnpm-lock.yaml and did a clean install it works, I had some packages from 6.0.0, some 6.0.1 and some 6.0.2, once they were all in sync it worked.

Again appreciate the help and thanks for this amazing project. God bless.

[invm]

So it looks like postinstall scripts output is not shown during the install process for npm, only with the--foreground-scripts flag, which defeats the whole purpose, taken from here.

I can send you the script that I've written but unfortunately, I can't find a way to contribute this to the project, let me know if you're interested.

[CGNonofr]

Are you not able to work the repo and create a PR?

[invm]

No, thats not it, I can create a PR, but postinstall scripts output is hidden by default by npm, meaning when people will install packages they will not see the version mismatch warnings printed by the script.

I suggest adding a note about versions mismatch to the readme at least.

[CGNonofr]

What is the postinstall script generates an error?

I suggest adding a note about versions mismatch to the readme at least.

It seems like a good idea! Feel free to add a section in the troubleshooting part! Otherwise it'll try to add something about it myself

[CGNonofr]

I did it in #455