Pendahuluan

Pada aplikasi SvelteKit, lint incremental membantu menjaga waktu feedback tetap singkat dengan hanya menjalankan pemeriksaan terhadap file yang berubah. Di saat yang sama, preview otomatis untuk pull request memastikan reviewer melihat hasil build terbaru tanpa harus menjalankan lokal. Artikel ini langsung membahas cara membangun pipeline lint incremental dan preview otomatis yang sinkron antara lint sukses dan preview update.

Mengapa Lint Incremental Penting

Linting seluruh kodebase setiap kali commit terasa lambat saat proyek tumbuh. Lint incremental menargetkan scope error dengan mencari file yang diubah sejak branch divergen, sehingga developer menunggu lebih singkat dan tetap mendapat feedback berkualitas.

Membatasi Scope ke File yang Berubah

Untuk lint incremental, gunakan git diff --name-only origin/main atau mekanisme serupa untuk daftar file. Di pipeline, job lint menerima daftar tersebut dan hanya menjalankan lint pada path tersebut.

changed_files=$(git diff --name-only origin/main...HEAD -- '*.svelte' '*.ts' '*.js')
if [ -z "$changed_files" ]; then
  echo "Tidak ada file Svelte/TS/JS yang berubah. Lint dilewati."
  exit 0
fi
pnpm lint $changed_files

Dengan pendekatan ini, lint hanya dijalankan kalau file relevan berubah. Pastikan command lint (misal ESLint/TypeScript) dapat menerima daftar file. Jika tidak, gunakan pnpm lint --fix dengan --cache agar lint incremental tetap efisien.

Membangun Pipeline GitHub Actions dengan Caching

Gunakan workflow dengan job lint yang memanfaatkan cache untuk dependencies dan state lint. Contoh 

name: "CI Lint + Preview"
on: [pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install
      - name: Hitung file berubah
        id: changes
        run: |
          changed_files=$(git diff --name-only origin/main...HEAD -- '*.svelte' '*.ts' '*.js')
          echo "changed=$changed_files" >> $GITHUB_OUTPUT
      - name: Run ESLint per file
        if: steps.changes.outputs.changed != ''
        run: pnpm lint ${{ steps.changes.outputs.changed }}
      - name: Cache lint state
        uses: actions/cache@v4
        with:
          path: .eslintcache
          key: eslint-cache-${{ runner.os }}-${{ hashFiles('**/.eslintrc.*') }}-${{ github.sha }}
          restore-keys: |
            eslint-cache-${{ runner.os }}-

Cache untuk .eslintcache menjaga lint tetap incremental antar run. Jika lint tidak supported cache secara default, manfaatkan flag atau plugin yang menghasilkan cache.

Mengatur Preview Otomatis

Preview otomatis bisa menggunakan Storybook atau Vite dev server yang dijalankan pada lingkungan staging per pull request. Pilih pengaturan server yang sesuai tim Anda.

Menjalankan Preview via GitHub Actions

Gunakan job terpisah yang hanya berjalan apabila lint sukses. Job tersebut deploy preview ke environment seperti Vercel/Railway atau tunggu pada runner untuk port forwarding.

  preview:
    runs-on: ubuntu-latest
    needs: lint
    environment:
      name: pr-preview
      url: https://preview-${{ github.head_ref }}.example.com
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: pnpm install
      - name: Deploy Storybook preview
        run: pnpm storybook --ci --port 6006
      - name: Report preview URL
        run: echo "Preview tersedia di ${{ job.environment.url }}"

Gunakan preview environment untuk meneruskan URL ke komentar PR. Untuk Storybook, pastikan build assets disimpan di storage yang bisa diakses reviewer atau gunakan fitur penyimpanan artifact.

Sinkronisasi Environment Config

Preview membutuhkan konfigurasi environment yang sama dengan lint. Gunakan .env.preview dan pnpm dotenv agar lint dan preview memuat variabel yang konsisten. Contoh langkah deployment:

  • Gunakan cp .env.preview .env sebelum menjalankan Storybook.
  • Masukkan secrets ke GitHub Actions dan akses melalui ${{ secrets.PREVIEW_API_KEY }}.
  • Pastikan lint tidak tergantung pada env yang hanya tersedia di runtime preview.

Logika Otomasi: Menautkan Lint dan Preview

Lint harus selesai sebelum preview dijalankan; sebaliknya, preview tidak relevan kalau lint gagal. Pastikan job preview memiliki needs: lint sehingga GitHub Actions otomatis menjeda jika lint gagal. Berikut alur umum:

  1. Trigger: pull_request.
  2. Job lint memeriksa hanya file berubah, menggunakan cache lint untuk kecepatan.
  3. Jika lint sukses, job preview dijalankan dengan konfigurasi environment yang sama.
  4. Preview URL dikirim ke komentar PR atau status check.
  5. Jika preview gagal, status PR menunjukkan kesalahan sehingga reviewer tahu lint/preview bermasalah.

Untuk memantau perubahan lint secara visual, tambahkan status check kustom (misal mencantumkan Lint dan Preview) sehingga reviewer tahu tahapan mana yang perlu perhatian.

Kesimpulan

Dengan lint incremental, caching state lint, dan preview otomatis yang dijalankan setelah lint sukses, pipeline SvelteKit menjadi jauh lebih responsif. Pastikan scope lint dibatasi lewat perintah git diff, gunakan cache lint untuk menghindari pemeriksaan penuh, serta hubungkan job lint dan preview dengan dependensi agar status PR konsisten. Pendekatan ini mengurangi waktu feedback dan membuat pengalaman review lebih baik tanpa mengorbankan kualitas.