microsoft · riknoll · Mar 7, 2025 · Mar 6, 2025 · Mar 6, 2025 · Mar 7, 2025
diff --git a/package.json b/package.json
@@ -361,8 +361,8 @@
   "dependencies": {
     "@types/path-browserify": "^1.0.0",
     "@vscode/extension-telemetry": "^0.7.5",
-    "makecode-browser": "^1.3.1",
-    "makecode-core": "^1.7.0",
+    "makecode-browser": "^1.3.2",
+    "makecode-core": "^1.7.1",
     "path-browserify": "^1.0.1"
   }
 }
diff --git a/resources/assetMessaging.js b/resources/assetMessaging.js
@@ -4,6 +4,11 @@
 
     window.addEventListener("message", function (m) {
         if (m.data._fromVscode) {
+            if (m.data.type === "fetch-html") {
+                frame.srcdoc = m.data.srcDoc;
+                return;
+            }
+
             frame.contentWindow.postMessage(m.data, "*");
 
             if (m.data.type === "open") {
@@ -20,5 +25,9 @@
     });
     document.addEventListener("DOMContentLoaded", function (event) {
         frame = document.getElementById("asset-editor-frame");
+
+        vscode.postMessage({
+            type: "fetch-html"
+        });
     });
 }())
diff --git a/resources/assetframe.html b/resources/assetframe.html
@@ -11,8 +11,13 @@
 
 <body>
     <div id="asset-editor-container">
-        <iframe id="asset-editor-frame" style="position:absolute;top:0;left:0;width:100%;height:100%;" src="@ASSETURL@" allowfullscreen="allowfullscreen"
-            sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0">
+        <iframe
+            id="asset-editor-frame"
+            style="position:absolute;top:0;left:0;width:100%;height:100%;"
+            allowfullscreen="allowfullscreen"
+            sandbox="allow-popups allow-forms allow-scripts allow-same-origin"
+            frameborder="0"
+        >
         </iframe>
     </div>
 </body>

diff --git a/src/web/assetEditor.ts b/src/web/assetEditor.ts
@@ -2,6 +2,7 @@
 import { activeWorkspace, findFilesAsync, readFileAsync, writeFileAsync } from "./host";
 import { syncJResAsync } from "./jres";
 import { readTextFileAsync, throttle } from "./util";
+import { getAssetEditorHtmlAsync } from "./makecodeOperations";
 
 let extensionContext: vscode.ExtensionContext;
 // const assetUrl = "http://localhost:3232/asseteditor.html";
@@ -70,6 +71,7 @@
 
     protected panel: vscode.WebviewPanel;
     protected editing: AssetEditorState | undefined;
+    protected assetEditorHtml: string | undefined;
     protected disposables: vscode.Disposable[];
     protected pendingMessages: {[index: string]: (res: any) => void} = {};
     protected nextId = 0;
@@ -137,6 +139,12 @@
         }
 
         switch (message.type) {
+            case "fetch-html":
+                this.postMessageCore({
+                    type: "fetch-html",
+                    srcDoc: this.assetEditorHtml
+                });
+                break;
             case "event":
                 this.handleSimulatorEventAsync(message);
                 break;
@@ -158,22 +166,28 @@
     }
 
     sendMessageAsync(message: any) {
-        message._fromVscode = true;
         message.id = this.nextId++;
 
         return new Promise<any>(resolve => {
             this.pendingMessages[message.id] = resolve;
-            this.panel.webview.postMessage(message);
+            this.postMessageCore(message);
         });
     }
 
     addDisposable(d: vscode.Disposable) {
         this.disposables.push(d);
     }
 
+    protected postMessageCore(message: any) {
+        message._fromVscode = true;
+        this.panel.webview.postMessage(message);
+    }
+
     protected async initWebviewHtmlAsync() {
         this.panel.webview.html = "";
-        const simulatorHTML = await getAssetEditorHtmlAsync(this.panel.webview);
+
+        this.assetEditorHtml = await getAssetEditorHtmlAsync(activeWorkspace());;
+        const simulatorHTML = await getAssetEditorLoaderHtmlAsync(this.panel.webview);
         this.panel.webview.html = simulatorHTML;
     }
 
@@ -220,16 +234,14 @@
 }
 
 
-async function getAssetEditorHtmlAsync(webview: vscode.Webview) {
+async function getAssetEditorLoaderHtmlAsync(webview: vscode.Webview) {
     const uri = vscode.Uri.joinPath(extensionContext.extensionUri, "resources", "assetframe.html");
     const contents = await readTextFileAsync(uri);
 
     const pathURL = (s: string) =>
         webview.asWebviewUri(vscode.Uri.joinPath(extensionContext.extensionUri, "resources", s)).toString();
 
-    return contents
-        .replace(/@RES@\/([\w\-\.]+)/g, (f, fn) => pathURL(fn))
-        .replace("@ASSETURL@", assetUrl);
+    return contents.replace(/@RES@\/([\w\-\.]+)/g, (f, fn) => pathURL(fn));
 }
 
 async function readProjectJResAsync() {
@@ -272,7 +284,7 @@
 async function readProjectPaletteAsync() {
    const config = await readFileAsync("./pxt.json", "utf8");
    const parsed = JSON.parse(config);
    if (parsed.palette) return parsed.palette as string[];
 }

 async function saveFilesAsync(files: {[index: string]: string}) {

diff --git a/src/web/host.ts b/src/web/host.ts
@@ -14,7 +14,7 @@ export function createVsCodeHost(): Host {
         existsAsync: async (p) => existsAsync(rmFolderPrefix(p)),
         unlinkAsync: async (p) => unlinkAsync(rmFolderPrefix(p)),
         cwdAsync: async () => getFolderName(),
-        symlinkAsync: async () => {},
+        symlinkAsync: async () => { },
         listFilesAsync: async (d, f) => listFilesAsync(rmFolderPrefix(d), f),
         requestAsync: httpRequestCoreAsync,
         createLanguageServiceAsync: async (editor) => new BrowserLanguageService(editor),
@@ -24,7 +24,8 @@ export function createVsCodeHost(): Host {
             throw new Error(`Exit with status ${code}`);
         },
         bufferToString: buffer => new TextDecoder().decode(buffer),
-        stringToBuffer
+        stringToBuffer,
+        base64EncodeBufferAsync
     };
 }
 
@@ -104,78 +105,65 @@ async function listFilesAsync(directory: string, filename: string) {
     });
 }
 
-export function httpRequestCoreAsync(options: HttpRequestOptions) {
-    return new Promise<HttpResponse>((resolve, reject) => {
-        let client: XMLHttpRequest;
-        let resolved = false;
+export async function httpRequestCoreAsync(options: HttpRequestOptions) {
+    const headers = options.headers || {};
+    const data = options.data;
+    const method = options.method || (data == null ? "GET" : "POST");
+
+    let buf: null | Uint8Array | string;
+
+    if (data == null) {
+        buf = null;
+    } else if (data instanceof Uint8Array) {
+        buf = data;
+    } else if (typeof data === "object") {
+        buf = JSON.stringify(data);
+        headers["content-type"] = "application/json; charset=utf8";
+    } else if (typeof data === "string") {
+        buf = data;
+    } else {
+        throw new Error("bad data");
+    }
 
-        let headers = options.headers || {};
+    const requestHeaders = new Headers();
+    Object.keys(headers).forEach(k => {
+        requestHeaders.set(k, headers[k]);
+    });
 
-        client = new XMLHttpRequest();
-        client.onreadystatechange = () => {
-            if (resolved) {return;} // Safari/iOS likes to call this thing more than once
+    const resp = await fetch(options.url, {
+        method,
+        headers: requestHeaders,
+        body: buf
+    });
 
-            if (client.readyState === 4) {
-                resolved = true;
-                let res: HttpResponse = {
-                    statusCode: client.status,
-                    headers: {},
-                    buffer: (client as any).responseBody || client.response,
-                    text: client.responseText,
-                };
+    const body = await resp.arrayBuffer();
 
-                if (typeof res.buffer === "string") {
-                    res.buffer = new TextEncoder().encode(res.buffer);
-                }
-                const allHeaders = client.getAllResponseHeaders();
-                allHeaders.split(/\r?\n/).forEach(l => {
-                    let m = /^\s*([^:]+): (.*)/.exec(l);
-                    if (m) {
-                        res.headers[m[1].toLowerCase()] = m[2];
-                    }
-                });
-                resolve(res);
-            }
-        };
+    let text: string | undefined;
 
-        let data = options.data;
-        let method = options.method || (data == null ? "GET" : "POST");
-
-        let buf: any;
-
-        if (data == null) {
-            buf = null;
-        } else if (data instanceof Uint8Array) {
-            buf = data;
-        } else if (typeof data === "object") {
-            buf = JSON.stringify(data);
-            headers["content-type"] = "application/json; charset=utf8";
-        } else if (typeof data === "string") {
-            buf = data;
-        } else {
-            throw new Error("bad data");
-        }
+    try {
+        text = new TextDecoder().decode(body);
+    }
+    catch (e) {
+        // binary data
+    }
 
-        client.open(method, options.url);
+    const res: HttpResponse = {
+        statusCode: resp.status,
+        headers: {},
+        buffer: new Uint8Array(body),
+        text,
+    };
 
-        Object.keys(headers).forEach(k => {
-            client.setRequestHeader(k, headers[k]);
-        });
+    resp.headers.forEach((value, key) => res.headers[key.toLowerCase()] = value);
 
-        if (buf == null) {
-            client.send();
-        }
-        else {
-            client.send(buf);
-        }
-    });
+    return res;
 }
 
 function resolvePath(path: string) {
     return vscode.Uri.joinPath(activeWorkspace().uri, path);
 }
 
-export function stringToBuffer(str: string, encoding?: string){
+export function stringToBuffer(str: string, encoding?: string) {
     let contents: string;
     if (encoding === "base64") {
         try {
@@ -237,4 +225,15 @@ export async function findFilesAsync(extension: string, root: vscode.Uri, matchW
     }
 
     return result;
+}
+
+function base64EncodeBufferAsync(buffer: Uint8Array | ArrayBuffer): Promise<string> {
+    return new Promise<string>(resolve => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const url = reader.result as string;
+            resolve(url.slice(url.indexOf(',') + 1));
+        };
+        reader.readAsDataURL(new Blob([buffer]));
+    });
 }
diff --git a/src/web/makecodeOperations.ts b/src/web/makecodeOperations.ts
@@ -72,6 +72,10 @@ export function getSimHtmlAsync(folder: vscode.WorkspaceFolder, cancellationToke
     return enqueueOperationAsync(folder, () => cmd.getSimHTML({}), cancellationToken);
 }
 
+export function getAssetEditorHtmlAsync(folder: vscode.WorkspaceFolder, cancellationToken?: vscode.CancellationToken) {
+    return enqueueOperationAsync(folder, () => cmd.getAssetEditorHTML({}), cancellationToken);
+}
+
 /**
  * The mkc CLI uses global state, so we need to perform operations in a queue just in case the
  * user is doing things in multiple workspaces at once