diff --git a/Cargo.toml b/Cargo.toml index 21e2dad7e..b8f0e271b 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -46,6 +46,9 @@ flate2 = "1.0.22" tar = "0.4.38" tower = "0.4.12" +dioxus-rsx = { git = "https://github.com/dioxuslabs/dioxus.git", branch = "jk/rsx-refactor" } +dioxus-autofmt = { git = "https://github.com/dioxuslabs/dioxus.git", branch = "jk/rsx-refactor" } + [[bin]] path = "src/main.rs" name = "dioxus" diff --git a/extension/DEV.md b/extension/DEV.md new file mode 100644 index 000000000..54d0c396a --- /dev/null +++ b/extension/DEV.md @@ -0,0 +1,10 @@ + +## packaging + +``` +$ cd myExtension +$ vsce package +# myExtension.vsix generated +$ vsce publish +# .myExtension published to VS Code Marketplace +``` diff --git a/extension/README.md b/extension/README.md index bf9459fe9..fe67f1587 100644 --- a/extension/README.md +++ b/extension/README.md @@ -12,13 +12,3 @@ 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 -# .myExtension published to VS Code Marketplace -``` diff --git a/extension/package.json b/extension/package.json index c492f97e2..ca73c0ea8 100644 --- a/extension/package.json +++ b/extension/package.json @@ -1,14 +1,15 @@ { - "name": "dioxusstudio", + "name": "dioxus", "displayName": "Dioxus", "description": "Useful tools for working with Dioxus", "version": "0.0.1", - "publisher": "jkelleyrtp", + "publisher": "DioxusLabs", "private": true, "license": "MIT", + "icon": "static/icon.png", "repository": { "type": "git", - "url": "https://github.com/Microsoft/vscode-extension-samples" + "url": "https://github.com/DioxusLabs/cli" }, "engines": { "vscode": "^1.32.0" @@ -18,7 +19,8 @@ ], "activationEvents": [ "onCommand:extension.htmlToDioxusRsx", - "onCommand:extension.htmlToDioxusComponent" + "onCommand:extension.htmlToDioxusComponent", + "onCommand:extension.formatRsx" ], "main": "./out/extension", "contributes": { @@ -30,6 +32,10 @@ { "command": "extension.htmlToDioxusComponent", "title": "Dioxus: Convert HTML to Component" + }, + { + "command": "extension.formatRsx", + "title": "Dioxus: Format RSX" } ] }, diff --git a/extension/src/extension.ts b/extension/src/extension.ts index 4322c48e1..fd8e2906b 100644 --- a/extension/src/extension.ts +++ b/extension/src/extension.ts @@ -3,33 +3,71 @@ import { spawn } from "child_process"; export function activate(context: vscode.ExtensionContext) { - function registerCommand(cmd: string) { - function convert(cmd: string) { - const editor = vscode.window.activeTextEditor;// Get the active text editor - if (editor) { - const html = editor.document.getText(editor.selection); - if (html.length > 0) { - let params = ["translate"]; - if (cmd.includes("Component")) params.push("--component"); - params.push("--raw"); - params.push(html); - const child_proc = spawn("dioxus", 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)); - }); - } else { - vscode.window.showWarningMessage("Please select HTML fragment before invoking this command!"); - } - } + + function translate(component: boolean) { + const editor = vscode.window.activeTextEditor;// Get the active text editor + 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"); + params.push(html); - const handle = vscode.commands.registerCommand(cmd, () => convert(cmd)); - context.subscriptions.push(handle); + const child_proc = spawn("dioxus", 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}`); + }); } - registerCommand('extension.htmlToDioxusRsx'); - registerCommand('extension.htmlToDioxusComponent'); + function autoformat() { + const editor = vscode.window.activeTextEditor;// Get the active text editor + 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 params = ["fmt", "--raw", unformatted]; + + const child_proc = spawn("dioxus", 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}`); + }); + } + + + + + const handles = + [ + vscode.commands.registerCommand('extension.htmlToDioxusRsx', () => translate(false)), + vscode.commands.registerCommand('extension.htmlToDioxusComponent', () => translate(true)), + vscode.commands.registerCommand('extension.formatRsx', () => autoformat()) + ]; + + context.subscriptions.push(...handles); } diff --git a/extension/static/icon.png b/extension/static/icon.png new file mode 100644 index 000000000..42c355c26 Binary files /dev/null and b/extension/static/icon.png differ diff --git a/src/cli/autoformat/mod.rs b/src/cli/autoformat/mod.rs new file mode 100644 index 000000000..26ab86345 --- /dev/null +++ b/src/cli/autoformat/mod.rs @@ -0,0 +1,25 @@ +use super::*; + +/// Build the Rust WASM app and all of its assets. +#[derive(Clone, Debug, Parser)] +pub struct Autoformat { + /// Input file + #[clap(short, long)] + pub raw: Option, +} + +impl Autoformat { + pub fn autoformat(self) -> Result<()> { + if let Some(raw) = self.raw { + if let Some(inner) = dioxus_autofmt::fmt_block(&raw) { + println!("{}", inner); + } else { + // exit process with error + eprintln!("error formatting codeblock"); + exit(1); + } + } + + Ok(()) + } +} diff --git a/src/cli/mod.rs b/src/cli/mod.rs index d639d28a7..92e05eaa9 100644 --- a/src/cli/mod.rs +++ b/src/cli/mod.rs @@ -1,3 +1,4 @@ +pub mod autoformat; pub mod build; pub mod cfg; pub mod clean; @@ -45,17 +46,27 @@ pub struct Cli { pub enum Commands { /// Build the Rust WASM app and all of its assets. Build(build::Build), + /// Translate some source file into Dioxus code. Translate(translate::Translate), + /// Build, watch & serve the Rust WASM app and all of its assets. Serve(serve::Serve), + /// Init a new project for Dioxus. Create(create::Create), + /// Clean output artifacts. Clean(clean::Clean), + + /// Format some rsx + #[clap(name = "fmt")] + Autoformat(autoformat::Autoformat), + /// Dioxus config file controls. #[clap(subcommand)] Config(config::Config), + /// Install & Manage tools for Dioxus-cli. #[clap(subcommand)] Tool(tool::Tool), diff --git a/src/main.rs b/src/main.rs index 099ff74c0..72558741e 100644 --- a/src/main.rs +++ b/src/main.rs @@ -48,6 +48,12 @@ async fn main() -> Result<()> { log::error!("tool error: {}", e); } } + + Commands::Autoformat(opts) => { + if let Err(e) = opts.autoformat() { + log::error!("format error: {}", e); + } + } } Ok(())