Sort object members in typegen

compiler/crates/relay-typegen/src/flow.rs

@@ -217,7 +217,7 @@ impl FlowPrinter {
         }
         self.indentation += 1;
 
-        for prop in props {
+        for prop in self.sort_props(props) {
             self.write_indentation()?;
             match prop {
                 Prop::Spread(spread) => {
@@ -399,8 +399,8 @@ mod tests {
                 }),
             ])),
             r"{|
-  foo?: string,
   +bar: number,
+  foo?: string,
 |}"
             .to_string()
         );
@@ -437,11 +437,11 @@ mod tests {
                 }),
             ])),
             r"{|
+  +bar: number,
   foo?: {|
     nested_foo?: string,
     +nested_foo2: number,
   |},
-  +bar: number,
 |}"
             .to_string()
         );
@@ -489,8 +489,8 @@ mod tests {
                 })
             ])),
             r"{
-  foo: string,
   +bar?: number,
+  foo: string,
   ...
 }"
             .to_string()

compiler/crates/relay-typegen/src/lib.rs

@@ -629,7 +629,6 @@ impl<'a> TypeGenerator<'a> {
             .entry(haste_import_name)
             .or_insert(local_resolver_name);
 
-
         let inner_value = Box::new(AST::ReturnTypeOfFunctionWithName(local_resolver_name));
 
         let value = if required {
@@ -638,7 +637,6 @@ impl<'a> TypeGenerator<'a> {
             AST::Nullable(inner_value)
         };
 
-
         type_selections.push(TypeSelection::ScalarField(TypeSelectionScalarField {
             field_name_or_alias: key,
             special_field: None,

compiler/crates/relay-typegen/src/typescript.rs

@@ -48,8 +48,7 @@ impl Writer for TypeScriptPrinter {
             AST::ReadOnlyArray(of_type) => self.write_read_only_array(of_type),
             AST::Nullable(of_type) => self.write_nullable(of_type),
             AST::NonNullable(of_type) => self.write_non_nullable(of_type),
-            AST::ExactObject(props) => self.write_object(props),
-            AST::InexactObject(props) => self.write_object(props),
+            AST::ExactObject(props) | AST::InexactObject(props) => self.write_object(props),
             AST::Local3DPayload(document_name, selections) => {
                 self.write_local_3d_payload(*document_name, selections)
             }
@@ -192,7 +191,7 @@ impl TypeScriptPrinter {
         writeln!(&mut self.result, "{{")?;
         self.indentation += 1;
 
-        for prop in props {
+        for prop in self.sort_props(props) {
             match prop {
                 Prop::Spread(_) => continue,
                 Prop::KeyValuePair(key_value_pair) => {
@@ -362,8 +361,8 @@ mod tests {
                 }),
             ])),
             r"{
-  foo?: string;
   readonly bar: number;
+  foo?: string;
 }"
             .to_string()
         );
@@ -400,11 +399,11 @@ mod tests {
                 }),
             ])),
             r"{
+  readonly bar: number;
   foo?: {
     nested_foo?: string;
     readonly nested_foo2: number;
   };
-  readonly bar: number;
 }"
             .to_string()
         );
@@ -448,8 +447,8 @@ mod tests {
                 })
             ])),
             r"{
-  foo: string;
   readonly bar?: number;
+  foo: string;
 }"
             .to_string()
         );

compiler/crates/relay-typegen/src/writer.rs

@@ -87,4 +87,25 @@ pub trait Writer: Write {
     ) -> FmtResult;
 
     fn write_any_type_definition(&mut self, name: &str) -> FmtResult;
+
+    fn sort_props(&self, props: &[Prop]) -> Vec<Prop> {
+        let mut result = Vec::from(props);
+
+        // Put regular key-value props first, followed by getter/setter pairs,
+        // followed by spreads, with $fragmentSpreads and $fragmentType props last.
+        result.sort_by_cached_key(|prop| match prop {
+            Prop::KeyValuePair(kvp) => (
+                if kvp.key == *crate::KEY_FRAGMENT_SPREADS || kvp.key == *crate::KEY_FRAGMENT_TYPE {
+                    3
+                } else {
+                    0
+                },
+                kvp.key,
+            ),
+            Prop::GetterSetterPair(pair) => (1, pair.key),
+            Prop::Spread(spread) => (2, spread.value),
+        });
+
+        result
+    }
 }

