Web Generation

[zcy19373416]

Hello, I've been using langium to migrate an existing xtext project to langium for a while.
I've successfully implemented my grammer, generator with templates based on liquidjs plus some other stuff and it worked well :).
However, when I followed the guide to deploy my DSL in the web and hooked up generation to boot, I got the error

Error: Request workspace/executeCommand failed with message: document is not defined

It seemed that esbuild didn't bundle my liquidjs templates into that generated my-language-server-worker.js file.
I tried to put those templates directly into my generator but failed :(
So I want to know:

1. How can I bundle those templates into my-language-server-worker.js ? Or did I miss something important ?
2. If I can't, how can I implement my generator in langium ? I have seen that State Machine Example but I didn't find tags that can meet my demands, such as for, if, else and so on.

I really enjoy doing my job with langium and hope to get your help :)

[msujew]

Hey @zcy19373416,

glad hear you're enjoying working with Langium :)

I'm not too familiar with liquidjs, but it seems like the library or your code try to access the window.document variable in the scope of the webworker. Webworkers have a different set of APIs exposed to them compared to the JS that runs in the main thread of the window.

Instead of accessing the document directly and modifying the DOM, you should return the generated html from the command handler and let the caller site (i.e. the main JS thread) handle the DOM modification.

Note that we offer an integrated set of generator tools, which can be seen here. Since it's integrated into TypeScript, you can run all the conditional logic in there that you need. However, I don't believe that the error in question is related to the generator tool used.

[zcy19373416]

Hello, thanks for your answer :)

However, I don't believe that the error in question is related to the generator tool used.

Yes, the question is not about the generator tool I used, I can describe my question here more precisely.

.
├─public
│  │  index.html
│  │  my-language-server-worker.js
│  │  setup.js
│  │  styles.css
│  │  
│  ├─monaco-editor-workers
│  └─monaco-editor-wrapper
├─src
│  │  extension.ts
│  │  
│  ├─cli
│  │      
│  ├─generator
│  │       my-generator.ts
│  │      
│  ├─language-server
│  │      
│  ├─static
│  │      
│  └─web
│          app.ts
│          index.ts
└─templates

This is my project structure.
When I used the generator in ./src/generator/my-generator.ts to fetch files in ./templates, there's no problem and everything worked perfectly. But after I used the command npm run build:web to bundle all resources into ./public/my-language-server-worker.js and ran npm run serve, I could no longer find my templates when I generated my files.
Maybe I missed something here.
I was also trying to implement my generator with integrated generator tools in Langium and I ran in trouble soon.
I tried to render elements in an array. This is a code fragment written in liquidjs which can render a line for each element of the object src.actors:

{%- for ag in src.actors %}
<el-button @click="$router.push({name: '{{ ag.start.name }}'})">{{ ag.actor.name }}</el-button>
{%- endfor %}

I tried to write it in my code like:

${
  for (const ag of src.actors) 
    toNode `<el-button @click="$router.push({name: '${ ag.start.name }'})">${ ag.actor.name }</el-button>`
}

but failed. I want to know whether there is a convenient way to implement for loop in my template.
I read the code in State Machine Example as well as those tools defined in node_modules\langium\src\generator* but still don't know how to do this.

[msujew]

I could no longer find my templates when I generated my files

What do you mean by that? The bundler should bundle all referenced TypeScript files. All other files are not available and need to be fetched from a web server.

but failed. I want to know whether there is a convenient way to implement for loop in my template.

Yes, the TypeScript syntax doesn't allow for for or if inside of template statements ${}. Instead, you need to think more functionally:

Instead of for (const element of list) {...} you would do list.map(element => ...) and instead of if ... else ... you use the ternary operator condition ? then : else.

[zcy19373416]

The bundler should bundle all referenced TypeScript files. All other files are not available and need to be fetched from a web server.

I think I know where the problem is. My template files in ./templates folder are all .liquid files rather than TypeScript files, and the LiquidJS references them as plain text files. So the bundler doesn't bundle them into ./public/my-language-server-worker.js, which caused my problem.

Instead of for (const element of list) {...} you would do list.map(element => ...) and instead of if ... else ... you use the ternary operator condition ? then : else.

Yes, thank you for your advice, I replaced my template engine with the integrated generator tools in Langium after struggling for so long and now I can do the generation in the web gracefully.
It really helped me a lot, thanks for your help :)