Update generator-langium web template #1205

kaisalmen · 2023-09-27T15:00:21Z

~~We need to wait for [email protected] (PR54) before we should merge this change.~~ (merged)

This PR fixes #1163 and updates the web template to the latest monaco-editor-wrapper.
It is now possible to use the textmate grammar definition as well as the monarch grammar definitions with monaco-editor. The underlying monaco-vscode-api exposes various vscode service overrides that make this possible. Therefore we now generate two HTML examples and a top-level index page.

The generated output no longer requires express. vite+rollup are used to produce the bundles, so the output can be used/served as is. After the generation/template building is complete the output can be tested using vite's dev server.

montymxb

One apparent bug with the generated package.json, and a few comments, but nothing else that I could find. Seems like the rest is working as intended.

packages/generator-langium/templates/web/index.html

packages/generator-langium/templates/web/scripts/bundleVscodeApi.js

packages/generator-langium/templates/web/vite.bundle.classic.config.ts

packages/generator-langium/templates/web/vite.bundle.vscodeApi.config.ts

packages/generator-langium/templates/web/.package.json

kaisalmen · 2023-09-29T17:48:30Z

@montymxb code is updated to final [email protected]. Bugfix release because I broke awaitExtensionReadiness.

kaisalmen · 2023-10-06T19:01:33Z

Rebased to latest main and updated to latest monaco-editor-wrapper.

Yokozuna59 · 2023-10-06T21:38:21Z

Hi @kaisalmen, It may be a silly question, but what's the difference between classic and vscodeApi? And is there a way to test it out before the next release?

kaisalmen · 2023-10-07T20:32:13Z

@Yokozuna59 it is basically this:

classic: Configure monaco-editor as you would when using it directly using Monarch grammar definition
Extended: Configure monaco-editor like a VSCode extension using Textmate grammar definition

The extended mode allows all the fancy things from: monaco-vscode-api

There is now another PR in the pipeline for the wrapper that makes the mode separation clearer (terminology and code): TypeFox/monaco-components#54

You can checkout the PR locally and use the generator to try it out. It generates both versions. You can navigate from the index page:

Yokozuna59 · 2023-10-08T05:30:06Z

@kaisalmen I see, thanks for illustration.

There is now another PR in the pipeline for the wrapper that makes the mode separation clearer (terminology and code): TypeFox/monaco-components#54

Is there an estimated time when it will be merged? After looking at the changes in that PR, it contains a lot of breaking changes, and it would be hard to reimplement the code to inline it with the next major release.

kaisalmen · 2023-10-08T10:12:55Z

After looking at the changes in that PR, it contains a lot of breaking changes, and it would be hard to reimplement the code to inline it with the next major release.

@Yokozuna59 the changes in monaco-editor-wrapper PR 54 are mostly internal and don't change the external API much. The only change required here is to change from $type from vscode to extended apart from updating the version. next versions are available on npm (see description of #54)

... and it will remove the need for two bundles as more config is not made internally (less work for end-user)

Yokozuna59 · 2023-10-11T09:05:47Z

Hi @kaisalmen, just a simple question, is there a reason why vscode-languageserver isn't a dependency in the template? Both web and vscode templates uses it:

Web template:

langium/packages/generator-langium/templates/web/src/language/main-browser.ts

Line 2 in 0708200

import { BrowserMessageReader, BrowserMessageWriter, createConnection } from 'vscode-languageserver/browser.js';
VSCode template:

langium/packages/generator-langium/templates/vscode/src/language/main.ts

Line 3 in 0708200

import { createConnection, ProposedFeatures } from 'vscode-languageserver/node.js';

I asked that because when using npm package manager, it works fine and build without issues. But I switched to pnpm it started throwing errors:

> [email protected] build hello-world
> tsc -b tsconfig.json && node esbuild.mjs

src/language/main-browser.ts:6:8 - error TS2307: Cannot find module 'vscode-languageserver/browser.js' or its corresponding type declarations.

6 } from 'vscode-languageserver/browser.js';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/language/main.ts:3:52 - error TS2307: Cannot find module 'vscode-languageserver/node.js' or its corresponding type declarations.

3 import { createConnection, ProposedFeatures } from 'vscode-languageserver/node.js';
                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.

 ELIFECYCLE  Command failed with exit code 1.

Yokozuna59 · 2023-10-11T11:47:51Z

I was able to resolve some of the errors that were thrown when switching to pnpm:

install missing dependencies:

pnpm add [email protected] \
  [email protected] \
  vscode@npm:@codingame/[email protected]

Note: installing @codingame/monaco-vscode-api is only to resolve the peerDependencies missing issue.

~~2. Make vscode as external dependency:~~

This change broke the editor.

