eslint-plugin-stamhoofd 2.121.0 → 2.122.1

package/package.json

@@ -1,28 +1,34 @@
 {
     "name": "eslint-plugin-stamhoofd",
-    "version": "2.121.0",
+    "version": "2.122.1",
+    "type": "module",
     "main": "./src/index.js",
-    "license": "UNLICENCED",
     "sideEffects": false,
-    "type": "module",
     "files": [
         "src"
     ],
-    "publishConfig": {
-        "access": "public"
+    "scripts": {
+        "test": "vitest run"
     },
     "dependencies": {
-        "@eslint/js": "^9.11.1",
-        "@stylistic/eslint-plugin": "^2.8.0",
-        "@vitest/eslint-plugin": "^1.6.12",
-        "eslint": "^9.11.1",
-        "eslint-import-resolver-typescript": "^4.4.4",
-        "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-n": "^17.24.0",
-        "eslint-plugin-regexp": "^3.1.0",
-        "eslint-plugin-vue": "^10.8.0",
-        "typescript-eslint": "^8.57.1",
-        "vue-eslint-parser": "^10.4.0"
+        "@eslint/js": "10.0.1",
+        "@stylistic/eslint-plugin": "5.10.0",
+        "@vitest/eslint-plugin": "1.6.20",
+        "eslint": "10.5.0",
+        "eslint-import-resolver-typescript": "4.4.5",
+        "eslint-plugin-import": "2.32.0",
+        "eslint-plugin-n": "18.1.0",
+        "eslint-plugin-regexp": "3.1.0",
+        "eslint-plugin-vue": "10.9.2",
+        "typescript-eslint": "8.61.0",
+        "vue-eslint-parser": "10.4.1"
+    },
+    "devDependencies": {
+        "vitest": "4.1.8"
+    },
+    "license": "UNLICENCED",
+    "publishConfig": {
+        "access": "public"
     },
-    "gitHead": "11a280f3924b9eaab5af78f265216c774df69266"
+    "gitHead": "7f9c0637e743d1f7b5f1b161ab6b09ecd7a199e5"
 }

package/src/index.js

@@ -11,6 +11,16 @@ import defaultRules from './configs/default.js';
 import frontend from './configs/frontend.js';
 import node from './configs/node.js';
 import typescript from './configs/typescript.js';
+import asyncComponentWithProperties from './rules/async-component-with-properties.js';
+import asyncRouteComponents from './rules/async-route-components.js';
+
+const rules = {
+    'async-component-with-properties': asyncComponentWithProperties,
+    'async-route-components': asyncRouteComponents,
+};
+const stamhoofdPlugin = {
+    rules,
+};
 
 const baseRules = [
     ...defaultRules,
@@ -19,6 +29,7 @@ const baseRules = [
         settings: {
             'import/parsers': {
                 '@typescript-eslint/parser': ['.ts', '.tsx'],
+                'vue-eslint-parser': ['.vue'],
             },
             'import/resolver': {
                 typescript: {
@@ -28,6 +39,12 @@ const baseRules = [
         },
     },
     eslint.configs.recommended,
+    {
+        rules: {
+            'preserve-caught-error': 'warn',
+            'no-useless-assignment': 'warn',
+        },
+    },
     ...tseslint.configs.recommendedTypeChecked.map(config => ({
         ...config,
         files: ['*.ts', '**/*.ts', '*.vue', '**/*.vue'], // We use TS config only for TS files
@@ -49,16 +66,23 @@ const baseRules = [
         },
         rules: {
             'import/no-cycle': ['warn', { maxDepth: 100, ignoreExternal: false }],
+            'import/no-extraneous-dependencies': ['error'],
+            'import/no-relative-packages': 'error',
         },
     },
+
+    stylistic.configs.customize({
+        // the following options are the default values
+        indent: 4,
+        quotes: 'single',
+        semi: true,
+        jsx: false,
+        severity: 'warn',
+        braceStyle: '1tbs',
+    }),
     {
-        files: ['**/*.js', '**/*.ts'],
-        plugins: {
-            '@stylistic': stylistic,
-        },
         rules: {
-            ...stylistic.configs.recommended,
-            '@stylistic/quotes': ['error', 'single', { allowTemplateLiterals: true, avoidEscape: true }],
+            '@stylistic/quotes': ['warn', 'single', { allowTemplateLiterals: true, avoidEscape: true }],
         },
     },
     {
@@ -79,7 +103,7 @@ const baseRules = [
             ...vitest.configs.recommended.rules,
             'vitest/no-conditional-expect': 'warn',
             'vitest/expect-expect': 'warn',
-            'vitest/valid-expect': ['warn', {maxArgs: 2}] // Allow to pass a message by variable
+            'vitest/valid-expect': ['warn', { maxArgs: 2 }], // Allow to pass a message by variable
         },
     },
 
@@ -95,15 +119,84 @@ const baseRules = [
             '@typescript-eslint/no-unsafe-member-access': 'off',
             '@typescript-eslint/no-unsafe-argument': 'off',
         },
-    }
+    },
 ];
 
 export default {
+    rules,
     configs: {
         base: baseRules,
         frontend: [
             ...baseRules,
             ...frontend,
+            {
+                plugins: {
+                    stamhoofd: stamhoofdPlugin,
+                },
+                rules: {
+                    'stamhoofd/async-component-with-properties': ['error', {
+                        allow: [
+                            // Add all components that should work if internet breaks, such as error messages, toasts...
+                            // Also add all overlays, because animations are broken for async display of overlays (tooltips etc)
+                            'App',
+                            'AuthenticatedView',
+                            'CenteredMessageView',
+                            'ContextProvider',
+                            'CoverImageContainer',
+                            'ModalStackComponent',
+                            'NavigationController',
+                            'PromiseView',
+                            'SplitViewController',
+                            'TabBarController',
+                            'ToastView',
+                            'Tooltip',
+                            'CustomHooksContainer',
+                            'ContextNavigationBar',
+                            'OrganizationSwitcher',
+                            'AccountSwitcher',
+                            'LoadingView',
+                            'ColumnSelectorContextMenu',
+                            'ColumnSortingContextMenu',
+                            'TableActionsContextMenu',
+                            'GeneralContextMenuView',
+                            'ImportErrorView',
+                        ],
+                    }],
+                    'stamhoofd/async-route-components': 'error',
+                    // TODO: restore to 'error' once the existing dependency cycles are resolved.
+                    'import/no-cycle': ['warn', { maxDepth: 100, ignoreExternal: false, allowUnsafeDynamicCyclicDependency: true }],
+                    // Disallow importing from barrel files (index files that only re-export).
+                    // Import directly from the source module instead, e.g. '#components/Foo.js'
+                    // or '@stamhoofd/package-name/components/Bar' rather than a barrel.
+                    'no-restricted-imports': ['error', {
+                        // Bare package-root imports that resolve to a barrel index.ts.
+                        // These packages expose subpath imports (e.g. '@stamhoofd/components/components/Foo'),
+                        // which should be used instead of the barrel root.
+                        paths: [
+                            '@stamhoofd/components',
+                            '@stamhoofd/frontend-excel-export',
+                            '@stamhoofd/frontend-i18n',
+                            '@stamhoofd/frontend-pdf-builder',
+                            '@stamhoofd/networking',
+                        ].map(name => ({
+                            name,
+                            message: 'Do not import from the barrel root. Import directly from the source module instead, e.g. \'' + name + '/organizations/Foo.vue\'.',
+                        })),
+                        // Explicit imports of an index file (e.g. '../models/index.js').
+                        patterns: [{
+                            regex: '(^|/)index(\\.(js|ts))?$',
+                            message: 'Do not import from barrel files (index files). Import directly from the source module instead.',
+                        }],
+                    }],
+                },
+            },
+            {
+                files: ['**/*.test.js', '**/*.test.ts'],
+                rules: {
+                    'stamhoofd/async-component-with-properties': 'off',
+                    'stamhoofd/async-route-components': 'off',
+                },
+            },
         ],
         backend: [
             ...baseRules,

package/src/rules/async-component-with-properties.js

@@ -0,0 +1,284 @@
+const navigationPackage = '@simonbackx/vue-app-navigation';
+const asyncComponentImportNames = new Set([
+    '#containers/AsyncComponent.ts',
+    '@stamhoofd/components/containers/AsyncComponent.ts',
+]);
+
+function unwrapExpression(node) {
+    while (
+        node?.type === 'TSAsExpression'
+        || node?.type === 'TSNonNullExpression'
+        || node?.type === 'TSSatisfiesExpression'
+        || node?.type === 'TSTypeAssertion'
+        || node?.type === 'ChainExpression'
+    ) {
+        node = node.expression;
+    }
+
+    return node;
+}
+
+function findVariable(sourceCode, identifier) {
+    let scope = sourceCode.getScope(identifier);
+
+    while (scope) {
+        const variable = scope.set.get(identifier.name);
+        if (variable) {
+            return variable;
+        }
+        scope = scope.upper;
+    }
+
+    return null;
+}
+
+function getImportDefinition(variable) {
+    return variable?.defs.find(definition => definition.type === 'ImportBinding') ?? null;
+}
+
+function getImportedName(definition) {
+    if (definition?.node.type !== 'ImportSpecifier') {
+        return null;
+    }
+
+    return definition.node.imported.name ?? definition.node.imported.value;
+}
+
+function isImportedFrom(definition, packageName) {
+    return definition?.parent.type === 'ImportDeclaration'
+        && definition.parent.source.value === packageName;
+}
+
+function isComponentWithPropertiesConstructor(sourceCode, node) {
+    const callee = unwrapExpression(node.callee);
+    if (callee.type !== 'Identifier') {
+        return false;
+    }
+
+    const definition = getImportDefinition(findVariable(sourceCode, callee));
+    return isImportedFrom(definition, navigationPackage)
+        && getImportedName(definition) === 'ComponentWithProperties';
+}
+
+function getDefaultImport(sourceCode, node) {
+    node = unwrapExpression(node);
+    if (node.type !== 'Identifier') {
+        return null;
+    }
+
+    const variable = findVariable(sourceCode, node);
+    const definition = getImportDefinition(variable);
+    if (definition?.node.type !== 'ImportDefaultSpecifier') {
+        return null;
+    }
+
+    return { variable, definition };
+}
+
+function getNavigationImportName(sourceCode, node) {
+    node = unwrapExpression(node);
+    if (node.type !== 'Identifier') {
+        return null;
+    }
+
+    const definition = getImportDefinition(findVariable(sourceCode, node));
+    return isImportedFrom(definition, navigationPackage)
+        ? getImportedName(definition)
+        : null;
+}
+
+function getComponentConstruction(sourceCode, identifier) {
+    let argument = identifier;
+
+    while (argument.parent?.expression === argument) {
+        const parent = unwrapExpression(argument.parent);
+        if (parent === argument.parent) {
+            break;
+        }
+        argument = argument.parent;
+    }
+
+    const construction = argument.parent;
+    return construction?.type === 'NewExpression'
+        && construction.arguments[0] === argument
+        && isComponentWithPropertiesConstructor(sourceCode, construction)
+        ? construction
+        : null;
+}
+
+function findVariableByName(sourceCode, node, name) {
+    let scope = sourceCode.getScope(node);
+
+    while (scope) {
+        const variable = scope.set.get(name);
+        if (variable) {
+            return variable;
+        }
+        scope = scope.upper;
+    }
+
+    return null;
+}
+
+function getAsyncComponent(sourceCode, node, filename) {
+    const existingVariable = findVariableByName(sourceCode, node, 'AsyncComponent');
+    const existingDefinition = getImportDefinition(existingVariable);
+    if (
+        existingDefinition?.node.type === 'ImportSpecifier'
+        && getImportedName(existingDefinition) === 'AsyncComponent'
+        && asyncComponentImportNames.has(existingDefinition.parent.source.value)
+    ) {
+        return {
+            name: existingVariable.name,
+            importDeclaration: null,
+            importSource: null,
+        };
+    }
+
+    for (const scope of [sourceCode.getScope(node), sourceCode.getScope(node).upper]) {
+        for (const variable of scope?.variables ?? []) {
+            const definition = getImportDefinition(variable);
+            if (
+                definition?.node.type === 'ImportSpecifier'
+                && getImportedName(definition) === 'AsyncComponent'
+                && asyncComponentImportNames.has(definition.parent.source.value)
+            ) {
+                return {
+                    name: variable.name,
+                    importDeclaration: null,
+                    importSource: null,
+                };
+            }
+        }
+    }
+
+    if (existingVariable) {
+        return null;
+    }
+
+    const navigationImport = sourceCode.ast.body.find(statement =>
+        statement.type === 'ImportDeclaration'
+        && statement.source.value === navigationPackage,
+    );
+    if (!navigationImport) {
+        return null;
+    }
+
+    return {
+        name: 'AsyncComponent',
+        importDeclaration: navigationImport,
+        importSource: filename.includes('/frontend/shared/components/')
+            ? '#containers/AsyncComponent.ts'
+            : '@stamhoofd/components/containers/AsyncComponent.ts',
+    };
+}
+
+function getFix(sourceCode, node, importedComponent, filename) {
+    const asyncComponent = getAsyncComponent(sourceCode, node, filename);
+    if (!asyncComponent || node.arguments.length > 3) {
+        return null;
+    }
+
+    const importDeclaration = importedComponent.definition.parent;
+    const importSource = sourceCode.getText(importDeclaration.source);
+    const constructions = importedComponent.variable.references.map(
+        reference => getComponentConstruction(sourceCode, reference.identifier),
+    );
+    const canRemoveImport = constructions.every(Boolean);
+    const nodesToReplace = canRemoveImport ? constructions : [node];
+
+    return function fix(fixer) {
+        const fixes = nodesToReplace.map((construction) => {
+            const properties = construction.arguments[1]
+                ? sourceCode.getText(construction.arguments[1])
+                : '{}';
+            const options = construction.arguments[2]
+                ? `, ${sourceCode.getText(construction.arguments[2])}`
+                : '';
+            return fixer.replaceText(
+                construction,
+                `${asyncComponent.name}(() => import(${importSource}), ${properties}${options})`,
+            );
+        });
+
+        if (asyncComponent.importDeclaration && asyncComponent.importSource) {
+            const indent = ' '.repeat(asyncComponent.importDeclaration.loc.start.column);
+            fixes.push(fixer.insertTextAfter(
+                asyncComponent.importDeclaration,
+                `\n${indent}import { AsyncComponent } from '${asyncComponent.importSource}';`,
+            ));
+        }
+
+        if (canRemoveImport) {
+            if (importDeclaration.specifiers.length === 1) {
+                fixes.push(fixer.remove(importDeclaration));
+            } else {
+                const nextSpecifier = importDeclaration.specifiers[1];
+                const tokenBeforeNextSpecifier = sourceCode.getTokenBefore(nextSpecifier);
+                fixes.push(fixer.removeRange([
+                    importedComponent.definition.node.range[0],
+                    tokenBeforeNextSpecifier.range[0],
+                ]));
+            }
+        }
+
+        return fixes;
+    };
+}
+
+export default {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Require imported Vue components to be loaded through AsyncComponent.',
+        },
+        fixable: 'code',
+        schema: [{
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+                allow: {
+                    type: 'array',
+                    items: { type: 'string' },
+                    uniqueItems: true,
+                },
+            },
+        }],
+        messages: {
+            asyncComponent: 'Use AsyncComponent(() => import(...), properties) instead of eagerly constructing an imported component.',
+        },
+    },
+    create(context) {
+        const sourceCode = context.sourceCode;
+        const allowedComponentNames = new Set(context.options[0]?.allow ?? []);
+
+        return {
+            NewExpression(node) {
+                if (!isComponentWithPropertiesConstructor(sourceCode, node) || !node.arguments[0]) {
+                    return;
+                }
+
+                const component = unwrapExpression(node.arguments[0]);
+                if (component.type === 'Identifier' && allowedComponentNames.has(component.name)) {
+                    return;
+                }
+
+                const navigationImportName = getNavigationImportName(sourceCode, node.arguments[0]);
+                if (navigationImportName && allowedComponentNames.has(navigationImportName)) {
+                    return;
+                }
+
+                const importedComponent = getDefaultImport(sourceCode, node.arguments[0]);
+                if (!importedComponent) {
+                    return;
+                }
+
+                context.report({
+                    node: node.arguments[0],
+                    messageId: 'asyncComponent',
+                    fix: getFix(sourceCode, node, importedComponent, context.filename),
+                });
+            },
+        };
+    },
+};

package/src/rules/async-route-components.js

@@ -0,0 +1,284 @@
+const navigationPackage = '@simonbackx/vue-app-navigation';
+const routeFunctionNames = new Set(['defineRoute', 'defineRoutes']);
+
+function unwrapExpression(node) {
+    while (
+        node?.type === 'TSAsExpression'
+        || node?.type === 'TSNonNullExpression'
+        || node?.type === 'TSSatisfiesExpression'
+        || node?.type === 'TSTypeAssertion'
+        || node?.type === 'ChainExpression'
+    ) {
+        node = node.expression;
+    }
+
+    return node;
+}
+
+function findVariable(sourceCode, identifier) {
+    let scope = sourceCode.getScope(identifier);
+
+    while (scope) {
+        const variable = scope.set.get(identifier.name);
+        if (variable) {
+            return variable;
+        }
+        scope = scope.upper;
+    }
+
+    return null;
+}
+
+function getImportedName(variable) {
+    const definition = variable?.defs.find(def => def.type === 'ImportBinding');
+    const importDeclaration = definition?.parent;
+
+    if (importDeclaration?.type !== 'ImportDeclaration' || importDeclaration.source.value !== navigationPackage) {
+        return null;
+    }
+
+    if (definition.node.type !== 'ImportSpecifier') {
+        return null;
+    }
+
+    return definition.node.imported.name ?? definition.node.imported.value;
+}
+
+function isRouteFunction(sourceCode, node) {
+    if (node.type !== 'Identifier') {
+        return false;
+    }
+
+    return routeFunctionNames.has(getImportedName(findVariable(sourceCode, node)));
+}
+
+function isComponentProperty(node) {
+    return node.type === 'Property'
+        && !node.computed
+        && (
+            (node.key.type === 'Identifier' && node.key.name === 'component')
+            || (node.key.type === 'Literal' && node.key.value === 'component')
+        );
+}
+
+function isInsideRouteDefinition(sourceCode, node) {
+    let current = node.parent;
+    let containingObject = null;
+
+    while (current) {
+        if (current.type === 'ObjectExpression') {
+            if (containingObject) {
+                return false;
+            }
+            containingObject = current;
+        }
+
+        if (
+            current.type === 'CallExpression'
+            && isRouteFunction(sourceCode, current.callee)
+            && current.arguments[0]
+            && current.arguments[0].range[0] <= node.range[0]
+            && current.arguments[0].range[1] >= node.range[1]
+        ) {
+            return true;
+        }
+        current = current.parent;
+    }
+
+    return false;
+}
+
+function getFunctionNode(sourceCode, node) {
+    node = unwrapExpression(node);
+
+    if (
+        node.type === 'ArrowFunctionExpression'
+        || node.type === 'FunctionExpression'
+    ) {
+        return node;
+    }
+
+    if (node.type !== 'Identifier') {
+        return null;
+    }
+
+    const variable = findVariable(sourceCode, node);
+    for (const definition of variable?.defs ?? []) {
+        if (definition.type === 'FunctionName') {
+            return definition.node;
+        }
+
+        if (definition.type === 'Variable') {
+            const init = unwrapExpression(definition.node.init);
+            if (init?.type === 'ArrowFunctionExpression' || init?.type === 'FunctionExpression') {
+                return init;
+            }
+        }
+    }
+
+    return null;
+}
+
+function hasTypeNamed(type, name, seen = new Set()) {
+    if (!type || seen.has(type)) {
+        return false;
+    }
+    seen.add(type);
+
+    if (type.symbol?.getName() === name || type.aliasSymbol?.getName() === name) {
+        return true;
+    }
+
+    return type.types?.some(childType => hasTypeNamed(childType, name, seen)) ?? false;
+}
+
+function isAllowedComponentFunction(sourceCode, parserServices, node) {
+    const functionNode = getFunctionNode(sourceCode, node);
+    if (!functionNode) {
+        return false;
+    }
+
+    if (functionNode.async) {
+        return true;
+    }
+
+    if (!parserServices?.program || !parserServices.esTreeNodeToTSNodeMap) {
+        return false;
+    }
+
+    const checker = parserServices.program.getTypeChecker();
+    const tsNode = parserServices.esTreeNodeToTSNodeMap.get(functionNode);
+    const signature = checker.getTypeAtLocation(tsNode).getCallSignatures()[0];
+
+    return signature
+        ? hasTypeNamed(checker.getReturnTypeOfSignature(signature), 'ComponentWithProperties')
+        : false;
+}
+
+function isSelfComponent(node) {
+    node = unwrapExpression(node);
+    return node.type === 'Literal' && node.value === 'self';
+}
+
+function getRouteComponentProperty(sourceCode, identifier) {
+    let value = identifier;
+
+    while (
+        value.parent?.expression === value
+        && (
+            value.parent.type === 'TSAsExpression'
+            || value.parent.type === 'TSNonNullExpression'
+            || value.parent.type === 'TSSatisfiesExpression'
+            || value.parent.type === 'TSTypeAssertion'
+            || value.parent.type === 'ChainExpression'
+        )
+    ) {
+        value = value.parent;
+    }
+
+    const property = value.parent;
+    if (
+        !isComponentProperty(property)
+        || property.value !== value
+        || property.shorthand
+        || !isInsideRouteDefinition(sourceCode, property)
+    ) {
+        return null;
+    }
+
+    return property;
+}
+
+function getImportedVariable(sourceCode, node) {
+    const value = unwrapExpression(node.value);
+    if (value.type !== 'Identifier') {
+        return null;
+    }
+
+    const variable = findVariable(sourceCode, value);
+    return variable?.defs.some(def => def.type === 'ImportBinding')
+        ? variable
+        : null;
+}
+
+function isImportedComponentUsedOutsideRoutes(sourceCode, node) {
+    const variable = getImportedVariable(sourceCode, node);
+    return variable?.references.some(
+        reference => !getRouteComponentProperty(sourceCode, reference.identifier),
+    ) ?? false;
+}
+
+function getDefaultImportFix(sourceCode, node) {
+    const variable = getImportedVariable(sourceCode, node);
+    const definition = variable?.defs.find(def => def.type === 'ImportBinding');
+    if (
+        !definition
+        || definition.node.type !== 'ImportDefaultSpecifier'
+    ) {
+        return null;
+    }
+
+    const componentProperties = variable.references.map(
+        reference => getRouteComponentProperty(sourceCode, reference.identifier),
+    );
+    if (componentProperties.some(property => property === null)) {
+        return null;
+    }
+
+    const importDeclaration = definition.parent;
+    const importSource = sourceCode.getText(importDeclaration.source);
+
+    return function fix(fixer) {
+        const fixes = componentProperties.map(property =>
+            fixer.replaceText(property.value, `async () => (await import(${importSource})).default`),
+        );
+
+        if (importDeclaration.specifiers.length === 1) {
+            fixes.push(fixer.remove(importDeclaration));
+        } else {
+            const nextSpecifier = importDeclaration.specifiers[1];
+            const tokenBeforeNextSpecifier = sourceCode.getTokenBefore(nextSpecifier);
+            fixes.push(fixer.removeRange([definition.node.range[0], tokenBeforeNextSpecifier.range[0]]));
+        }
+
+        return fixes;
+    };
+}
+
+export default {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Require route components to be loaded by async functions.',
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            asyncComponent: 'Route components must be async functions or synchronous functions returning ComponentWithProperties.',
+        },
+    },
+    create(context) {
+        const sourceCode = context.sourceCode;
+        const parserServices = sourceCode.parserServices;
+
+        return {
+            Property(node) {
+                if (
+                    !isComponentProperty(node)
+                    || !isInsideRouteDefinition(sourceCode, node)
+                    || isSelfComponent(node.value)
+                    || isAllowedComponentFunction(sourceCode, parserServices, node.value)
+                    || isImportedComponentUsedOutsideRoutes(sourceCode, node)
+                ) {
+                    return;
+                }
+
+                context.report({
+                    node: node.value,
+                    messageId: 'asyncComponent',
+                    fix: getDefaultImportFix(sourceCode, node),
+                });
+            },
+        };
+    },
+};