mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-30 08:00:21 +00:00
Merge pull request #1170 from DioxusLabs/jk/move-vscode-extension
Extract the vscode extension into its own module with wasm
This commit is contained in:
Jonathan Kelley
GitHub
commit
37f9f38187
23 changed files with 2279 additions and 827 deletions
|
|
@ -4,6 +4,7 @@ members = [
|
||||||
"packages/core",
|
"packages/core",
|
||||||
"packages/cli",
|
"packages/cli",
|
||||||
"packages/core-macro",
|
"packages/core-macro",
|
||||||
|
"packages/extension",
|
||||||
"packages/router",
|
"packages/router",
|
||||||
"packages/html",
|
"packages/html",
|
||||||
"packages/hooks",
|
"packages/hooks",
|
||||||
|
|
@ -73,7 +74,8 @@ slab = "0.4.2"
|
||||||
futures-channel = "0.3.21"
|
futures-channel = "0.3.21"
|
||||||
futures-util = { version = "0.3", default-features = false }
|
futures-util = { version = "0.3", default-features = false }
|
||||||
rustc-hash = "1.1.0"
|
rustc-hash = "1.1.0"
|
||||||
wasm-bindgen = "0.2.79"
|
wasm-bindgen = "0.2.87"
|
||||||
|
html_parser = "0.7.0"
|
||||||
|
|
||||||
# This is a "virtual package"
|
# This is a "virtual package"
|
||||||
# It is not meant to be published, but is used so "cargo run --example XYZ" works properly
|
# It is not meant to be published, but is used so "cargo run --example XYZ" works properly
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ proc-macro2 = { version = "1.0.6", features = ["span-locations"] }
|
||||||
quote = "1.0"
|
quote = "1.0"
|
||||||
syn = { version = "1.0.11", features = ["full", "extra-traits"] }
|
syn = { version = "1.0.11", features = ["full", "extra-traits"] }
|
||||||
serde = { version = "1.0.136", features = ["derive"] }
|
serde = { version = "1.0.136", features = ["derive"] }
|
||||||
prettyplease = { package = "prettier-please", version = "0.1.16", features = [
|
prettyplease = { package = "prettier-please", version = "0.1.16", features = [
|
||||||
"verbatim",
|
"verbatim",
|
||||||
] }
|
] }
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ fs_extra = "1.2.0"
|
||||||
cargo_toml = "0.11.4"
|
cargo_toml = "0.11.4"
|
||||||
futures = "0.3.21"
|
futures = "0.3.21"
|
||||||
notify = { version = "5.0.0-pre.16", features = ["serde"] }
|
notify = { version = "5.0.0-pre.16", features = ["serde"] }
|
||||||
html_parser = "0.6.2"
|
html_parser.workspace = true
|
||||||
binary-install = "0.0.2"
|
binary-install = "0.0.2"
|
||||||
convert_case = "0.5.0"
|
convert_case = "0.5.0"
|
||||||
cargo_metadata = "0.15.0"
|
cargo_metadata = "0.15.0"
|
||||||
|
|
|
||||||
2
packages/cli/extension/dist/.gitignore
vendored
2
packages/cli/extension/dist/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
||||||
**
|
|
||||||
!.gitignore
|
|
||||||
3
packages/cli/extension/server/.gitignore
vendored
3
packages/cli/extension/server/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
||||||
**
|
|
||||||
!Readme.md
|
|
||||||
!.gitignore
|
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
import * as vscode from 'vscode';
|
|
||||||
import { spawn } from "child_process";
|
|
||||||
import { TextEncoder } from 'util';
|
|
||||||
|
|
||||||
let serverPath: string = "dioxus";
|
|
||||||
|
|
||||||
export async function activate(context: vscode.ExtensionContext) {
|
|
||||||
let somePath = await bootstrap(context);
|
|
||||||
|
|
||||||
if (somePath == undefined) {
|
|
||||||
await vscode.window.showErrorMessage('Could not find bundled Dioxus-CLI. Please install it manually.');
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
serverPath = somePath;
|
|
||||||
}
|
|
||||||
|
|
||||||
context.subscriptions.push(
|
|
||||||
// vscode.commands.registerTextEditorCommand('editor.action.clipboardPasteAction', onPasteHandler),
|
|
||||||
vscode.commands.registerCommand('extension.htmlToDioxusRsx', translateBlock),
|
|
||||||
vscode.commands.registerCommand('extension.htmlToDioxusComponent', translateComponent),
|
|
||||||
vscode.commands.registerCommand('extension.formatRsx', fmtSelection),
|
|
||||||
vscode.commands.registerCommand('extension.formatRsxDocument', formatRsxDocument),
|
|
||||||
vscode.workspace.onWillSaveTextDocument(fmtDocumentOnSave)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function translateComponent() {
|
|
||||||
translate(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
function translateBlock() {
|
|
||||||
translate(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
function translate(component: boolean) {
|
|
||||||
const editor = vscode.window.activeTextEditor;
|
|
||||||
|
|
||||||
if (!editor) return;
|
|
||||||
|
|
||||||
const html = editor.document.getText(editor.selection);
|
|
||||||
if (html.length == 0) {
|
|
||||||
vscode.window.showWarningMessage("Please select HTML fragment before invoking this command!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let params = ["translate"];
|
|
||||||
if (component) params.push("--component");
|
|
||||||
params.push("--raw", html);
|
|
||||||
|
|
||||||
const child_proc = spawn(serverPath, params);
|
|
||||||
|
|
||||||
let result = '';
|
|
||||||
child_proc.stdout?.on('data', data => result += data);
|
|
||||||
|
|
||||||
child_proc.on('close', () => {
|
|
||||||
if (result.length > 0) editor.edit(editBuilder => editBuilder.replace(editor.selection, result));
|
|
||||||
});
|
|
||||||
|
|
||||||
child_proc.on('error', (err) => {
|
|
||||||
vscode.window.showWarningMessage(`Errors occurred while translating. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function onPasteHandler() {
|
|
||||||
// check settings to see if we should convert HTML to Rsx
|
|
||||||
if (vscode.workspace.getConfiguration('dioxus').get('convertOnPaste')) {
|
|
||||||
convertHtmlToRsxOnPaste();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertHtmlToRsxOnPaste() {
|
|
||||||
const editor = vscode.window.activeTextEditor;
|
|
||||||
if (!editor) return;
|
|
||||||
|
|
||||||
// get the cursor location
|
|
||||||
const cursor = editor.selection.active;
|
|
||||||
|
|
||||||
// try to parse the HTML at the cursor location
|
|
||||||
const html = editor.document.getText(new vscode.Range(cursor, cursor));
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRsxDocument() {
|
|
||||||
const editor = vscode.window.activeTextEditor;
|
|
||||||
if (!editor) return;
|
|
||||||
fmtDocument(editor.document);
|
|
||||||
}
|
|
||||||
|
|
||||||
function fmtSelection() {
|
|
||||||
const editor = vscode.window.activeTextEditor;
|
|
||||||
if (!editor) return;
|
|
||||||
|
|
||||||
const unformatted = editor.document.getText(editor.selection);
|
|
||||||
|
|
||||||
if (unformatted.length == 0) {
|
|
||||||
vscode.window.showWarningMessage("Please select rsx invoking this command!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileDir = editor.document.fileName.slice(0, editor.document.fileName.lastIndexOf('\\'));
|
|
||||||
|
|
||||||
const child_proc = spawn(serverPath, ["fmt", "--raw", unformatted.toString()], {
|
|
||||||
cwd: fileDir ? fileDir : undefined,
|
|
||||||
});
|
|
||||||
let result = '';
|
|
||||||
|
|
||||||
child_proc.stdout?.on('data', data => result += data);
|
|
||||||
|
|
||||||
child_proc.on('close', () => {
|
|
||||||
if (result.length > 0) editor.edit(editBuilder => editBuilder.replace(editor.selection, result));
|
|
||||||
});
|
|
||||||
|
|
||||||
child_proc.on('error', (err) => {
|
|
||||||
vscode.window.showWarningMessage(`Errors occurred while translating. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function fmtDocumentOnSave(e: vscode.TextDocumentWillSaveEvent) {
|
|
||||||
// check the settings to make sure format on save is configured
|
|
||||||
const dioxusConfig = vscode.workspace.getConfiguration('dioxus', e.document).get('formatOnSave');
|
|
||||||
const globalConfig = vscode.workspace.getConfiguration('editor', e.document).get('formatOnSave');
|
|
||||||
if (
|
|
||||||
(dioxusConfig === 'enabled') ||
|
|
||||||
(dioxusConfig !== 'disabled' && globalConfig)
|
|
||||||
) {
|
|
||||||
fmtDocument(e.document);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fmtDocument(document: vscode.TextDocument) {
|
|
||||||
try {
|
|
||||||
if (document.languageId !== "rust" || document.uri.scheme !== "file") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [editor,] = vscode.window.visibleTextEditors.filter(editor => editor.document.fileName === document.fileName);
|
|
||||||
if (!editor) return; // Need an editor to apply text edits.
|
|
||||||
|
|
||||||
const fileDir = document.fileName.slice(0, document.fileName.lastIndexOf('\\'));
|
|
||||||
const child_proc = spawn(serverPath, ["fmt", "--file", document.fileName], {
|
|
||||||
cwd: fileDir ? fileDir : undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
let result = '';
|
|
||||||
child_proc.stdout?.on('data', data => result += data);
|
|
||||||
|
|
||||||
/*type RsxEdit = {
|
|
||||||
formatted: string,
|
|
||||||
start: number,
|
|
||||||
end: number
|
|
||||||
}*/
|
|
||||||
|
|
||||||
child_proc.on('close', () => {
|
|
||||||
if (child_proc.exitCode !== 0) {
|
|
||||||
vscode.window.showWarningMessage(`Errors occurred while formatting. Make sure you have the most recent Dioxus-CLI installed!\nDioxus-CLI exited with exit code ${child_proc.exitCode}\n\nData from Dioxus-CLI:\n${result}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
/*if (result.length === 0) return;
|
|
||||||
|
|
||||||
// Used for error message:
|
|
||||||
const originalResult = result;
|
|
||||||
try {
|
|
||||||
// Only parse the last non empty line, to skip log warning messages:
|
|
||||||
const lines = result.replaceAll('\r\n', '\n').split('\n');
|
|
||||||
const nonEmptyLines = lines.filter(line => line.trim().length !== 0);
|
|
||||||
result = nonEmptyLines[nonEmptyLines.length - 1] ?? '';
|
|
||||||
|
|
||||||
if (result.length === 0) return;
|
|
||||||
|
|
||||||
const decoded: RsxEdit[] = JSON.parse(result);
|
|
||||||
if (decoded.length === 0) return;
|
|
||||||
|
|
||||||
// Preform edits at the end of the file
|
|
||||||
// first (to not change previous text file
|
|
||||||
// offsets):
|
|
||||||
decoded.sort((a, b) => b.start - a.start);
|
|
||||||
|
|
||||||
|
|
||||||
// Convert from utf8 offsets to utf16 offsets used by VS Code:
|
|
||||||
|
|
||||||
const utf8Text = new TextEncoder().encode(text);
|
|
||||||
const utf8ToUtf16Pos = (posUtf8: number) => {
|
|
||||||
// Find the line of the position as well as the utf8 and
|
|
||||||
// utf16 indexes for the start of that line:
|
|
||||||
let startOfLineUtf8 = 0;
|
|
||||||
let lineIndex = 0;
|
|
||||||
const newLineUtf8 = '\n'.charCodeAt(0);
|
|
||||||
// eslint-disable-next-line no-constant-condition
|
|
||||||
while (true) {
|
|
||||||
const nextLineAt = utf8Text.indexOf(newLineUtf8, startOfLineUtf8);
|
|
||||||
if (nextLineAt < 0 || posUtf8 <= nextLineAt) break;
|
|
||||||
startOfLineUtf8 = nextLineAt + 1;
|
|
||||||
lineIndex++;
|
|
||||||
}
|
|
||||||
const lineUtf16 = document.lineAt(lineIndex);
|
|
||||||
|
|
||||||
// Move forward from a synced position in the text until the
|
|
||||||
// target pos is found:
|
|
||||||
let currentUtf8 = startOfLineUtf8;
|
|
||||||
let currentUtf16 = document.offsetAt(lineUtf16.range.start);
|
|
||||||
|
|
||||||
const decodeBuffer = new Uint8Array(10);
|
|
||||||
const utf8Encoder = new TextEncoder();
|
|
||||||
while (currentUtf8 < posUtf8) {
|
|
||||||
const { written } = utf8Encoder.encodeInto(text.charAt(currentUtf16), decodeBuffer);
|
|
||||||
currentUtf8 += written;
|
|
||||||
currentUtf16++;
|
|
||||||
}
|
|
||||||
return currentUtf16;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
type FixedEdit = {
|
|
||||||
range: vscode.Range,
|
|
||||||
formatted: string,
|
|
||||||
};
|
|
||||||
|
|
||||||
const edits: FixedEdit[] = [];
|
|
||||||
for (const edit of decoded) {
|
|
||||||
// Convert from utf8 to utf16:
|
|
||||||
const range = new vscode.Range(
|
|
||||||
document.positionAt(utf8ToUtf16Pos(edit.start)),
|
|
||||||
document.positionAt(utf8ToUtf16Pos(edit.end))
|
|
||||||
);
|
|
||||||
|
|
||||||
if (editor.document.getText(range) !== document.getText(range)) {
|
|
||||||
// The text that was formatted has changed while we were working.
|
|
||||||
vscode.window.showWarningMessage(`Dioxus formatting was ignored since the source file changed before the change could be applied.`);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
edits.push({
|
|
||||||
range,
|
|
||||||
formatted: edit.formatted,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Apply edits:
|
|
||||||
editor.edit(editBuilder => {
|
|
||||||
edits.forEach((edit) => editBuilder.replace(edit.range, edit.formatted));
|
|
||||||
}, {
|
|
||||||
undoStopAfter: false,
|
|
||||||
undoStopBefore: false
|
|
||||||
});
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
vscode.window.showWarningMessage(`Errors occurred while formatting. Make sure you have the most recent Dioxus-CLI installed!\n${err}\n\nData from Dioxus-CLI:\n${originalResult}`);
|
|
||||||
}*/
|
|
||||||
});
|
|
||||||
|
|
||||||
child_proc.on('error', (err) => {
|
|
||||||
vscode.window.showWarningMessage(`Errors occurred while formatting. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
vscode.window.showWarningMessage(`Errors occurred while formatting. Make sure you have the most recent Dioxus-CLI installed! \n${error}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// I'm using the approach defined in rust-analyzer here
|
|
||||||
//
|
|
||||||
// We ship the server as part of the extension, but we need to handle external paths and such
|
|
||||||
//
|
|
||||||
// https://github.com/rust-lang/rust-analyzer/blob/fee5555cfabed4b8abbd40983fc4442df4007e49/editors/code/src/main.ts#L270
|
|
||||||
async function bootstrap(context: vscode.ExtensionContext): Promise<string | undefined> {
|
|
||||||
|
|
||||||
const ext = process.platform === "win32" ? ".exe" : "";
|
|
||||||
const bundled = vscode.Uri.joinPath(context.extensionUri, "server", `dioxus${ext}`);
|
|
||||||
const bundledExists = await vscode.workspace.fs.stat(bundled).then(
|
|
||||||
() => true,
|
|
||||||
() => false
|
|
||||||
);
|
|
||||||
|
|
||||||
// if bunddled doesn't exist, try using a locally-installed version
|
|
||||||
if (!bundledExists) {
|
|
||||||
return "dioxus";
|
|
||||||
}
|
|
||||||
|
|
||||||
return bundled.fsPath;
|
|
||||||
}
|
|
||||||
34
packages/extension/.vscode/launch.json
vendored
Normal file
34
packages/extension/.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
// 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",
|
||||||
|
"args": [
|
||||||
|
"--extensionDevelopmentPath=${workspaceFolder}"
|
||||||
|
],
|
||||||
|
"outFiles": [
|
||||||
|
"${workspaceFolder}/out/**/*.js"
|
||||||
|
]
|
||||||
|
// "preLaunchTask": "${defaultBuildTask}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Extension Tests",
|
||||||
|
"type": "extensionHost",
|
||||||
|
"request": "launch",
|
||||||
|
"args": [
|
||||||
|
"--extensionDevelopmentPath=${workspaceFolder}",
|
||||||
|
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
|
||||||
|
],
|
||||||
|
"outFiles": [
|
||||||
|
"${workspaceFolder}/out/test/**/*.js"
|
||||||
|
],
|
||||||
|
"preLaunchTask": "${defaultBuildTask}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
20
packages/extension/.vscode/tasks.json
vendored
Normal file
20
packages/extension/.vscode/tasks.json
vendored
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
16
packages/extension/Cargo.toml
Normal file
16
packages/extension/Cargo.toml
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
[package]
|
||||||
|
name = "dioxus-ext"
|
||||||
|
version = "0.1.0"
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
wasm-bindgen.workspace = true
|
||||||
|
dioxus-autofmt.workspace = true
|
||||||
|
rsx-rosetta.workspace = true
|
||||||
|
html_parser.workspace = true
|
||||||
|
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
crate-type = ["cdylib", "rlib"]
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -2,7 +2,7 @@
|
||||||
"name": "dioxus",
|
"name": "dioxus",
|
||||||
"displayName": "Dioxus",
|
"displayName": "Dioxus",
|
||||||
"description": "Useful tools for working with Dioxus",
|
"description": "Useful tools for working with Dioxus",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"publisher": "DioxusLabs",
|
"publisher": "DioxusLabs",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
@ -18,12 +18,13 @@
|
||||||
"Programming Languages"
|
"Programming Languages"
|
||||||
],
|
],
|
||||||
"activationEvents": [
|
"activationEvents": [
|
||||||
"onCommand:extension.htmlToDioxusRsx",
|
"onLanguage:rust"
|
||||||
"onCommand:extension.htmlToDioxusComponent",
|
],
|
||||||
"onCommand:extension.formatRsx",
|
"main": "./out/main.js",
|
||||||
"onCommand:extension.formatRsxDocument"
|
"extensionKind": [
|
||||||
|
"ui",
|
||||||
|
"workspace"
|
||||||
],
|
],
|
||||||
"main": "./out/main",
|
|
||||||
"contributes": {
|
"contributes": {
|
||||||
"commands": [
|
"commands": [
|
||||||
{
|
{
|
||||||
|
|
@ -71,11 +72,18 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"vscode:prepublish": "npm run build-base -- --minify",
|
"vscode:prepublish": "npm run build-base",
|
||||||
"package": "vsce package -o rust-analyzer.vsix",
|
"// package": "vsce package -o rust-analyzer.vsix",
|
||||||
"build-base": "esbuild ./src/main.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --target=node16",
|
"// build-base": "node src/build.js",
|
||||||
"build": "npm run build-base -- --sourcemap",
|
"build-wasm": "cargo build --target wasm32-unknown-unknown --release && cp ../../target/wasm32-unknown-unknown/release/dioxus_ext.wasm pkg/",
|
||||||
"watch": "npm run build-base -- --sourcemap --watch",
|
"bind-wasm": "wasm-bindgen --out-dir=pkg --target=web --omit-default-module-path --omit-imports pkg/dioxus_ext.wasm",
|
||||||
|
"build-base": "npm run build-wasm && npm run bind-wasm && webpack",
|
||||||
|
"webpack": "webpack --mode development",
|
||||||
|
"webpack-dev": "webpack --mode development --watch",
|
||||||
|
"package": "webpack --mode production --devtool hidden-source-map",
|
||||||
|
"test-compile": "tsc -p ./",
|
||||||
|
"build": "npm run build-base -- --devtool hidden-source-map",
|
||||||
|
"watch": "npm run build-base -- --devtool hidden-source-map --watch",
|
||||||
"lint": "prettier --check . && eslint -c .eslintrc.js --ext ts ./src ./tests",
|
"lint": "prettier --check . && eslint -c .eslintrc.js --ext ts ./src ./tests",
|
||||||
"fix": "prettier --write . && eslint -c .eslintrc.js --ext ts ./src ./tests --fix",
|
"fix": "prettier --write . && eslint -c .eslintrc.js --ext ts ./src ./tests --fix",
|
||||||
"pretest": "tsc && npm run build",
|
"pretest": "tsc && npm run build",
|
||||||
|
|
@ -87,16 +95,19 @@
|
||||||
"@typescript-eslint/eslint-plugin": "^5.30.5",
|
"@typescript-eslint/eslint-plugin": "^5.30.5",
|
||||||
"@typescript-eslint/parser": "^5.30.5",
|
"@typescript-eslint/parser": "^5.30.5",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"esbuild": "^0.14.27",
|
|
||||||
"eslint": "^8.19.0",
|
"eslint": "^8.19.0",
|
||||||
"typescript": "^4.7.4",
|
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"ovsx": "^0.5.1",
|
"ovsx": "^0.5.1",
|
||||||
"prettier": "^2.6.2",
|
"prettier": "^2.6.2",
|
||||||
|
"ts-loader": "^9.4.4",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"vsce": "^2.7.0"
|
"typescript": "^4.7.4",
|
||||||
|
"vsce": "^2.7.0",
|
||||||
|
"webpack": "^5.88.1",
|
||||||
|
"webpack-cli": "^5.1.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"dioxus-ext": "./pkg",
|
||||||
"vsce": "^2.9.2"
|
"vsce": "^2.9.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
14
packages/extension/pkg/package.json
Normal file
14
packages/extension/pkg/package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "dioxus-ext",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"files": [
|
||||||
|
"dioxus_ext_bg.wasm",
|
||||||
|
"dioxus_ext.js",
|
||||||
|
"dioxus_ext.d.ts",
|
||||||
|
"dioxus_ext_bg.js",
|
||||||
|
"dioxus_ext_bg.d.ts",
|
||||||
|
"dioxus_ext_bg.wasm.d.ts"
|
||||||
|
],
|
||||||
|
"main": "dioxus_ext.js",
|
||||||
|
"types": "dioxus_ext.d.ts"
|
||||||
|
}
|
||||||
53
packages/extension/src/lib.rs
Normal file
53
packages/extension/src/lib.rs
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
//! This file exports functions into the vscode extension
|
||||||
|
|
||||||
|
use dioxus_autofmt::FormattedBlock;
|
||||||
|
use wasm_bindgen::prelude::*;
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn format_rsx(raw: String) -> String {
|
||||||
|
let block = dioxus_autofmt::fmt_block(&raw, 0);
|
||||||
|
block.unwrap()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn format_selection(raw: String) -> String {
|
||||||
|
let block = dioxus_autofmt::fmt_block(&raw, 0);
|
||||||
|
block.unwrap()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub struct FormatBlockInstance {
|
||||||
|
new: String,
|
||||||
|
_edits: Vec<FormattedBlock>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
impl FormatBlockInstance {
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn formatted(&self) -> String {
|
||||||
|
self.new.clone()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn length(&self) -> usize {
|
||||||
|
self._edits.len()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn format_file(contents: String) -> FormatBlockInstance {
|
||||||
|
let _edits = dioxus_autofmt::fmt_file(&contents);
|
||||||
|
let out = dioxus_autofmt::apply_formats(&contents, _edits.clone());
|
||||||
|
FormatBlockInstance { new: out, _edits }
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn translate_rsx(contents: String, _component: bool) -> String {
|
||||||
|
// Ensure we're loading valid HTML
|
||||||
|
let dom = html_parser::Dom::parse(&contents).unwrap();
|
||||||
|
|
||||||
|
let callbody = rsx_rosetta::rsx_from_html(&dom);
|
||||||
|
|
||||||
|
// Convert the HTML to RSX
|
||||||
|
dioxus_autofmt::write_block_out(callbody).unwrap()
|
||||||
|
}
|
||||||
106
packages/extension/src/main.ts
Normal file
106
packages/extension/src/main.ts
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
import * as vscode from 'vscode';
|
||||||
|
import init, * as dioxus from 'dioxus-ext';
|
||||||
|
|
||||||
|
export async function activate(context: vscode.ExtensionContext) {
|
||||||
|
// Load the wasm from the file system
|
||||||
|
const wasmSourceCode = await vscode.workspace.fs.readFile(vscode.Uri.joinPath(context.extensionUri, "./pkg/dioxus_ext_bg.wasm"));
|
||||||
|
|
||||||
|
// Wait for the initialization to finish
|
||||||
|
// This is using the byte buffer directly which won't go through the "fetch" machinery
|
||||||
|
//
|
||||||
|
// For whatever reason, wasm-bindgen generates `fetch` when we don't want it to
|
||||||
|
// VSCode doesn't have a `fetch` implementation, but we don't really care about polyfilling it
|
||||||
|
await init(wasmSourceCode);
|
||||||
|
|
||||||
|
// Todo:
|
||||||
|
// I want a paste-handler that translates HTML to RSX whenever HTML is pasted into an Rsx block
|
||||||
|
// Or, a little tooltip that pops up and asks if you want to translate the HTML to RSX
|
||||||
|
context.subscriptions.push(
|
||||||
|
vscode.commands.registerCommand('extension.htmlToDioxusRsx', () => translate(false)),
|
||||||
|
vscode.commands.registerCommand('extension.htmlToDioxusComponent', () => translate(true)),
|
||||||
|
vscode.commands.registerCommand('extension.formatRsx', fmtSelection),
|
||||||
|
vscode.commands.registerCommand('extension.formatRsxDocument', formatRsxDocument),
|
||||||
|
vscode.workspace.onWillSaveTextDocument(fmtDocumentOnSave)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function translate(component: boolean) {
|
||||||
|
// Load the activate editor
|
||||||
|
const editor = vscode.window.activeTextEditor;
|
||||||
|
if (!editor) return;
|
||||||
|
|
||||||
|
// Get the selected text
|
||||||
|
const html = editor.document.getText(editor.selection);
|
||||||
|
if (html.length == 0) {
|
||||||
|
vscode.window.showWarningMessage("Please select HTML fragment before invoking this command!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Translate the HTML to RSX
|
||||||
|
const out = dioxus.translate_rsx(html, component);
|
||||||
|
if (out.length > 0) {
|
||||||
|
editor.edit(editBuilder => editBuilder.replace(editor.selection, out));
|
||||||
|
} else {
|
||||||
|
vscode.window.showWarningMessage(`Errors occurred while translating, make sure this block of HTML is valid`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function formatRsxDocument() {
|
||||||
|
const editor = vscode.window.activeTextEditor;
|
||||||
|
if (!editor) return;
|
||||||
|
|
||||||
|
fmtDocument(editor.document);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtSelection() {
|
||||||
|
const editor = vscode.window.activeTextEditor;
|
||||||
|
if (!editor) return;
|
||||||
|
|
||||||
|
const unformatted = editor.document.getText(editor.selection);
|
||||||
|
|
||||||
|
if (unformatted.length == 0) {
|
||||||
|
vscode.window.showWarningMessage("Please select rsx invoking this command!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileDir = editor.document.fileName.slice(0, editor.document.fileName.lastIndexOf('\\'));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtDocumentOnSave(e: vscode.TextDocumentWillSaveEvent) {
|
||||||
|
// check the settings to make sure format on save is configured
|
||||||
|
const dioxusConfig = vscode.workspace.getConfiguration('dioxus', e.document).get('formatOnSave');
|
||||||
|
const globalConfig = vscode.workspace.getConfiguration('editor', e.document).get('formatOnSave');
|
||||||
|
if (
|
||||||
|
(dioxusConfig === 'enabled') ||
|
||||||
|
(dioxusConfig !== 'disabled' && globalConfig)
|
||||||
|
) {
|
||||||
|
fmtDocument(e.document);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtDocument(document: vscode.TextDocument) {
|
||||||
|
try {
|
||||||
|
if (document.languageId !== "rust" || document.uri.scheme !== "file") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [editor,] = vscode.window.visibleTextEditors.filter(editor => editor.document.fileName === document.fileName);
|
||||||
|
if (!editor) return; // Need an editor to apply text edits.
|
||||||
|
|
||||||
|
const contents = editor.document.getText();
|
||||||
|
const formatted = dioxus.format_file(contents);
|
||||||
|
|
||||||
|
// Replace the entire text document
|
||||||
|
// Yes, this is a bit heavy handed, but the dioxus side doesn't know the line/col scheme that vscode is using
|
||||||
|
if (formatted.length() > 0) {
|
||||||
|
editor.edit(editBuilder => {
|
||||||
|
const range = new vscode.Range(0, 0, document.lineCount, 0);
|
||||||
|
editBuilder.replace(range, formatted.formatted());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
vscode.window.showWarningMessage(`Errors occurred while formatting. Make sure you have the most recent Dioxus-CLI installed! \n${error}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -2,11 +2,17 @@
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
"target": "es2021",
|
"target": "es2021",
|
||||||
"lib": ["ES2021"],
|
"lib": [
|
||||||
|
"ES2021"
|
||||||
|
],
|
||||||
"outDir": "out",
|
"outDir": "out",
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"rootDir": "src"
|
"rootDir": "src"
|
||||||
},
|
},
|
||||||
"exclude": ["node_modules", ".vscode-test"]
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
".vscode-test",
|
||||||
|
"out"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
56
packages/extension/webpack.config.js
Normal file
56
packages/extension/webpack.config.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
//@ts-check
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
|
||||||
|
/**@type {import('webpack').Configuration}*/
|
||||||
|
const config = {
|
||||||
|
target: 'webworker', // vscode extensions run in webworker context for VS Code web 📖 -> https://webpack.js.org/configuration/target/#target
|
||||||
|
experiments: {
|
||||||
|
asyncWebAssembly: true,
|
||||||
|
layers: true,
|
||||||
|
},
|
||||||
|
entry: './src/main.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
|
||||||
|
output: {
|
||||||
|
// the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
|
||||||
|
path: path.resolve(__dirname, 'out'),
|
||||||
|
filename: 'main.js',
|
||||||
|
libraryTarget: 'commonjs2',
|
||||||
|
devtoolModuleFilenameTemplate: '../[resource-path]',
|
||||||
|
publicPath: '',
|
||||||
|
},
|
||||||
|
devtool: 'source-map',
|
||||||
|
externals: {
|
||||||
|
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
// support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
|
||||||
|
mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
|
||||||
|
extensions: ['.ts', '.js'],
|
||||||
|
alias: {
|
||||||
|
// provides alternate implementation for node module and source files
|
||||||
|
},
|
||||||
|
fallback: {
|
||||||
|
// Webpack 5 no longer polyfills Node.js core modules automatically.
|
||||||
|
// see https://webpack.js.org/configuration/resolve/#resolvefallback
|
||||||
|
// for the list of Node.js core module polyfills.
|
||||||
|
// "util": require.resolve("util/")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'ts-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
module.exports = config;
|
||||||
|
|
@ -15,7 +15,7 @@ keywords = ["dom", "ui", "gui", "react"]
|
||||||
[dependencies]
|
[dependencies]
|
||||||
dioxus-autofmt = { workspace = true }
|
dioxus-autofmt = { workspace = true }
|
||||||
dioxus-rsx = { workspace = true }
|
dioxus-rsx = { workspace = true }
|
||||||
html_parser = "0.6.3"
|
html_parser.workspace = true
|
||||||
proc-macro2 = "1.0.49"
|
proc-macro2 = "1.0.49"
|
||||||
quote = "1.0.23"
|
quote = "1.0.23"
|
||||||
syn = { version = "1.0.107", features = ["full"] }
|
syn = { version = "1.0.107", features = ["full"] }
|
||||||
|
|
@ -27,4 +27,4 @@ convert_case = "0.5.0"
|
||||||
# eventually more output options
|
# eventually more output options
|
||||||
|
|
||||||
[dev-dependencies]
|
[dev-dependencies]
|
||||||
pretty_assertions = "1.2.1"
|
pretty_assertions = "1.2.1"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue