Tracking PR for the remote viewer

Cargo.toml

@@ -80,6 +80,7 @@ members = [
   'tools/tr-extractor',
   "ui-libraries/material/examples/gallery",
   'xtask',
+  'tools/remote-viewer',
 ]
 
 default-members = [
@@ -135,6 +136,7 @@ i-slint-common = { version = "=1.17.0", path = "internal/common", default-featur
 i-slint-compiler = { version = "=1.17.0", path = "internal/compiler", default-features = false }
 i-slint-core = { version = "=1.17.0", path = "internal/core", default-features = false }
 i-slint-core-macros = { version = "=1.17.0", path = "internal/core-macros", default-features = false }
+i-slint-preview-protocol = { version = "=1.17.0", path = "internal/preview-protocol" }
 i-slint-renderer-femtovg = { version = "=1.17.0", path = "internal/renderers/femtovg", default-features = false }
 i-slint-renderer-skia = { version = "=1.17.0", path = "internal/renderers/skia", default-features = false }
 i-slint-renderer-software = { version = "=1.17.0", path = "internal/renderers/software", default-features = false }

docs/development/lsp-architecture.md

@@ -352,7 +352,7 @@ pub enum LspToPreviewMessage {
 
 // Preview to LSP
 pub enum PreviewToLspMessage {
-    RequestState { unused: bool },
+    RequestState { paths: Vec<String> },
     UpdateElement { ... },
     SendWorkspaceEdit { ... },
     ShowDocument { ... },

editors/vscode/package.json

@@ -89,6 +89,18 @@
         "category": "Slint",
         "icon": "$(preview)"
       },
+      {
+        "command": "slint.selectRemotePreview",
+        "title": "Connect to Remote Preview",
+        "category": "Slint",
+        "icon": "$(preview)"
+      },
+      {
+        "command": "slint.disconnectRemotePreview",
+        "title": "Disconnect Remote Preview",
+        "category": "Slint",
+        "icon": "$(debug-disconnect)"
+      },
       {
         "command": "slint.reload",
         "title": "Restart server",
@@ -107,6 +119,10 @@
           "command": "slint.showPreview",
           "when": "editorLangId == slint"
         },
+        {
+          "command": "slint.selectRemotePreview",
+          "when": "editorLangId == slint"
+        },
         {
           "command": "slint.reload"
         },
@@ -253,4 +269,4 @@
     "typescript": "catalog:",
     "vscode-tmgrammar-test": "0.1.3"
   }
-}
+}

editors/vscode/src/common.ts

