Switch from prettier to oxfmt (#33844)

* Switch from prettier to oxfmt

* Make knip happy

* Make knip happy

* Apply suggestion from @t3chguy

* Rename .oxfmtrc.json to .oxfmtrc.jsonc

* Make oxfmt happier

apps/desktop/.lintstagedrc

@@ -1,4 +1,4 @@
 {
-    "*": "prettier --write --ignore-unknown",
+    "*": "oxfmt --no-error-on-unmatched-pattern",
     "*.(ts|tsx)": ["eslint --fix"]
 }

apps/desktop/.prettierrc.cjs

@@ -1 +0,0 @@
-module.exports = require("eslint-plugin-matrix-org/.prettierrc.js");

apps/desktop/package.json

@@ -23,7 +23,7 @@
     "scripts": {
         "i18n": "matrix-gen-i18n && pnpm i18n:sort && pnpm i18n:lint",
         "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
-        "i18n:lint": "prettier --log-level=silent  --write src/i18n/strings/ --ignore-path /dev/null",
+        "i18n:lint": "oxfmt src/i18n/strings/",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && pnpm i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "mkdirs": "mkdirp packages deploys",
         "fetch": "pnpm run mkdirs && node scripts/fetch-package.ts",
@@ -92,7 +92,6 @@
         "electron-devtools-installer": "^4.0.0",
         "eslint": "^8.26.0",
         "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^10.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-matrix-org": "^3.0.0",
         "eslint-plugin-n": "^17.12.0",
@@ -102,7 +101,6 @@
         "memfs": "^4.57.2",
         "mkdirp": "^3.0.0",
         "pacote": "^21.0.0",
-        "prettier": "^3.0.0",
         "rimraf": "^6.0.0",
         "tar": "^7.5.8",
         "typescript": "catalog:",

apps/web/.lintstagedrc

@@ -1,5 +1,5 @@
 {
-    "*": "prettier --write --ignore-unknown",
+    "*": "oxfmt --no-error-on-unmatched-pattern",
     "src/**/*.(ts|tsx)": ["eslint --fix"],
     "scripts/**/*.(ts|tsx)": ["eslint --fix"],
     "module_system/**/*.(ts|tsx)": ["eslint --fix"],

apps/web/package.json

@@ -15,7 +15,7 @@
     "scripts": {
         "i18n": "matrix-gen-i18n src res && pnpm i18n:sort && pnpm i18n:lint",
         "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
-        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
+        "i18n:lint": "matrix-i18n-lint && oxfmt src/i18n/strings/",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && pnpm i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "rethemendex": "sh ./res/css/rethemendex.sh",
         "build": "nx build",
@@ -179,7 +179,6 @@
         "dotenv": "^17.0.0",
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^10.0.0",
         "eslint-plugin-deprecate": "0.9.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jest": "^29.0.0",
@@ -205,6 +204,7 @@
         "matrix-web-i18n": "catalog:",
         "mini-css-extract-plugin": "2.10.2",
         "modernizr": "^3.12.0",
+        "oxfmt": "^0.54.0",
         "playwright-core": "catalog:",
         "postcss": "8.5.15",
         "postcss-easings": "4.0.0",
@@ -216,7 +216,6 @@
         "postcss-preset-env": "11.3.0",
         "postcss-scss": "4.0.9",
         "postcss-simple-vars": "7.0.1",
-        "prettier": "3.8.3",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "semver": "^7.5.2",

apps/web/src/components/structures/ContextMenu.tsx

@@ -100,9 +100,9 @@ export interface IProps extends MenuProps {
     "closeOnInteraction"?: boolean;
 
     // Function to be called on menu close
-    onFinished(this: void): void;
+    "onFinished"(this: void): void;
     // on resize callback
-    windowResize?(this: void): void;
+    "windowResize"?(this: void): void;
 
     // Role & label for accessibility
     "role"?: AriaRole;
@@ -269,8 +269,8 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
             focusLock,
             managed,
             wrapperClassName,
-            "chevronFace": propsChevronFace,
-            "chevronOffset": propsChevronOffset,
+            chevronFace: propsChevronFace,
+            chevronOffset: propsChevronOffset,
             mountAsChild,
             role,
             "aria-label": ariaLabel,

apps/web/src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -76,8 +76,8 @@ export default abstract class ScrollableBaseModal<
                 <FocusLock
                     returnFocus={true}
                     lockProps={{
-                        onKeyDown: this.onKeyDown,
-                        role: "dialog",
+                        "onKeyDown": this.onKeyDown,
+                        "role": "dialog",
                         ["aria-labelledby"]: "mx_CompoundDialog_title",
 
                         // Like BaseDialog, we'll just point this at the whole content

apps/web/src/components/views/elements/GenericEventListSummary.tsx

@@ -31,7 +31,7 @@ interface IProps {
     // An array of EventTiles to render when expanded
     "children": ReactNode[] | null;
     // Called when the event list expansion is toggled
-    onToggle?(this: void): void;
+    "onToggle"?(this: void): void;
     // The layout currently used
     "layout"?: Layout;
     "data-testid"?: string;

apps/web/src/components/views/settings/devices/DeviceDetails.tsx

@@ -104,10 +104,8 @@ const DeviceDetails: React.FC<Props> = ({
             ],
         },
     ]
-        .map((section) =>
-            // filter out falsy values
-            ({ ...section, values: section.values.filter((row) => !!row.value) }),
-        )
+        .map((section) => // filter out falsy values
+        ({ ...section, values: section.values.filter((row) => !!row.value) }))
         .filter(
             (section) =>
                 // then filter out sections with no values

apps/web/test/test-utils/test-utils.ts

@@ -649,8 +649,8 @@ export function mkMessage({
         ...opts,
         type: "m.room.message",
         content: {
-            msgtype: "m.text",
-            body: message,
+            "msgtype": "m.text",
+            "body": message,
             ...(format && formattedMsg ? { format, formatted_body: formattedMsg } : {}),
             ["m.relates_to"]: relatesTo,
         },

apps/web/test/test-utils/threads.ts

@@ -28,8 +28,8 @@ export const makeThreadEvent = ({
     mkMessage({
         ...props,
         relatesTo: {
-            event_id: rootEventId,
-            rel_type: "m.thread",
+            "event_id": rootEventId,
+            "rel_type": "m.thread",
             ["m.in_reply_to"]: {
                 event_id: replyToEventId,
             },

apps/web/test/unit-tests/components/views/elements/LearnMore-test.tsx

@@ -15,8 +15,8 @@ import InfoDialog from "../../../../../src/components/views/dialogs/InfoDialog";
 
 describe("<LearnMore />", () => {
     const defaultProps = {
-        title: "Test",
-        description: "test test test",
+        "title": "Test",
+        "description": "test test test",
         ["data-testid"]: "testid",
     };
     const getComponent = (props = {}) => <LearnMore {...defaultProps} {...props} />;

apps/web/test/unit-tests/components/views/right_panel/UserInfo-test.tsx

@@ -202,16 +202,14 @@ describe("<UserInfo />", () => {
         describe.each([[ProfileKeyTimezone], [ProfileKeyMSC4175Timezone]])("timezone rendering (%s)", (profileKey) => {
             it("renders user timezone if set", async () => {
                 // For timezone, force a consistent locale.
-                jest.spyOn(global.Date.prototype, "toLocaleString").mockImplementation(function (
-                    this: Date,
-                    _locale,
-                    opts,
-                ) {
-                    return origDate.call(this, "en-US", {
-                        ...opts,
-                        hourCycle: "h12",
-                    });
-                });
+                jest.spyOn(global.Date.prototype, "toLocaleString").mockImplementation(
+                    function (this: Date, _locale, opts) {
+                        return origDate.call(this, "en-US", {
+                            ...opts,
+                            hourCycle: "h12",
+                        });
+                    },
+                );
                 mockClient.doesServerSupportExtendedProfiles.mockResolvedValue(true);
                 mockClient.getExtendedProfile.mockResolvedValue({ [profileKey]: "Europe/London" });
                 renderComponent();

apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceListHeader-test.tsx

@@ -13,10 +13,10 @@ import FilteredDeviceListHeader from "../../../../../../src/components/views/set
 
 describe("<FilteredDeviceListHeader />", () => {
     const defaultProps = {
-        selectedDeviceCount: 0,
-        isAllSelected: false,
-        toggleSelectAll: jest.fn(),
-        children: <div>test</div>,
+        "selectedDeviceCount": 0,
+        "isAllSelected": false,
+        "toggleSelectAll": jest.fn(),
+        "children": <div>test</div>,
         ["data-testid"]: "test123",
     };
     const getComponent = (props = {}) => <FilteredDeviceListHeader {...defaultProps} {...props} />;

apps/web/test/unit-tests/utils/EventUtils-test.ts

@@ -176,8 +176,8 @@ describe("EventUtils", () => {
             type: EventType.RoomMessage,
             sender: userId,
             content: {
-                msgtype: MsgType.Text,
-                body: "Hello",
+                "msgtype": MsgType.Text,
+                "body": "Hello",
                 ["m.relates_to"]: {
                     rel_type: RelationType.Replace,
                     event_id: "1",
@@ -189,8 +189,8 @@ describe("EventUtils", () => {
             type: EventType.RoomMessage,
             sender: userId,
             content: {
-                msgtype: MsgType.Text,
-                body: "Hello",
+                "msgtype": MsgType.Text,
+                "body": "Hello",
                 ["m.relates_to"]: {
                     rel_type: RelationType.Reference,
                     event_id: "1",