refactor(eslint-plugin): migrate to TS-ESLint infrastructure (#7276)

* refactor(eslint-plugin): migrate to TS-ESLint infrastructure

* fix lock

packages/eslint-plugin/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import rules from './rules';
+
+export = {
+  rules,
+  configs: {
+    recommended: {
+      rules: {
+        '@docusaurus/string-literal-i18n-messages': 'error',
+      },
+    },
+    all: {
+      rules: {
+        '@docusaurus/string-literal-i18n-messages': 'error',
+        '@docusaurus/no-untranslated-text': 'warn',
+      },
+    },
+  },
+};

packages/eslint-plugin/src/rules/__tests__/no-untranslated-text.test.ts

@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import rule from '../no-untranslated-text';
+import {getCommonValidTests, RuleTester} from './testUtils';
+
+const errorsJSX = [
+  {messageId: 'translateChildren', type: 'JSXElement'},
+] as const;
+const errorsJSXFragment = [
+  {messageId: 'translateChildren', type: 'JSXFragment'},
+];
+
+const ruleTester = new RuleTester({
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('no-untranslated-text', rule, {
+  valid: [
+    ...getCommonValidTests(),
+    {
+      code: '<Component>·</Component>',
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>· </Component>',
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component> · </Component>',
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>· ·</Component>',
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>· — ×</Component>',
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>{"·"}</Component>',
+      options: [{ignoredStrings: ['·']}],
+    },
+    {
+      code: "<Component>{'·'}</Component>",
+      options: [{ignoredStrings: ['·']}],
+    },
+    {
+      code: '<Component>{`·`}</Component>',
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>Docusaurus</Component>',
+      options: [{ignoredStrings: ['Docusaurus']}],
+    },
+    {
+      code: '<Component>&#8203;</Component>',
+      options: [{ignoredStrings: ['​']}],
+    },
+    {
+      code: `<>
+              {' · '}
+            </>`,
+      options: [{ignoredStrings: ['·']}],
+    },
+  ],
+
+  invalid: [
+    {
+      code: '<Component>text</Component>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<Component> text </Component>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<Component>"text"</Component>',
+      errors: errorsJSX,
+    },
+    {
+      code: "<Component>'text'</Component>",
+      errors: errorsJSX,
+    },
+    {
+      code: '<Component>`text`</Component>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<Component>{"text"}</Component>',
+      errors: errorsJSX,
+    },
+    {
+      code: "<Component>{'text'}</Component>",
+      errors: errorsJSX,
+    },
+    {
+      code: '<Component>{`text`}</Component>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<>text</>',
+      errors: errorsJSXFragment,
+    },
+    {
+      code: '<Component>· — ×</Component>',
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['·', '—']}],
+    },
+    {
+      code: '<Component>··</Component>',
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component> ·· </Component>',
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>"·"</Component>',
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: "<Component>'·'</Component>",
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>`·`</Component>',
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['·', '—', '×']}],
+    },
+    {
+      code: '<Component>Docusaurus</Component>',
+      errors: errorsJSX,
+      options: [{ignoredStrings: ['Docu', 'saurus']}],
+    },
+  ],
+});

