/**
|
* ExtendedDataStore - A flexible IndexedDB wrapper with HTTP caching
|
*
|
* Configuration-based approach for different storage needs:
|
* - Configurable endpoint, keyPath, and indexes
|
* - Built-in ETag and If-Modified-Since support
|
* - Automatic DOM reference stripping
|
* - TTL-based cache invalidation
|
*/
|
class DataStore {
|
constructor(config = {}) {
|
// Core configuration with sensible defaults
|
this.config = {
|
// Storage configuration
|
name: 'default',
|
version: 1,
|
storeName: 'items',
|
keyPath: 'id',
|
indexes: [], // Array of {name, keyPath, unique}
|
|
// API configuration
|
endpoint: null,
|
apiBase: jvbSettings.api,
|
headers: {},
|
filters: {},
|
|
// Cache configuration
|
TTL: 3600000, // 1 hour default
|
useHttpCaching: true, // ETag and If-Modified-Since
|
cacheKeyStrategy: 'filters', // How to generate cache keys
|
|
// UI configuration
|
showLoading: true,
|
|
// Features
|
stripDOMReferences: true,
|
storeBlobs: false,
|
|
...config
|
};
|
|
// Initialize base properties
|
this.db = null;
|
this.data = new Map();
|
this.cache = new Map();
|
this.httpHeaders = new Map();
|
this.subscribers = new Set();
|
this.currentRequest = null;
|
this.filters = this.config.filters??{};
|
|
// Set up headers
|
this.headers = {
|
'X-WP-Nonce': jvbSettings?.nonce,
|
...this.config.headers
|
};
|
|
this.body = document.body;
|
this.loading = document.querySelector('dialog.loading');
|
|
// Auto-initialize
|
this.initDB();
|
|
// Cleanup on page unload
|
window.addEventListener('beforeunload', () => this.destroy());
|
}
|
|
/**
|
* Initialize IndexedDB with configurable schema
|
*/
|
async initDB() {
|
if (!('indexedDB' in window)) {
|
console.warn('IndexedDB not supported');
|
return;
|
}
|
|
const dbName = `jvb_${this.config.name}_db`;
|
const request = indexedDB.open(dbName, this.config.version);
|
|
request.onupgradeneeded = (e) => {
|
const db = e.target.result;
|
|
// Create main store with configurable keyPath
|
if (!db.objectStoreNames.contains(this.config.storeName)) {
|
const store = db.createObjectStore(this.config.storeName, {
|
keyPath: this.config.keyPath
|
});
|
|
// Add configured indexes
|
this.config.indexes.forEach(index => {
|
store.createIndex(
|
index.name,
|
index.keyPath || index.name,
|
{ unique: index.unique || false }
|
);
|
});
|
}
|
|
// Cache store for HTTP responses
|
if (this.config.endpoint && !db.objectStoreNames.contains('cache')) {
|
const cacheStore = db.createObjectStore('cache', { keyPath: 'key' });
|
cacheStore.createIndex('timestamp', 'timestamp', { unique: false });
|
cacheStore.createIndex('endpoint', 'endpoint', { unique: false });
|
cacheStore.createIndex('filters', 'filters', { unique: false });
|
}
|
|
// HTTP headers store for ETag/If-Modified-Since
|
if (this.config.useHttpCaching && !db.objectStoreNames.contains('headers')) {
|
db.createObjectStore('headers', { keyPath: 'key' });
|
}
|
|
if (this.config.storeBlobs && !db.objectStoreNames.contains('blobs')) {
|
db.createObjectStore('blobs', { keyPath: 'uploadId' });
|
}
|
|
// Call optional schema extension
|
if (this.config.onUpgrade) {
|
this.config.onUpgrade(db, e.oldVersion, e.newVersion);
|
}
|
};
|
|
request.onsuccess = (e) => {
|
this.db = e.target.result;
|
this.loadFromDB();
|
};
|
|
request.onerror = (e) => {
|
console.error(`IndexedDB error for ${dbName}:`, e);
|
if (this.config.onError) {
|
this.config.onError(e);
|
}
|
};
|
}
|
|
/**
|
* Load all data from IndexedDB
|
*/
|
async loadFromDB() {
|
if (!this.db) return;
|
|
const loadPromises = [
|
this.loadData()
|
];
|
|
if (this.config.endpoint) {
|
loadPromises.push(this.loadCache());
|
}
|
|
if (this.config.useHttpCaching) {
|
loadPromises.push(this.loadHeaders());
|
}
|
|
try {
|
await Promise.all(loadPromises);
|
this.notify('data-loaded', {
|
count: this.data.size,
|
store: this.config.storeName
|
});
|
} catch (error) {
|
console.error('Error loading from DB:', error);
|
}
|
}
|
|
/**
|
* Load main data from IndexedDB
|
*/
|
async loadData() {
|
if (!this.db) return;
|
|
return new Promise((resolve, reject) => {
|
const tx = this.db.transaction([this.config.storeName], 'readonly');
|
const store = tx.objectStore(this.config.storeName);
|
const request = store.getAll();
|
|
request.onsuccess = (e) => {
|
e.target.result.forEach(item => {
|
// Strip DOM references if needed
|
const cleaned = this.config.stripDOMReferences
|
? this.stripDOMReferences(item)
|
: item;
|
|
const key = this.getItemKey(cleaned);
|
this.data.set(key, cleaned);
|
});
|
resolve();
|
};
|
|
request.onerror = (e) => reject(e);
|
});
|
}
|
|
/**
|
* Strip DOM references from an object (recursive)
|
*/
|
stripDOMReferences(obj) {
|
if (!obj || typeof obj !== 'object') return obj;
|
|
// Handle arrays
|
if (Array.isArray(obj)) {
|
return obj.map(item => this.stripDOMReferences(item));
|
}
|
|
// Handle objects
|
const cleaned = {};
|
for (const [key, value] of Object.entries(obj)) {
|
// Skip DOM-related properties
|
if (this.isDOMReference(key, value)) {
|
continue;
|
}
|
|
// Handle Set/Map collections
|
if (value instanceof Set) {
|
cleaned[key] = Array.from(value);
|
} else if (value instanceof Map) {
|
cleaned[key] = Object.fromEntries(value);
|
} else if (typeof value === 'object' && value !== null) {
|
cleaned[key] = this.stripDOMReferences(value);
|
} else {
|
cleaned[key] = value;
|
}
|
}
|
|
return cleaned;
|
}
|
|
/**
|
* Check if a property is a DOM reference
|
*/
|
isDOMReference(key, value) {
|
// Check value types
|
if (value instanceof HTMLElement ||
|
value instanceof NodeList ||
|
value instanceof HTMLCollection ||
|
(value && value.nodeType !== undefined)) {
|
return true;
|
}
|
|
// Check key names
|
const domKeys = ['element', 'el', 'dom', 'node', 'ui', 'container', 'wrapper'];
|
if (domKeys.some(k => key.toLowerCase().includes(k))) {
|
return true;
|
}
|
|
return false;
|
}
|
|
/**
|
* Get the key for an item based on configured keyPath
|
*/
|
getItemKey(item) {
|
if (typeof this.config.keyPath === 'function') {
|
return this.config.keyPath(item);
|
}
|
|
// Support nested keypaths like 'meta.id'
|
const keys = this.config.keyPath.split('.');
|
let value = item;
|
|
for (const key of keys) {
|
value = value?.[key];
|
}
|
|
return value;
|
}
|
|
/**
|
* Save a single item
|
*/
|
async save(item) {
|
const key = this.getItemKey(item);
|
|
// Strip DOM references if configured
|
const cleaned = this.config.stripDOMReferences
|
? this.stripDOMReferences(item)
|
: item;
|
|
// Store in memory
|
this.data.set(key, cleaned);
|
|
// Persist to IndexedDB
|
await this.saveToDB(cleaned);
|
|
// Notify subscribers
|
this.notify('item-saved', { item: cleaned, key });
|
|
return cleaned;
|
}
|
|
/**
|
* Save item to IndexedDB
|
*/
|
async saveToDB(item) {
|
if (!this.db) return;
|
|
return new Promise((resolve, reject) => {
|
const tx = this.db.transaction([this.config.storeName], 'readwrite');
|
const store = tx.objectStore(this.config.storeName);
|
const request = store.put(item);
|
|
request.onsuccess = () => resolve();
|
request.onerror = (e) => reject(e);
|
});
|
}
|
|
/**
|
* Batch save multiple items
|
*/
|
async saveMany(items) {
|
if (!this.db) return;
|
|
const tx = this.db.transaction([this.config.storeName], 'readwrite');
|
const store = tx.objectStore(this.config.storeName);
|
|
const promises = items.map(item => {
|
const cleaned = this.config.stripDOMReferences
|
? this.stripDOMReferences(item)
|
: item;
|
|
const key = this.getItemKey(cleaned);
|
this.data.set(key, cleaned);
|
|
return store.put(cleaned);
|
});
|
|
await Promise.all(promises);
|
this.notify('items-saved', { count: items.length });
|
}
|
|
/**
|
* Get a single item
|
*/
|
get(key) {
|
return this.data.get(key);
|
}
|
|
/**
|
* Get all items
|
*/
|
getAll() {
|
return Array.from(this.data.values());
|
}
|
|
/**
|
* Delete an item
|
*/
|
async delete(key, storeName = null) {
|
this.data.delete(key);
|
|
if (!storeName) {
|
storeName = this.config.storeName;
|
}
|
if (this.db) {
|
const tx = this.db.transaction([storeName], 'readwrite');
|
const store = tx.objectStore(storeName);
|
await store.delete(key);
|
}
|
|
this.notify('item-deleted', { key });
|
}
|
|
async saveBlob(key, blob) {
|
if (!this.db) return;
|
|
const tx = this.db.transaction(['blobs'], 'readwrite');
|
const store = tx.objectStore('blobs');
|
await store.put({ key, data: blob, type: blob.type, name: blob.name });
|
}
|
|
async getBlob(key) {
|
if (!this.db) return null;
|
|
return new Promise(resolve => {
|
const tx = this.db.transaction(['blobs'], 'readonly');
|
const request = tx.objectStore('blobs').get(key);
|
request.onsuccess = () => resolve(request.result);
|
request.onerror = () => resolve(null);
|
});
|
}
|
|
/**
|
* Clear all data
|
*/
|
async clear() {
|
this.data.clear();
|
this.cache.clear();
|
this.httpHeaders.clear();
|
|
if (this.domCache) {
|
this.domCache.clear();
|
}
|
|
if (this.db) {
|
const stores = [this.config.storeName];
|
if (this.config.endpoint) stores.push('cache');
|
if (this.config.useHttpCaching) stores.push('headers');
|
|
const tx = this.db.transaction(stores, 'readwrite');
|
stores.forEach(storeName => {
|
if (this.db.objectStoreNames.contains(storeName)) {
|
tx.objectStore(storeName).clear();
|
}
|
});
|
}
|
|
this.notify('data-cleared');
|
}
|
|
/**
|
* Fetch data from server with HTTP caching
|
*/
|
async fetch(options = {}) {
|
if (!this.config.endpoint) {
|
throw new Error('No endpoint configured for fetch');
|
}
|
const {
|
filters = this.filters,
|
headers = {},
|
} = options;
|
|
if (this.config.showLoading) {
|
this.setLoading(true);
|
}
|
|
const cacheKey = this.generateCacheKey(filters);
|
|
//Check Cached data
|
const cachedData = this.cache.get(cacheKey);
|
if (cachedData && this.isCacheValid(cachedData)) {
|
return cachedData.data;
|
}
|
|
// Build request headers with HTTP caching
|
const requestHeaders = {
|
...this.headers,
|
...headers
|
};
|
|
if (this.config.useHttpCaching) {
|
const httpCache = this.httpHeaders.get(cacheKey);
|
if (httpCache) {
|
if (httpCache.etag) {
|
requestHeaders['If-None-Match'] = httpCache.etag;
|
}
|
if (httpCache.lastModified) {
|
requestHeaders['If-Modified-Since'] = httpCache.lastModified;
|
}
|
}
|
}
|
|
// Build URL with filters
|
|
const cleanedFilters = this.cleanFilters(filters);
|
const params = new URLSearchParams(cleanedFilters);
|
const url = `${this.config.apiBase}${this.config.endpoint}${params.toString() ? '?' + params : ''}`;
|
|
try {
|
const response = await fetch(url, {
|
method: 'GET',
|
headers: requestHeaders
|
});
|
|
// Handle 304 Not Modified
|
if (response.status === 304 && cachedData) {
|
// Update timestamp but keep existing data
|
cachedData.timestamp = Date.now();
|
this.saveCache(cacheKey, cachedData);
|
return cachedData.data;
|
}
|
|
if (!response.ok) {
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
}
|
|
const data = await response.json();
|
|
// Store HTTP caching headers
|
if (this.config.useHttpCaching) {
|
this.storeResponseHeaders(cacheKey, response);
|
}
|
|
// Cache the response
|
const cacheEntry = {
|
key: cacheKey,
|
data: data,
|
timestamp: Date.now(),
|
endpoint: this.config.endpoint,
|
filters: filters
|
};
|
|
this.cache.set(cacheKey, cacheEntry);
|
this.saveCache(cacheKey, cacheEntry);
|
|
// Process and store items
|
if (Array.isArray(data)) {
|
await this.saveMany(data);
|
} else if (data.items) {
|
await this.saveMany(data.items);
|
}
|
|
return data;
|
|
} catch (error) {
|
console.error('Fetch error:', error);
|
|
// Return cached data if available, even if expired
|
if (cachedData) {
|
console.warn('Using stale cache due to fetch error');
|
return cachedData.data;
|
}
|
|
throw error;
|
} finally {
|
if (this.config.showLoading) {
|
this.setLoading(false);
|
}
|
}
|
}
|
|
cleanFilters(filters) {
|
const cleaned = {};
|
Object.entries(filters).forEach(([key, value]) => {
|
if (value !== null && value !== undefined && value !== '') {
|
// Handle special cases based on existing patterns
|
if (key === 'taxonomies' && typeof value === 'object') {
|
Object.entries(value).forEach(([taxName, terms]) => {
|
if (Array.isArray(terms) && terms.length > 0) {
|
cleaned[`tax_${taxName}`] = terms.join(',');
|
} else if (terms) {
|
cleaned[`tax_${taxName}`] = terms;
|
}
|
});
|
} else if (key === 'date' && typeof value === 'object') {
|
if (value.after) cleaned.after = value.after;
|
if (value.before) cleaned.before = value.before;
|
} else {
|
cleaned[key] = value;
|
}
|
}
|
});
|
return cleaned;
|
}
|
|
/**
|
* Generate cache key from filters
|
*/
|
generateCacheKey(filters) {
|
if (this.config.cacheKeyStrategy === 'custom' && this.config.generateCacheKey) {
|
return this.config.generateCacheKey(filters);
|
}
|
|
// Default strategy: sort keys and create string
|
const sorted = Object.keys(filters)
|
.sort()
|
.reduce((acc, key) => {
|
acc[key] = filters[key];
|
return acc;
|
}, {});
|
|
return JSON.stringify(sorted);
|
}
|
|
setFilter(key, value) {
|
if (!this.filters) {
|
this.filters = {};
|
}
|
const oldValue = this.filters[key];
|
|
if (value === '' || value === null || value === undefined) {
|
delete this.filters[key];
|
} else {
|
this.filters[key] = value;
|
}
|
|
this.notify('filters-changed', {
|
filters: this.filters,
|
changed: { key, oldValue, newValue: value }
|
});
|
|
// Auto-fetch if endpoint is configured
|
if (this.config.endpoint) {
|
this.fetch();
|
}
|
}
|
|
/**
|
* Remove a filter
|
*/
|
removeFilter(key) {
|
const oldValue = this.filters[key];
|
|
if (oldValue !== undefined) {
|
delete this.filters[key];
|
this.notify('filters-changed', {
|
filters: this.filters,
|
removed: { key, oldValue }
|
});
|
|
// Auto-fetch if endpoint is configured
|
if (this.config.endpoint) {
|
this.fetch();
|
}
|
}
|
}
|
|
/**
|
* Clear all filters
|
*/
|
clearFilters() {
|
const oldFilters = { ...this.filters };
|
//Restore baseline filters
|
this.filters = this.config.filters;
|
|
this.notify('filters-cleared', {
|
oldFilters,
|
filters: this.filters
|
});
|
|
// Auto-fetch if endpoint is configured
|
if (this.config.endpoint) {
|
this.fetch();
|
}
|
}
|
|
/**
|
* Set multiple filters at once
|
*/
|
setFilters(filters) {
|
this.filters = { ...this.filters, ...filters };
|
if (this.config.autoFetch !== false) {
|
return this.fetch(this.filters);
|
}
|
}
|
|
/**
|
* Check if cache entry is still valid
|
*/
|
isCacheValid(cacheEntry) {
|
if (!cacheEntry || !cacheEntry.timestamp) return false;
|
|
const age = Date.now() - cacheEntry.timestamp;
|
return age < this.config.TTL;
|
}
|
|
/**
|
* Store HTTP response headers for caching
|
*/
|
storeResponseHeaders(key, response) {
|
const headers = {
|
key,
|
etag: response.headers.get('ETag'),
|
lastModified: response.headers.get('Last-Modified'),
|
timestamp: Date.now()
|
};
|
|
this.httpHeaders.set(key, headers);
|
|
if (this.db) {
|
const tx = this.db.transaction(['headers'], 'readwrite');
|
const store = tx.objectStore('headers');
|
store.put(headers);
|
}
|
}
|
|
/**
|
* Save cache entry to IndexedDB
|
*/
|
async saveCache(key, data) {
|
if (!this.db) return;
|
|
const tx = this.db.transaction(['cache'], 'readwrite');
|
const store = tx.objectStore('cache');
|
await store.put(data);
|
}
|
|
/**
|
* Load cache from IndexedDB
|
*/
|
async loadCache() {
|
if (!this.db) return;
|
|
return new Promise((resolve) => {
|
const tx = this.db.transaction(['cache'], 'readonly');
|
const store = tx.objectStore('cache');
|
const request = store.getAll();
|
|
request.onsuccess = (e) => {
|
e.target.result.forEach(item => {
|
if (this.isCacheValid(item)) {
|
this.cache.set(item.key, item);
|
}
|
});
|
resolve();
|
};
|
});
|
}
|
|
/**
|
* Load HTTP headers from IndexedDB
|
*/
|
async loadHeaders() {
|
if (!this.db) return;
|
|
return new Promise((resolve) => {
|
const tx = this.db.transaction(['headers'], 'readonly');
|
const store = tx.objectStore('headers');
|
const request = store.getAll();
|
|
request.onsuccess = (e) => {
|
e.target.result.forEach(header => {
|
this.httpHeaders.set(header.key, header);
|
});
|
resolve();
|
};
|
});
|
}
|
|
|
/**
|
* Subscribe to store events
|
*/
|
subscribe(callback) {
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
/**
|
* Notify subscribers of events
|
*/
|
notify(event, data = {}) {
|
this.subscribers.forEach(callback => {
|
try {
|
callback(event, data);
|
} catch (error) {
|
console.error('Subscriber error:', error);
|
}
|
});
|
}
|
|
/**
|
* Query items using an index
|
*/
|
async query(indexName, value) {
|
if (!this.db) return [];
|
|
return new Promise((resolve, reject) => {
|
const tx = this.db.transaction([this.config.storeName], 'readonly');
|
const store = tx.objectStore(this.config.storeName);
|
|
if (!store.indexNames.contains(indexName)) {
|
reject(new Error(`Index ${indexName} does not exist`));
|
return;
|
}
|
|
const index = store.index(indexName);
|
const request = value !== undefined
|
? index.getAll(value)
|
: index.getAll();
|
|
request.onsuccess = (e) => {
|
const results = e.target.result.map(item => {
|
return this.config.stripDOMReferences
|
? this.stripDOMReferences(item)
|
: item;
|
});
|
resolve(results);
|
};
|
|
request.onerror = (e) => reject(e);
|
});
|
}
|
|
/**
|
* Count items in store
|
*/
|
async count() {
|
if (!this.db) return this.data.size;
|
|
return new Promise((resolve, reject) => {
|
const tx = this.db.transaction([this.config.storeName], 'readonly');
|
const store = tx.objectStore(this.config.storeName);
|
const request = store.count();
|
|
request.onsuccess = (e) => resolve(e.target.result);
|
request.onerror = (e) => reject(e);
|
});
|
}
|
|
|
setLoading(on) {
|
this.body.classList.toggle('loading', on);
|
if (on) {
|
this.loading.showModal();
|
} else {
|
this.loading.close();
|
}
|
|
}
|
|
/**
|
* Cleanup and destroy
|
*/
|
destroy() {
|
if (this.currentRequest) {
|
this.currentRequest.abort();
|
}
|
|
this.subscribers.clear();
|
this.data.clear();
|
this.cache.clear();
|
this.httpHeaders.clear();
|
|
if (this.db) {
|
this.db.close();
|
this.db = null;
|
}
|
}
|
|
clearCache() {
|
this.cache.clear();
|
|
if (this.db) {
|
const tx = this.db.transaction(['cache'], 'readwrite');
|
const store = tx.objectStore('cache');
|
store.clear();
|
}
|
|
this.notify('cache-cleared');
|
}
|
}
|
|
// Export for use
|
window.jvbStore = DataStore;
|
