Fix build issues

Azure · Jan 20, 2025 · ba02ef6 · ba02ef6
1 parent 1f2b8e1
commit ba02ef6
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 52 deletions.
diff --git a/src/playground/package-lock.json b/src/playground/package-lock.json
diff --git a/src/playground/package.json b/src/playground/package.json
@@ -16,22 +16,22 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.7",
     "@types/pako": "^2.0.3",
-    "@types/react": "^19.0.5",
+    "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/webpack": "^5.28.5",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-notice": "^1.0.0",
     "globals": "^15.14.0",
     "html-webpack-plugin": "^5.6.3",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "nerdbank-gitversioning": "^3.7.112",
+    "nerdbank-gitversioning": "^3.7.115",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",

diff --git a/src/playground/src/index.tsx b/src/playground/src/index.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Container, Row, Spinner } from 'react-bootstrap';
 import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -10,15 +10,15 @@ import './index.css';
 import { initializeInterop } from './lspInterop';
 import { Playground } from './playground';
 
-ReactDOM.render(
+
+const root = createRoot(document.getElementById('root'));
+root.render(
   // Loading spinner while we initialize Blazor
   <Container className="d-flex vh-100">
     <Row className="m-auto align-self-center">
       <Spinner animation="border" variant="light" />
     </Row>
-  </Container>,
-  document.getElementById('root')
-);
+  </Container>);
 
 async function initialize() {
   const insights = new ApplicationInsights({
@@ -32,12 +32,10 @@ async function initialize() {
 
   await initializeInterop(self);
 
-  ReactDOM.render(
+  root.render(
     <div className="app-container">
       <Playground insights={insights} />
-    </div>,
-    document.getElementById('root')
-  );
+    </div>);
 }
 
 initialize();
diff --git a/src/playground/src/playground.tsx b/src/playground/src/playground.tsx
@@ -6,7 +6,7 @@ import { Button, ButtonGroup, Col, Container, Dropdown, FormControl, Nav, Navbar
 import './playground.css';
 import { JsonEditor } from './jsonEditor';
 import { BicepEditor } from './bicepEditor';
-import { copyShareLinkToClipboard, handleShareLink } from './utils';
+import { getShareLink, handleShareLink } from './utils';
 import { quickstartsPaths, getQuickstartsLink } from './examples';
 import { decompile } from './lspInterop';
 import { IApplicationInsights } from '@microsoft/applicationinsights-web';
@@ -69,7 +69,8 @@ export const Playground : React.FC<Props> = (props) => {
     insights.trackEvent({ name: 'copySharedLink' });
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
-    copyShareLinkToClipboard(bicepContent);
+    const shareLink = getShareLink(bicepContent);
+    navigator.clipboard.writeText(shareLink);
   }
 
   const handleDecompileClick = (file: File) => {

diff --git a/src/playground/src/utils.ts b/src/playground/src/utils.ts
@@ -18,10 +18,15 @@ export function handleShareLink(onContents: (contents : string | null) => void):
   }
 }
 
-export function copyShareLinkToClipboard(content: string): void {
+export function getShareLink(content: string) {
   const contentHash = encodeHash(content);
-  const shareLink = `https://aka.ms/bicepdemo#${contentHash}`;
-  navigator.clipboard.writeText(shareLink);
+  let href = document.location.href;
+  if (href === 'https://azure.github.io/bicep/') {
+    // use aka.ms for the official site
+    href = 'https://aka.ms/bicepdemo';
+  }
+
+  return `${href}#${contentHash}`;
 }
 
 function encodeHash(content: string): string {