packages/eslint-plugin/src/rules/__tests__/string-literal-i18n-messages.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import rule from '../string-literal-i18n-messages';
+import {getCommonValidTests, RuleTester} from './testUtils';
+
+const errorsJSX = [
+  {messageId: 'translateChildren', type: 'JSXElement'},
+] as const;
+const errorsFunc = [
+  {messageId: 'translateArg', type: 'CallExpression'},
+] as const;
+
+const ruleTester = new RuleTester({
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('string-literal-i18n-messages', rule, {
+  valid: [...getCommonValidTests()],
+
+  invalid: [
+    {
+      code: '<Translate>{text}</Translate>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<Translate>Hi {text} my friend</Translate>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<Translate> {text} </Translate>',
+      errors: errorsJSX,
+    },
+    {
+      code: '<Translate>`{text}`</Translate>',
+      errors: errorsJSX,
+    },
+    {
+      // eslint-disable-next-line no-template-curly-in-string
+      code: '<Translate>{`${text}`}</Translate>',
+      errors: errorsJSX,
+    },
+    {
+      code: 'translate({message: metaTitle})',
+      errors: errorsFunc,
+    },
+  ],
+});

packages/eslint-plugin/src/rules/__tests__/testUtils.ts

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {ESLintUtils} from '@typescript-eslint/utils';
+
+const {RuleTester} = ESLintUtils;
+
+export {RuleTester};
+
+export const getCommonValidTests = (): {code: string}[] => [
+  {
+    code: '<Translate>text</Translate>',
+  },
+  {
+    code: '<Translate> text </Translate>',
+  },
+  {
+    code: '<Translate>"text"</Translate>',
+  },
+  {
+    code: "<Translate>'text'</Translate>",
+  },
+  {
+    code: '<Translate>`text`</Translate>',
+  },
+  {
+    code: '<Translate>{"text"}</Translate>',
+  },
+  {
+    code: "<Translate>{'text'}</Translate>",
+  },
+  {
+    code: '<Translate>{`text`}</Translate>',
+  },
+  {
+    code: '<Component>{text}</Component>',
+  },
+  {
+    code: '<Component> {text} </Component>',
+  },
+  {
+    code: 'translate({message: `My page meta title`})',
+  },
+  {
+    code: `<Translate
+              id="homepage.title"
+              description="The homepage welcome message">
+                Welcome to my website
+            </Translate>`,
+  },
+  {
+    code: `<Translate
+              values={{firstName: 'Sébastien'}}>
+                {'Welcome, {firstName}! How are you?'}
+            </Translate>`,
+  },
+  {
+    code: `<Translate>{'This'} is {\`valid\`}</Translate>`,
+  },
+  {
+    code: "translate({message: 'My page meta title'})",
+  },
+  {
+    code: "translate({message: 'The logo of site {siteName}'}, {siteName: 'Docusaurus'})",
+  },
+  {
+    code: 'translate({otherProp: metaTitle})',
+  },
+  {
+    code: 'translate({otherProp: `My page meta title`})',
+  },
+];

packages/eslint-plugin/src/rules/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import noUntranslatedText from './no-untranslated-text';
+import stringLiteralI18nMessages from './string-literal-i18n-messages';
+
+export default {
+  'no-untranslated-text': noUntranslatedText,
+  'string-literal-i18n-messages': stringLiteralI18nMessages,
+};

packages/eslint-plugin/src/rules/no-untranslated-text.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {isTextLabelChild, createRule} from '../util';
+import type {TSESTree} from '@typescript-eslint/types/dist/ts-estree';
+
+type Options = [
+  {
+    ignoredStrings: string[];
+  },
+];
+type MessageIds = 'translateChildren';
+
+export default createRule<Options, MessageIds>({
+  name: 'no-untranslated-text',
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'enforce text labels in JSX to be wrapped by translate calls',
+      recommended: false,
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignoredStrings: {
+            type: 'array',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      translateChildren:
+        'All text labels in JSX should be wrapped by translate calls',
+    },
+  },
+  defaultOptions: [
+    {
+      ignoredStrings: [],
+    },
+  ],
+
+  create(context, [options]) {
+    const {ignoredStrings} = options;
+    return {
+      JSXElement(node) {
+        if (
+          node.openingElement.selfClosing ||
+          (node.openingElement.name as TSESTree.JSXIdentifier).name ===
+            'Translate'
+        ) {
+          return;
+        }
+        if (
+          node.children.some((child) =>
+            isTextLabelChild(child, {ignoredStrings}),
+          )
+        ) {
+          context.report({node, messageId: 'translateChildren'});
+        }
+      },
+      JSXFragment(node) {
+        if (
+          node.children.some((child) =>
+            isTextLabelChild(child, {ignoredStrings}),
+          )
+        ) {
+          context.report({node, messageId: 'translateChildren'});
+        }
+      },
+    };
+  },
+});

packages/eslint-plugin/src/rules/string-literal-i18n-messages.ts

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  isTextLabelChild,
+  isStringWithoutExpressions,
+  createRule,
+} from '../util';
+import type {TSESTree} from '@typescript-eslint/types/dist/ts-estree';
+
+type Options = [];
+type MessageIds = 'translateChildren' | 'translateArg';
+
+export default createRule<Options, MessageIds>({
+  name: 'string-literal-i18n-messages',
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce translate APIs to be called on plain text labels',
+      recommended: 'error',
+    },
+    schema: [],
+    messages: {
+      translateChildren:
+        '<Translate> children must be hardcoded strings. You can have in-string dynamic placeholders using the values prop.',
+      translateArg:
+        'translation message must be a hardcoded string. You can have in-string dynamic placeholders using the values argument.',
+    },
+  },
+  defaultOptions: [],
+
+  create(context) {
+    return {
+      JSXElement(node) {
+        if (
+          (node.openingElement.name as TSESTree.JSXIdentifier).name !==
+          'Translate'
+        ) {
+          return;
+        }
+        if (node.children.some((child) => !isTextLabelChild(child))) {
+          context.report({node, messageId: 'translateChildren'});
+        }
+      },
+      CallExpression(node) {
+        if (
+          node.callee.type !== 'Identifier' ||
+          node.callee.name !== 'translate'
+        ) {
+          return;
+        }
+        const param = node.arguments[0];
+        if (!param || param.type !== 'ObjectExpression') {
+          context.report({node, messageId: 'translateArg'});
+          return;
+        }
+        const messageProperty = param.properties.find(
+          (property): property is TSESTree.Property =>
+            property.type === 'Property' &&
+            (property.key as TSESTree.Identifier).name === 'message',
+        );
+        if (!messageProperty) {
+          return;
+        }
+
+        if (!isStringWithoutExpressions(messageProperty.value)) {
+          context.report({node, messageId: 'translateArg'});
+        }
+      },
+    };
+  },
+});

