Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chat + notebook + welcome service overrides #294

Merged
merged 26 commits into from
Jan 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
"css": "always",
"js": "always",
"mp3": "always",
"svg": "always",
"png": "always",
"json": "always",
"contribution": "always", // Hack for vscode .contribution.js files
"protocol": "always", // Hack for vscode .protocol.js files
Expand All @@ -30,7 +32,8 @@
"worker": "always",
"ts": "always",
"services": "always",
"api": "always"
"api": "always",
"all": "always"
}
],
"@typescript-eslint/no-unused-vars": [
Expand Down
29 changes: 19 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ To **tree-mend** (to **un**treeshake it) monaco-editor, this library provides a

This library uses a lot the `new URL('asset.extension', import.meta.url)` syntax which [is supported by vite](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)

While it works great in `build` mode (because rollup is used), there is some issues in `watch`` mode:
While it works great in `build` mode (because rollup is used), there is some issues in `watch` mode:
- import.meta.url is not replaced while creating bundles, it is an issue when the syntax is used inside a dependency
- vite is still trying to inject/transform javascript assets files, breaking the code by injecting ESM imports in commonjs files

There are workarounds for both:

- We can help vite by replacing `import.meta.url` by the original module path (you need the --experimental-import-meta-resolve note option):
- We can help vite by replacing `import.meta.url` by the original module path (you need the `--experimental-import-meta-resolve` note option):
```typescript
{
...
Expand Down Expand Up @@ -111,13 +111,15 @@ await initialize({
})
```

Additionally, 25 packages that include the vscode version of some services (with some glue to make it work with monaco) are published:
Additionally, several packages that include the VSCode version of some services (with some glue to make it work with monaco) are published:

- **Extensions** (included by default): `@codingame/monaco-vscode-extensions-service-override`
- Support for VSCode extensions. A worker configuration can be past to it:
- Then, everything runs in one worker, where extensions run in an iframe, with all the implications (can be created by the bundler directly). The worker script is expected to be hosted on a separate domain.
- Support for VSCode extensions.
- A worker configuration can be provided to it:
- Then, extensions run in a worker which runs in an iframe, with all the implications (can be created by the bundler directly). The worker script is expected to be hosted on a separate domain.
- **Files** (included by default): `@codingame/monaco-vscode-files-service-override`
- It adds the memory filesystem for `file://` files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files.
- It adds the overlay filesystem for `file://` files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files.
- It supports adding overlay filesystems for `file://` files
- **QuickAccess** (included by default): `@codingame/monaco-vscode-quickaccess-service-override`
- Enables the quickaccess menu in the editor (press F1 or ctrl+shift+p)
- **Notifications**: `@codingame/monaco-vscode-notifications-service-override`
Expand All @@ -126,7 +128,7 @@ Additionally, 25 packages that include the vscode version of some services (with
- Enable vscode modal dialogs. It allows users to select an action to do. Those actions are exposed to the vscode API. Additionally, this service can be used by the language client to delegate questions to the user.
- **Model**: `@codingame/monaco-vscode-model-service-override`
- This service creates and takes care of model references. For example:
- Create model if content is unknown
- Create model from filesystem if content is unknown
- Count references
- Destroy models when they are no longer used
- **Editor**: `@codingame/monaco-vscode-editor-service-override`
Expand Down Expand Up @@ -188,6 +190,13 @@ Additionally, 25 packages that include the vscode version of some services (with
- Ask user it they trust the current workspace, disable some features if not
- **Extension Gallery**: `@codingame/monaco-vscode-extension-gallery-service-override`
- Support for the VSCode marketplace, it allows to install extensions from the marketplace.
- **Chat**: `@codingame/monaco-vscode-chat-service-override`
- Support for chat and inline chat features
- **Notebook**
- Support for Jupyter notebooks
- **Welcome**
- Support for welcome pages/components. *Hint*: It only makes sense to enable it when *Views* service is used.

Usage:

```typescript
Expand Down Expand Up @@ -277,8 +286,6 @@ const range = new vscode.Range(...)
vscode.languages.registerCompletionItemProvider(...)
```

The api will use the manifest of a default vscode extension, which can be overriden by providing it to the `initialize` function.

You can also register a new extension from its manifest:
```typescript
import { registerExtension, initialize, ExtensionHostKind } from 'vscode/extensions'
Expand Down Expand Up @@ -318,7 +325,7 @@ import '@codingame/monaco-vscode-json-default-extension'

### Loading vsix file

VSCode extension are bundled as vsix files.
VSCode extensions are bundled as vsix files.
This library publishes a rollup plugin (vite-compatible) that allows to load a vsix file.

- rollup/vite config:
Expand Down Expand Up @@ -371,6 +378,8 @@ It includes:
- Configuration service, with user configuration editor
- Keybinding service, with user keybindings editor
- Debuggers
- Remote agent
- and much more

From CLI run:

Expand Down
91 changes: 49 additions & 42 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,56 +8,63 @@
</head>
<body>
<div id="app">
<div id="titleBar"></div>
<div id="banner"></div>
<div style="display: flex; gap: 20px; height:60vh">
<div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border)">
<div id="activityBar"></div>
<div id="sidebar" style="width: 500px"></div>
</div>
<div style="flex: 1; min-width: 0">
<h1>Editor</h1>
<div id="editors"></div>
<div id="workbench-container">
<div id="titleBar"></div>
<div id="banner"></div>
<div id="workbench-top">
<div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border)">
<div id="activityBar"></div>
<div id="sidebar" style="width: 400px"></div>
<div id="auxiliaryBar-left" style="max-width: 300px"></div>
</div>
<div style="flex: 1; min-width: 0">
<h1>Editor</h1>
<div id="editors"></div>

<button id="run">Run with debugger</button>
<button id="filesystem">Attach filesystem</button>
<button id="customEditorPanel">Open custom editor panel</button>
<button id="clearStorage">Clear user data</button>
<br />
<button id="togglePanel">Toggle Panel</button>
<button id="toggleAuxiliary">Toggle Secondary Panel</button>
<br />
<label for="localeSelect">Language:</label>
<select id="localeSelect">
<option value="">English</option>
<option value="cs">Czech</option>
<option value="de">German</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="pl">Polish</option>
<option value="pt-br">Portuguese (Brazil)</option>
<option value="qps-ploc">Pseudo Language</option>
<option value="ru">Russian</option>
<option value="tr">Turkish</option>
<option value="zh-hans">Chinese (Simplified)</option>
<option value="zh-hant">Chinese (Traditional)</option>
</select>
<button id="run">Run with debugger</button>
<button id="filesystem">Attach filesystem</button>
<button id="customEditorPanel">Open custom editor panel</button>
<button id="clearStorage">Clear user data</button>
<br />
<button id="togglePanel">Toggle Panel</button>
<button id="toggleAuxiliary">Toggle Secondary Panel</button>
<br />
<label for="localeSelect">Language:</label>
<select id="localeSelect">
<option value="">English</option>
<option value="cs">Czech</option>
<option value="de">German</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="pl">Polish</option>
<option value="pt-br">Portuguese (Brazil)</option>
<option value="qps-ploc">Pseudo Language</option>
<option value="ru">Russian</option>
<option value="tr">Turkish</option>
<option value="zh-hans">Chinese (Simplified)</option>
<option value="zh-hant">Chinese (Traditional)</option>
</select>
</div>
<div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border);">
<div id="sidebar-right" style="max-width: 500px"></div>
<div id="activityBar-right"></div>
<div id="auxiliaryBar" style="max-width: 300px"></div>
</div>
</div>
<div style="border: 1px solid var(--vscode-editorWidget-border); width: 300px" id="auxiliaryBar"></div>
</div>

<div id="panel"></div>
<div id="panel"></div>

<div id="statusBar"></div>
<div id="statusBar"></div>
</div>

<h1>Settings</h1>
<h1>Settings<span id="settings-dirty">●</span></h1>
<button id="settingsui">Open settings UI</button>
<button id="resetsettings">Reset settings</button>
<div id="settings-editor" class="standalone-editor"></div>
<h1>Keybindings</h1>
<h1>Keybindings<span id="keybindings-dirty">●</span></h1>
<button id="keybindingsui">Open keybindings UI</button>
<button id="resetkeybindings">Reset keybindings</button>
<div id="keybindings-editor" class="standalone-editor"></div>
Expand Down
Loading