compiler/crates/relay-typegen/tests/generate_flow/fixtures/actor-change-with-query.expected

@@ -28,18 +28,18 @@ export type Viewer$data = {|
   |},
 |};
 export type Viewer = {|
-  variables: Viewer$variables,
   response: Viewer$data,
+  variables: Viewer$variables,
 |};
 -------------------------------------------------------------------------------
 import type { FragmentType } from "relay-runtime";
 declare export opaque type ActorFragment$fragmentType: FragmentType;
 export type ActorFragment$data = {|
   +name: ?string,
   +profilePicture: ?{|
+    +height: ?number,
     +uri: ?string,
     +width: ?number,
-    +height: ?number,
   |},
   +$fragmentType: ActorFragment$fragmentType,
 |};

compiler/crates/relay-typegen/tests/generate_flow/fixtures/actor-change.expected

@@ -19,9 +19,9 @@ declare export opaque type ActorFragment$fragmentType: FragmentType;
 export type ActorFragment$data = {|
   +name: ?string,
   +profilePicture: ?{|
+    +height: ?number,
     +uri: ?string,
     +width: ?number,
-    +height: ?number,
   |},
   +$fragmentType: ActorFragment$fragmentType,
 |};

compiler/crates/relay-typegen/tests/generate_flow/fixtures/fragment-spread.expected

@@ -79,14 +79,14 @@ import type { UserFrag2$fragmentType } from "UserFrag2.graphql";
 import type { FragmentType } from "relay-runtime";
 declare export opaque type FragmentSpread$fragmentType: FragmentType;
 export type FragmentSpread$data = {|
-  +id: string,
-  +justFrag: ?{|
-    +$fragmentSpreads: PictureFragment$fragmentType,
-  |},
   +fragAndField: ?{|
     +uri: ?string,
     +$fragmentSpreads: PictureFragment$fragmentType,
   |},
+  +id: string,
+  +justFrag: ?{|
+    +$fragmentSpreads: PictureFragment$fragmentType,
+  |},
   +$fragmentSpreads: OtherFragment$fragmentType & UserFrag1$fragmentType & UserFrag2$fragmentType,
   +$fragmentType: FragmentSpread$fragmentType,
 |};

compiler/crates/relay-typegen/tests/generate_flow/fixtures/inline-fragment.expected

