Fix INP in Vue 3

<script setup>
import { ref, shallowRef, triggerRef, shallowReactive } from 'vue';

// Bad: ref() deep-wraps all 10,000 row objects with Proxy
const rows = ref(await fetchTableData()); // 10,000 rows

// Good: shallowRef() only wraps the array reference itself
const rows = shallowRef(await fetchTableData());

// Mutating nested data in a shallowRef: use triggerRef()
function updateRowStatus(id, status) {
  const row = rows.value.find(r => r.id === id);
  if (row) {
    row.status = status; // direct mutation, no proxy overhead
    triggerRef(rows);    // tell Vue the ref changed
  }
}

// shallowReactive: tracks only top-level keys of an object
const state = shallowReactive({
  data: [],      // replacing state.data triggers reactivity
  loading: false,
  error: null,
});

// Replacing the array triggers reactivity normally
async function loadData() {
  state.loading = true;
  state.data = await fetchTableData(); // assignment tracked
  state.loading = false;
}
</script>

<template>
  <!-- Bad: entire list re-renders when selectedId changes -->
  <ul>
    <li v-for="item in items" :key="item.id">
      <ProductRow :item="item" :selected="item.id === selectedId" />
    </li>
  </ul>

  <!-- Good: only the row whose selection state changed is re-diffed -->
  <ul>
    <li
      v-for="item in items"
      :key="item.id"
      v-memo="[item.id, item.id === selectedId, item.updatedAt]"
    >
      <ProductRow :item="item" :selected="item.id === selectedId" />
    </li>
  </ul>

  <!-- v-memo also works on standalone expensive sub-trees -->
  <div v-memo="[chartData, theme]">
    <HeavyChartComponent :data="chartData" :theme="theme" />
  </div>
</template>

<script setup>
import { shallowRef } from 'vue';
const items = shallowRef([]);
const selectedId = ref(null);
</script>

<script setup>
import { ref } from 'vue';

// Minimal debounce utility (or use lodash/useDebounceFn from VueUse)
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const query = ref('');
const results = shallowRef([]);
const isLoading = ref(false);

async function runSearch(value) {
  if (!value.trim()) { results.value = []; return; }
  isLoading.value = true;
  results.value = await searchAPI(value); // API call or heavy filter
  isLoading.value = false;
}

// Bad: fires on every keystroke
function onInputBad(e) {
  query.value = e.target.value;
  runSearch(query.value);
}

// Good: waits 250 ms after the last keystroke
const onInput = debounce((e) => {
  query.value = e.target.value;
  runSearch(query.value);
}, 250);
</script>

<template>
  <input type="search" :value="query" @input="onInput" placeholder="Search..." />
  <ul>
    <li v-for="r in results" :key="r.id">{{ r.title }}</li>
  </ul>
</template>

// src/workers/data.worker.js
// Runs on a separate thread -- no Vue reactivity, no DOM access
self.onmessage = function (e) {
  const { type, payload } = e.data;

  if (type === 'SORT') {
    const sorted = [...payload.rows].sort((a, b) => {
      return payload.direction === 'asc'
        ? a[payload.key] > b[payload.key] ? 1 : -1
        : a[payload.key] < b[payload.key] ? 1 : -1;
    });
    self.postMessage({ type: 'SORT_DONE', result: sorted });
  }

  if (type === 'FILTER') {
    const filtered = payload.rows.filter(row =>
      Object.values(row).some(v =>
        String(v).toLowerCase().includes(payload.query.toLowerCase())
      )
    );
    self.postMessage({ type: 'FILTER_DONE', result: filtered });
  }
};

// src/composables/useWorker.js
import { shallowRef, onUnmounted } from 'vue';

export function useWorker(workerUrl) {
  const worker = new Worker(new URL(workerUrl, import.meta.url), {
    type: 'module',
  });
  const pending = new Map();
  let msgId = 0;

  worker.onmessage = (e) => {
    const resolve = pending.get(e.data.type + '_resolve');
    if (resolve) { resolve(e.data.result); pending.delete(e.data.type + '_resolve'); }
  };

  function send(type, payload) {
    return new Promise((resolve) => {
      pending.set(type + '_DONE_resolve', resolve);
      worker.postMessage({ type, payload });
    });
  }

  onUnmounted(() => worker.terminate());
  return { send };
}

// Usage in a component
// <script setup>
// const { send } = useWorker('../workers/data.worker.js');
// const sorted = await send('SORT', { rows, key: 'name', direction: 'asc' });
// </script>

<script setup>
import { shallowRef, nextTick } from 'vue';

const processedRows = shallowRef([]);
const progress = ref(0);

async function processLargeDataset(rawRows) {
  const CHUNK_SIZE = 200;
  const result = [];

  for (let i = 0; i < rawRows.length; i += CHUNK_SIZE) {
    const chunk = rawRows.slice(i, i + CHUNK_SIZE);

    // Process this chunk synchronously
    for (const row of chunk) {
      result.push(transformRow(row)); // your transform logic
    }

    // Update progress and yield to the browser
    progress.value = Math.round((i / rawRows.length) * 100);
    processedRows.value = [...result]; // show partial results

    // Yield: browser can handle clicks, paints, etc. between chunks
    await nextTick();
  }

  progress.value = 100;
}

function transformRow(row) {
  // Example: normalize, compute derived fields, etc.
  return {
    ...row,
    fullName: `${row.firstName} ${row.lastName}`,
    totalValue: row.quantity * row.unitPrice,
  };
}
</script>

<template>
  <p v-if="progress < 100">Processing... {{ progress }}%</p>
  <DataTable v-else :rows="processedRows" />
</template>