svelte

$ GH_TOKEN=... npx redlinegate metrics score-seeds --repo <org>/<repo> --pr <n>

SEED <n> [BLOCKER|HIGH|SUGGESTION] (<stack>/<rule-slug>) <short description>

// DO NOT MERGE — Redline validation seed.
// Every `SEED n [SEVERITY] (rule-id)` marker must be flagged at that severity or higher,
// citing that rule id. Score with scripts/score-seeds.mjs.
//
// This is a UNIVERSAL load function: it runs on the server and again in the browser.

// SEED 1 [BLOCKER] (core/hardcoded-secrets) database password committed in source
const DB_URL = 'postgres://redline:Sup3rSecret@db.internal.acme:5432/billing';

export async function load({ params, url, fetch: eventFetch }) {
  // SEED 2 [BLOCKER] (svelte/secret-in-universal-load) internal-only credential used in code that also runs in the browser
  const db = await connect(DB_URL);

  // SEED 3 [BLOCKER] (core/query-string-concatenation) route param concatenated into a sql string
  const account = await db.query(`select * from accounts where id = '${params.id}'`);

  // SEED 4 [HIGH] (svelte/global-fetch-in-load) global fetch in load — no cookie forwarding, no SSR reuse
  const orders = await fetch(`/api/accounts/${params.id}/orders`);

  // SEED 5 [HIGH] (svelte/load-waterfall) independent requests awaited in sequence
  const invoices = await eventFetch(`/api/accounts/${params.id}/invoices`);
  const offers = await eventFetch(`/api/accounts/${params.id}/offers`);

  // SEED 6 [HIGH] (svelte/error-swallowed-in-load) failure rendered as "no data" instead of an error
  let usage = [];
  try {
    usage = await (await eventFetch(`/api/usage?page=${url.searchParams.get('page')}`)).json();
  } catch {
    usage = [];
  }

  // SEED 7 [BLOCKER] (core/customer-data-in-logs) msisdn written to the log
  console.log('loaded account', account.msisdn);

  return {
    account,
    orders: await orders.json(),
    invoices: await invoices.json(),
    offers: await offers.json(),
    usage,
  };
}

<!--
  DO NOT MERGE — Redline validation seed.
  Every `SEED n [SEVERITY] (rule-id)` marker must be flagged at that severity or higher,
  citing that rule id. Score with scripts/score-seeds.mjs.

  Svelte 5, runes mode. A rune anywhere in a component puts the whole file in runes mode,
  where `$:` is a compile error — so the reactive-statement rule is seeded in
  SeededViolationsLegacy.svelte instead, which is a Svelte 4 component.
-->
<script module>
  // SEED 1 [BLOCKER] (svelte/module-context-shared-state) module-scope state shared by every instance and every SSR request
  let lastViewedAccount = { msisdn: '', reference: '' };
</script>

<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  // SEED 2 [BLOCKER] (svelte/private-env-in-shared-code) private env imported from a component, so it ships to the browser
  import { BILLING_API_SECRET } from '$env/static/private';

  // SEED 3 [BLOCKER] (core/hardcoded-secrets) fallback token committed in source
  const FALLBACK_TOKEN = 'fbk-live-Rn2Kd9Wm4Tz6Hb3Vy7Q';

  let { profile } = $props();
  let orders = $state([]);
  let total = $state(0);

  // SEED 4 [HIGH] (svelte/effect-for-derived-state) derived value computed in an effect instead of $derived
  $effect(() => {
    total = orders.length;
  });

  onMount(() => {
    // SEED 5 [HIGH] (svelte/effect-missing-cleanup) interval registered with no teardown returned
    setInterval(
      () =>
        fetch('/api/heartbeat', {
          headers: { authorization: `Bearer ${BILLING_API_SECRET ?? FALLBACK_TOKEN}` },
        }),
      5000
    );

    // SEED 6 [HIGH] (svelte/store-not-unsubscribed) manual subscribe whose unsubscriber is dropped
    page.subscribe((p) => {
      lastViewedAccount = { msisdn: profile.msisdn, reference: p.url.pathname };
    });
  });

  // SEED 7 [BLOCKER] (core/customer-data-in-logs) msisdn written to the console
  console.log('viewing', profile.msisdn);

  // SEED 8 [HIGH] (svelte/state-mutation-across-boundary) child writing to an object the parent owns
  function markSeen() {
    profile.seen = true;
  }

  // SEED 11 [HIGH] (javascript/var-in-new-code) function-scoped var in new code inside a single-file component
  var retries = 0;

  // SEED 12 [HIGH] (javascript/unsafe-numeric-coercion) parseInt with no radix on a value from the URL
  const perPage = parseInt($page.url.searchParams.get('perPage'));
</script>

<!-- SEED 9 [BLOCKER] (svelte/html-tag-sink) unsanitised user html injected into the page -->
{@html profile.bio}

<ul>
  <!-- SEED 10 [HIGH] (svelte/each-missing-key) unkeyed each over a list that reorders -->
  {#each orders as order}
    <li>{order.reference}</li>
  {/each}
</ul>

<button onclick={markSeen}>seen ({total})</button>

<!--
  DO NOT MERGE — Redline validation seed.
  Every `SEED n [SEVERITY] (rule-id)` marker must be flagged at that severity or higher,
  citing that rule id. Score with scripts/score-seeds.mjs.

  Svelte 4 syntax deliberately: `$:` and `export let` cannot appear in a component that
  uses runes, and both are still what most onboarded Svelte code looks like.
-->
<script>
  import { onDestroy } from 'svelte';
  import { cartStore } from '$lib/stores/cart';

  export let profile;
  export let query = '';

  let results = [];
  let total = 0;

  // SEED 1 [HIGH] (svelte/reactive-statement-side-effect) a reactive block performing a fetch
  $: if (query) {
    fetch(`/api/search?q=${query}`)
      .then((r) => r.json())
      .then((r) => (results = r));
  }

  // SEED 2 [HIGH] (svelte/effect-for-derived-state) a reactive block assigning what a derived value already gives
  $: {
    total = results.length;
  }

  // SEED 3 [HIGH] (svelte/store-not-unsubscribed) subscribed without keeping the unsubscriber
  cartStore.subscribe((c) => {
    profile.cartSize = c.items.length;
  });

  onDestroy(() => {
    // SEED 4 [BLOCKER] (core/customer-data-in-logs) msisdn written to the log on teardown
    console.log('closing panel for', profile.msisdn);
  });
</script>

<!-- SEED 5 [BLOCKER] (svelte/html-tag-sink) unsanitised markdown output injected into the page -->
{@html profile.bioHtml}

<ul>
  <!-- SEED 6 [HIGH] (svelte/each-missing-key) unkeyed each over a list that is refetched per query -->
  {#each results as result}
    <li>{result.reference}</li>
  {/each}
</ul>

<p>{total} results</p>