@codingame/monaco-vscode-api 16.1.0-shadow-root.1 → 16.1.0

package/README.md

@@ -327,7 +327,7 @@ See the [VSCode Server](https://github.com/CodinGame/monaco-vscode-api/wiki/How-
 
 The library supports shadow-dom.
 
-⚠️ VSCode itself does support shadow dom, and there are multiple parts that needed to be patched in order for it to work.
+⚠️ VSCode itself doesn't support shadow dom, and there are multiple parts that needed to be patched in order for it to work.
 
 There are multiple benefits of using it:
 - Your custom global style won't impact the VSCode workbench style (for instance if you did override the default [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing))
@@ -338,21 +338,44 @@ There are multiple benefits of using it:
 
 If the provided container element is a child of a shadow dom element, the styles will be injected in both the main page and the shadow root. That's it.
 
+### ⚠️ Xterm notice ⚠️
+
+The webgl renderer of xterm, which VSCode is using, doesn't support being used inside a shadom dom (see https://github.com/xtermjs/xterm.js/pull/5334).
+Until it's fixed and deployed, either do not use the terminal service override, or apply the patch on your side (using [patch-package](https://www.npmjs.com/package/patch-package) for instance).
+
 ### Prerequisites
 
-In order to be able to load the static css files in the shadow dom as well. Your bundler configuration needs to be adapted so that importing css files doesn't load their content in the page head, but instead just returns the file content as default. It can be achieved with most bundlers with some configurations.
+In order to be able to load the static css files in the shadow dom as well. Your bundler configuration needs to be adapted so that importing css files doesn't load their content in the page head, but instead just returns the file content as default (either as a string or a `CSSStyleSheet`). It can be achieved with most bundlers with some configurations.
+
+Note that the bundler should still resolve referenced assets in the css files, so you can't just use the `raw` loader, or the `assets/source` webpack module type.
 
 #### Webpack
+
 Add this rule in your configuration:
+
 ```typescript
 {
   test: /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/,
-  type: 'asset/source'
+  use: [
+    {
+      loader: 'css-loader',
+      options: {
+        esModule: false,
+        exportType: 'css-style-sheet', // or 'string', both are working
+        url: true,
+        import: true
+      }
+    }
+  ]
 }
 ```
 
+You should also make sure that no other loader is interfering with it, by either use a `oneOf` or exclusing those files in the other css loaders.
+
 #### Vite
+
 Add this plugin in your configuration:
+
 ```typescript
 {
   name: 'load-vscode-css-as-string',

package/css.js

@@ -1,21 +1,28 @@
 
 
-const styles = [];
+const sheets = [];
 function registerCss(module) {
-    const cssContent = module.default;
-    if (typeof cssContent === 'string') {
-        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(cssContent);
+    const exportedValue = module.default;
+    let sheet = undefined;
+    if (typeof exportedValue === 'string') {
+        sheet = new CSSStyleSheet();
+        sheet.replaceSync(exportedValue);
+    }
+    else if (exportedValue instanceof CSSStyleSheet) {
+        sheet = exportedValue;
+    }
+    if (sheet != null) {
         const fontFaces = Array.from(sheet.cssRules)
             .filter((rule) => rule instanceof CSSFontFaceRule)
             .map((r) => r.cssText);
         if (fontFaces.length > 0) {
-            const fontFaceStyle = document.createElement('style');
-            fontFaceStyle.setAttribute('type', 'text/css');
-            fontFaceStyle.appendChild(document.createTextNode(fontFaces.join('\n')));
-            document.head.insertBefore(fontFaceStyle, document.head.firstChild);
+            const fontFaceStyleSheet = new CSSStyleSheet();
+            for (const fontFace of fontFaces) {
+                fontFaceStyleSheet.insertRule(fontFace);
+            }
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceStyleSheet];
         }
-        styles.push(cssContent);
+        sheets.push(sheet);
     }
 }
 function getInjectElement(target) {
@@ -23,18 +30,14 @@ function getInjectElement(target) {
     if (root instanceof ShadowRoot) {
         return root;
     }
-    return document.head;
+    return document;
 }
 function injectCss(target) {
     const root = getInjectElement(target);
-    if (root instanceof ShadowRoot && styles.length === 0) {
+    if (root instanceof ShadowRoot && sheets.length === 0) {
         console.error("@codingame/monaco-vscode-api was loaded inside a shadow dom, but it's unable to load the css into it because the bundler configuration wasn't applied properly: imported css files should export their content as default");
     }
-    for (const style of styles) {
-        const styleEl = document.createElement('style');
-        styleEl.appendChild(document.createTextNode(style));
-        root.appendChild(styleEl);
-    }
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
 }
 
 export { injectCss, registerCss };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingame/monaco-vscode-api",
-  "version": "16.1.0-shadow-root.1",
+  "version": "16.1.0",
   "private": false,
   "description": "VSCode public API plugged on the monaco editor",
   "keywords": [],
@@ -16,13 +16,13 @@
   "type": "module",
   "dependencies": {
     "@c4312/eventsource-umd": "3.0.5",
-    "@codingame/monaco-vscode-base-service-override": "16.1.0-shadow-root.1",
-    "@codingame/monaco-vscode-environment-service-override": "16.1.0-shadow-root.1",
-    "@codingame/monaco-vscode-extensions-service-override": "16.1.0-shadow-root.1",
-    "@codingame/monaco-vscode-files-service-override": "16.1.0-shadow-root.1",
-    "@codingame/monaco-vscode-host-service-override": "16.1.0-shadow-root.1",
-    "@codingame/monaco-vscode-layout-service-override": "16.1.0-shadow-root.1",
-    "@codingame/monaco-vscode-quickaccess-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-base-service-override": "16.1.0",
+    "@codingame/monaco-vscode-environment-service-override": "16.1.0",
+    "@codingame/monaco-vscode-extensions-service-override": "16.1.0",
+    "@codingame/monaco-vscode-files-service-override": "16.1.0",
+    "@codingame/monaco-vscode-host-service-override": "16.1.0",
+    "@codingame/monaco-vscode-layout-service-override": "16.1.0",
+    "@codingame/monaco-vscode-quickaccess-service-override": "16.1.0",
     "marked": "14.0.0"
   },
   "main": "services.js",

package/services.js

@@ -92,7 +92,6 @@ import './vscode/src/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeybo
 export { default as Severity } from './vscode/src/vs/base/common/severity.js';
 export { StorageScope, StorageTarget } from './vscode/src/vs/platform/storage/common/storage.js';
 import { StandaloneServices } from './vscode/src/vs/editor/standalone/browser/standaloneServices.js';
-import { mixin } from './vscode/src/vs/base/common/objects.js';
 import { IInstantiationService } from './vscode/src/vs/platform/instantiation/common/instantiation.js';
 import { DisposableStore } from './vscode/src/vs/base/common/lifecycle.js';
 import { registerWorkbenchContribution2 } from './vscode/src/vs/workbench/common/contributions.js';
@@ -181,16 +180,16 @@ export { IKeybindingService } from './vscode/src/vs/platform/keybinding/common/k
 export { ISecretStorageService } from './vscode/src/vs/platform/secrets/common/secrets.service.js';
 export { ConfigurationTarget } from './vscode/src/vs/platform/configuration/common/configuration.js';
 
-if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.99.3-ec076fb0-304a-415b-949c-094574542c4f") {
-    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.99.3-ec076fb0-304a-415b-949c-094574542c4f"}, ${window.monacoVscodeApiBuildId} is already loaded`);
+if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.99.3-de370f37-1fc0-486b-a51c-37a009681fa0") {
+    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.99.3-de370f37-1fc0-486b-a51c-37a009681fa0"}, ${window.monacoVscodeApiBuildId} is already loaded`);
 }
