feat(engine.vscode): added package engine.vscode

packages/engine.vscode/.eslintrc.js

@@ -0,0 +1,23 @@
+/**@type {import('eslint').Linter.Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	plugins: [
+		'@typescript-eslint',
+	],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+	],
+	ignorePatterns: [
+		'media'
+	],
+	rules: {
+		'semi': [2, "always"],
+		'@typescript-eslint/no-unused-vars': 0,
+		'@typescript-eslint/no-explicit-any': 0,
+		'@typescript-eslint/explicit-module-boundary-types': 0,
+		'@typescript-eslint/no-non-null-assertion': 0,
+	}
+};

packages/engine.vscode/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"dbaeumer.vscode-eslint"
+	]
+}

packages/engine.vscode/.vscode/launch.json

@@ -0,0 +1,18 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
+			"outFiles": ["${workspaceFolder}/out/**/*.js"],
+			"preLaunchTask": "npm: watch"
+		}
+	]
+}

packages/engine.vscode/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.insertSpaces": false
+}

packages/engine.vscode/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

packages/engine.vscode/README.md

@@ -0,0 +1,34 @@
+# Cat Coding — A Webview API Sample
+
+Demonstrates VS Code's [webview API](https://code.visualstudio.com/api/extension-guides/webview). This includes:
+
+- Creating and showing a basic webview.
+- Dynamically updating a webview's content.
+- Loading local content in a webview.
+- Running scripts in a webview.
+- Sending message from an extension to a webview.
+- Sending messages from a webview to an extension.
+- Using a basic content security policy.
+- Webview lifecycle and handling dispose.
+- Saving and restoring state when the panel goes into the background.
+- Serialization and persistence across VS Code reboots.
+
+## Demo
+
+![demo](demo.gif)
+
+## VS Code API
+
+### `vscode` module
+
+- [`window.createWebviewPanel`](https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel)
+- [`window.registerWebviewPanelSerializer`](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewPanelSerializer)
+
+## Running the example
+
+- Open this example in VS Code 1.47+
+- `npm install`
+- `npm run watch` or `npm run compile`
+- `F5` to start debugging
+
+Run the `Cat Coding: Start cat coding session` to create the webview.

packages/engine.vscode/media/jsconfig.json

@@ -0,0 +1,22 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es2020",
+		"jsx": "preserve",
+		"checkJs": true,
+		"strict": true,
+		"strictFunctionTypes": true,
+		"lib": [
+			"dom"
+		]
+	},
+	"exclude": [
+		"node_modules",
+		"**/node_modules/*"
+	],
+	"typeAcquisition": {
+		"include": [
+			"@types/vscode-webview"
+		]
+	}
+}

packages/engine.vscode/media/main.js

@@ -0,0 +1,61 @@
+// This script will be run within the webview itself
+// It cannot access the main VS Code APIs directly.
+
+(function () {
+    const vscode = acquireVsCodeApi();
+
+    //@ts-ignore
+    function insertIframe(addr) {
+        var iframe = document.createElement('iframe')
+        iframe.setAttribute('src', addr.value);
+        iframe.setAttribute('width', '100%');
+        iframe.setAttribute('height', '650px');
+        document.body.appendChild(iframe)
+        localStorage.setItem("address", addr.value)
+    }
+
+    const address = localStorage.getItem("address")
+    if(address) {
+        insertIframe({value: address})
+    }
+
+    window.addEventListener('message', event => {
+        const message = event.data; // The json data that the extension sent
+        insertIframe("bla")
+    });
+
+    const oldState = /** @type {{ count: number} | undefined} */ (vscode.getState());
+
+    const counter = /** @type {HTMLElement} */ (document.getElementById('lines-of-code-counter'));
+    console.log('Initial state', oldState);
+
+    let currentCount = (oldState && oldState.count) || 0;
+    counter.textContent = `${currentCount}`;
+
+    setInterval(() => {
+        counter.textContent = `${currentCount++} `;
+
+        // Update state
+        vscode.setState({ count: currentCount });
+
+        // Alert the extension when the cat introduces a bug
+        if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
+            // Send a message back to the extension
+            vscode.postMessage({
+                command: 'alert',
+                text: '🐛  on line ' + currentCount
+            });
+        }
+    }, 100);
+
+    // Handle messages sent from the extension to the webview
+    window.addEventListener('message', event => {
+        const message = event.data; // The json data that the extension sent
+        switch (message.command) {
+            case 'refactor':
+                currentCount = Math.ceil(currentCount * 0.5);
+                counter.textContent = `${currentCount}`;
+                break;
+        }
+    });
+}());

packages/engine.vscode/media/reset.css

@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}

packages/engine.vscode/media/vscode.css

@@ -0,0 +1,91 @@
+:root {
+	--container-padding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-padding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-padding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}