packages/eslint-plugin/src/util.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {ESLintUtils} from '@typescript-eslint/utils';
+import type {TSESTree} from '@typescript-eslint/types/dist/ts-estree';
+
+type CheckTranslateChildOptions = {
+  ignoredStrings?: string[];
+};
+
+const isMadeOfIgnoredStrings = (text: string, ignoredStrings: string[]) =>
+  text
+    .trim()
+    .split(/\s+/)
+    .every((string) => !string || ignoredStrings.includes(string));
+
+const isValidTranslationLabel = (
+  text: unknown,
+  {ignoredStrings}: CheckTranslateChildOptions = {},
+) => {
+  if (!ignoredStrings) {
+    return typeof text === 'string';
+  }
+  return (
+    typeof text === 'string' && !isMadeOfIgnoredStrings(text, ignoredStrings)
+  );
+};
+
+export function isStringWithoutExpressions(
+  text: TSESTree.Node,
+  options?: CheckTranslateChildOptions,
+): boolean {
+  switch (text.type) {
+    case 'Literal':
+      return isValidTranslationLabel(text.value, options);
+    case 'TemplateLiteral':
+      return (
+        text.expressions.length === 0 &&
+        isValidTranslationLabel(text.quasis[0]!.value.raw, options)
+      );
+    default:
+      return false;
+  }
+}
+
+export function isTextLabelChild(
+  child: TSESTree.JSXChild,
+  options?: CheckTranslateChildOptions,
+): boolean {
+  switch (child.type) {
+    case 'JSXText':
+      return isValidTranslationLabel(child.value, options);
+    case 'JSXExpressionContainer':
+      return isStringWithoutExpressions(child.expression, options);
+    default:
+      return false;
+  }
+}
+
+export const createRule = ESLintUtils.RuleCreator(
+  (name) =>
+    `https://docusaurus.io/docs/api/misc/@docusaurus/eslint-plugin/${name}`,
+);