|
| 1 | +import './style.css' |
| 2 | + |
| 3 | +const searchParams = new URLSearchParams() |
| 4 | +searchParams.set('mode', 'full-workbench') |
| 5 | +searchParams.set('sandboxed', '') |
| 6 | + |
| 7 | +const container = document.createElement('div') |
| 8 | +container.style.height = '100vh' |
| 9 | +container.style.display = 'flex' |
| 10 | +container.style.flexDirection = 'column' |
| 11 | + |
| 12 | +document.body.appendChild(container) |
| 13 | + |
| 14 | +function load(): Disposable { |
| 15 | + const wrapper = document.createElement('div') |
| 16 | + wrapper.style.flex = '1' |
| 17 | + wrapper.style.display = 'flex' |
| 18 | + container.append(wrapper) |
| 19 | + const shadowRoot = wrapper.attachShadow({ |
| 20 | + mode: 'open' |
| 21 | + }) |
| 22 | + |
| 23 | + const workbenchElement = document.createElement('div') |
| 24 | + workbenchElement.style.position = 'relative' |
| 25 | + workbenchElement.style.flex = '1' |
| 26 | + workbenchElement.style.maxWidth = '100%' |
| 27 | + shadowRoot.appendChild(workbenchElement) |
| 28 | + |
| 29 | + const loader = document.createElement('div') |
| 30 | + loader.style.position = 'absolute' |
| 31 | + loader.style.left = '0' |
| 32 | + loader.style.right = '0' |
| 33 | + loader.style.bottom = '0' |
| 34 | + loader.style.top = '0' |
| 35 | + loader.style.display = 'flex' |
| 36 | + loader.style.alignItems = 'center' |
| 37 | + loader.style.justifyContent = 'center' |
| 38 | + loader.style.border = '1px solid red' |
| 39 | + loader.textContent = 'Loading...' |
| 40 | + workbenchElement.appendChild(loader) |
| 41 | + |
| 42 | + const iframe = document.createElement('iframe') |
| 43 | + iframe.src = window.location.origin + '?' + searchParams?.toString() |
| 44 | + iframe.loading = 'eager' |
| 45 | + iframe.style.display = 'none' |
| 46 | + document.body.appendChild(iframe) |
| 47 | + |
| 48 | + window.addEventListener('message', (event) => { |
| 49 | + if (event.data === 'WAITING' && event.source === iframe.contentWindow) { |
| 50 | + // eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 51 | + ;(iframe.contentWindow as any)?.start(workbenchElement) |
| 52 | + } |
| 53 | + }) |
| 54 | + |
| 55 | + return { |
| 56 | + [Symbol.dispose]() { |
| 57 | + iframe.remove() |
| 58 | + wrapper.remove() |
| 59 | + document.querySelectorAll('[data-vscode]').forEach((el) => el.remove()) |
| 60 | + } |
| 61 | + } |
| 62 | +} |
| 63 | + |
| 64 | +let disposable = load() |
| 65 | + |
| 66 | +function reload() { |
| 67 | + console.log('reloading...') |
| 68 | + disposable[Symbol.dispose]() |
| 69 | + disposable = load() |
| 70 | +} |
| 71 | + |
| 72 | +const buttons = document.createElement('div') |
| 73 | + |
| 74 | +const serverUrlInput = document.createElement('input') |
| 75 | +serverUrlInput.style.width = '350px' |
| 76 | +serverUrlInput.type = 'text' |
| 77 | +serverUrlInput.placeholder = 'remoteAuthority/remotePath?' |
| 78 | +serverUrlInput.addEventListener('change', () => { |
| 79 | + searchParams.delete('remotePath') |
| 80 | + searchParams.delete('remoteAuthority') |
| 81 | + if (serverUrlInput.value.trim().length > 0) { |
| 82 | + const url = new URL('ws://' + serverUrlInput.value) |
| 83 | + searchParams.append('remoteAuthority', url.host) |
| 84 | + if (url.pathname.length > 0) { |
| 85 | + searchParams.append('remotePath', url.pathname) |
| 86 | + } |
| 87 | + } |
| 88 | + reload() |
| 89 | +}) |
| 90 | +buttons.appendChild(serverUrlInput) |
| 91 | + |
| 92 | +const reinitializeButton = document.createElement('button') |
| 93 | +reinitializeButton.textContent = 'Reinitialize the workbench' |
| 94 | +reinitializeButton.addEventListener('click', reload) |
| 95 | +buttons.appendChild(reinitializeButton) |
| 96 | + |
| 97 | +container.prepend(buttons) |
| 98 | + |
| 99 | +const header = document.createElement('h1') |
| 100 | +header.textContent = 'Sandbox mode: reinitialize the workbench without reloading the page' |
| 101 | +container.prepend(header) |
0 commit comments