feat(fmt): support HTML, Svelte, Vue, Astro and Angular (#25019)

This commit adds capability to format HTML, Svelte, Vue, Astro and Angular
files.

"--unstable-html" is required to format HTML files, and "--unstable-component"
flag is needed to format other formats. These can also be specified in the config
file.

Close #25015

cli/Cargo.toml

@@ -123,7 +123,8 @@ libc.workspace = true
 libz-sys.workspace = true
 log = { workspace = true, features = ["serde"] }
 lsp-types.workspace = true
-malva = "=0.8.0"
+malva = "=0.9.0"
+markup_fmt = "=0.12.0"
 memmem.workspace = true
 monch.workspace = true
 notify.workspace = true

cli/args/flags.rs

@@ -206,6 +206,8 @@ pub struct FmtFlags {
   pub no_semicolons: Option<bool>,
   pub watch: Option<WatchFlags>,
   pub unstable_css: bool,
+  pub unstable_html: bool,
+  pub unstable_component: bool,
   pub unstable_yaml: bool,
 }
 
@@ -2104,7 +2106,8 @@ Ignore formatting a file by adding an ignore comment at the top of the file:
             .default_value("ts")
             .value_parser([
               "ts", "tsx", "js", "jsx", "md", "json", "jsonc", "css", "scss",
-              "sass", "less", "yml", "yaml", "ipynb",
+              "sass", "less", "html", "svelte", "vue", "astro", "yml", "yaml",
+              "ipynb",
             ]),
         )
         .arg(
@@ -2188,6 +2191,20 @@ Ignore formatting a file by adding an ignore comment at the top of the file:
             .value_parser(FalseyValueParser::new())
             .action(ArgAction::SetTrue),
         )
+        .arg(
+          Arg::new("unstable-html")
+            .long("unstable-html")
+            .help("Enable formatting HTML files.")
+            .value_parser(FalseyValueParser::new())
+            .action(ArgAction::SetTrue),
+        )
+        .arg(
+          Arg::new("unstable-component")
+            .long("unstable-component")
+            .help("Enable formatting Svelte, Vue, Astro and Angular files.")
+            .value_parser(FalseyValueParser::new())
+            .action(ArgAction::SetTrue),
+        )
         .arg(
           Arg::new("unstable-yaml")
             .long("unstable-yaml")
@@ -4058,6 +4075,8 @@ fn fmt_parse(flags: &mut Flags, matches: &mut ArgMatches) {
   let prose_wrap = matches.remove_one::<String>("prose-wrap");
   let no_semicolons = matches.remove_one::<bool>("no-semicolons");
   let unstable_css = matches.get_flag("unstable-css");
+  let unstable_html = matches.get_flag("unstable-html");
+  let unstable_component = matches.get_flag("unstable-component");
   let unstable_yaml = matches.get_flag("unstable-yaml");
 
   flags.subcommand = DenoSubcommand::Fmt(FmtFlags {
@@ -4071,6 +4090,8 @@ fn fmt_parse(flags: &mut Flags, matches: &mut ArgMatches) {
     no_semicolons,
     watch: watch_arg_parse(matches),
     unstable_css,
+    unstable_html,
+    unstable_component,
     unstable_yaml,
   });
 }
@@ -5891,6 +5912,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Default::default(),
         }),
@@ -5916,6 +5939,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Default::default(),
         }),
@@ -5941,6 +5966,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Default::default(),
         }),
@@ -5966,6 +5993,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Some(Default::default()),
         }),
@@ -5980,6 +6009,8 @@ mod tests {
       "--watch",
       "--no-clear-screen",
       "--unstable-css",
+      "--unstable-html",
+      "--unstable-component",
       "--unstable-yaml"
     ]);
     assert_eq!(
@@ -5998,6 +6029,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: true,
+          unstable_html: true,
+          unstable_component: true,
           unstable_yaml: true,
           watch: Some(WatchFlags {
             hmr: false,
@@ -6034,6 +6067,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Some(Default::default()),
         }),
@@ -6059,6 +6094,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Default::default(),
         }),
@@ -6092,6 +6129,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: None,
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Some(Default::default()),
         }),
@@ -6130,6 +6169,8 @@ mod tests {
           prose_wrap: Some("never".to_string()),
           no_semicolons: Some(true),
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Default::default(),
         }),
@@ -6162,6 +6203,8 @@ mod tests {
           prose_wrap: None,
           no_semicolons: Some(false),
           unstable_css: false,
+          unstable_html: false,
+          unstable_component: false,
           unstable_yaml: false,
           watch: Default::default(),
         }),

cli/args/mod.rs

@@ -282,6 +282,8 @@ impl BenchOptions {
 #[derive(Clone, Debug, Default, PartialEq, Eq, Hash)]
 pub struct UnstableFmtOptions {
   pub css: bool,
+  pub html: bool,
+  pub component: bool,
   pub yaml: bool,
 }
 
@@ -316,6 +318,8 @@ impl FmtOptions {
       options: resolve_fmt_options(fmt_flags, fmt_config.options),
       unstable: UnstableFmtOptions {
         css: unstable.css || fmt_flags.unstable_css,
+        html: unstable.html || fmt_flags.unstable_html,
+        component: unstable.component || fmt_flags.unstable_component,
         yaml: unstable.yaml || fmt_flags.unstable_yaml,
       },
       files: fmt_config.files,
@@ -1339,6 +1343,8 @@ impl CliOptions {
     let workspace = self.workspace();
     UnstableFmtOptions {
       css: workspace.has_unstable("fmt-css"),
+      html: workspace.has_unstable("fmt-html"),
+      component: workspace.has_unstable("fmt-component"),
       yaml: workspace.has_unstable("fmt-yaml"),
     }
   }
@@ -1673,6 +1679,8 @@ impl CliOptions {
         "byonm",
         "bare-node-builtins",
         "fmt-css",
+        "fmt-html",
+        "fmt-component",
         "fmt-yaml",
       ]);
       // add more unstable flags to the same vector holding granular flags

cli/lsp/language_server.rs

@@ -1372,6 +1372,12 @@ impl Inner {
         css: maybe_workspace
           .map(|w| w.has_unstable("fmt-css"))
           .unwrap_or(false),
+        html: maybe_workspace
+          .map(|w| w.has_unstable("fmt-html"))
+          .unwrap_or(false),
+        component: maybe_workspace
+          .map(|w| w.has_unstable("fmt-component"))
+          .unwrap_or(false),
         yaml: maybe_workspace
           .map(|w| w.has_unstable("fmt-yaml"))
           .unwrap_or(false),