notebooks: hide acquireVsCodeApi from renderers (#109273)

src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts

@@ -322,7 +322,6 @@ export class BackLayerWebView extends Disposable {
 					self.require = {};
 				</script>
 				${coreDependencies}
-				<div id="__vscode_preloads"></div>
 				<div id='container' class="widgetarea" style="position: absolute;width:100%;top: 0px"></div>
 				<script>${preloadsScriptStr(outputNodePadding)}</script>
 			</body>

src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts

@@ -12,7 +12,13 @@ import { RenderOutputType } from 'vs/workbench/contrib/notebook/common/notebookC
 // function. Imports are not allowed. This is stringifies and injected into
 // the webview.
 
-declare const acquireVsCodeApi: () => ({ getState(): { [key: string]: unknown; }, setState(data: { [key: string]: unknown; }): void, postMessage: (msg: unknown) => void; });
+declare module globalThis {
+	const acquireVsCodeApi: () => ({
+		getState(): { [key: string]: unknown; };
+		setState(data: { [key: string]: unknown; }): void;
+		postMessage: (msg: unknown) => void;
+	});
+}
 
 declare class ResizeObserver {
 	constructor(onChange: (entries: { target: HTMLElement, contentRect?: ClientRect; }[]) => void);
@@ -30,7 +36,9 @@ interface EmitterLike<T> {
 }
 
 function webviewPreloads() {
+	const acquireVsCodeApi = globalThis.acquireVsCodeApi;
 	const vscode = acquireVsCodeApi();
+	delete (globalThis as any).acquireVsCodeApi;
 
 	const handleInnerClick = (event: MouseEvent) => {
 		if (!event || !event.view || !event.view.document) {
@@ -93,6 +101,18 @@ function webviewPreloads() {
 		}
 	};
 
+	const runScript = async (url: string, originalUri: string, globals: { [name: string]: unknown } = {}): Promise<string | undefined> => {
+		const res = await fetch(url);
+		const text = await res.text();
+		if (!res.ok) {
+			throw new Error(`Unexpected ${res.status} requesting ${originalUri}: ${text || res.statusText}`);
+		}
+
+		const args = Object.entries(globals);
+		new Function(...args.map(([k]) => k), text)(...args.map(([, v]) => v));
+		return undefined;
+	};
+
 	const outputObservers = new Map<string, ResizeObserver>();
 
 	const resizeObserve = (container: Element, id: string) => {
@@ -477,17 +497,11 @@ function webviewPreloads() {
 				break;
 			case 'preload':
 				const resources = event.data.resources;
-				const preloadsContainer = document.getElementById('__vscode_preloads')!;
-				for (let i = 0; i < resources.length; i++) {
-					const { uri, originalUri } = resources[i];
-					const scriptTag = document.createElement('script');
-					scriptTag.setAttribute('src', uri);
-					preloadsContainer.appendChild(scriptTag);
-					preloadPromises.set(uri, new Promise<string | undefined>(resolve => {
-						scriptTag.addEventListener('load', () => resolve(undefined));
-						scriptTag.addEventListener('error', () =>
-							resolve(`Network error loading ${originalUri}, does the path exist?`)
-						);
+				const globals = event.data.type === 'preload' ? { acquireVsCodeApi } : {};
+				for (const { uri, originalUri } of resources) {
+					preloadPromises.set(uri, runScript(uri, originalUri, globals).catch(err => {
+						console.error(err);
+						return err.message || String(err);
 					}));
 				}
 				break;

src/vs/workbench/contrib/webview/browser/pre/main.js

@@ -143,7 +143,7 @@
 	function getVsCodeApiScript(allowMultipleAPIAcquire, state) {
 		const encodedState = state ? encodeURIComponent(state) : undefined;
 		return `
-			const acquireVsCodeApi = (function() {
+			globalThis.acquireVsCodeApi = (function() {
 				const originalPostMessage = window.parent.postMessage.bind(window.parent);
 				const targetOrigin = '*';
 				let acquired = false;