[WARN] Fix TypeScript/Svelte warnings from p04-content-patterns #18

New Issue

santhoshj · 2026-02-18T23:39:17Z

santhoshj commented

2026-02-18 23:39:17 +00:00

TypeScript/Svelte Warnings to Fix

The following warnings were introduced during p04-content-patterns implementation:

Warning 1: DataTable - State Referenced Locally

File: src/lib/components/common/DataTable.svelte:36

Warn: This reference only captures the initial value of `data`. 
Did you mean to reference it inside a closure instead?
https://svelte.dev/e/state_referenced_locally

Code:

const options: TableOptions<T> = {
  data,  // <-- This reference only captures initial value
  columns,
  state: {
    get sorting() {
      return $sorting;
    }
  },
  onSortingChange: (updater) => { ... },
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel()
};

Issue: The data prop is referenced directly in the options object, but Svelte 5 runes require reactive references to be inside closures or derived values.

Fix Options:

Wrap data in a $derived or function
Use $effect to update table when data changes
Pass data as a getter function

Warning 2: EmptyState - Deprecated svelte:component

File: src/lib/components/common/EmptyState.svelte:23

Warn: `<svelte:component>` is deprecated in runes mode — components are dynamic by default
https://svelte.dev/e/svelte_component_deprecated

Code:

<svelte:component this={Icon} size={48} />

Fix: In Svelte 5, use dynamic components directly:

<Icon size={48} />

Or if dynamic switching is needed:

{#if Icon}
  <Icon size={48} />
{/if}

File: src/lib/components/Navigation.svelte

These are pre-existing a11y warnings:

tabindex="0" on non-interactive elements
Label without associated control

These should be addressed separately as part of a11y improvements.

How to Reproduce

cd frontend
npm run check

Environment

Svelte 5 (runes mode)
SvelteKit 2.x
TypeScript 5.x

## TypeScript/Svelte Warnings to Fix The following warnings were introduced during p04-content-patterns implementation: ### Warning 1: DataTable - State Referenced Locally **File:** `src/lib/components/common/DataTable.svelte:36` ``` Warn: This reference only captures the initial value of `data`. Did you mean to reference it inside a closure instead? https://svelte.dev/e/state_referenced_locally ``` **Code:** ```svelte const options: TableOptions<T> = { data, // <-- This reference only captures initial value columns, state: { get sorting() { return $sorting; } }, onSortingChange: (updater) => { ... }, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel() }; ``` **Issue:** The `data` prop is referenced directly in the options object, but Svelte 5 runes require reactive references to be inside closures or derived values. **Fix Options:** 1. Wrap `data` in a `$derived` or function 2. Use `$effect` to update table when data changes 3. Pass data as a getter function --- ### Warning 2: EmptyState - Deprecated svelte:component **File:** `src/lib/components/common/EmptyState.svelte:23` ``` Warn: `<svelte:component>` is deprecated in runes mode — components are dynamic by default https://svelte.dev/e/svelte_component_deprecated ``` **Code:** ```svelte <svelte:component this={Icon} size={48} /> ``` **Fix:** In Svelte 5, use dynamic components directly: ```svelte <Icon size={48} /> ``` Or if dynamic switching is needed: ```svelte {#if Icon} <Icon size={48} /> {/if} ``` --- ### Warning 3-5: Navigation Accessibility (Pre-existing) **File:** `src/lib/components/Navigation.svelte` These are pre-existing a11y warnings: - `tabindex="0"` on non-interactive elements - Label without associated control These should be addressed separately as part of a11y improvements. --- ## How to Reproduce ```bash cd frontend npm run check ``` ## Environment - Svelte 5 (runes mode) - SvelteKit 2.x - TypeScript 5.x

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: santhoshj/headroom#18