eslint-plugin-svelte 3.6.0 → 3.8.0

package/README.md

@@ -271,6 +271,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-reactive-reassign](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-reassign/) | disallow reassigning reactive values | :star: |
 | [svelte/no-shorthand-style-property-overrides](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: |
 | [svelte/no-store-async](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-store-async/) | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features | :star: |
+| [svelte/no-top-level-browser-globals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-top-level-browser-globals/) | disallow using top-level browser global variables |  |
 | [svelte/no-unknown-style-directive-property](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |
 | [svelte/require-store-callbacks-use-set-param](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-callbacks-use-set-param/) | store callbacks must use `set` param | :bulb: |
 | [svelte/require-store-reactive-access](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-reactive-access/) | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | :star::wrench: |

package/lib/main.d.ts

@@ -14,7 +14,7 @@ export declare const configs: {
 export declare const rules: Record<string, Rule.RuleModule>;
 export declare const meta: {
     name: "eslint-plugin-svelte";
-    version: "3.6.0";
+    version: "3.8.0";
 };
 export declare const processors: {
     '.svelte': typeof processor;

package/lib/meta.d.ts

@@ -1,2 +1,2 @@
 export declare const name: "eslint-plugin-svelte";
-export declare const version: "3.6.0";
+export declare const version: "3.8.0";

package/lib/meta.js

@@ -2,4 +2,4 @@
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run update"
 export const name = 'eslint-plugin-svelte';
-export const version = '3.6.0';
+export const version = '3.8.0';

package/lib/rule-types.d.ts

@@ -244,6 +244,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-target-blank/
      */
     'svelte/no-target-blank'?: Linter.RuleEntry<SvelteNoTargetBlank>;
+    /**
+     * disallow using top-level browser global variables
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-top-level-browser-globals/
+     */
+    'svelte/no-top-level-browser-globals'?: Linter.RuleEntry<[]>;
     /**
      * disallow trailing whitespace at the end of lines
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-trailing-spaces/

package/lib/rules/no-top-level-browser-globals.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types.js").RuleModule;
+export default _default;

package/lib/rules/no-top-level-browser-globals.js

@@ -0,0 +1,350 @@
+import { ReferenceTracker, getStaticValue } from '@eslint-community/eslint-utils';
+import { createRule } from '../utils/index.js';
+import globals from 'globals';
+import { findVariable, getScope } from '../utils/ast-utils.js';
+export default createRule('no-top-level-browser-globals', {
+    meta: {
+        docs: {
+            description: 'disallow using top-level browser global variables',
+            category: 'Possible Errors',
+            recommended: false
+        },
+        schema: [],
+        messages: {
+            unexpectedGlobal: 'Unexpected top-level browser global variable "{{name}}".'
+        },
+        type: 'problem',
+        conditions: [{ svelteFileTypes: ['.svelte', '.svelte.[js|ts]'] }]
+    },
+    create(context) {
+        const sourceCode = context.sourceCode;
+        const blowerGlobals = getBrowserGlobals();
+        const referenceTracker = new ReferenceTracker(sourceCode.scopeManager.globalScope, {
+            // Specifies the global variables that are allowed to prevent `window.window` from being iterated over.
+            globalObjectNames: ['globalThis']
+        });
+        const maybeGuards = [];
+        const functions = [];
+        function enterFunction(node) {
+            if (isTopLevelLocation(node)) {
+                functions.push(node);
+            }
+        }
+        function enterMetaProperty(node) {
+            if (node.meta.name !== 'import' || node.property.name !== 'meta')
+                return;
+            for (const ref of referenceTracker.iteratePropertyReferences(node, {
+                env: {
+                    // See https://vite.dev/guide/ssr#conditional-logic
+                    SSR: {
+                        [ReferenceTracker.READ]: true
+                    }
+                }
+            })) {
+                if (ref.node.type === 'Identifier' || ref.node.type === 'MemberExpression') {
+                    const guardChecker = getGuardChecker({ node: ref.node, not: true });
+                    if (guardChecker) {
+                        maybeGuards.push({
+                            isAvailableLocation: guardChecker,
+                            browserEnvironment: true
+                        });
+                    }
+                }
+            }
+        }
+        function verifyGlobalReferences() {
+            // Collects guarded location checkers by checking module references
+            // that can check the browser environment.
+            for (const referenceNode of iterateBrowserCheckerModuleReferences()) {
+                if (!isTopLevelLocation(referenceNode))
+                    continue;
+                const guardChecker = getGuardChecker({ node: referenceNode });
+                if (guardChecker) {
+                    maybeGuards.push({
+                        isAvailableLocation: guardChecker,
+                        browserEnvironment: true
+                    });
+                }
+            }
+            const reportCandidates = [];
+            // Collects references to global variables.
+            for (const ref of iterateBrowserGlobalReferences()) {
+                if (!isTopLevelLocation(ref.node))
+                    continue;
+                const guardChecker = getGuardCheckerFromReference(ref.node);
+                if (guardChecker) {
+                    const name = ref.path.join('.');
+                    maybeGuards.push({
+                        reference: { node: ref.node, name },
+                        isAvailableLocation: guardChecker,
+                        browserEnvironment: name === 'window' || name === 'document'
+                    });
+                }
+                else {
+                    reportCandidates.push(ref);
+                }
+            }
+            for (const ref of reportCandidates) {
+                const name = ref.path.join('.');
+                if (isAvailableLocation({ node: ref.node, name })) {
+                    continue;
+                }
+                context.report({
+                    node: ref.node,
+                    messageId: 'unexpectedGlobal',
+                    data: { name }
+                });
+            }
+        }
+        return {
+            ':function': enterFunction,
+            MetaProperty: enterMetaProperty,
+            'Program:exit': verifyGlobalReferences
+        };
+        /**
+         * Checks whether the node is in a location where the expression is available or not.
+         * @returns `true` if the expression is available.
+         */
+        function isAvailableLocation(ref) {
+            for (const guard of maybeGuards.reverse()) {
+                if (guard.isAvailableLocation(ref.node)) {
+                    if (guard.browserEnvironment || guard.reference?.name === ref.name) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        /**
+         * Checks whether the node is in a top-level location.
+         * @returns `true` if the node is in a top-level location.
+         */
+        function isTopLevelLocation(node) {
+            for (const func of functions) {
+                if (func.range[0] <= node.range[0] && node.range[1] <= func.range[1]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        /**
+         * Iterate over the references of modules that can check the browser environment.
+         */
+        function* iterateBrowserCheckerModuleReferences() {
+            for (const ref of referenceTracker.iterateEsmReferences({
+                'esm-env': {
+                    [ReferenceTracker.ESM]: true,
+                    // See https://www.npmjs.com/package/esm-env
+                    BROWSER: {
+                        [ReferenceTracker.READ]: true
+                    }
+                },
+                '$app/environment': {
+                    [ReferenceTracker.ESM]: true,
+                    // See https://svelte.dev/docs/kit/$app-environment#browser
+                    browser: {
+                        [ReferenceTracker.READ]: true
+                    }
+                }
+            })) {
+                if (ref.node.type === 'Identifier' || ref.node.type === 'MemberExpression') {
+                    yield ref.node;
+                }
+                else if (ref.node.type === 'ImportSpecifier') {
+                    const variable = findVariable(context, ref.node.local);
+                    if (variable) {
+                        for (const reference of variable.references) {
+                            if (reference.isRead() && reference.identifier.type === 'Identifier') {
+                                yield reference.identifier;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        /**
+         * Iterate over the used references of global variables.
+         */
+        function* iterateBrowserGlobalReferences() {
+            yield* referenceTracker.iterateGlobalReferences(Object.fromEntries(blowerGlobals.map((name) => [
+                name,
+                {
+                    [ReferenceTracker.READ]: true
+                }
+            ])));
+        }
+        /**
+         * If the node is a reference used in a guard clause that checks if the node is in a browser environment,
+         * it returns information about the expression that checks if the browser variable is available.
+         * @returns The guard info.
+         */
+        function getGuardCheckerFromReference(node) {
+            const parent = node.parent;
+            if (!parent)
+                return null;
+            if (parent.type === 'BinaryExpression') {
+                if (parent.operator === 'instanceof' &&
+                    parent.left === node &&
+                    node.type === 'MemberExpression') {
+                    // e.g. if (globalThis.window instanceof X)
+                    return getGuardChecker({ node: parent });
+                }
+                const operand = parent.left === node ? parent.right : parent.right === node ? parent.left : null;
+                if (!operand)
+                    return null;
+                const staticValue = getStaticValue(operand, getScope(context, operand));
+                if (!staticValue)
+                    return null;
+                if (staticValue.value === undefined && node.type === 'MemberExpression') {
+                    if (parent.operator === '!==' || parent.operator === '!=') {
+                        // e.g. if (globalThis.window !== undefined), if (globalThis.window != undefined)
+                        return getGuardChecker({ node: parent });
+                    }
+                    else if (parent.operator === '===' || parent.operator === '==') {
+                        // e.g. if (globalThis.window === undefined), if (globalThis.window == undefined)
+                        return getGuardChecker({ node: parent, not: true });
+                    }
+                }
+                else if (staticValue.value === null && node.type === 'MemberExpression') {
+                    if (parent.operator === '!=') {
+                        // e.g. if (globalThis.window != null)
+                        return getGuardChecker({ node: parent });
+                    }
+                    else if (parent.operator === '==') {
+                        // e.g. if (globalThis.window == null)
+                        return getGuardChecker({ node: parent, not: true });
+                    }
+                }
+                return null;
+            }
+            if (parent.type === 'UnaryExpression' &&
+                parent.operator === 'typeof' &&
+                parent.argument === node) {
+                const pp = parent.parent;
+                if (!pp || pp.type !== 'BinaryExpression') {
+                    return null;
+                }
+                const staticValue = getStaticValue(pp.left === parent ? pp.right : pp.left, getScope(context, node));
+                if (!staticValue)
+                    return null;
+                if (staticValue.value !== 'undefined' && staticValue.value !== 'object') {
+                    return null;
+                }
+                if (pp.operator === '!==' || pp.operator === '!=') {
+                    if (staticValue.value === 'undefined') {
+                        // e.g. if (typeof window !== "undefined"), if (typeof window != "undefined")
+                        return getGuardChecker({ node: pp });
+                    }
+                    // e.g. if (typeof window !== "object"), if (typeof window != "object")
+                    return getGuardChecker({ node: pp, not: true });
+                }
+                else if (pp.operator === '===' || pp.operator === '==') {
+                    if (staticValue.value === 'undefined') {
+                        // e.g. if (typeof window === "undefined"), if (typeof window == "undefined")
+                        return getGuardChecker({ node: pp, not: true });
+                    }
+                    // e.g. if (typeof window === "object"), if (typeof window == "object")
+                    return getGuardChecker({ node: pp });
+                }
+                return null;
+            }
+            if (node.type === 'MemberExpression') {
+                if (((parent.type === 'CallExpression' && parent.callee === node) ||
+                    (parent.type === 'MemberExpression' && parent.object === node)) &&
+                    parent.optional) {
+                    // e.g. globalThis.location?.href
+                    return (n) => n === node;
+                }
+                // e.g. if (globalThis.window)
+                return getGuardChecker({ node });
+            }
+            return null;
+        }
+        /**
+         * If the node is a guard clause checking,
+         * returns a function to check if the node is available.
+         */
+        function getGuardChecker(guardInfo) {
+            const parent = guardInfo.node.parent;
+            if (!parent)
+                return null;
+            if (parent.type === 'ConditionalExpression') {
+                const block = guardInfo.not ? parent.alternate : parent.consequent;
+                return (n) => block.range[0] <= n.range[0] && n.range[1] <= block.range[1];
+            }
+            if (parent.type === 'UnaryExpression' && parent.operator === '!') {
+                return getGuardChecker({ not: !guardInfo.not, node: parent });
+            }
+            if (parent.type === 'IfStatement' && parent.test === guardInfo.node) {
+                if (!guardInfo.not) {
+                    const block = parent.consequent;
+                    return (n) => block.range[0] <= n.range[0] && n.range[1] <= block.range[1];
+                }
+                if (parent.alternate) {
+                    const block = parent.alternate;
+                    return (n) => block.range[0] <= n.range[0] && n.range[1] <= block.range[1];
+                }
+                if (!hasJumpStatementInAllPath(parent.consequent)) {
+                    return null;
+                }
+                const pp = parent.parent;
+                if (!pp || (pp.type !== 'BlockStatement' && pp.type !== 'Program')) {
+                    return null;
+                }
+                const start = parent.range[1];
+                const end = pp.range[1];
+                return (n) => start <= n.range[0] && n.range[1] <= end;
+            }
+            if (!guardInfo.not &&
+                parent.type === 'LogicalExpression' &&
+                parent.operator === '&&' &&
+                parent.left === guardInfo.node) {
+                const block = parent.right;
+                return (n) => block.range[0] <= n.range[0] && n.range[1] <= block.range[1];
+            }
+            return null;
+        }
+    }
+});
+/**
+ * Get the list of browser-specific globals.
+ */
+function getBrowserGlobals() {
+    const nodeGlobals = new Set(Object.keys(globals.node));
+    return [
+        'window',
+        'document',
+        ...Object.keys(globals.browser).filter((name) => !nodeGlobals.has(name))
+    ];
+}
+/**
+ * Checks whether all paths of a given statement have jump statements.
+ * @param {Statement} statement
+ * @returns {boolean}
+ */
+function hasJumpStatementInAllPath(statement) {
+    if (isJumpStatement(statement)) {
+        return true;
+    }
+    if (statement.type === 'BlockStatement') {
+        return statement.body.some(hasJumpStatementInAllPath);
+    }
+    if (statement.type === 'IfStatement') {
+        if (!statement.alternate) {
+            return false;
+        }
+        return (hasJumpStatementInAllPath(statement.alternate) &&
+            hasJumpStatementInAllPath(statement.consequent));
+    }
+    return false;
+}
+/**
+ * Checks whether the given statement is a jump statement.
+ * @param {Statement} statement
+ * @returns {statement is JumpStatement}
+ */
+function isJumpStatement(statement) {
+    return (statement.type === 'ReturnStatement' ||
+        statement.type === 'ContinueStatement' ||
+        statement.type === 'BreakStatement');
+}

package/lib/types-for-node.d.ts

@@ -395,6 +395,8 @@ export type ASTNodeListener = {
     'SvelteShorthandAttribute:exit'?: (node: AST.SvelteShorthandAttribute & ASTNodeWithParent) => void;
     SvelteSpreadAttribute?: (node: AST.SvelteSpreadAttribute & ASTNodeWithParent) => void;
     'SvelteSpreadAttribute:exit'?: (node: AST.SvelteSpreadAttribute & ASTNodeWithParent) => void;
+    SvelteAttachTag?: (node: AST.SvelteAttachTag & ASTNodeWithParent) => void;
+    'SvelteAttachTag:exit'?: (node: AST.SvelteAttachTag & ASTNodeWithParent) => void;
     SvelteDirective?: (node: AST.SvelteDirective & ASTNodeWithParent) => void;
     'SvelteDirective:exit'?: (node: AST.SvelteDirective & ASTNodeWithParent) => void;
     SvelteStyleDirective?: (node: AST.SvelteStyleDirective & ASTNodeWithParent) => void;
@@ -781,6 +783,8 @@ export type SvelteNodeListener = {
     'SvelteShorthandAttribute:exit'?: (node: AST.SvelteShorthandAttribute & ASTNodeWithParent) => void;
     SvelteSpreadAttribute?: (node: AST.SvelteSpreadAttribute & ASTNodeWithParent) => void;
     'SvelteSpreadAttribute:exit'?: (node: AST.SvelteSpreadAttribute & ASTNodeWithParent) => void;
+    SvelteAttachTag?: (node: AST.SvelteAttachTag & ASTNodeWithParent) => void;
+    'SvelteAttachTag:exit'?: (node: AST.SvelteAttachTag & ASTNodeWithParent) => void;
     SvelteDirective?: (node: AST.SvelteDirective & ASTNodeWithParent) => void;
     'SvelteDirective:exit'?: (node: AST.SvelteDirective & ASTNodeWithParent) => void;
     SvelteStyleDirective?: (node: AST.SvelteStyleDirective & ASTNodeWithParent) => void;

package/lib/utils/ast-utils.d.ts

@@ -89,13 +89,13 @@ export declare function getMustacheTokens(node: SvAST.SvelteDirective | SvAST.Sv
     closeToken: SvAST.Token;
 } | null;
 /** Get attribute key text */
-export declare function getAttributeKeyText(node: SvAST.SvelteAttribute | SvAST.SvelteShorthandAttribute | SvAST.SvelteStyleDirective | SvAST.SvelteDirective | SvAST.SvelteSpecialDirective | SvAST.SvelteGenericsDirective, context: RuleContext): string;
+export declare function getAttributeKeyText(node: SvAST.SvelteAttribute | SvAST.SvelteShorthandAttribute | SvAST.SvelteStyleDirective | SvAST.SvelteDirective | SvAST.SvelteSpecialDirective | SvAST.SvelteGenericsDirective | SvAST.SvelteAttachTag, context: RuleContext): string;
 /** Get directive name */
 export declare function getDirectiveName(node: SvAST.SvelteDirective): string;
 /**
  * Extract all class names used in a HTML element attribute.
  */
-export declare function findClassesInAttribute(attribute: SvAST.SvelteAttribute | SvAST.SvelteShorthandAttribute | SvAST.SvelteSpreadAttribute | SvAST.SvelteDirective | SvAST.SvelteStyleDirective | SvAST.SvelteSpecialDirective | SvAST.SvelteGenericsDirective): string[];
+export declare function findClassesInAttribute(attribute: SvAST.SvelteAttribute | SvAST.SvelteShorthandAttribute | SvAST.SvelteSpreadAttribute | SvAST.SvelteDirective | SvAST.SvelteStyleDirective | SvAST.SvelteSpecialDirective | SvAST.SvelteGenericsDirective | SvAST.SvelteAttachTag): string[];
 /**
  * Returns name of SvelteElement
  */

package/lib/utils/ast-utils.js

@@ -331,6 +331,8 @@ export function getAttributeKeyText(node, context) {
             const dir = getDirectiveName(node);
             return `${dir}:${getSimpleNameFromNode(node.key.name, context)}${node.key.modifiers.length ? `|${node.key.modifiers.join('|')}` : ''}`;
         }
+        case 'SvelteAttachTag':
+            return '@attach';
         default:
             throw new Error(`Unknown node type: ${
             // eslint-disable-next-line @typescript-eslint/no-explicit-any -- error

package/lib/utils/rules.js

@@ -45,6 +45,7 @@ import noSpacesAroundEqualSignsInAttribute from '../rules/no-spaces-around-equal
 import noStoreAsync from '../rules/no-store-async.js';
 import noSvelteInternal from '../rules/no-svelte-internal.js';
 import noTargetBlank from '../rules/no-target-blank.js';
+import noTopLevelBrowserGlobals from '../rules/no-top-level-browser-globals.js';
 import noTrailingSpaces from '../rules/no-trailing-spaces.js';
 import noUnknownStyleDirectiveProperty from '../rules/no-unknown-style-directive-property.js';
 import noUnnecessaryStateWrap from '../rules/no-unnecessary-state-wrap.js';
@@ -122,6 +123,7 @@ export const rules = [
     noStoreAsync,
     noSvelteInternal,
     noTargetBlank,
+    noTopLevelBrowserGlobals,
     noTrailingSpaces,
     noUnknownStyleDirectiveProperty,
     noUnnecessaryStateWrap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": "git+https://github.com/sveltejs/eslint-plugin-svelte.git",
   "homepage": "https://sveltejs.github.io/eslint-plugin-svelte",
@@ -32,15 +32,16 @@
     }
   },
   "dependencies": {
-    "@eslint-community/eslint-utils": "^4.4.1",
+    "@eslint-community/eslint-utils": "^4.6.1",
     "@jridgewell/sourcemap-codec": "^1.5.0",
     "esutils": "^2.0.3",
+    "globals": "^16.0.0",
     "known-css-properties": "^0.36.0",
     "postcss": "^8.4.49",
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^7.0.0",
     "semver": "^7.6.3",
-    "svelte-eslint-parser": "^1.1.1"
+    "svelte-eslint-parser": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -71,7 +72,7 @@
     "sass": "^1.81.0",
     "source-map-js": "^1.2.1",
     "stylus": "^0.64.0",
-    "svelte": "^5.2.9",
+    "svelte": "^5.30.1",
     "svelte-i18n": "^4.0.1",
     "tsx": "^4.19.2",
     "type-coverage": "^2.29.7",