@iankibetsh/vue-streamline 1.1.5 → 1.1.7

package/README.md

@@ -32,7 +32,7 @@ Vue.use(streamline, {
 import { useStreamline } from '@iankibet/vue-streamline'
 
 
-const {service:tasksService} = useStreamline('tasks')
+const {getActionUrl, service:tasksService} = useStreamline('tasks')
 
 // call the service methods
 
@@ -46,5 +46,5 @@ tasksServices.getTasks().then(response => {
 
 You can get the url to an action/method in the service by calling the getActionUrl method on the service object passing the action name and any parameters
 ```js
- tasksService.getActionUrl('getTasks', 'active')
+getActionUrl('getTasks', 'active')
  ```

package/package.json

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

package/src/App.vue

@@ -1,25 +1,30 @@
 <script setup>
 import useStreamline from './composables/useStreamline.js'
-import { ref, toRefs } from 'vue'
+import { onMounted, ref, toRefs } from 'vue'
 
-const {loading, service:paybillService, getActionUrl} = useStreamline('mpesa/paybill',3)
+const {loading, service:paybillService, getActionUrl} = useStreamline('mpesa/paybill',32)
 
 
 const foundPaybill = ref(null)
 
-
+onMounted(()=>{
+  // paybillService.getPaybill(32).then(res=>{
+  //   foundPaybill.value = res
+  // })
+})
 const findPaybill = async ()=>{
-  foundPaybill.value = await paybillService.getPaybill(3)
-  console.log(getActionUrl('getPaybill',3))
+  foundPaybill.value = await paybillService.getPaybill(32)
+  console.log(getActionUrl('getPaybill',32))
 }
 </script>
 
 <template>
   <div>
-    {{ paybill }}
     <hr/>
     <h3 class="text-success" >Loading : {{ loading }}</h3>
+    <h5>Found Paybill : {{ paybillService.paybill }}</h5>
     <h1 @click="findPaybill">Get Paybill</h1>
+    {{ foundPaybill }}
   </div>
 </template>
 

package/src/composables/useStreamline.js

@@ -1,86 +1,135 @@
-import Axios from 'axios'
-import { inject, onMounted, reactive, ref, toRefs } from 'vue'
+import Axios from 'axios';
+import { inject, onMounted, reactive, ref } from 'vue';
 
 const useStreamline = (stream, ...initialArgs) => {
-    let formData = {}
-    const loading = ref(false)
+    let formData = {};
+    const loading = ref(false);
+    const propertiesFetched = ref(false);
+    const fetching = ref(false);
+    // cache key for local storage, include initialArgs in the key
+    const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`;
 
-    // Inject headers and apiEndpoint
-    const streamlineUrl = inject('streamlineUrl')
-    const streamlineHeaders = inject('streamlineHeaders')
+    // Inject headers and API endpoint
+    const streamlineUrl = inject('streamlineUrl');
+    const streamlineHeaders = inject('streamlineHeaders');
+    const enableCache = inject('enableCache');
 
     const axios = Axios.create({
         headers: {
-            ...streamlineHeaders
-        }
-    })
-
-    const service = reactive({}) // Make the service object reactive
+            ...streamlineHeaders,
+        },
+    });
 
-    // Function to fetch the public properties of the service class
     const fetchServiceProperties = async () => {
+        if (loading.value || fetching.value || propertiesFetched.value) return;
+        fetching.value = true;
+
         try {
-            loading.value = true
+            loading.value = true;
             const response = await axios.post(streamlineUrl, {
                 action: 'onMounted',
                 stream,
-                params: initialArgs
-            })
-            assignPropertiesAndMethods(response.data)
+                params: initialArgs,
+            });
+            assignPropertiesAndMethods(response.data);
+            enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data));
         } catch (error) {
-            console.error(`Error fetching properties for stream ${stream}`, error)
-            throw error
+            console.error(`Error fetching properties for stream ${stream}`, error);
+            throw error;
         } finally {
-            loading.value = false
+            propertiesFetched.value = true;
+            fetching.value = false;
+            loading.value = false;
         }
-    }
+    };
 
-
-    // Function to assign properties and methods to the service object
     const assignPropertiesAndMethods = (data) => {
-        Object.assign(service, data.properties) // Assign the properties to the reactive service object
+        Object.assign(service, data.properties); // Assign the properties to the reactive service object
         for (const method of data.methods) {
             const fn = async (...args) => {
-                loading.value = true
+                loading.value = true;
                 try {
                     const response = await axios.post(streamlineUrl, {
                         action: method,
                         stream,
                         ...formData,
-                        params: args
-                    })
-                    return response.data
+                        params: args,
+                    });
+                    return response.data;
                 } catch (error) {
-                    console.error(`Error calling ${method} on stream ${stream}`, error)
-                    throw error
+                    console.error(`Error calling ${method} on stream ${stream}`, error);
+                    throw error;
                 } finally {
-                    loading.value = false
+                    loading.value = false;
                 }
-            }
-            service[method] = fn
+            };
+            service[method] = fn;
         }
-    }
+    };
 
-    const getActionUrl = (action, ...args) => {
-       // console log all arguments to this
+    const handler = {
+        get(target, prop, receiver) {
+            // Fetch properties if not already fetched
+            if (!propertiesFetched.value && !loading.value) {
+                fetchServiceProperties().then(() => target[prop]);
+            }
+
+            // Handle existing properties
+            if (prop in target) {
+                return target[prop];
+            }
+            // Handle nonexistent properties or dynamic methods
+            return (...args) => {
+                loading.value = true;
+                return axios
+                    .post(streamlineUrl, {
+                        action: prop,
+                        stream,
+                        ...formData,
+                        params: args,
+                    })
+                    .then((response) => {
+                        loading.value = false;
+                        return response.data;
+                    })
+                    .catch((error) => {
+                        loading.value = false;
+                        console.error(`Error calling ${prop} on stream ${stream}`, error);
+                        throw error;
+                    });
+            };
+        },
+    };
 
+    const getActionUrl = (action, ...args) => {
+        console.log('getActionUrl called with:', action, args);
         const post = {
             action,
             stream,
-            params: args
+            params: args,
+        };
+        return `${streamlineUrl}?${new URLSearchParams(post).toString()}`;
+    };
+
+    const service = reactive({}); // Make the service object reactive
+
+    onMounted(() => {
+        if (initialArgs.length > 0) {
+            fetchServiceProperties();
+        }
+        if (!enableCache) return;
+        const cachedData = localStorage.getItem(cacheKey);
+        if (cachedData) {
+            assignPropertiesAndMethods(JSON.parse(cachedData));
         }
-        return streamlineUrl + '?' + new URLSearchParams(post).toString()
 
-    }
-    onMounted(()=>{
-        fetchServiceProperties()
-    })
+    });
 
     return {
         loading,
-        service,
-        getActionUrl
-    }
-}
+        service: new Proxy(service, handler),
+        getActionUrl,
+    };
+};
 
-export default useStreamline
+export default useStreamline;

package/src/main.js

@@ -10,7 +10,8 @@ const streamlineUrl = 'http://2022-sharasms.test/api/streamline'
 const app = createApp(App)
 app.use(streamline,{
     streamlineHeaders,
-    streamlineUrl
+    streamlineUrl,
+    enableCache: false
 })
 
 app.mount('#app')

package/src/plugins/streamline.js

@@ -2,6 +2,7 @@ const streamline = {
     install(app, options) {
         app.provide('streamlineUrl', options.streamlineUrl)
         app.provide('streamlineHeaders', options.streamlineHeaders)
+        app.provide('enableCache', options.enableCache)
     }
 }
 

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>