@iankibetsh/vue-streamline 1.1.9 → 1.2.2

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,6 +1,6 @@
 {
   "name": "@iankibetsh/vue-streamline",
-  "version": "1.1.9",
+  "version": "1.2.2",
   "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
  "type": "module",
   "scripts": {

package/src/App.vue

@@ -2,7 +2,7 @@
 import useStreamline from './composables/useStreamline.js'
 import { onMounted, ref, toRefs } from 'vue'
 
-const {loading, service:paybillService, getActionUrl} = useStreamline('mpesa/paybill',32)
+const {loading, service:paybillService, getActionUrl,props} = useStreamline('mpesa/paybill')
 
 
 const foundPaybill = ref(null)
@@ -21,8 +21,12 @@ const findPaybill = async ()=>{
 <template>
   <div>
     <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>
-    <h5>Found Paybill : {{ paybillService.paybill }}</h5>
     <h1 @click="findPaybill">Get Paybill</h1>
     {{ foundPaybill }}
   </div>

package/src/composables/useStreamline.js

@@ -14,6 +14,20 @@ const useStreamline = (stream, ...initialArgs) => {
     const streamlineHeaders = inject('streamlineHeaders');
     const enableCache = inject('enableCache');
 
+    const originalProps = reactive({});
+
+// Proxy to intercept access
+    const props = new Proxy(originalProps, {
+        get(target, property, receiver) {
+            if(!propertiesFetched.value) {
+                fetchServiceProperties().then(() => target[property]);
+            }
+            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
+        }
+    })
     const axios = Axios.create({
         headers: {
             ...streamlineHeaders,
@@ -31,7 +45,7 @@ const useStreamline = (stream, ...initialArgs) => {
                 stream,
                 params: initialArgs,
             });
-            assignPropertiesAndMethods(response.data);
+            assignProperties(response.data);
             enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data));
         } catch (error) {
             console.error(`Error fetching properties for stream ${stream}`, error);
@@ -43,28 +57,9 @@ const useStreamline = (stream, ...initialArgs) => {
         }
     };
 
-    const assignPropertiesAndMethods = (data) => {
+    const assignProperties = (data) => {
         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;
-                try {
-                    const response = await axios.post(streamlineUrl, {
-                        action: method,
-                        stream,
-                        ...formData,
-                        params: args,
-                    });
-                    return response.data;
-                } catch (error) {
-                    console.error(`Error calling ${method} on stream ${stream}`, error);
-                    throw error;
-                } finally {
-                    loading.value = false;
-                }
-            };
-            service[method] = fn;
-        }
+        Object.assign(originalProps, data.properties); // Assign the properties to the reactive service object
     };
 
     const handler = {
@@ -117,7 +112,7 @@ const useStreamline = (stream, ...initialArgs) => {
         if (!enableCache) return;
         const cachedData = localStorage.getItem(cacheKey);
         if (cachedData) {
-            assignPropertiesAndMethods(JSON.parse(cachedData));
+            assignProperties(JSON.parse(cachedData));
         }
         if (initialArgs.length > 0) {
             fetchServiceProperties();
@@ -129,6 +124,7 @@ const useStreamline = (stream, ...initialArgs) => {
         loading,
         service: new Proxy(service, handler),
         getActionUrl,
+        props
     };
 };
 

package/src/main.js

@@ -11,7 +11,7 @@ const app = createApp(App)
 app.use(streamline,{
     streamlineHeaders,
     streamlineUrl,
-    enableCache: true
+    enableCache: false
 })
 
 app.mount('#app')