@@ -68,10 +68,10 @@ import type { FragmentType } from "relay-runtime";
 declare export opaque type InlineFragment$fragmentType: FragmentType;
 export type InlineFragment$data = {|
   +id: string,
-  +name?: ?string,
   +message?: ?{|
     +text: ?string,
   |},
+  +name?: ?string,
   +$fragmentType: InlineFragment$fragmentType,
 |};
 export type InlineFragment$key = {
@@ -99,12 +99,12 @@ declare export opaque type InlineFragmentKitchenSink$fragmentType: FragmentType;
 export type InlineFragmentKitchenSink$data = {|
   +actor: ?{|
     +id: string,
+    +name?: ?string,
     +profilePicture: ?{|
+      +height?: ?number,
       +uri: ?string,
       +width?: ?number,
-      +height?: ?number,
     |},
-    +name?: ?string,
     +$fragmentSpreads: SomeFragment$fragmentType,
   |},
   +$fragmentType: InlineFragmentKitchenSink$fragmentType,
@@ -120,10 +120,10 @@ declare export opaque type InlineFragmentWithOverlappingFields$fragmentType: Fra
 export type InlineFragmentWithOverlappingFields$data = {|
   +hometown?: ?{|
     +id: string,
-    +name: ?string,
     +message?: ?{|
       +text: ?string,
     |},
+    +name: ?string,
   |},
   +name?: ?string,
   +$fragmentType: InlineFragmentWithOverlappingFields$fragmentType,

compiler/crates/relay-typegen/tests/generate_flow/fixtures/linked-field.expected

@@ -39,26 +39,26 @@ export type UnionTypeTest$data = {|
   |}),
 |};
 export type UnionTypeTest = {|
-  variables: UnionTypeTest$variables,
   response: UnionTypeTest$data,
+  variables: UnionTypeTest$variables,
 |};
 -------------------------------------------------------------------------------
 import type { FragmentType } from "relay-runtime";
 declare export opaque type LinkedField$fragmentType: FragmentType;
 export type LinkedField$data = {|
-  +profilePicture: ?{|
-    +uri: ?string,
-    +width: ?number,
-    +height: ?number,
+  +actor: ?{|
+    +id: string,
   |},
   +hometown: ?{|
     +id: string,
     +profilePicture: ?{|
       +uri: ?string,
     |},
   |},
-  +actor: ?{|
-    +id: string,
+  +profilePicture: ?{|
+    +height: ?number,
+    +uri: ?string,
+    +width: ?number,
   |},
   +$fragmentType: LinkedField$fragmentType,
 |};

compiler/crates/relay-typegen/tests/generate_flow/fixtures/match-field-in-query.expected

@@ -36,17 +36,17 @@ export type NameRendererQuery$data = {|
   |},
 |};
 export type NameRendererQuery = {|
-  variables: NameRendererQuery$variables,
   response: NameRendererQuery$data,
+  variables: NameRendererQuery$variables,
 |};
 -------------------------------------------------------------------------------
 import type { FragmentType } from "relay-runtime";
 declare export opaque type MarkdownUserNameRenderer_name$fragmentType: FragmentType;
 export type MarkdownUserNameRenderer_name$data = {|
-  +markdown: ?string,
   +data: ?{|
     +markup: ?string,
   |},
+  +markdown: ?string,
   +$fragmentType: MarkdownUserNameRenderer_name$fragmentType,
 |};
 export type MarkdownUserNameRenderer_name$key = {
@@ -58,10 +58,10 @@ export type MarkdownUserNameRenderer_name$key = {
 import type { FragmentType } from "relay-runtime";
 declare export opaque type PlainUserNameRenderer_name$fragmentType: FragmentType;
 export type PlainUserNameRenderer_name$data = {|
-  +plaintext: ?string,
   +data: ?{|
     +text: ?string,
   |},
+  +plaintext: ?string,
   +$fragmentType: PlainUserNameRenderer_name$fragmentType,
 |};
 export type PlainUserNameRenderer_name$key = {

compiler/crates/relay-typegen/tests/generate_flow/fixtures/match-field.expected

@@ -25,10 +25,10 @@ fragment MarkdownUserNameRenderer_name on MarkdownUserNameRenderer {
 import type { FragmentType } from "relay-runtime";
 declare export opaque type MarkdownUserNameRenderer_name$fragmentType: FragmentType;
 export type MarkdownUserNameRenderer_name$data = {|
-  +markdown: ?string,
   +data: ?{|
     +markup: ?string,
   |},
+  +markdown: ?string,
   +$fragmentType: MarkdownUserNameRenderer_name$fragmentType,
 |};
 export type MarkdownUserNameRenderer_name$key = {
@@ -59,10 +59,10 @@ export type NameRendererFragment$key = {
 import type { FragmentType } from "relay-runtime";
 declare export opaque type PlainUserNameRenderer_name$fragmentType: FragmentType;
 export type PlainUserNameRenderer_name$data = {|
-  +plaintext: ?string,
   +data: ?{|
     +text: ?string,
   |},
+  +plaintext: ?string,
   +$fragmentType: PlainUserNameRenderer_name$fragmentType,
 |};
 export type PlainUserNameRenderer_name$key = {

compiler/crates/relay-typegen/tests/generate_flow/fixtures/mutation-input-has-array.expected

@@ -30,7 +30,7 @@ export type InputHasArray$rawResponse = {|
   |},
 |};
 export type InputHasArray = {|
-  variables: InputHasArray$variables,
-  response: InputHasArray$data,
   rawResponse: InputHasArray$rawResponse,
+  response: InputHasArray$data,
+  variables: InputHasArray$variables,
 |};

compiler/crates/relay-typegen/tests/generate_flow/fixtures/mutation-with-client-extension.expected

@@ -38,15 +38,15 @@ export type Test$data = {|
 export type Test$rawResponse = {|
   +viewerNotificationsUpdateAllSeenState: ?{|
     +stories: ?$ReadOnlyArray<?{|
-      +id: string,
       +foos?: ?$ReadOnlyArray<?{|
         +bar: ?string,
       |}>,
+      +id: string,
     |}>,
   |},
 |};
 export type Test = {|
-  variables: Test$variables,
-  response: Test$data,
   rawResponse: Test$rawResponse,
+  response: Test$data,
+  variables: Test$variables,
 |};