Convert playground to use vite instead of webpack (#16341)

###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/Azure/bicep/pull/16341)
Azure · Feb 8, 2025 · 8f4e885 · 8f4e885
1 parent e03c7bb
commit 8f4e885
Show file tree

Hide file tree

Showing 28 changed files with 2,255 additions and 4,278 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -493,7 +493,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
 
       - name: Check npm version
         run: npm -v

diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
 
       - name: npm ci
         run: npm ci

diff --git a/src/Bicep.Wasm/Program.cs b/src/Bicep.Wasm/Program.cs
@@ -24,7 +24,7 @@ public static async Task Main(string[] args)
 
         var jsRuntime = serviceProvider.GetRequiredService<IJSRuntime>();
         var interop = new Interop(jsRuntime, serviceProvider);
-        await jsRuntime.InvokeAsync<object>("BicepInitialize", DotNetObjectReference.Create(interop));
+        await jsRuntime.InvokeAsync<object>("InteropInitialize", DotNetObjectReference.Create(interop));
 
         await builder.Build().RunAsync();
     }

diff --git a/src/playground/eslint.config.mjs b/src/playground/eslint.config.mjs
@@ -7,6 +7,7 @@ import tseslint from "typescript-eslint";
 import pluginJest from 'eslint-plugin-jest';
 import notice from "eslint-plugin-notice";
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+
 export default tseslint.config({
   files: ["src/**/*.ts", "test/**/*.ts", "test-live/**/*.ts"],
   extends: [

diff --git a/src/playground/index.html b/src/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <title>Bicep Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>