@iankibetsh/vue-streamline 1.2.0 → 1.2.3

package/README.md

@@ -32,11 +32,19 @@ Vue.use(streamline, {
 import { useStreamline } from '@iankibet/vue-streamline'
 
 
-const {getActionUrl, service:tasksService} = useStreamline('tasks')
+const {getActionUrl, service:tasksService, props} = useStreamline('tasks')
 
-// call the service methods
+```
+
+## Calling an action/method in the service
+
+You can call an action/method in the service by calling the method on the service object
+```js
+const res = await tasksService.getTasks()
+
+// or
 
-tasksServices.getTasks().then(response => {
+tasksService.getTasks().then(response => {
     console.log(response)
 })
 ```
@@ -47,4 +55,14 @@ 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
 getActionUrl('getTasks', 'active')
- ```
+ ```
+
+## Accessing class properties
+In your template just access the props object to get the class properties
+```html
+<template>
+    <div>
+        <h1>{{props.title}}</h1>
+    </div>
+</template>
+```

package/package.json

@@ -1,30 +1,28 @@
 {
-  "name": "@iankibetsh/vue-streamline",
-  "version": "1.2.0",
-  "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
- "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "exports": {
-    ".": "./src/index.js"
-  },
-  "keywords": [],
-  "author": "Iankibet",
-  "license": "ISC",
-  "peerDependencies": {
-  },
-  "dependencies": {
-    "axios": "^1.7.3",
-    "vue": "^3.2.4"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.2",
-    "vite": "^5.4.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+      "name": "@iankibetsh/vue-streamline",
+      "version": "1.2.3",
+      "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
+      "type": "module",
+      "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+      },
+      "exports": {
+        ".": "./src/index.js"
+      },
+      "keywords": [],
+      "author": "Iankibet",
+      "license": "ISC",
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.1.2",
+        "vite": "^5.4.1"
+      },
+      "peerDependencies": {
+        "@iankibetsh/shframework": "^5",
+        "vue": "^3"
+      },
+      "publishConfig": {
+        "access": "public"
+      }
+    }

package/src/App.vue

@@ -23,6 +23,9 @@ const findPaybill = async ()=>{
     <hr/>
     <h3>Destructed: {{ testKey }}</h3>
     <h3>Original: {{ props.testKey }}</h3>
+    <h3>Original: {{ props.testKey }}</h3>
+    <h3>Original: {{ props.testKey }}</h3>
+    <h3>Original: {{ props.testKey }}</h3>
     <h3 class="text-success" >Loading : {{ loading }}</h3>
     <h1 @click="findPaybill">Get Paybill</h1>
     {{ foundPaybill }}

package/src/composables/useStreamline.js

@@ -1,126 +1,125 @@
-import Axios from 'axios';
-import { inject, onMounted, reactive, ref } from 'vue';
+import { inject, onMounted, reactive, ref } from 'vue'
+import { shApis } from '@iankibetsh/shframework'
 
 const useStreamline = (stream, ...initialArgs) => {
-    let formData = {};
-    const loading = ref(false);
-    const propertiesFetched = ref(false);
-    const fetching = 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('_')}`;
+    const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`
 
     // Inject headers and API endpoint
-    const streamlineUrl = inject('streamlineUrl');
-    const streamlineHeaders = inject('streamlineHeaders');
-    const enableCache = inject('enableCache');
+    const streamlineUrl = inject('streamlineUrl')
+    const enableCache = inject('enableCache')
 
-    const originalProps = reactive({});
+    const originalProps = reactive({})
 
 // Proxy to intercept access
     const props = new Proxy(originalProps, {
         get(target, property, receiver) {
-            if(!propertiesFetched.value) {
-                fetchServiceProperties().then(() => target[property]);
+            if (!propertiesFetched.value) {
+                fetchServiceProperties().then(() => target[property])
             }
-            return Reflect.get(target, property, receiver); // Return the actual value
+            return Reflect.get(target, property, receiver) // Return the actual value
         },
         set(target, property, value, receiver) {
-            return Reflect.set(target, property, value, receiver); // Update the value
+            return Reflect.set(target, property, value, receiver) // Update the value
         }
     })
-    const axios = Axios.create({
-        headers: {
-            ...streamlineHeaders,
-        },
-    });
 
     const fetchServiceProperties = async () => {
-        if (loading.value || fetching.value || propertiesFetched.value) return;
-        fetching.value = true;
+        if (loading.value || fetching.value || propertiesFetched.value) return
+        fetching.value = true
 
         try {
-            loading.value = true;
-            const response = await axios.post(streamlineUrl, {
+            loading.value = true
+            const response = await shApis.doPost(streamlineUrl, {
                 action: 'onMounted',
                 stream,
-                params: initialArgs,
-            });
-            assignProperties(response.data);
-            enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data));
+                params: initialArgs
+            })
+            assignProperties(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 {
-            propertiesFetched.value = true;
-            fetching.value = false;
-            loading.value = false;
+            propertiesFetched.value = true
+            fetching.value = false
+            loading.value = false
         }
-    };
+    }
 
     const assignProperties = (data) => {
-        Object.assign(service, data.properties); // Assign the properties to the reactive service object
-        Object.assign(originalProps, data.properties); // Assign the properties to the reactive service object
-    };
+        Object.assign(service, data.properties) // Assign the properties to the reactive service object
+        Object.assign(originalProps, data.properties) // Assign the properties to the reactive service object
+    }
 
     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];
+                return target[prop]
             }
             // Handle nonexistent properties or dynamic methods
             return (...args) => {
-                loading.value = true;
-                return axios
-                    .post(streamlineUrl, {
+                loading.value = true
+                return shApis
+                    .doPost(streamlineUrl, {
                         action: prop,
                         stream,
                         ...formData,
-                        params: args,
+                        params: args
                     })
                     .then((response) => {
-                        loading.value = false;
-                        return response.data;
+                        loading.value = false
+                        return response.data
                     })
                     .catch((error) => {
-                        loading.value = false;
-                        console.error(`Error calling ${prop} on stream ${stream}`, error);
-                        throw 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,
-        };
-        return `${streamlineUrl}?${new URLSearchParams(post).toString()}`;
-    };
+            params: args
+        }
+        return `${streamlineUrl}?${new URLSearchParams(post).toString()}`
+    }
 
-    const service = reactive({}); // Make the service object reactive
+    const service = reactive({}) // Make the service object reactive
 
     onMounted(() => {
-        if (!enableCache) return;
-        const cachedData = localStorage.getItem(cacheKey);
+        if (!enableCache) return
+        const cachedData = localStorage.getItem(cacheKey)
         if (cachedData) {
-            assignProperties(JSON.parse(cachedData));
+            assignProperties(JSON.parse(cachedData))
         }
         if (initialArgs.length > 0) {
-            fetchServiceProperties();
+            fetchServiceProperties()
         }
 
-    });
+    })
 
     return {
         loading,
         service: new Proxy(service, handler),
         getActionUrl,
         props
-    };
-};
+    }
+}
 
-export default useStreamline;
+export default useStreamline

package/src/plugins/streamline.js

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