fix: conditional classes, dynamic params, HMR and formatter

editors/vscode/src/formatter.js

@@ -85,6 +85,51 @@ function leadingClosers(line) {
   return count;
 }
 
+function formatOpeningTag(source, unit, baseDepth) {
+  if (
+    !source.startsWith("<") ||
+    source.startsWith("</") ||
+    source.startsWith("<!--") ||
+    source.length <= 100
+  ) {
+    return source;
+  }
+
+  const match = /^<([A-Za-z][\w:-]*)([\s\S]*?)(\/?)>$/.exec(source);
+
+  if (!match) {
+    return source;
+  }
+
+  const tag = match[1];
+  const rawAttributes = match[2].trim();
+  const selfClosing = match[3] === "/";
+
+  if (!rawAttributes) {
+    return source;
+  }
+
+  const attributes = [];
+  const pattern = /(?:[^\s"'=<>`]+)(?:\s*=\s*(?:"[^"]*"|'[^']*'))?/g;
+
+  for (const attribute of rawAttributes.matchAll(pattern)) {
+    attributes.push(attribute[0]);
+  }
+
+  if (attributes.length < 2) {
+    return source;
+  }
+
+  const base = unit.repeat(baseDepth);
+  const child = unit.repeat(baseDepth + 1);
+
+  return [
+    `${base}<${tag}`,
+    ...attributes.map((attribute) => `${child}${attribute}`),
+    `${base}${selfClosing ? "/>" : ">"}`,
+  ].join("\n");
+}
+
 /**
  * Format WRN source conservatively: normalize structural indentation and
  * trailing whitespace without rewriting expressions, HTML, CSS, or JS.
@@ -106,7 +151,13 @@ function formatWrn(text, options = {}) {
     const wasTemplate = state.template;
     const trimmed = line.trimStart();
     const indent = Math.max(0, depth - leadingClosers(trimmed));
-    const output = wasTemplate ? line : unit.repeat(indent) + trimmed;
+    const formattedLine = formatOpeningTag(trimmed, unit, indent);
+
+    const output = wasTemplate
+      ? line
+      : formattedLine.startsWith(unit.repeat(indent))
+        ? formattedLine
+        : unit.repeat(indent) + formattedLine;
     depth = Math.max(0, depth + curlyDelta(trimmed, state) + htmlDelta(trimmed));
     return output;
   });