ljmotta/TodoListWebiewPanel.ts

## envelope-index.ts
import { init } from "todo-list-view/dist/envelope";

declare global {
  export const acquireVsCodeApi: any;
}

init({
  container: document.body,
  bus: acquireVsCodeApi(),
});

## package-activation.json
"activationEvents": [
  "*"
],

## package-contributes.json
"contributes": {
  "menus": {
    "editor/context": [
      {
        "command": "kogito-tooling-examples.todo-list-view.add-item"
      }
    ]
  },
  "commands": [
    {
      "command": "kogito-tooling-examples.todo-list-view",
      "title": "Open list",
      "category": "TODO"
    },
    {
      "command": "kogito-tooling-examples.todo-list-view.add-item",
      "title": "TODO: Add item(s)"
    },
    {
      "command": "kogito-tooling-examples.todo-list-view.mark-all-as-completed",
      "title": "Mark all as completed",
      "category": "TODO"
    }
  ]
},

## package-engine.json
"engines": {
  "vscode": "^1.46.0"
},

## package-main.json
"main": "./dist/extension.js",

## package-name.json
"publisher": "kogito-tooling-examples",
"name": "todo-list-view-vscode-extension",

## TodoListWebiewPanel.ts
const webviewPanel = vscode.window.createWebviewPanel(pageId, this.envelopeLocator.title, ViewColumn.Beside, {
  retainContextWhenHidden: true,
  enableCommandUris: true,
  enableScripts: true,
  localResourceRoots: [vscode.Uri.file(this.context.extensionPath)],
});

## TodoListWebview.ts
import * as vscode from "vscode";
import { TodoListChannelApi } from "../api";

export class TodoListWebview {
  constructor(
    private readonly context: vscode.ExtensionContext,
    private readonly envelopeLocator: {
      targetOrigin: string;
      title: string;
      envelopePath: string;
    },
    private readonly api: TodoListChannelApi
  ) {}

  public open(pageId: string, opts: { onClose: () => void }) {
    ...
  }
}

## TodoListWebviewEnvelopeServer.ts
const envelopeServer: EnvelopeServer<TodoListChannelApi, TodoListEnvelopeApi> = new EnvelopeServer(
  { postMessage: (message) => webviewPanel.webview.postMessage(message) },
  this.envelopeLocator.targetOrigin,
  () =>
    envelopeServer.client.request(
      "todoList__init",
      { origin: envelopeServer.origin, envelopeServerId: envelopeServer.id },
      { user: "Tiago" }
    )
);

## TodoListWebviewHtml.ts
const scriptSrc = webviewPanel.webview
  .asWebviewUri(Uri.file(this.context.asAbsolutePath(this.envelopeLocator.envelopePath)))
  .toString();

webviewPanel.webview.html = `<!DOCTYPE html>
  <html lang="en">
    <head>
      <style>
        html, body, div#envelope-app {
            margin: 0;
            border: 0;
            padding: 10px;
        }
      </style>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
      <div id="envelope-app" />
      <script src="${scriptSrc}"></script>
    </body>
  </html>`;

## TodoListWebviewStart.ts
this.context.subscriptions.push(
  webviewPanel.webview.onDidReceiveMessage(
    (msg) => envelopeServer.receive(msg, this.api),
    webviewPanel.webview,
    this.context.subscriptions
  )
);

webviewPanel.onDidDispose(
  () => {
    envelopeServer.stopInitPolling();
    opts.onClose();
  },
  webviewPanel.webview,
  this.context.subscriptions
);

envelopeServer.startInitPolling();

return envelopeServer.client;
	import { init } from "todo-list-view/dist/envelope";

	declare global {
	export const acquireVsCodeApi: any;
	}

	init({
	container: document.body,
	bus: acquireVsCodeApi(),
	});
	"contributes": {
	"menus": {
	"editor/context": [
	{
	"command": "kogito-tooling-examples.todo-list-view.add-item"
	}
	]
	},
	"commands": [
	{
	"command": "kogito-tooling-examples.todo-list-view",
	"title": "Open list",
	"category": "TODO"
	},
	{
	"command": "kogito-tooling-examples.todo-list-view.add-item",
	"title": "TODO: Add item(s)"
	},
	{
	"command": "kogito-tooling-examples.todo-list-view.mark-all-as-completed",
	"title": "Mark all as completed",
	"category": "TODO"
	}
	]
	},
	"publisher": "kogito-tooling-examples",
	"name": "todo-list-view-vscode-extension",
	const webviewPanel = vscode.window.createWebviewPanel(pageId, this.envelopeLocator.title, ViewColumn.Beside, {
	retainContextWhenHidden: true,
	enableCommandUris: true,
	enableScripts: true,
	localResourceRoots: [vscode.Uri.file(this.context.extensionPath)],
	});
	import * as vscode from "vscode";
	import { TodoListChannelApi } from "../api";

	export class TodoListWebview {
	constructor(
	private readonly context: vscode.ExtensionContext,
	private readonly envelopeLocator: {
	targetOrigin: string;
	title: string;
	envelopePath: string;
	},
	private readonly api: TodoListChannelApi
	) {}

	public open(pageId: string, opts: { onClose: () => void }) {
	...
	}
	}
	const envelopeServer: EnvelopeServer<TodoListChannelApi, TodoListEnvelopeApi> = new EnvelopeServer(
	{ postMessage: (message) => webviewPanel.webview.postMessage(message) },
	this.envelopeLocator.targetOrigin,
	() =>
	envelopeServer.client.request(
	"todoList__init",
	{ origin: envelopeServer.origin, envelopeServerId: envelopeServer.id },
	{ user: "Tiago" }
	)
	);
	const scriptSrc = webviewPanel.webview
	.asWebviewUri(Uri.file(this.context.asAbsolutePath(this.envelopeLocator.envelopePath)))
	.toString();

	webviewPanel.webview.html = `<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	html, body, div#envelope-app {
	margin: 0;
	border: 0;
	padding: 10px;
	}
	</style>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
	<div id="envelope-app" />
	<script src="${scriptSrc}"></script>
	</body>
	</html>`;
	this.context.subscriptions.push(
	webviewPanel.webview.onDidReceiveMessage(
	(msg) => envelopeServer.receive(msg, this.api),
	webviewPanel.webview,
	this.context.subscriptions
	)
	);

	webviewPanel.onDidDispose(
	() => {
	envelopeServer.stopInitPolling();
	opts.onClose();
	},
	webviewPanel.webview,
	this.context.subscriptions
	);

	envelopeServer.startInitPolling();

	return envelopeServer.client;