@iankibetsh/vue-streamline 1.3.4 → 1.3.6

package/README.md

@@ -8,7 +8,7 @@ A robust Vue 3 plugin designed for seamless integration with Streamline backend
 - **Stateful Streams**: Initial arguments are persisted across all subsequent action calls.
 - **Object Argument Mapping**: Pass objects that automatically populate backend `request()` data and map to method parameters.
 - **Reactive State**: Automatically syncs public properties from your backend Stream classes.
-- **Smart Caching**: Optional local storage caching for instant data availability.
+- **Smart Caching**: IndexedDB caching for instant data availability (enabled by default).
 - **Security & Privacy**: Automatically filters out internal methods and properties from the response payload.
 
 ## 📦 Installation
@@ -30,12 +30,15 @@ const app = createApp(App);
 
 app.use(streamline, {
   streamlineUrl: "https://your-api.com/api/streamline",
-  enableCache: true, // Optional
+  enableCache: true, // Enabled by default, set to false to disable
 });
 
 app.mount("#app");
 ```
 
+> [!NOTE]
+> Caching uses **IndexedDB** (`streamline_cache` database) for persistence, offering higher storage limits and better performance than standard local storage.
+
 ### 2. Use in Components
 
 ```vue

package/package.json

@@ -1,6 +1,6 @@
 {
       "name": "@iankibetsh/vue-streamline",
-      "version": "1.3.4",
+  "version": "1.3.6",
       "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
       "type": "module",
       "scripts": {

package/src/App.vue

@@ -1,11 +1,11 @@
 <script setup>
 import useStreamline from './composables/useStreamline.js'
-import { onMounted, ref, toRefs } from 'vue'
+import { onMounted, ref, toRefs,computed } from 'vue'
 import SimpleGetActionUrl from './SimpleGetActionUrl.vue'
 
 const {loading, service:paybillService, getActionUrl,props,confirmAction} = useStreamline('mpesa/paybill',32)
 
-
+const existing = computed(()=>props.paybill)
 const foundPaybill = ref(null)
 
 onMounted(()=>{
@@ -41,6 +41,12 @@ const refresh = ()=>{
     <h1 @click="refresh">Refresh</h1>
     {{ foundPaybill }}
   </div>
+  <div class="alert alert-info">
+    <h2>Existing</h2>
+    <p>
+      {{  existing }}
+    </p>
+  </div>
   <simple-get-action-url/>
 </template>
 

package/src/composables/useStreamline.js

@@ -1,5 +1,6 @@
 import { inject, onMounted, reactive, ref } from 'vue'
 import { shApis, shRepo } from '@iankibetsh/shframework'
+import Cache from '../utils/cache'
 
 const useStreamline = (stream, ...initialArgs) => {
     let formData = {}
@@ -11,8 +12,8 @@ const useStreamline = (stream, ...initialArgs) => {
     const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`
 
     // Inject headers and API endpoint
-    const streamlineUrl = inject('streamlineUrl',window.streamlineUrl)
-    const enableCache = inject('enableCache',window.enableCache)
+    const streamlineUrl = inject('streamlineUrl', window.streamlineUrl)
+    const enableCache = inject('enableCache', window.enableCache ?? true)
 
     const originalProps = reactive({})
 
@@ -30,7 +31,7 @@ const useStreamline = (stream, ...initialArgs) => {
     })
 
     const fetchServiceProperties = async (force) => {
-        if(!force){
+        if (!force) {
             if (loading.value || propertiesFetched.value) return
         }
 
@@ -42,7 +43,9 @@ const useStreamline = (stream, ...initialArgs) => {
                 params: initialArgs
             })
             assignProperties(response.data)
-            enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data))
+            if (enableCache) {
+                await Cache.set(cacheKey, response.data)
+            }
         } catch (error) {
             console.error(`Error fetching properties for stream ${stream}`, error)
             throw error
@@ -64,10 +67,10 @@ const useStreamline = (stream, ...initialArgs) => {
             }
 
             return (...args) => {
-                if(prop === 'refresh' || prop === 'reload'){
+                if (prop === 'refresh' || prop === 'reload') {
                     return fetchServiceProperties(true)
                 }
-                if(prop === 'confirm'){
+                if (prop === 'confirm') {
                     return confirmAction(args[0] ?? 'Are you sure?')
                 }
                 let repo = null
@@ -84,7 +87,7 @@ const useStreamline = (stream, ...initialArgs) => {
                     }
                 })
                 if (confirmationMessage.value) {
-                  repo = shRepo.runPlainRequest(streamlineUrl,null, confirmationMessage.value,data)
+                    repo = shRepo.runPlainRequest(streamlineUrl, null, confirmationMessage.value, data)
                 } else {
                     repo = shApis
                         .doPost(streamlineUrl, data);
@@ -93,13 +96,13 @@ const useStreamline = (stream, ...initialArgs) => {
                 loading.value = true
                 return repo.then((response) => {
                     loading.value = false
-                    if(confirmationMessage.value){
+                    if (confirmationMessage.value) {
                         confirmationMessage.value = null
 
-                        if(!response.isConfirmed){
+                        if (!response.isConfirmed) {
                             return
                         }
-                        if(response.value?.success){
+                        if (response.value?.success) {
                             return response.value.response
                         } else {
                             // throw error
@@ -108,8 +111,8 @@ const useStreamline = (stream, ...initialArgs) => {
 
                     }
 
-                        return response.data
-                    })
+                    return response.data
+                })
                     .catch((error) => {
                         loading.value = false
                         console.error(`Error calling ${prop} on stream ${stream}`, error)
@@ -120,28 +123,15 @@ const useStreamline = (stream, ...initialArgs) => {
     }
     const getActionUrl = (action, ...args) => {
         let newStream = stream
-        if(action.includes(':')){
+        if (action.includes(':')) {
             [newStream, action] = action.split(':')
         }
         const post = {
             action,
-            stream:newStream,
+            stream: newStream,
             params: args
         }
         return `${streamlineUrl}?${new URLSearchParams(post).toString()}`
-
-        // // Add each arg as a separate param
-        // args.forEach((arg, index) => {
-        //     let value = arg;
-        //     if (typeof arg === 'object' && !(arg instanceof Date)) {
-        //         value = JSON.stringify(arg);
-        //     } else if (arg instanceof Date) {
-        //         value = arg.toISOString();
-        //     }
-        //     params.append(`params[${index}]`, value);
-        // })
-
-        // return `${streamlineUrl}?${params.toString()}`
     }
 
     const service = reactive({})
@@ -152,15 +142,16 @@ const useStreamline = (stream, ...initialArgs) => {
         return new Proxy(service, handler)
     }
 
-    onMounted(() => {
+    onMounted(async () => {
+        if (enableCache) {
+            const cachedData = await Cache.get(cacheKey)
+            if (cachedData) {
+                assignProperties(cachedData)
+            }
+        }
         if (initialArgs.length > 0) {
             fetchServiceProperties()
         }
-        if (!enableCache) return
-        const cachedData = localStorage.getItem(cacheKey)
-        if (cachedData) {
-            assignProperties(JSON.parse(cachedData))
-        }
     })
 
     return {

package/src/main.js

@@ -2,16 +2,20 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import streamline from './plugins/streamline.js'
+import { ShFrontend } from '@iankibetsh/shframework'
 
 const streamlineHeaders = {
     Authorization: 'Bearer ' + localStorage.getItem('access_token')
 }
 const streamlineUrl = 'http://2022-sharasms.test/api/streamline'
 const app = createApp(App)
+app.use(ShFrontend, {
+    baseApiUrl: 'http://2022-sharasms.test/api'
+})
 app.use(streamline,{
     streamlineHeaders,
     streamlineUrl,
-    enableCache: false
+    enableCache: true
 })
 
 app.mount('#app')

package/src/plugins/streamline.js

@@ -2,11 +2,11 @@ const streamline = {
     install(app, options) {
         app.provide('streamlineUrl', options.streamlineUrl ?? '/api/streamline')
         // app.provide('streamlineHeaders', options.streamlineHeaders)
-        app.provide('enableCache', options.enableCache)
+        app.provide('enableCache', options.enableCache ?? true)
 
         // put them on window
         window.streamlineUrl = options.streamlineUrl ?? '/api/streamline'
-        window.enableCache = options.enableCache ?? false
+        window.enableCache = options.enableCache ?? true
     }
 }
 

package/src/utils/cache.js

@@ -0,0 +1,113 @@
+const DB_NAME = 'streamline_cache'
+const STORE_NAME = 'properties'
+const DB_VERSION = 1
+
+const openDB = () => {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+        request.onupgradeneeded = (event) => {
+            const db = event.target.result
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
+                db.createObjectStore(STORE_NAME)
+            }
+        }
+
+        request.onsuccess = (event) => {
+            resolve(event.target.result)
+        }
+
+        request.onerror = (event) => {
+            reject(event.target.error)
+        }
+    })
+}
+
+const Cache = {
+    async get(key) {
+        try {
+            const db = await openDB()
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction(STORE_NAME, 'readonly')
+                const store = transaction.objectStore(STORE_NAME)
+                const request = store.get(key)
+
+                request.onsuccess = () => {
+                    resolve(request.result)
+                }
+
+                request.onerror = () => {
+                    reject(request.error)
+                }
+            })
+        } catch (error) {
+            console.error('Error getting from IndexedDB cache', error)
+            return null
+        }
+    },
+
+    async set(key, value) {
+        try {
+            const db = await openDB()
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction(STORE_NAME, 'readwrite')
+                const store = transaction.objectStore(STORE_NAME)
+                const request = store.put(value, key)
+
+                request.onsuccess = () => {
+                    resolve()
+                }
+
+                request.onerror = () => {
+                    reject(request.error)
+                }
+            })
+        } catch (error) {
+            console.error('Error setting in IndexedDB cache', error)
+        }
+    },
+
+    async delete(key) {
+        try {
+            const db = await openDB()
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction(STORE_NAME, 'readwrite')
+                const store = transaction.objectStore(STORE_NAME)
+                const request = store.delete(key)
+
+                request.onsuccess = () => {
+                    resolve()
+                }
+
+                request.onerror = () => {
+                    reject(request.error)
+                }
+            })
+        } catch (error) {
+            console.error('Error deleting from IndexedDB cache', error)
+        }
+    },
+
+    async clear() {
+        try {
+            const db = await openDB()
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction(STORE_NAME, 'readwrite')
+                const store = transaction.objectStore(STORE_NAME)
+                const request = store.clear()
+
+                request.onsuccess = () => {
+                    resolve()
+                }
+
+                request.onerror = () => {
+                    reject(request.error)
+                }
+            })
+        } catch (error) {
+            console.error('Error clearing IndexedDB cache', error)
+        }
+    }
+}
+
+export default Cache