Merge pull request #617 from CodinGame/shadow-root

Support shadow root

Author: CGNonofr

README.md

@@ -323,6 +323,80 @@ npm run start:debugServer
 
 See the [VSCode Server](https://github.com/CodinGame/monaco-vscode-api/wiki/How-to-install-and-use-VSCode-server-with-monaco‐vscode‐api) wiki page.
 
+## Shadow dom (⚠️ beta ⚠️)
+
+The library supports shadow-dom.
+
+⚠️ 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))
+- The VSCode styles won't impact other parts of your app
+- You page head won't be polluted with dozen of css files from VSCode
+
+### How to use 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 (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$/,
+  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',
+  enforce: 'pre',
+  async resolveId(source, importer, options) {
+    const resolved = (await this.resolve(source, importer, options))!
+    if (
+      resolved.id.match(
+        /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/
+      )
+    ) {
+      return {
+        ...resolved,
+        id: resolved.id + '?inline'
+      }
+    }
+    return undefined
+  }
+}
+```
+
 ## Troubleshooting
 
 If something doesn't work, make sure to check out the [Troubleshooting](https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting) wiki page.

demo/package-lock.json

@@ -29,3 +29,13 @@ document.querySelector('#customEditorPanel')!.addEventListener('click', async ()
 document.querySelector('#clearStorage')!.addEventListener('click', async () => {
   await clearStorage()
 })
+
+document.querySelector('#toggleShadowDom')!.addEventListener('click', async () => {
+  const url = new URL(window.location.href)
+  if (url.searchParams.has('disableShadowDom')) {
+    url.searchParams.delete('disableShadowDom')
+  } else {
+    url.searchParams.set('disableShadowDom', 'true')
+  }
+  window.location.href = url.toString()
+})

demo/package.json

@@ -95,6 +95,7 @@ export const remotePath =
   remoteAuthority != null ? (params.get('remotePath') ?? undefined) : undefined
 export const resetLayout = params.has('resetLayout')
 export const useHtmlFileSystemProvider = params.has('htmlFileSystemProvider')
+export const disableShadowDom = params.has('disableShadowDom')
 params.delete('resetLayout')
 
 window.history.replaceState({}, document.title, url.href)

demo/patches/@xterm+addon-webgl+0.19.0-beta.99.patch

@@ -17,17 +17,30 @@ import {
   constructOptions,
   envOptions,
   remoteAuthority,
-  userDataProvider
+  userDataProvider,
+  disableShadowDom
 } from './setup.common'
 
-const container = document.createElement('div')
+let container = document.createElement('div')
 container.style.height = '100vh'
 
 document.body.replaceChildren(container)
 
+if (!disableShadowDom) {
+  const shadowRoot = container.attachShadow({
+    mode: 'open'
+  })
+
+  const workbenchElement = document.createElement('div')
+  workbenchElement.style.height = '100vh'
+  shadowRoot.appendChild(workbenchElement)
+  container = workbenchElement
+}
+
 const buttons = document.createElement('div')
 buttons.innerHTML = `
 <button id="toggleHTMLFileSystemProvider">Toggle HTML filesystem provider</button>
+<button id="toggleShadowDom">Toggle Shadow Dom usage</button>
 <button id="customEditorPanel">Open custom editor panel</button>
 <button id="clearStorage">Clear user data</button>
 <button id="resetLayout">Reset layout</button>

demo/src/main.workbench.ts

@@ -17,6 +17,24 @@ export default defineConfig({
     format: 'es'
   },
   plugins: [
+    {
+      name: 'load-vscode-css-as-string',
+      enforce: 'pre',
+      async resolveId(source, importer, options) {
+        const resolved = (await this.resolve(source, importer, options))!
+        if (
+          resolved.id.match(
+            /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/
+          )
+        ) {
+          return {
+            ...resolved,
+            id: resolved.id + '?inline'
+          }
+        }
+        return undefined
+      }
+    },
     {
       // For the *-language-features extensions which use SharedArrayBuffer
       name: 'configure-response-headers',

demo/src/setup.common.ts

@@ -13,6 +13,26 @@ export default defineConfig({
     target: 'esnext',
     assetsInlineLimit: 0
   },
+  plugins: [
+    {
+      name: 'load-vscode-css-as-string',
+      enforce: 'pre',
+      async resolveId(source, importer, options) {
+        const resolved = (await this.resolve(source, importer, options))!
+        if (
+          resolved.id.match(
+            /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/
+          )
+        ) {
+          return {
+            ...resolved,
+            id: resolved.id + '?inline'
+          }
+        }
+        return undefined
+      }
+    }
+  ],
   worker: {
     format: 'es'
   },

demo/src/setup.workbench.ts

@@ -30,6 +30,12 @@
   - Update dependencies
   - Implement improvements dependening on the new features available from vscode (optional)
   - Don't forget to check the `Window` output (in the `OUTPUT` panel tab) to check for errors
+  - Check all possible combinations
+    - Full workbench mode or not
+    - Shadow dom mode or not
+    - Using VSCode server
+    - Using HTML file system provider
+    - ...
 
 ## monaco-vscode-api demo