review comments

Author: LekoArts

packages/gatsby/src/utils/eslint-rules/__tests__/no-anonymous-exports-page-templates.ts

@@ -43,5 +43,9 @@ ruleTester.run(`no-anonymous-exports-page-templates`, rule, {
       code: `export default function() {}`,
       errors: [{ messageId: `anonymousFunctionDeclaration` }],
     }),
+    test({
+      code: `export default class {}`,
+      errors: [{ messageId: `anonymousClass` }],
+    }),
   ],
 })

packages/gatsby/src/utils/eslint-rules/limited-exports-page-templates.ts

@@ -8,8 +8,8 @@ function isTemplateQuery(node: Node, varName: string | undefined): boolean {
   // const query = graphql``
   // export { query }
   if (
-    node?.type === `ExportNamedDeclaration` &&
-    node?.declaration === null &&
+    node.type === `ExportNamedDeclaration` &&
+    node.declaration === null &&
     varName
   ) {
     // For export { foobar } the declaration will be null and specifiers exists
@@ -23,11 +23,11 @@ function isTemplateQuery(node: Node, varName: string | undefined): boolean {
     // Checks for:
     // export const query = graphql``
     return (
-      node?.type === `ExportNamedDeclaration` &&
-      node?.declaration?.type === `VariableDeclaration` &&
-      node?.declaration?.declarations[0]?.init?.type ===
+      node.type === `ExportNamedDeclaration` &&
+      node.declaration?.type === `VariableDeclaration` &&
+      node.declaration?.declarations[0]?.init?.type ===
         `TaggedTemplateExpression` &&
-      (node?.declaration?.declarations[0]?.init?.tag as Identifier)?.name ===
+      (node.declaration?.declarations[0]?.init?.tag as Identifier)?.name ===
         `graphql`
     )
   }
@@ -52,14 +52,18 @@ const limitedExports: Rule.RuleModule = {
     let queryVariableName: string | undefined = ``
 
     return {
+      // eslint-disable-next-line consistent-return
       TaggedTemplateExpression: (node): void => {
         if (
-          node?.type === `TaggedTemplateExpression` &&
+          node.type === `TaggedTemplateExpression` &&
           // @ts-ignore
-          node?.tag?.name === `graphql`
+          node.tag?.name === `graphql`
         ) {
+          if (queryVariableName) {
+            return undefined
+          }
           // @ts-ignore
-          queryVariableName = node?.parent?.id?.name
+          queryVariableName = node.parent?.id?.name
         }
       },
       // eslint-disable-next-line consistent-return

packages/gatsby/src/utils/eslint-rules/no-anonymous-exports-page-templates.ts

@@ -11,6 +11,10 @@ const defs = {
     messageId: `anonymousFunctionDeclaration`,
     forbid: (node): boolean => !node.declaration.id,
   },
+  ClassDeclaration: {
+    messageId: `anonymousClass`,
+    forbid: (node): boolean => !node.declaration.id,
+  },
 }
 
 const noAnonymousExports: Rule.RuleModule = {
@@ -22,21 +26,31 @@ const noAnonymousExports: Rule.RuleModule = {
        Please add a name to your function, for example:
 
        Before:
-       export default () => {};
+       export default () => {}
 
        After:
-       const Named = () => {};
+       const Named = () => {}
        export default Named;
 `,
       anonymousFunctionDeclaration: `Anonymous function declarations cause Fast Refresh to not preserve local component state.
 
        Please add a name to your function, for example:
 
        Before:
-       export default function () {};
+       export default function () {}
 
        After:
        export default function Named() {}
+`,
+      anonymousClass: `Anonymous classes cause Fast Refresh to not preserve local component state.
+
+       Please add a name to your class, for example:
+
+       Before:
+       export default class extends Component {}
+
+       After:
+       export default class Named extends Component {}
 `,
     },
   },