Merge pull request Expensify#150 from callstack-internal/VickyStash/disallow-empty-array-object-default-inside-useOnyx

Add rule to disallow inline empty object/array defaults inside the useOnyx hook

Author: roryabraham

eslint-plugin-expensify/no-unstable-useOnyx-defaults.js

@@ -0,0 +1,97 @@
+/**
+ * @typedef {import('eslint').Rule.RuleModule} RuleModule
+ */
+
+/** @type {RuleModule} */
+module.exports = {
+    name: 'no-unstable-useOnyx-defaults',
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow inline array or object literals as default values in useOnyx. Use getEmptyArray(), getEmptyObject(), a constant, or a memoized value instead.',
+            recommended: 'error',
+        },
+        schema: [],
+        messages: {
+            noEmptyArrayDefault: 'Avoid using empty array [] as default value in useOnyx. Use getEmptyArray<T>() instead.',
+            noInlineArrayDefault: 'Avoid using array literal as default value in useOnyx. Use a memoized value or a constant instead.',
+            noEmptyObjectDefault: 'Avoid using empty object {} as default value in useOnyx. Use getEmptyObject<T>() instead.',
+            noInlineObjectDefault: 'Avoid using object literal as default value in useOnyx. Use a memoized value or a constant instead.',
+            noUnstableIdentifierDefault: 'Default value must be memoized with useMemo or declared as a top-level constant.',
+        },
+    },
+    create(context) {
+        return {
+            VariableDeclarator(node) {
+                if (
+                    !node.init
+                    || node.init.type !== 'CallExpression'
+                    || node.init.callee.name !== 'useOnyx'
+                ) {
+                    return;
+                }
+
+                // Check if the variable declaration is an array pattern (destructuring)
+                if (node.id.type !== 'ArrayPattern') {
+                    return;
+                }
+
+                node.id.elements.forEach((element) => {
+                    if (!element || element.type !== 'AssignmentPattern') {
+                        return;
+                    }
+
+                    const defaultValue = element.right;
+
+                    // Check for inline array default
+                    if (defaultValue.type === 'ArrayExpression') {
+                        const isEmpty = defaultValue.elements.length === 0;
+                        context.report({
+                            node: defaultValue,
+                            messageId: isEmpty ? 'noEmptyArrayDefault' : 'noInlineArrayDefault',
+                        });
+                    }
+
+                    // Check for inline object default
+                    if (defaultValue.type === 'ObjectExpression') {
+                        const isEmpty = defaultValue.properties.length === 0;
+                        context.report({
+                            node: defaultValue,
+                            messageId: isEmpty ? 'noEmptyObjectDefault' : 'noInlineObjectDefault',
+                        });
+                    }
+
+                    // If it's an Identifier, verify it's memoized or top-level const
+                    if (defaultValue.type === 'Identifier') {
+                        const scope = context.getScope();
+                        const variable = scope.set.get(defaultValue.name);
+
+                        if (
+                            variable
+                            && variable.defs.length > 0
+                            && variable.defs[0].node.type === 'VariableDeclarator'
+                        ) {
+                            const def = variable.defs[0].node;
+                            const init = def.init;
+
+                            const isMemoized = init
+                                && init.type === 'CallExpression'
+                                && init.callee.type === 'Identifier'
+                                && init.callee.name === 'useMemo';
+
+                            const isTopLevelConst = variable.scope.type === 'module'
+                                && variable.defs[0].parent.kind === 'const';
+
+                            if (!isMemoized && !isTopLevelConst) {
+                                context.report({
+                                    node: defaultValue,
+                                    messageId: 'noUnstableIdentifierDefault',
+                                });
+                            }
+                        }
+                    }
+                });
+            },
+        };
+    },
+};

eslint-plugin-expensify/tests/no-unstable-useOnyx-defaults.test.js

@@ -0,0 +1,92 @@
+const RuleTester = require('eslint').RuleTester;
+const rule = require('../no-unstable-useOnyx-defaults');
+
+const ruleTester = new RuleTester({
+    parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+    },
+});
+
+ruleTester.run('no-unstable-useOnyx-defaults', rule, {
+    valid: [
+        {
+            code: 'const [data = getEmptyObject()] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data = getEmptyArray()] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data = null] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data = undefined] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data = false] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data = ""] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const [data = 0] = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: 'const data = useOnyx(ONYXKEYS.DATA);',
+        },
+        {
+            code: `
+                const CONST_VALUE = {key: "value"};
+                function Component() {
+                    const [data = CONST_VALUE] = useOnyx(ONYXKEYS.DATA);
+                }
+            `,
+        },
+        {
+            code: `
+                function Component() {
+                    const memoizedValue = useMemo(() => ({key: "value"}), []);
+                    const [data = memoizedValue] = useOnyx(ONYXKEYS.DATA);
+                }
+            `,
+        },
+    ],
+    invalid: [
+        {
+            code: 'const [data = {}] = useOnyx(ONYXKEYS.DATA);',
+            errors: [{
+                messageId: 'noEmptyObjectDefault',
+            }],
+        },
+        {
+            code: 'const [data = []] = useOnyx(ONYXKEYS.DATA);',
+            errors: [{
+                messageId: 'noEmptyArrayDefault',
+            }],
+        },
+        {
+            code: 'const [data = {key: "value"}] = useOnyx(ONYXKEYS.DATA);',
+            errors: [{
+                messageId: 'noInlineObjectDefault',
+            }],
+        },
+        {
+            code: 'const [data = ["item"]] = useOnyx(ONYXKEYS.DATA);',
+            errors: [{
+                messageId: 'noInlineArrayDefault',
+            }],
+        },
+        {
+            code: `
+                function Component() {
+                    const notMemoizedValue = {key: "value"};
+                    const [data = notMemoizedValue] = useOnyx(ONYXKEYS.DATA);
+                }
+            `,
+            errors: [{messageId: 'noUnstableIdentifierDefault'}],
+        },
+    ],
+});

rules/expensify.js

@@ -31,6 +31,7 @@ module.exports = {
         }],
         'rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth': 'warn',
         'rulesdir/no-use-state-initializer-functions': 'error',
+        'rulesdir/no-unstable-useOnyx-defaults': 'error',
     },
 };