feat(demo): demo shadow dom in demo project

Author: Loïc Mangeonjean

demo/src/main.workbench.ts

@@ -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/src/setup.common.ts

@@ -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/src/setup.workbench.ts

@@ -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/vite.config.ts

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