@hdt-edge-products/client-pinia-vue-sdk

@hdt-edge-products/client-pinia-vue-sdk

Overview

This package is an adapter which binds the FRANk change feeds / change streams to Vue and Pinia stores to assist in UI development

Usage

The SDK exports 4 items:

• useEventActivityStore (The pinia store function for event activity)
• useItemBiddingStore, (The pinia store function for item bidding activity)
• EventRuntimePiniaVueSdk, (The main-level vue sdk that initializes and keeps the 2 above items up to date)
• eventRuntimeApiSdk (The REST api singleton for writing data into the event runtime (ex: bidding))

Here is an example of how the sdk is instantiated:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { eventRuntimeApiSdk, EventRuntimePiniaVueSdk, useEventActivityStore, useItemBiddingStore } from '@hdt-edge-products/client-pinia-vue-sdk';

const BIDDING_SERVER_URL = 'http://localhost:4030';
const DELTA_SERVER_URL = 'ws://localhost:9001';

// NOTE: Pinia and the app must be attached prior to setup/initialization of the event runtime sdk
const pinia = createPinia();
const app = createApp(App, { BIDDING_SERVER_URL, DELTA_SERVER_URL });
app.use(pinia);
useEventActivityStore();
useItemBiddingStore();

const customAuthHeaderFn = async function(){
    return Promise.resolve({Authorization: 'Bearer jwt.token.here'});
}

// The api sdk allows the user to set an async customHeader function which will be applied for REST Api calls into the sdk.
eventRuntimeApiSdk.customHeaderFn = customAuthHeaderFn;
eventRuntimeApiSdk.baseBiddingUri = BIDDING_SERVER_URL;

const sdk = new EventRuntimePiniaVueSdk(BIDDING_SERVER_URL, DELTA_SERVER_URL);
await sdk.initialize();
await sdk.watchEvents(['event-10000', 'event-20000', 'event-30000']); 

app.mount('#app');

Reference

An example pinia item bidding store is below:

import { ref } from 'vue';
import { defineStore } from 'pinia';
import { applyPatch } from 'fast-json-patch';

export const useItemBiddingStore = defineStore('itemBiddingStore', () => {
    const items = ref({});

    function addItemBidding(itemBiddingModel) {
        this.items[itemBiddingModel.id] = itemBiddingModel;
    }

    function updateItemBidding(id, itemBiddingModel) {
        this.items[id] = itemBiddingModel;
    }

    function removeItemBidding(id) {
        delete this.items[id];
    }

    function applyJsonPatch(id, jsonPatch) {
        applyPatch(this.items[id], jsonPatch, false, true);
    }

    return {
        items,
        addItemBidding,
        updateItemBidding,
        removeItemBidding,
        applyJsonPatch
    }
})

Note that the contents of these stores match the datamodel that is in the database directly - no changes or mutation. The contents are also live updated/added as changes/inserts to the database are written.