workbench.ts patch now unnecessary

[progrium]

I don't know when this was introduced, but the stock workbench.ts will pull config from a data attribute of an element with id vscode-workbench-web-configuration. So I do a synchronous fetch of product.json (though maybe better to name workbench.json) in the index.html before the VSCode sources are loaded. If I understand correctly, this achieves the same result of the patched workbench.ts you have without patching/replacing it.

https://github.com/progrium/vscode-web/blob/main/patched/index.html#L27-L40

[wylieconlon]

It seems like it's become even easier to consume the workbench file with the recent ESM changes that vscode has been releasing over the last few week. Here's what I'm doing, which does not use the vscode-web prepackaged assets at all.

1. Install the official @vscode/test-web as a dependency of your repo
2. npx vscode-test-web --esm
3. View source on localhost:3000, and copy this as workbench.html
4. Edit workbench.html by deleting

<meta id="vscode-workbench-web-configuration"

And replace:

(function () {
    const configElement = window.document.getElementById('vscode-workbench-web-configuration');
    const configElementAttribute = configElement ? configElement.getAttribute('data-settings') : undefined;
    if (!configElement || !configElementAttribute) {
        throw new Error('Missing web configuration element');
    }
    const config = JSON.parse(configElementAttribute);
    create(window.document.body, {
        ...config,
        workspaceProvider: WorkspaceProvider.create(config),
        urlCallbackProvider: new LocalStorageURLCallbackProvider(config.callbackRoute)
    });
})();

with your config object:

(function () {
  const config = {
    productConfiguration: {
      nameShort: "VSCode Web Sample",
      nameLong: "VSCode Web sample",
      applicationName: "code-web-sample",
      dataFolderName: ".vscode-web-sample",
      version: "1.95.0",
      extensionsGallery: {
          serviceUrl: "https://open-vsx.org/vscode/gallery",
          itemUrl: "https://open-vsx.org/vscode/item",
          resourceUrlTemplate: "https://openvsxorg.blob.core.windows.net/resources/{publisher}/{name}/{version}/{path}"
      },
      extensionEnabledApiProposals: {
        "yourcompay.yourextension": ["fileSearchProvider", "textSearchProvider", "ipc"]
      }
    },
    folderUri: { scheme: "memfs", path: "/" },
    additionalBuiltinExtensions: [{
      scheme: window.location.protocol === "http:" ? "http" : "https",
      authority: window.location.host,
    }]
  };    
  create(window.document.body, {
    ...config,
    workspaceProvider: WorkspaceProvider.create(config),
    urlCallbackProvider: new LocalStorageURLCallbackProvider(config.callbackRoute)
  });
})();

then, you can use the official built assets from the .vscode-test-web/vscode-web-insider-<sha> folder along with your custom workbench.html file

[pomdtr]

It looks like you can also get the latest build url by going to:

• stable: https://update.code.visualstudio.com/api/update/web-standalone/stable/latest
• insider: https://update.code.visualstudio.com/api/update/web-standalone/insider/latest

[pomdtr]

In my case, I also add to set the following global var:

globalThis._VSCODE_WEB_PACKAGE_TTP = window.trustedTypes?.createPolicy('amdLoader', {
    createScriptURL(value) {
        return value;
    }
})

Otherwise I was not able to load assets from a CDN.