Skip to content

Commit

Permalink
feat(demo): Add search param that replaces the filesystem by the html…
Browse files Browse the repository at this point in the history 
… filesystem
  • Loading branch information
@CGNonofr
Loïc Mangeonjean authored and CGNonofr committed Apr 18, 2024
1 parent 06a118e commit e1fba76
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 108 deletions.
20 changes: 8 additions & 12 deletions demo/src/main.common.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import './style.css'
import * as monaco from 'monaco-editor'
import { registerFileSystemOverlay, HTMLFileSystemProvider } from '@codingame/monaco-vscode-files-service-override'
import { ILogService, StandaloneServices } from 'vscode/services'
import './setup.common'
import './features/output'
import './features/debugger'
Expand Down Expand Up @@ -96,15 +94,13 @@ void getApi().then(async vscode => {
window.location.href = url.toString()
})

document.querySelector('#filesystem')!.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker()

const htmlFileSystemProvider = new HTMLFileSystemProvider(undefined, 'unused', StandaloneServices.get(ILogService))
await htmlFileSystemProvider.registerDirectoryHandle(dirHandle)
registerFileSystemOverlay(1, htmlFileSystemProvider)

vscode.workspace.updateWorkspaceFolders(0, 0, {
uri: vscode.Uri.file(dirHandle.name)
})
document.querySelector('#toggleHTMLFileSystemProvider')!.addEventListener('click', async () => {
const url = new URL(window.location.href)
if (url.searchParams.has('htmlFileSystemProvider')) {
url.searchParams.delete('htmlFileSystemProvider')
} else {
url.searchParams.set('htmlFileSystemProvider', 'true')
}
window.location.href = url.toString()
})
})
199 changes: 105 additions & 94 deletions demo/src/setup.common.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import getConfigurationServiceOverride, { IStoredWorkspace, initUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override'
import getKeybindingsServiceOverride, { initUserKeybindings } from '@codingame/monaco-vscode-keybindings-service-override'
import { RegisteredFileSystemProvider, RegisteredMemoryFile, RegisteredReadOnlyFile, createIndexedDBProviders, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override'
import { RegisteredFileSystemProvider, RegisteredMemoryFile, RegisteredReadOnlyFile, createIndexedDBProviders, registerHTMLFileSystemProvider, registerFileSystemOverlay, initFile } from '@codingame/monaco-vscode-files-service-override'
import * as monaco from 'monaco-editor'
import { IWorkbenchConstructionOptions, LogLevel, IEditorOverrideServices } from 'vscode/services'
import * as vscode from 'vscode'
Expand Down Expand Up @@ -66,104 +66,126 @@ import { TerminalBackend } from './features/terminal'
import { workerConfig } from './tools/extHostWorker'
import 'vscode/localExtensionHost'

const fileSystemProvider = new RegisteredFileSystemProvider(false)
const url = new URL(document.location.href)
const params = url.searchParams
export const remoteAuthority = params.get('remoteAuthority') ?? undefined
export const connectionToken = params.get('connectionToken') ?? undefined
export const remotePath = remoteAuthority != null ? params.get('remotePath') ?? undefined : undefined
export const resetLayout = params.has('resetLayout')
export const useHtmlFileSystemProvider = params.has('htmlFileSystemProvider')
params.delete('resetLayout')

fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.js'), `// import anotherfile
let variable = 1
function inc () {
variable++
}
window.history.replaceState({}, document.title, url.href)

export let workspaceFile = monaco.Uri.file('/workspace.code-workspace')

while (variable < 5000) {
inc()
console.log('Hello world', variable);
}`
))
export const userDataProvider = await createIndexedDBProviders()

fileSystemProvider.registerFile(new RegisteredReadOnlyFile(vscode.Uri.file('/tmp/test_readonly.js'), async () => 'This is a readonly static file'))
if (useHtmlFileSystemProvider) {
workspaceFile = monaco.Uri.from({ scheme: 'tmp', path: '/test.code-workspace' })
await initFile(workspaceFile, JSON.stringify(<IStoredWorkspace>{
folders: []
}, null, 2))

fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/jsconfig.json'), `{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"lib": [
"es2021",
"DOM"
]
registerHTMLFileSystemProvider()
} else {
const fileSystemProvider = new RegisteredFileSystemProvider(false)

fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.js'), `// import anotherfile
let variable = 1
function inc () {
variable++
}
}`
))
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/index.html'), `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>monaco-vscode-api demo</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<style type="text/css">
h1 {
color: DeepSkyBlue;
}
</style>
while (variable < 5000) {
inc()
console.log('Hello world', variable);
}`
))

fileSystemProvider.registerFile(new RegisteredReadOnlyFile(vscode.Uri.file('/tmp/test_readonly.js'), async () => 'This is a readonly static file'))

fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/jsconfig.json'), `{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"lib": [
"es2021",
"DOM"
]
}
}`
))

<h1>Hello, world!</h1>
</body>
</html>`
))
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/index.html'), `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>monaco-vscode-api demo</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<style type="text/css">
h1 {
color: DeepSkyBlue;
}
</style>
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.md'), `
***Hello World***
<h1>Hello, world!</h1>
</body>
</html>`
))

Math block:
$$
\\displaystyle
\\left( \\sum_{k=1}^n a_k b_k \\right)^2
\\leq
\\left( \\sum_{k=1}^n a_k^2 \\right)
\\left( \\sum_{k=1}^n b_k^2 \\right)
$$
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.md'), `
***Hello World***
# Easy Math
Math block:
$$
\\displaystyle
\\left( \\sum_{k=1}^n a_k b_k \\right)^2
\\leq
\\left( \\sum_{k=1}^n a_k^2 \\right)
\\left( \\sum_{k=1}^n b_k^2 \\right)
$$
2 + 2 = 4 // this test will pass
2 + 2 = 5 // this test will fail
# Easy Math
# Harder Math
2 + 2 = 4 // this test will pass
2 + 2 = 5 // this test will fail
230230 + 5819123 = 6049353
`
))
# Harder Math
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.customeditor'), `
Custom Editor!`
))
230230 + 5819123 = 6049353
`
))

fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.css'), `
h1 {
color: DeepSkyBlue;
}`
))
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.customeditor'), `
Custom Editor!`
))

// Use a workspace file to be able to add another folder later (for the "Attach filesystem" button)
fileSystemProvider.registerFile(new RegisteredMemoryFile(workspaceFile, JSON.stringify(<IStoredWorkspace>{
folders: [{
path: '/tmp'
}]
}, null, 2)))
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.css'), `
h1 {
color: DeepSkyBlue;
}`
))

fileSystemProvider.registerFile(new RegisteredMemoryFile(monaco.Uri.file('/tmp/.vscode/extensions.json'), JSON.stringify({
"recommendations": [
"vscodevim.vim"
]
}, null, 2)))
// Use a workspace file to be able to add another folder later (for the "Attach filesystem" button)
fileSystemProvider.registerFile(new RegisteredMemoryFile(workspaceFile, JSON.stringify(<IStoredWorkspace>{
folders: [{
path: '/tmp'
}]
}, null, 2)))

fileSystemProvider.registerFile(new RegisteredMemoryFile(monaco.Uri.file('/tmp/.vscode/extensions.json'), JSON.stringify({
"recommendations": [
"vscodevim.vim"
]
}, null, 2)))

registerFileSystemOverlay(1, fileSystemProvider)

export const userDataProvider = await createIndexedDBProviders()
registerFileSystemOverlay(1, fileSystemProvider)
}

// Workers
export type WorkerLoader = () => Worker
Expand All @@ -185,18 +207,7 @@ window.MonacoEnvironment = {
}
}

const url = new URL(document.location.href)
const params = url.searchParams
export const remoteAuthority = params.get('remoteAuthority') ?? undefined
export const connectionToken = params.get('connectionToken') ?? undefined
export const remotePath = remoteAuthority != null ? params.get('remotePath') ?? undefined : undefined
export const resetLayout = params.has('resetLayout')
params.delete('resetLayout')

window.history.replaceState({}, document.title, url.href)

// Set configuration before initializing service so it's directly available (especially for the theme, to prevent a flicker)
export const workspaceFile = monaco.Uri.file('/workspace.code-workspace')
await Promise.all([
initUserConfiguration(defaultConfiguration),
initUserKeybindings(defaultKeybindings),
Expand Down Expand Up @@ -232,14 +243,14 @@ export const constructOptions: IWorkbenchConstructionOptions = {
'window.title': 'Monaco-Vscode-Api${separator}${dirty}${activeEditorShort}'
},
defaultLayout: {
editors: [{
editors: useHtmlFileSystemProvider ? undefined : [{
uri: monaco.Uri.file('/tmp/test.js'),
viewColumn: 1
}, {
uri: monaco.Uri.file('/tmp/test.md'),
viewColumn: 2
}],
layout: {
layout: useHtmlFileSystemProvider ? undefined : {
editors: {
orientation: 0,
groups: [{ size: 1 }, { size: 1 }]
Expand Down Expand Up @@ -280,7 +291,7 @@ export const commonServices: IEditorOverrideServices = {
...getExtensionGalleryServiceOverride({ webOnly: false }),
...getModelServiceOverride(),
...getNotificationServiceOverride(),
...getDialogsServiceOverride(),
...getDialogsServiceOverride({ useHtmlFileSystemProvider }),
...getConfigurationServiceOverride(),
...getKeybindingsServiceOverride(),
...getTextmateServiceOverride(),
Expand All @@ -296,7 +307,7 @@ export const commonServices: IEditorOverrideServices = {
...getSnippetServiceOverride(),
...getOutputServiceOverride(),
...getTerminalServiceOverride(new TerminalBackend()),
...getSearchServiceOverride(),
...getSearchServiceOverride({ useHtmlFileSystemProvider }),
...getMarkersServiceOverride(),
...getAccessibilityServiceOverride(),
...getLanguageDetectionWorkerServiceOverride(),
Expand Down
2 changes: 1 addition & 1 deletion demo/src/setup.views.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ container.innerHTML = `
<h1>Editor</h1>
<div id="editors"></div>
<button id="filesystem">Attach filesystem</button>
<button id="toggleHTMLFileSystemProvider">Toggle HTML filesystem provider</button>
<button id="customEditorPanel">Open custom editor panel</button>
<button id="clearStorage">Clear user data</button>
<button id="resetLayout">Reset layout</button>
Expand Down
2 changes: 1 addition & 1 deletion demo/src/setup.workbench.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ document.body.replaceChildren(container)

const buttons = document.createElement('div')
buttons.innerHTML = `
<button id="filesystem">Attach filesystem</button>
<button id="toggleHTMLFileSystemProvider">Toggle HTML filesystem provider</button>
<button id="customEditorPanel">Open custom editor panel</button>
<button id="clearStorage">Clear user data</button>
<button id="resetLayout">Reset layout</button>
Expand Down

0 comments on commit e1fba76

Please sign in to comment.