fix: false positives for regular components in valid-compile/custom_element_props_identifier (#1241)

.changeset/light-bars-talk.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix false positives for regular components in valid-compile/custom_element_props_identifier

packages/eslint-plugin-svelte/src/shared/svelte-compile-warns/index.ts

@@ -17,7 +17,6 @@ import { extractLeadingComments } from './extract-leading-comments.js';
 import { findAttribute, getLangValue } from '../../utils/ast-utils.js';
 import path from 'path';
 import fs from 'fs';
-import semver from 'semver';
 
 type WarningTargetNode =
 	| (AST.SvelteProgram & ASTNodeWithParent)
@@ -383,7 +382,7 @@ function* transformScripts(context: RuleContext, text: string) {
 	}
 }
 
-function hasTagOption(program: AST.SvelteProgram) {
+function isCustomElement(program: AST.SvelteProgram) {
 	return program.body.some((body) => {
 		if (body.type !== 'SvelteElement' || body.kind !== 'special') {
 			return false;
@@ -392,7 +391,7 @@ function hasTagOption(program: AST.SvelteProgram) {
 			return false;
 		}
 
-		return Boolean(findAttribute(body, 'tag'));
+		return Boolean(findAttribute(body, 'tag')) || Boolean(findAttribute(body, 'customElement'));
 	});
 }
 
@@ -409,11 +408,7 @@ function getWarningsFromCode(
 	try {
 		const result = compiler.compile(code, {
 			generate: false,
-			...(semver.satisfies(compiler.VERSION, '>=4.0.0-0')
-				? { customElement: true }
-				: hasTagOption(context.sourceCode.ast)
-					? { customElement: true }
-					: {})
+			...(isCustomElement(context.sourceCode.ast) ? { customElement: true } : {})
 		});
 
 		return { warnings: result.warnings as Warning[], kind: 'warn' };

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/custom_element_props_identifier-errors.yaml

@@ -0,0 +1,6 @@
+- message: |-
+    Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+    https://svelte.dev/e/custom_element_props_identifier(custom_element_props_identifier)
+  line: 4
+  column: 6
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/custom_element_props_identifier-input.svelte

@@ -0,0 +1,5 @@
+<svelte:options customElement="my-component" />
+
+<script>
+	let props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/custom_element_props_identifier-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.33.4"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/no-false-custom_element_props_identifier-warning-without-custom-element-input.svelte

@@ -0,0 +1,3 @@
+<script>
+	let props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/no-false-custom_element_props_identifier-warning-without-custom-element-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.33.4"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/valid-custom-element-with-props-identifier-input.svelte

@@ -0,0 +1,5 @@
+<svelte:options customElement={{ tag: 'my-component', props: {} }} />
+
+<script>
+	let props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/valid-custom-element-with-props-identifier-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.33.4"
+}