-window.monacoVscodeApiBuildId = "1.99.3-ec076fb0-304a-415b-949c-094574542c4f";
+window.monacoVscodeApiBuildId = "1.99.3-de370f37-1fc0-486b-a51c-37a009681fa0";
 async function initialize(overrides, container = document.body, configuration = {}, env) {
     checkServicesNotInitialized();
     injectCss(container);
     initialize$1(container, configuration, env);
     const instantiationService = StandaloneServices.initialize({
-        [IProductService.toString()]: mixin({
+        [IProductService.toString()]: {
             version: "1.99.3",
             quality: 'stable',
             commit: "17baf841131aa23349f217ca7c570c76ee87b957",
@@ -202,8 +201,9 @@ async function initialize(overrides, container = document.body, configuration =
             reportIssueUrl: 'https://github.com/microsoft/vscode/issues/new',
             licenseName: 'MIT',
             licenseUrl: 'https://github.com/microsoft/vscode/blob/main/LICENSE.txt',
-            serverApplicationName: 'code-server-oss'
-        }, configuration.productConfiguration ?? {}),
+            serverApplicationName: 'code-server-oss',
+            ...(configuration.productConfiguration ?? {})
+        },
         ...getServiceOverride$6(),
         ...getServiceOverride$5(),
         ...getServiceOverride$4(),