feat: add vscode extension

extension/.eslintrc.js

@@ -0,0 +1,20 @@
+/**@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',
+	],
+	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,
+	}
+};

extension/.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+npm-debug.log
+Thumbs.db
+*/node_modules/
+node_modules/
+*/out/
+out/
+*/.vs/
+.vs/
+tsconfig.lsif.json
+*.lsif
+*.db
+*.vsix

extension/README.md

@@ -0,0 +1,24 @@
+# Dioxus VSCode Extension
+
+![Dioxus Logo](https://dioxuslabs.com/guide/images/dioxuslogo_full.png)
+
+This extension wraps functionality in Dioxus CLI to be used in your editor! Make sure the dioxus-cli is installed before using this extension.
+
+## Current commands:
+
+### Convert HTML to RSX
+Converts a selection of html to valid rsx.
+
+### Convert HTML to Dioxus Component
+
+Converts a selection of html to a valid Dioxus component with all SVGs factored out into their own module.
+
+## packaging
+
+```
+$ cd myExtension
+$ vsce package
+# myExtension.vsix generated
+$ vsce publish
+# <publisherID>.myExtension published to VS Code Marketplace
+```

extension/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "dioxusstudio",
+    "displayName": "dioxusStudio",
+    "description": "Toolkit for IDE support in Dioxus apps",
+    "version": "0.0.1",
+    "publisher": "jkelleyrtp",
+    "private": true,
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Microsoft/vscode-extension-samples"
+    },
+    "engines": {
+        "vscode": "^1.32.0"
+    },
+    "categories": [
+        "Other"
+    ],
+    "activationEvents": [
+        "onCommand:extension.htmlToRsx",
+        "onCommand:extension.htmlToComponent"
+    ],
+    "main": "./out/extension",
+    "contributes": {
+        "commands": [
+            {
+                "command": "extension.htmlToRsx",
+                "title": "Convert HTML to RSX"
+            },
+            {
+                "command": "extension.htmlToComponent",
+                "title": "Convert HTML to Dioxus Component"
+            }
+        ]
+    },
+    "scripts": {
+        "vscode:prepublish": "npm run compile",
+        "compile": "tsc -p ./",
+        "lint": "eslint . --ext .ts,.tsx",
+        "watch": "tsc -watch -p ./"
+    },
+    "devDependencies": {
+        "@types/node": "^12.12.0",
+        "@types/vscode": "^1.32.0",
+        "@typescript-eslint/eslint-plugin": "^4.16.0",
+        "@typescript-eslint/parser": "^4.16.0",
+        "eslint": "^7.21.0",
+        "typescript": "^4.3.5"
+    }
+}

extension/src/extension.ts

@@ -0,0 +1,57 @@
+'use strict';
+
+import * as vscode from 'vscode';
+import { spawn } from "child_process";
+
+export function activate(context: vscode.ExtensionContext) {
+	const htmlToPureRsx = vscode.commands.registerCommand('extension.htmlToRsx', function () {
+		// Get the active text editor
+		const editor = vscode.window.activeTextEditor;
+
+		if (editor) {
+			const document = editor.document;
+			const selection = editor.selection;
+			const word = document.getText(selection);
+
+			const child_proc = spawn("dioxus", ["translate", "-t", word]);
+
+			let result = '';
+			child_proc.stdout?.on('data', data => result += data);
+
+			child_proc.on('close', () => {
+				editor.edit(editBuilder => {
+					if (result != '') {
+						editBuilder.replace(selection, result)
+					}
+				})
+			});
+		}
+	});
+
+	const htmlToComponent = vscode.commands.registerCommand('extension.htmlToComponent', function () {
+		// Get the active text editor
+		const editor = vscode.window.activeTextEditor;
+
+		if (editor) {
+			const document = editor.document;
+			const selection = editor.selection;
+			const word = document.getText(selection);
+
+			const child_proc = spawn("dioxus", ["translate", "-c", "-t", word]);
+
+			let result = '';
+			child_proc.stdout?.on('data', data => result += data);
+
+			child_proc.on('close', () => {
+				editor.edit(editBuilder => {
+					if (result != '') {
+						editBuilder.replace(selection, result)
+					}
+				})
+			});
+		}
+	});
+
+	context.subscriptions.push(htmlToPureRsx);
+	context.subscriptions.push(htmlToComponent);
+}

extension/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es2019",
+		"lib": ["ES2019"],
+		"outDir": "out",
+		"sourceMap": true,
+		"strict": true,
+		"rootDir": "src"
+	},
+	"exclude": ["node_modules", ".vscode-test"]
+}