// vite.bundle.classic.config.ts
export default defineConfig({
   build: {
       ...,
       rollupOptions: {
           external: ['vscode'],
           ...,
       }
   }
});

These changes don't have any impact when using npm.

But I don't know how to resolve other issues:

> [email protected] build:bundles
> vite --config ./vite.bundle.classic.config.ts build && vite --config ./vite.bundle.vscodeApi.config.ts build

vite v4.4.11 building for production...
✓ 8 modules transformed.
✓ built in 184ms
[vite]: Rollup failed to resolve import "monaco-editor/esm/vs/platform/userDataProfile/common/userDataProfile.js" from "hello-world/node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-api/service-override/configuration.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "monaco-editor/esm/vs/platform/userDataProfile/common/userDataProfile.js" from "hello-world/node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-api/service-override/configuration.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file://hello-world/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:48205:27)
    at onRollupWarning (file://hello-world/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:48237:9)
    at onwarn (file://hello-world/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:47965:13)
    at file://hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24276:13
    at Object.logger [as onLog] (file://hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25950:9)
    at ModuleLoader.handleInvalidResolvedId (file://hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24862:26)
    at file://hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24822:26
 ELIFECYCLE  Command failed with exit code 1.

And this issue occurs for different imports all over @codingame/monaco-vscode-api. I sat all those files as external as workaround, but another issue was thrown:

> [email protected] build:bundles
> vite --config ./vite.bundle.classic.config.ts build && vite --config ./vite.bundle.vscodeApi.config.ts build

vite v4.4.11 building for production...
✓ 2044 modules transformed.
✓ built in 8.85s
"FileType" is not exported by "node_modules/.pnpm/[email protected]/node_modules/monaco-editor/esm/vs/platform/files/common/files.js", imported by "node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-api/vscode/src/vs/workbench/common/editor.js".
file: /hello-world/node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-api/vscode/src/vs/workbench/common/editor.js:7:9
5: import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
6: import { Registry } from 'monaco-editor/esm/vs/platform/registry/common/platform.js';
7: import { FileType } from 'monaco-editor/esm/vs/platform/files/common/files.js';
            ^
8: import { Schemas } from 'monaco-editor/esm/vs/base/common/network.js';
9: import { isErrorWithActions, createErrorWithActions } from 'monaco-editor/esm/vs/base/common/errorMessage.js';
error during build:
RollupError: "FileType" is not exported by "node_modules/.pnpm/[email protected]/node_modules/monaco-editor/esm/vs/platform/files/common/files.js", imported by "node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-api/vscode/src/vs/workbench/common/editor.js".
    at error (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Module.error (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
    at Module.traceVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14175:29)
    at ModuleScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12615:39)
    at FunctionScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at ChildScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at ReturnValueScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at ChildScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at TrackingScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at BlockScope.findVariable (file:///hello-world/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
 ELIFECYCLE  Command failed with exit code 1

I also tried to install [email protected], but it has no effect.

packages/generator-langium/templates/web/tsconfig.monarch.json

packages/generator-langium/templates/web/scripts/bundleClassic.js

kaisalmen · 2023-10-12T12:06:45Z

@Yokozuna59 thank you very much for your feedback. I will answer your feedback soon.
It is already clead to me that this PR should wait for [email protected] as it may already solve some of your issues and also it addresses some shortcoming I identified myself.

kaisalmen · 2023-10-12T12:27:33Z

vscode-languageserver isn't a dependency in the template

You are correct. It works with npm, because it is a transitive dependency of langium, but it should be declared here.

Yokozuna59 · 2023-10-12T14:50:02Z

@kaisalmen Thanks for your fast response.

I guess the template .gitignore file has missing attributes.

static/bundle/
static/monaco-editor-workers/
static/worker/

kaisalmen · 2023-10-17T07:22:38Z

@montymxb this ready now. It is based on the final version 3.3.0 of monaco-editor-wrapper
@Yokozuna59 This version is now fully working with pnpm out of the box.

kaisalmen · 2023-10-19T16:18:13Z

@msujew this is ready. It needs approval from a core maintainer. 🙂

- Bundle the application, then everything can be statically served

Adjust to latest api change

… dependent libraries

kaisalmen · 2023-10-25T06:37:22Z

@msujew the rebase updates vscode-languageserver and vscode-languageclient libraries to 9.0.1.

Important: This will only work properly with a new langium release or a locally linked version. If you just check out and build it will fail, because Langium 2.0.x references another version that breaks the compilation.

spoenemann · 2023-10-26T09:49:09Z

It needs approval from a core maintainer. 🙂

All committers listed here are allowed to approve and merge PRs:
https://projects.eclipse.org/projects/ecd.langium/who

montymxb

approved! Generated project is good (although until the new langium release comes out, the generator will have a small mismatch).

montymxb requested changes Sep 27, 2023

View reviewed changes

kaisalmen force-pushed the kaisalmen/issue-1163 branch 2 times, most recently from 423d658 to 0708200 Compare October 6, 2023 19:00

Yokozuna59 reviewed Oct 11, 2023

View reviewed changes

packages/generator-langium/templates/web/tsconfig.monarch.json Outdated Show resolved Hide resolved

Yokozuna59 reviewed Oct 11, 2023

View reviewed changes

packages/generator-langium/templates/web/scripts/bundleClassic.js Outdated Show resolved Hide resolved

kaisalmen force-pushed the kaisalmen/issue-1163 branch from da600ff to 437504a Compare October 13, 2023 20:18

kaisalmen mentioned this pull request Oct 18, 2023

Browser template should be updated #1163

Closed

kaisalmen added 10 commits October 25, 2023 08:20

Updated to new monaco-editor-wrapper: classic mode

b166807

Add monaco-editor with vscodeApi based config

c85900d

- Bundle the application, then everything can be statically served

Removed vite config for serve/dev

12f44d2

Implement review comments

c4d2512

Fix generation output

bf66790

Align with latest wrapper version (3.2.4)

91d7947

Adjust to latest api change

Align with monaco-editor-wrapper 3.3.0

a4bc3b3

Implement review feedback

404c5df

Update to monaco-editor-wrapper 3.3.0 release version and updated all…

f8a20c0

… dependent libraries

Align with vscode-languageserver / vscode-languageclient version changes

ee77476

kaisalmen force-pushed the kaisalmen/issue-1163 branch from 39dbfff to ee77476 Compare October 25, 2023 06:33

montymxb approved these changes Oct 27, 2023

View reviewed changes

kaisalmen merged commit 1ec85f1 into main Oct 27, 2023
3 checks passed

kaisalmen deleted the kaisalmen/issue-1163 branch October 27, 2023 07:43

msujew added this to the v2.1.0 milestone Nov 1, 2023

anthonyjclark mentioned this pull request Mar 13, 2024

'vscode' in 'dependencies' instead of 'devDependencies' #1414

Closed

msujew added the yeoman Yeoman generator related issue label May 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update generator-langium web template #1205

Update generator-langium web template #1205

kaisalmen commented Sep 27, 2023 •

edited by montymxb

Loading

montymxb left a comment

kaisalmen commented Sep 29, 2023 •

edited

Loading

kaisalmen commented Oct 6, 2023

Yokozuna59 commented Oct 6, 2023

kaisalmen commented Oct 7, 2023 •

edited

Loading

Yokozuna59 commented Oct 8, 2023

kaisalmen commented Oct 8, 2023 •

edited

Loading

Yokozuna59 commented Oct 11, 2023

Yokozuna59 commented Oct 11, 2023 •

edited

Loading

kaisalmen commented Oct 12, 2023

kaisalmen commented Oct 12, 2023

Yokozuna59 commented Oct 12, 2023

kaisalmen commented Oct 17, 2023

kaisalmen commented Oct 19, 2023

kaisalmen commented Oct 25, 2023

spoenemann commented Oct 26, 2023

montymxb left a comment

Update generator-langium web template #1205

Update generator-langium web template #1205

Conversation

kaisalmen commented Sep 27, 2023 • edited by montymxb Loading

montymxb left a comment

Choose a reason for hiding this comment

kaisalmen commented Sep 29, 2023 • edited Loading

kaisalmen commented Oct 6, 2023

Yokozuna59 commented Oct 6, 2023

kaisalmen commented Oct 7, 2023 • edited Loading

Yokozuna59 commented Oct 8, 2023

kaisalmen commented Oct 8, 2023 • edited Loading

Yokozuna59 commented Oct 11, 2023

Yokozuna59 commented Oct 11, 2023 • edited Loading

kaisalmen commented Oct 12, 2023

kaisalmen commented Oct 12, 2023

Yokozuna59 commented Oct 12, 2023

kaisalmen commented Oct 17, 2023

kaisalmen commented Oct 19, 2023

kaisalmen commented Oct 25, 2023

spoenemann commented Oct 26, 2023

montymxb left a comment

Choose a reason for hiding this comment

kaisalmen commented Sep 27, 2023 •

edited by montymxb

Loading

kaisalmen commented Sep 29, 2023 •

edited

Loading

kaisalmen commented Oct 7, 2023 •

edited

Loading

kaisalmen commented Oct 8, 2023 •

edited

Loading

Yokozuna59 commented Oct 11, 2023 •

edited

Loading