Fix broken formatting rules around namespaced JSX attributes

[lyonbot]

Fixes #55293

Formatting const a = <div: aa foo : bar="test" foo:baz="5" />;

into const a = <div:aa foo:bar="test" foo:baz="5" />;

[lyonbot]

A simple script to validate the changes:

const ts = require("./built/local/typescript");
const fs = require("fs");

const options = ts.getDefaultCompilerOptions();
options.jsx = ts.JsxEmit.React;

const mockName = "file.tsx";
const mockContent = `
const a = <div: aa foo : bar="test" foo:baz="5" />;
`;
fs.writeFileSync(mockName, mockContent);


/** @type {ts.LanguageServiceHost} */
const servicesHost = {
  getScriptFileNames: () => [mockName],
  getScriptVersion: fileName => "1",
  getScriptSnapshot: fileName => {
    if (!fs.existsSync(fileName)) return undefined;
    return ts.ScriptSnapshot.fromString(fs.readFileSync(fileName).toString());
  },
  getCurrentDirectory: () => process.cwd(),
  getCompilationSettings: () => options,
  getDefaultLibFileName: options => ts.getDefaultLibFilePath(options),
  fileExists: ts.sys.fileExists,
  readFile: ts.sys.readFile,
  readDirectory: ts.sys.readDirectory,
  directoryExists: ts.sys.directoryExists,
  getDirectories: ts.sys.getDirectories,
};

const s = ts.createLanguageService(servicesHost, ts.createDocumentRegistry());

const errors = s.getSyntacticDiagnostics(mockName);
console.log("errors", errors.map(i => `err: ${i.start}-${i.length} [${i.code}] ${i.messageText}`));

const eds = s.getFormattingEditsForDocument(mockName, ts.getDefaultFormatCodeSettings());

let sourceText = mockContent;
let offset = 0;
for (const ed of eds) {
  console.log("ed: ", ed);
  sourceText = sourceText.slice(0, ed.span.start + offset) + ed.newText + sourceText.slice(ed.span.start + ed.span.length + offset);
  offset += ed.newText.length - ed.span.length;
  console.log(" --> ", sourceText);
}

Outputs:

errors []
ed:  { span: { start: 16, length: 1 }, newText: '' }
 -->  
const a = <div:aa foo : bar="test" foo:baz="5" />;

ed:  { span: { start: 23, length: 1 }, newText: '' }
 -->  
const a = <div:aa foo: bar="test" foo:baz="5" />;

ed:  { span: { start: 25, length: 1 }, newText: '' }
 -->  
const a = <div:aa foo:bar="test" foo:baz="5" />;

[jakebailey]

You'll need to write a test or two; there should be some examples in the fourslash test directory which call formatting.

[lyonbot]

@microsoft-github-policy-service agree

[lyonbot]

@jakebailey hello, i've added the test :)

[jakebailey]

Seems fine to be but @andrewbranch may know any gotchas.