Use Monaco for online demo (#139)

.vscode/launch.json

@@ -2,13 +2,13 @@
  "version": "0.2.0",
  "configurations": [
  {
- "name": "Bicep.Wasm",
+ "name": "Bicep Web Demo",
  "type": "coreclr",
  "request": "launch",
  "preLaunchTask": "build",
  "program": "dotnet",
- "args": ["run", "${workspaceFolder}/src/Bicep.Wasm/bin/Debug/netstandard2.1/Bicep.Wasm.dll"],
- "cwd": "${workspaceFolder}/src/Bicep.Wasm",
+ "args": ["run", "${workspaceFolder}/src/Bicep.WebDemo/bin/Debug/netstandard2.1/Bicep.WebDemo.dll"],
+ "cwd": "${workspaceFolder}/src/Bicep.WebDemo",
  "console": "internalConsole",
  "stopAtEntry": false,
  "serverReadyAction": {

Bicep.sln

@@ -5,7 +5,7 @@ VisualStudioVersion = 16.0.30011.22
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Bicep.Cli", "src\Bicep.Cli\Bicep.Cli.csproj", "{58F20140-729B-41E0-91F0-7004C4E0CB1E}"
 EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Bicep.Wasm", "src\Bicep.Wasm\Bicep.Wasm.csproj", "{6679B13D-BA2B-43C8-A548-6C6D22E19BE1}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Bicep.WebDemo", "src\Bicep.WebDemo\Bicep.WebDemo.csproj", "{6679B13D-BA2B-43C8-A548-6C6D22E19BE1}"
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Bicep.Core", "src\Bicep.Core\Bicep.Core.csproj", "{D72C8232-24ED-4EDD-ABDB-16194681D9F2}"
 EndProject

src/Bicep.WebDemo/App.razor

@@ -0,0 +1,112 @@
+@using Bicep.Core.Syntax
+@using Bicep.Core.SemanticModel
+@using Bicep.Core.Emit
+@using Bicep.Core.Text
+
+@inject IJSRuntime JsRuntime;
+
+<div class="container">
+ <div id="editor_lhs" class="left-half" />
+ <div id="editor_rhs" class="right-half" />
+</div>
+
+@code {
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ await base.OnAfterRenderAsync(firstRender);
+
+ if (firstRender)
+ {
+ await JsRuntime.InvokeAsync<object>("CreateDemoEditors", DotNetObjectReference.Create(this));
+
+ await JS_SetLhsContent(GetStartingTemplate());
+ await JS_OnContentChanged();
+ }
+ }
+
+ [JSInvokable]
+ public async Task JS_OnContentChanged()
+ => await Compile();
+
+ public async Task<string> JS_GetLhsContent()
+ => await JsRuntime.InvokeAsync<string>("GetLhsContent", new object[] { });
+
+ public async Task JS_SetLhsContent(string value)
+ => await JsRuntime.InvokeVoidAsync("SetLhsContent", new object[] { value });
+
+ public async Task JS_SetRhsContent(string value)
+ => await JsRuntime.InvokeVoidAsync("SetRhsContent", new object[] { value });
+
+ public async Task JS_SetLhsDiagnostics(IEnumerable<dynamic> diagnostics)
+ => await JsRuntime.InvokeVoidAsync("SetLhsDiagnostics", new object[] { diagnostics });
+
+ private static dynamic ToMonacoDiagnostic(Error error,IReadOnlyList<int> lineStarts)
+ {
+ var (startLine, startChar) = TextCoordinateConverter.GetPosition(lineStarts, error.Span.Position);
+ var (endLine, endChar) = TextCoordinateConverter.GetPosition(lineStarts, error.Span.Position + error.Span.Length);
+
+ return new {
+ code = "BCP001",
+ message = error.Message,
+ startLineNumber = startLine + 1,
+ startColumn = startChar + 1,
+ endLineNumber = endLine + 1,
+ endColumn = endChar + 1,
+ };
+ }
+
+ private static string GetStartingTemplate()
+ {
+ return ReadStreamToEnd(Assembly.GetExecutingAssembly().GetManifestResourceStream("Bicep.WebDemo.basic.arm"));
+ }
+
+ private static string ReadStreamToEnd(Stream stream)
+ {
+ using var reader = new StreamReader(stream);
+ return reader.ReadToEnd();
+ }
+
+ private async Task Compile()
+ {
+ try
+ {
+ var content = await JS_GetLhsContent();
+
+ var lineStarts = TextCoordinateConverter.GetLineStarts(content);
+ var compilation = new Compilation(SyntaxFactory.CreateFromText(content));
+
+ var emitter = new TemplateEmitter(compilation.GetSemanticModel());
+
+ // memory stream is not ideal for frequent large allocations
+ using var stream = new MemoryStream();
+ var emitResult = emitter.Emit(stream);
+
+ await JS_SetLhsDiagnostics(emitResult.Diagnostics.Select(e => ToMonacoDiagnostic(e, lineStarts)));
+
+ if (emitResult.Status != EmitStatus.Failed)
+ {
+ // compilation was successful or had warnings - return the compiled template
+ stream.Position = 0;
+ var template = ReadStreamToEnd(stream);
+ await JS_SetRhsContent(template);
+
+ return;
+ }
+
+ // compilation failed
+ var buffer = new StringBuilder();
+ foreach (Error diagnostic in emitResult.Diagnostics)
+ {
+ var (line, character) = TextCoordinateConverter.GetPosition(lineStarts, diagnostic.Span.Position);
+
+ buffer.AppendLine($"({line + 1},{character + 1}): error BCP001: {diagnostic.Message}");
+ }
+
+ await JS_SetRhsContent(buffer.ToString());
+ }
+ catch (Exception exception)
+ {
+ await JS_SetRhsContent(exception.ToString());
+ }
+ }
+}

src/Bicep.Wasm/Program.cs → src/Bicep.WebDemo/Program.cs

@@ -8,7 +8,7 @@
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
 
-namespace Bicep.Wasm
+namespace Bicep.WebDemo
 {
  public class Program
  {

src/Bicep.Wasm/Properties/launchSettings.json → src/Bicep.WebDemo/Properties/launchSettings.json

@@ -16,7 +16,7 @@
  "ASPNETCORE_ENVIRONMENT": "Development"
  }
  },
- "Bicep.Wasm": {
+ "Bicep.WebDemo": {
  "commandName": "Project",
  "launchBrowser": true,
  "inspectUri": "{wsProtocol}:https://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

src/Bicep.Wasm/_Imports.razor → src/Bicep.WebDemo/_Imports.razor

@@ -8,5 +8,5 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
-@using Bicep.Wasm
+@using Bicep.WebDemo
 @using Bicep.Core.Parser

src/Bicep.WebDemo/wwwroot/css/app.css

@@ -0,0 +1,21 @@
+html, body {
+ height: 100vh;
+ border: 0;
+ margin: 0;
+ overflow: hidden;
+}
+
+.container {
+ height: 100vh;
+ display: grid;
+ grid-auto-columns: 1fr;
+ grid-auto-flow: column;
+}
+
+.left-half {
+ grid-column: 1;
+}
+
+.right-half {
+ grid-column: 2;
+}

src/Bicep.WebDemo/wwwroot/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+ <title>Bicep Web Demo</title>
+ <base href="/" />
+ <link href="css/app.css" rel="stylesheet" />
+ <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css" integrity="sha512-XjO5XYWl8u7tYF3CItEHgoWh8rtQmDeSzPJq4+4PIrbak7TiqeKbWv/4ZwHZ1HAf5dIWHXoguA/jobn2psKZ7w==" crossorigin="anonymous" />
+</head>
+
+<body>
+ <app></app>
+ <script src="_framework/blazor.webassembly.js"></script>
+ <script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs' } };</script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js" integrity="sha512-gWqaPfGsZiCkYB6e5mNN4SMRpEvLGItLBqgOAoyLSKtDxWS2O1YPcOeGTy8d8l00gqc8rVue9ae/ncZqhmfj4g==" crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.nls.min.js" integrity="sha512-4XY3/LL6Plkq2tXMnatY+se07ZhwFMkZehD5Z68HrKoSL3BTyLDjwFomhUWixKu8VUw6jWe/8RXT1WtH95lLFg==" crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.js" integrity="sha512-CK3czr9gLG2z/ygdSM+gNenkN9AShfpW4gMjVyY06VgFHLoc4OCoO92Z8UkcBwVX0ufoYbJw3IVs1mHfXQeI3g==" crossorigin="anonymous"></script>
+ <script src="js/app.js"></script>
+</body>
+
+</html>