@@ -55,6 +55,55 @@ export class ClientHandle {
 
 const client = new ClientHandle();
 
+export type RemoteViewerInfo = {
+    id: string;
+
+    label: string;
+    detail: string;
+
+    value: {
+        addresses: string[];
+        port: number;
+    };
+
+    timer?: NodeJS.Timeout;
+};
+export const remote_viewers = new Map<string, RemoteViewerInfo>();
+
+let remoteViewerStatusBarItem: vscode.StatusBarItem | undefined;
+export function updateRemoteViewerStatusBarItem(newItem: vscode.StatusBarItem) {
+    remoteViewerStatusBarItem = newItem;
+}
+export enum RemoteViewerStatusBarItemState {
+    disconnected = 0,
+    connecting = 1,
+    connected = 2,
+}
+export function setRemoteViewerStatusBarItemState(
+    state: RemoteViewerStatusBarItemState,
+) {
+    if (remoteViewerStatusBarItem) {
+        switch (state) {
+            case RemoteViewerStatusBarItemState.disconnected:
+                remoteViewerStatusBarItem.text = "$(vm) Slint Remote Preview";
+                remoteViewerStatusBarItem.command = "slint.selectRemotePreview";
+                break;
+            case RemoteViewerStatusBarItemState.connecting:
+                remoteViewerStatusBarItem.text =
+                    "$(vm-connect) Slint Remote Preview";
+                remoteViewerStatusBarItem.command =
+                    "slint.disconnectRemotePreview";
+                break;
+            case RemoteViewerStatusBarItemState.connected:
+                remoteViewerStatusBarItem.text =
+                    "$(vm-active) Slint Remote Preview";
+                remoteViewerStatusBarItem.command =
+                    "slint.disconnectRemotePreview";
+                break;
+        }
+    }
+}
+
 // LSP related:
 
 // Set up our middleware. It is used to redirect/forward to the WASM preview
@@ -149,6 +198,57 @@ export function activate(
 
     client.add_updater((cl) => {
         wasm_preview.initClientForPreview(context, cl);
+        cl?.onNotification("slint/remote_viewer_discovered", (params) => {
+            vscode.window.showInformationMessage(
+                `Remote viewer discovered: ${params.host}`,
+            );
+            cl.outputChannel.appendLine(
+                `Remote viewer discovered: ${params.host} (${params.addresses.join(", ")}:${params.port})`,
+            );
+            const old_entry = remote_viewers.get(params.host);
+            if (old_entry) {
+                clearTimeout(old_entry.timer);
+            }
+            const remote_viewer_entry = {
+                id: params.host,
+
+                label: params.host,
+                detail: params.addresses.join(", "),
+
+                value: params,
+                timer: setTimeout(() => {
+                    remote_viewers.delete(params.host);
+                }, 60000),
+            };
+            remote_viewers.set(params.host, remote_viewer_entry);
+        });
+        cl?.onNotification("slint/remote_viewer_connection_state", (params) => {
+            switch (params.state) {
+                case "connected":
+                    vscode.window.showInformationMessage(
+                        `Remote viewer connected: ${params.address}:${params.port}`,
+                    );
+                    cl.outputChannel.appendLine(
+                        `Remote viewer connected: ${params.address}:${params.port}`,
+                    );
+                    setRemoteViewerStatusBarItemState(
+                        RemoteViewerStatusBarItemState.connected,
+                    );
+                    break;
+                case "disconnected":
+                    vscode.window.showInformationMessage(
+                        `Remote viewer disconnected: ${params.address}:${params.port}`,
+                    );
+                    cl.outputChannel.appendLine(
+                        `Remote viewer disconnected: ${params.address}:${params.port}`,
+                    );
+                    setRemoteViewerStatusBarItemState(
+                        RemoteViewerStatusBarItemState.disconnected,
+                    );
+                    break;
+            }
+            // TODO
+        });
     });
 
     vscode.workspace.onDidChangeConfiguration(async (ev) => {
@@ -236,6 +336,10 @@ export function deactivate(): Thenable<void> | undefined {
     if (!client.client) {
         return undefined;
     }
+    for (const viewer of remote_viewers.values()) {
+        clearTimeout(viewer.timer);
+    }
+    remote_viewers.clear();
     return client.stop();
 }
 

editors/vscode/src/extension.ts

@@ -11,6 +11,7 @@ import * as vscode from "vscode";
 import { SlintTelemetrySender } from "./telemetry";
 import * as common from "./common";
 import { NotificationType } from "vscode-languageclient";
+import * as lsp_commands from "./lsp_commands";
 
 import {
     LanguageClient,
@@ -189,6 +190,7 @@ function startClient(
     const devBuild = serverModule.includes("/target/debug/");
     if (devBuild) {
         options.env["RUST_BACKTRACE"] = "1";
+        options.env["RUST_LOG"] = "debug";
     }
 
     options.env["SLINT_LSP_PANIC_LOG_DIR"] = lsp_panic_log_dir(context).fsPath;
@@ -234,6 +236,10 @@ function startClient(
                 handleTelemetryEvent(params.type, context.globalState);
             },
         );
+
+        common.setRemoteViewerStatusBarItemState(
+            common.RemoteViewerStatusBarItemState.disconnected,
+        );
     });
 
     const cl = new LanguageClient(
@@ -319,6 +325,8 @@ export function activate(context: vscode.ExtensionContext) {
         return;
     }
 
+    setupRemotePreview(context);
+
     const custom_lsp = !serverModule.startsWith(
         path.join(context.extensionPath, "bin"),
     );
@@ -406,3 +414,102 @@ function startTelemetryTimer(
         }
     }
 }
+
+const remotePreviewConnectionStringMatcher =
+    /^(?:\[(?<ipv6>[0-9A-Fa-f:.]+)\]|(?<host>[^:\s\[\]]+)):(?<port>\d{1,5})$/;
+
+function setupRemotePreview(context: vscode.ExtensionContext) {
+    const remoteViewerStatusBarItem = vscode.window.createStatusBarItem(
+        vscode.StatusBarAlignment.Right,
+        100,
+    );
+
+    common.updateRemoteViewerStatusBarItem(remoteViewerStatusBarItem);
+    common.setRemoteViewerStatusBarItemState(
+        common.RemoteViewerStatusBarItemState.disconnected,
+    );
+    remoteViewerStatusBarItem.show();
+
+    context.subscriptions.push(
+        vscode.commands.registerCommand("slint.selectRemotePreview", () => {
+            const picker = vscode.window.createQuickPick<
+                vscode.QuickPickItem & Partial<common.RemoteViewerInfo>
+            >();
+            picker.title = "Select a remote preview";
+            picker.placeholder = "Manual entry (e.g. 127.0.1:1234)";
+            picker.ignoreFocusOut = true;
+
+            const updateItems = () => {
+                const typed = picker.value.trim();
+                const items: (vscode.QuickPickItem &
+                    Partial<common.RemoteViewerInfo>)[] = [];
+
+                remotePreviewConnectionStringMatcher.lastIndex = 0;
+                const match = remotePreviewConnectionStringMatcher.exec(typed);
+
+                if (match) {
+                    items.push({
+                        id: "ENTER",
+                        label: `Use typed value: ${typed}`,
+                        detail: "",
+                        alwaysShow: true,
+                        value: {
+                            addresses: [
+                                match.groups?.ipv6 ?? match.groups?.host ?? "",
+                            ],
+                            port: Number.parseInt(match.groups?.port ?? "1234"),
+                        },
+                    });
+                    items.push({
+                        id: "sep",
+                        label: "",
+                        kind: vscode.QuickPickItemKind.Separator,
+                    });
+                }
+
+                items.push(...common.remote_viewers.values());
+
+                picker.items = items;
+            };
+
+            const connect = (item: common.RemoteViewerInfo) => {
+                lsp_commands.connectRemotePreview(
+                    item.value.addresses,
+                    item.value.port,
+                );
+                common.setRemoteViewerStatusBarItemState(
+                    common.RemoteViewerStatusBarItemState.connecting,
+                );
+
+                picker.hide();
+            };
+
+            // picker.onDidAccept(() => {
+            //     const picked = picker.activeItems[0] ?? picker.selectedItems[0];
+            //     if (picked) {
+            //         connect(picked as common.RemoteViewerInfo);
+            //     }
+            // });
+
+            picker.onDidChangeSelection((items) => {
+                const picked = items[0];
+                if (picked) {
+                    connect(picked as common.RemoteViewerInfo);
+                }
+            });
+
+            picker.onDidHide(() => {
+                picker.dispose();
+            });
+
+            updateItems();
+            picker.onDidChangeValue(updateItems);
+
+            picker.show();
+        }),
+        remoteViewerStatusBarItem,
+        vscode.commands.registerCommand("slint.disconnectRemotePreview", () => {
+            lsp_commands.disconnectRemotePreview();
+        }),
+    );
+}

editors/vscode/src/lsp_commands.ts

@@ -21,3 +21,18 @@ import * as vscode from "vscode";
 export function showPreview(url: LspURI, component: string): Thenable<unknown> {
     return vscode.commands.executeCommand("slint/showPreview", url, component);
 }
+
+export function connectRemotePreview(
+    addresses: string[],
+    port: number,
+): Thenable<unknown> {
+    return vscode.commands.executeCommand(
+        "slint/connectRemotePreview",
+        addresses,
+        port,
+    );
+}
+
+export function disconnectRemotePreview(): Thenable<unknown> {
+    return vscode.commands.executeCommand("slint/disconnectRemotePreview");
+}

editors/vscode/src/tsconfig.json

@@ -1,8 +1,16 @@
 {
     "extends": "../tsconfig.default.json",
     "compilerOptions": {
-        "lib": ["es2021", "webworker"],
-        "types": ["vscode"]
+        "target": "ES2021",
+        "lib": [
+            "es2021",
+            "webworker"
+        ],
+        "types": [
+            "vscode"
+        ]
     },
-    "include": ["./*.ts", "./*.d.ts"]
-}
+    "include": [
+        "./*.ts"
+    ]
+}

editors/vscode/src/wasm_preview.ts

@@ -25,7 +25,10 @@ export function update_configuration() {
     if (language_client) {
         send_to_lsp({
             PreviewTypeChanged: {
-                is_external: previewPanel !== null || use_wasm_preview(),
+                target:
+                    previewPanel !== null || use_wasm_preview()
+                        ? "embedded-wasm"
+                        : "child-process",
             },
         });
     }
@@ -230,7 +233,7 @@ function initPreviewPanel(
                     map_url(panel.webview, message.url);
                     return;
                 case "preview_ready":
-                    send_to_lsp({ RequestState: { unused: true } });
+                    send_to_lsp({ RequestState: {} });
                     return;
                 case "slint/preview_to_lsp":
                     send_to_lsp(message.params);

internal/preview-protocol/Cargo.toml

@@ -18,3 +18,4 @@ version.workspace = true
 lsp-types.workspace = true
 serde.workspace = true
 serde_json.workspace = true
+derive_more = { version = "2.1.1", features = ["debug"] }