feat(web): Compile with language server instead of dedicated worker

apps/web/src/app/editor/editor/editor.component.ts

@@ -27,6 +27,7 @@ export class EditorComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   @Input() code: string;
   @Output() codeChanged = new EventEmitter<string>();
+  @Output() ready = new EventEmitter<void>();
 
   worker?: Worker;
   editor?: editor.IStandaloneCodeEditor;
@@ -60,6 +61,8 @@ export class EditorComponent implements AfterViewInit, OnChanges, OnDestroy {
       this.lspClient.start();
       reader.onClose(() => this.lspClient?.stop());
     }
+
+    this.ready.next();
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -68,6 +71,13 @@ export class EditorComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  async compile(): Promise<string | undefined> {
+    return this.lspClient?.sendRequest('$/compile', {
+      uri: this.editor?.getModel()?.uri.toString(),
+      format: 'js',
+    });
+  }
+
   async ngOnDestroy() {
     this.editor?.dispose();
     await this.lspClient?.stop();

apps/web/src/app/editor/playground/playground.component.html

@@ -1,4 +1,10 @@
 <div style="display: flex">
-  <stc-editor #editor style="width: 50%" [code]="code" (codeChanged)="compile$.next($event)"></stc-editor>
+  <stc-editor
+    #editor
+    style="width: 50%"
+    [code]="code"
+    (codeChanged)="compile$.next($event)"
+    (ready)="compile$.next(code)"
+  ></stc-editor>
   <stc-editor style="width: 50%" [code]="compiled" language="javascript"></stc-editor>
 </div>

apps/web/src/app/editor/playground/playground.component.ts

@@ -12,50 +12,37 @@ export class PlaygroundComponent implements OnInit {
   @ViewChild('editor', {static: true}) editor: EditorComponent;
 
   code = '';
-  compiled = 'class Foo {}';
+  compiled = '';
   compile$ = new Subject<string>();
 
-  worker?: Worker;
-
   constructor(
     private http: HttpClient,
   ) {
   }
 
   ngOnInit() {
-    this.worker = new Worker(new URL('./playground.worker.ts', import.meta.url));
-
     const loadCode = localStorage.getItem('playground/dyvil');
     if (loadCode) {
       this.code = loadCode;
-      this.compile(loadCode).then(c => this.compiled = c);
     } else {
       const examplePath = 'assets/examples/Greeter.dyv';
-      this.http.get(examplePath, {responseType: 'text'}).subscribe(code => this.code = code);
+      this.http.get(examplePath, {responseType: 'text'}).subscribe(code => {
+        this.code = code;
+      });
     }
 
     this.compile$.pipe(
       debounceTime(400),
     ).subscribe(code => {
       localStorage.setItem('playground/dyvil', code);
-      this.compile(code).then(c => this.compiled = c);
+      this.compile();
     });
   }
 
-  async compile(compile: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-      if (!this.worker) {
-        return;
-      }
-
-      this.worker.postMessage({compile});
-      this.worker.addEventListener('message', msg => {
-        const compiled = msg.data.compiled;
-        if (compiled) {
-          resolve(compiled);
-        }
-      });
-    });
+  async compile() {
+    const compiled = await this.editor.compile();
+    if (compiled) {
+      this.compiled = compiled;
+    }
   }
-
 }

libs/language-service/src/index.ts

@@ -21,4 +21,9 @@ export function setup(connection: Connection) {
   new FormatService(connectionService, documentService);
   new ActionService(connectionService, documentService);
   new InlayHintService(connectionService, documentService);
+
+  connection.onRequest('$/compile', params => {
+    const ast = documentService.getAST(params.uri);
+    return ast?.toString(params.format);
+  });
 }