Расширение VSCode IPC с пользовательским интерфейсом внутри предварительного просмотра HTML

Я хочу разработать расширение запуска модульных тестов для VSCode. Расширение должно отображать обнаруженные тесты, сгруппированные в расширяемую иерархию, аннотировать статус выполнения, отображать выходные данные и ошибки для каждого теста, предоставлять команды запуска/отладки на разных уровнях и, конечно же, красную/зеленую полосу.

Грубо разделяя это на «модель» и «представление», я планирую реализовать модель в процессе расширения, и я планирую реализовать представление как предварительный просмотр HTML на основе файла TextDocumentContentProvider. (Есть ли лучший подход?)

Теперь модель и представление должны взаимодействовать друг с другом. Я хочу реализовать представление как одностраничное приложение. Представление будет отправлять команды модели, а модель будет отправлять события представлению (или представление будет опрашивать модель на наличие событий). Представление будет обновляться в соответствии с полученными событиями.

Мой вопрос в том, какую технику общения я должен использовать? Может ли HTML-страница в предварительном просмотре HTML получить доступ к VSCode/Atom/Electron/Node API? Могу ли я совместно использовать экземпляры объектов или выполнять легкие IPC? Пока не разобрался.

Я обнаружил, что могу вызывать команды VSCode или обновлять всю страницу, когда пользователь щелкает ссылку с href, настроенной на определенную схему (command:// или ту, которую я зарегистрировал для своего TextDocumentContentProvider).

Мне удалось открыть прослушиватель HTTP (http.createServer) в процессе расширения и общаться через XMLHttpRequest на стороне предварительного просмотра HTML. Но мне кажется, что это сильное излишество.

Интересно, есть ли более подходящие способы сделать это?


visual-studio-code webview vscode-extensions
person felix-b    schedule 22.11.2016    source источник
comment
Вы нашли ответ на этот вопрос?   -  person Vlad Dumitrescu    schedule 31.05.2017
comment
На случай, если кто-то еще наткнется на это: ответ выглядит так: нет, нет встроенного способа общения, но использование socket.io для связи кажется простым и достаточно легким.   -  person Vlad Dumitrescu    schedule 31.05.2017
comment
Вы можете общаться с TextDocumentContentProvider webviews, используя командные ссылки. См. старый предварительный просмотр уценки для примера этого Однако новый API веб-просмотра значительно упрощает эту задачу.   -  person Matt Bierner    schedule 26.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

Альменон имеет в виду предлагаемый в настоящее время Webview API, выпущенный в версии 1.21 ( февраль 2018 г.). На данный момент это кажется гораздо лучшим подходом для предварительного просмотра HTML. Но для того, чтобы пользоваться API, есть специальные инструкции. Из примечаний к выпуску:

Эти API по-прежнему предлагаются, поэтому, чтобы использовать их, вы должны согласиться на них, добавив "enableProposedApi": true в package.json, и вам придется скопировать vscode.proposed.d.ts в свой проект расширения.

Что не прояснено (и, вероятно, должно быть), так это то, как добавить загруженный файл объявления в проект. Один из способов сделать это — поместить файл в $/node_modules/vscode рядом с vscode.d.ts, который создается во время постустановки. Затем добавьте следующую строку в начало vscode.d.ts:

/// <reference path="vscode.proposed.d.ts" />

Это свяжет файлы объявления типа. Чтобы сделать эту часть процесса установки, напишите для этого задачу сборки, а затем вызовите ее в сценарии vscode:postinstall в package.json.

person protalk    schedule 15.03.2018

arrow_upward
0
arrow_downward

VSCode имеет новый API, который упрощает эту задачу.

https://github.com/Microsoft/vscode/issues/43713

Новый API можно найти здесь< /а>

Чтобы попробовать новый API:

  1. Добавьте «enableProposedApi»: true в ваш package.json

  2. Вручную загрузите vscode.proposed.d.ts и добавьте его в свой проект: https://raw.githubusercontent.com/Microsoft/vscode/master/src/vs/vscode.proposed.d.ts

  3. Запустите расширение с последней инсайдерской сборкой VS Code.
person Almenon    schedule 25.02.2018
comment
Привет, ребята, у вас есть образец для этого нового API веб-просмотра? кажется чудесным - person Rashid Mousavy Khoshrou; 26.03.2018