DataContainer - Changelog

v0.1.1 (2025-12-26)

TL;DR

Perubahan:

• 🔥 loadStatus API changed (Breaking) - Tidak perlu .value lagi di script
• ✨ QueryIntent parameter (High) - Initialize dari URL/router state
• 🔧 File structure reorganization (Low) - types.ts → types/index.ts
• 📦 Build scripts improvement (Low) - Added clean, watch, preview scripts

Impact: Breaking: 1 | High: 1 | Low: 2

Backward Compatible: ❌ Tidak

---

🔴 Breaking Changes

loadStatus Property: Ref → Getter/Setter

Property loadStatus tidak lagi berupa Ref, sekarang menggunakan direct value dengan getter/setter pattern. Access pattern di <script> berubah, tetapi di <template> tetap sama.

// Before (v0.1.0) - Tidak bekerja lagi
container.loadStatus.value = 0;
if (container.loadStatus.value === 1) { }

// After (v0.1.1) - Wajib menggunakan direct access
container.loadStatus = 0;
if (container.loadStatus === 1) { }

Fix:

1. Search & replace semua container.loadStatus.value menjadi container.loadStatus di <script> sections
2. Template code tidak perlu diubah (sudah bekerja tanpa .value)
3. Internally tetap reactive (menggunakan internal _loadStatus ref)

Affected: Semua code yang mengakses loadStatus di script setup (~90% users yang set loading state manually)

Rationale: Consistency dengan pattern search property yang sudah menggunakan getter/setter, dan cleaner API tanpa .value boilerplate.

---

🟡 High Impact

QueryIntent Parameter

useDataContainer() sekarang menerima optional second parameter queryIntent untuk initialize pagination, sort, dan search state dari URL query params atau router state. Memungkinkan deep linking, shareable URLs, dan SSR hydration.

Poin utama:

• Initialize container dengan state dari URL (page, sort, search)
• Support multiple pagination modes di QueryIntent
• Berguna untuk Vue Router integration dan SSR scenarios
• Tidak breaking - parameter optional dengan backward compatibility

Lihat: Query Intent Initialization dan Example 8

Example:

import { useRoute } from 'vue-router';

const route = useRoute();

const container = useDataContainer<Product, ProductFilter>(
  { category: '' },
  {
    pagination: {
      mode: 'lengthaware',
      page: Number(route.query.page) || 1,
      perPage: 20
    },
    sort: {
      by: route.query.sortBy as string || 'name',
      dir: route.query.sortDir === 'desc' ? 'desc' : 'asc'
    },
    search: {
      param: 'q',
      value: route.query.q as string || ''
    }
  }
);

// Container sudah initialized dengan URL state

Use Case: E-commerce product listings, shareable search results, admin tables dengan bookmarkable filters, SSR page hydration.

---

🔵 Low Impact

Perubahan:

• File structure: src/types.ts dipindah ke src/types/index.ts untuk better organization
• Build scripts: Added clean, build:watch, preview npm scripts
• Dependency: Added rimraf@^6.1.2 untuk cross-platform clean script
• Code formatting: Minor import spacing adjustments (cosmetic)

---

Upgrade

npm update @bpmlib/utils-data-container
# or
yarn upgrade @bpmlib/utils-data-container
# or
pnpm update @bpmlib/utils-data-container

Breaking changes: 1 item - update all loadStatus.value access (lihat detail di atas untuk fix)

Deprecations: Tidak ada

Opsional: Pertimbangkan adopsi QueryIntent parameter untuk URL-driven state dan deep linking support