sveltejs/eslint-plugin-svelte
New rule: `no undefined variable in the DOM`
Open
#747 opened on May 2, 2024
enhancementhelp wantednew rule
Repository metrics
- Stars
- (400 stars)
- PR merge metrics
- (PR metrics pending)
Description
Motivation
When using a variable (say a props) that can be null or undefined directly in the DOM, it will be rendered as a string "null" or "undefined". Hence, it is probablly never going to be a good thing to use a possibly null or undefined variable directly in the DOM.
Description
The rule would highlight any variable or expression used in the DOM that resolves to a type involving a union type to null or undefined.
Examples
<script lang="ts">
export let prop: string | undefined = undefined;
const frameworks = ["svelte", "react"]
</script>
<!-- ✓ GOOD -->
{#if prop}
{prop}
{/if}
<!-- ✗ BAD -->
{prop}
{frameworks.find(framework => framework === prop)}
Additional comments
No response