@iankibetsh/vue-streamline 1.3.6 → 2.0.0

package/README.md

@@ -1,4 +1,7 @@
-# Streamline Vue Plugin
+# Streamline Vue Plugin (DEPRECATED — moved into @iankibetsh/sh-core)
+
+
+> **⚠️ Deprecated as of v2.** The streamline implementation now ships inside [`@iankibetsh/sh-core`](https://www.npmjs.com/package/@iankibetsh/sh-core) — import `useStreamline` / `getActionUrl` from there. v2 of this package is a thin re-export shim kept for backward compatibility; the `streamlineHeaders` option is ignored (auth is handled by the sh-core API client).
 
 A robust Vue 3 plugin designed for seamless integration with Streamline backend services. It delivers reactive state management, intelligent caching, and dynamic action invocation.
 

package/package.json

@@ -1,28 +1,33 @@
 {
-      "name": "@iankibetsh/vue-streamline",
-  "version": "1.3.6",
-      "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": "^6",
-        "vite": "^7"
-      },
-      "peerDependencies": {
-        "@iankibetsh/shframework": "^5",
-        "vue": "^3"
-      },
-      "publishConfig": {
-        "access": "public"
-      }
-    }
+  "name": "@iankibetsh/vue-streamline",
+  "version": "2.0.0",
+  "description": "DEPRECATED compatibility shim: streamline now lives in @iankibetsh/sh-core. 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"
+  },
+  "files": [
+    "src/index.js",
+    "src/plugins"
+  ],
+  "keywords": [],
+  "author": "Iankibet",
+  "license": "ISC",
+  "devDependencies": {
+    "@iankibetsh/sh-core": "file:../sh-core",
+    "@vitejs/plugin-vue": "^6",
+    "vite": "^8"
+  },
+  "peerDependencies": {
+    "@iankibetsh/sh-core": "^1",
+    "vue": "^3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.js

@@ -1,8 +1,7 @@
-import useStreamline from './composables/useStreamline.js'
-import getActionUrl from './composables/getActionUrl.js'
+// v2: vue-streamline is a compatibility shim over @iankibetsh/sh-core,
+// which now ships streamline as a first-class module. New code should
+// import from '@iankibetsh/sh-core' directly.
 import streamline from './plugins/streamline.js'
-export {
-    useStreamline,
-    getActionUrl,
-    streamline
-}
+
+export { useStreamline, getActionUrl } from '@iankibetsh/sh-core'
+export { streamline }

package/src/plugins/streamline.js

@@ -1,13 +1,21 @@
+// v2: thin compat shim. The streamline implementation now lives in
+// @iankibetsh/sh-core; this plugin only maps the old options onto the
+// injection keys / window globals the core composable reads.
 const streamline = {
-    install(app, options) {
-        app.provide('streamlineUrl', options.streamlineUrl ?? '/api/streamline')
-        // app.provide('streamlineHeaders', options.streamlineHeaders)
-        app.provide('enableCache', options.enableCache ?? true)
-
-        // put them on window
-        window.streamlineUrl = options.streamlineUrl ?? '/api/streamline'
-        window.enableCache = options.enableCache ?? true
+    install (app, options = {}) {
+        const streamlineUrl = options.streamlineUrl ?? '/api/streamline'
+        const enableCache = options.enableCache ?? true
+
+        app.provide('streamlineUrl', streamlineUrl)
+        app.provide('enableCache', enableCache)
+
+        window.streamlineUrl = streamlineUrl
+        window.enableCache = enableCache
+
+        if (options.streamlineHeaders) {
+            console.warn('[vue-streamline] `streamlineHeaders` is deprecated and ignored: requests are authenticated by the @iankibetsh/sh-core API client (bearer or cookie strategy).')
+        }
     }
 }
 
-export default streamline
+export default streamline

package/.github/workflows/npm-publish.yml

@@ -1,34 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm ci
-      # - run: npm test
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

package/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Streamline Framework</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

package/public/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>

package/src/App.vue

@@ -1,66 +0,0 @@
-<script setup>
-import useStreamline from './composables/useStreamline.js'
-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(()=>{
-  // paybillService.getPaybill(32).then(res=>{
-  //   foundPaybill.value = res
-  // })
-})
-const findPaybill = async ()=>{
-  // const res = confirmAction('Are you sure?')
-  // res.getPaybill(32).then(res=>{
-  //   foundPaybill.value = res
-  // })
-  foundPaybill.value =  await  paybillService.confirm().getPaybill(32, {name: 'ian'})
-      .catch(err=>{
-    console.log(err)
-  })
-}
-const refresh = ()=>{
-  paybillService.refresh()
-}
-</script>
-
-<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>
-    <h1 @click="findPaybill">Get Paybill</h1>
-    <h1 @click="refresh">Refresh</h1>
-    {{ foundPaybill }}
-  </div>
-  <div class="alert alert-info">
-    <h2>Existing</h2>
-    <p>
-      {{  existing }}
-    </p>
-  </div>
-  <simple-get-action-url/>
-</template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

package/src/SimpleGetActionUrl.vue

@@ -1,11 +0,0 @@
-<script setup>
-import getActionUrl from './composables/getActionUrl.js'
-</script>
-
-<template>
-<h3>Sample Action Url: {{ getActionUrl('users:listUsers','admin','active') }}</h3>
-</template>
-
-<style scoped>
-
-</style>

package/src/composables/getActionUrl.js

@@ -1,7 +0,0 @@
-import useStreamline from './useStreamline.js'
-
-
-export default function getActionUrl(actionSlug, ...args) {
-    const { getActionUrl } = useStreamline('')
-    return getActionUrl(actionSlug, ...args)
-}

package/src/composables/useStreamline.js

@@ -1,166 +0,0 @@
-import { inject, onMounted, reactive, ref } from 'vue'
-import { shApis, shRepo } from '@iankibetsh/shframework'
-import Cache from '../utils/cache'
-
-const useStreamline = (stream, ...initialArgs) => {
-    let formData = {}
-    const loading = ref(false)
-    const propertiesFetched = ref(false)
-    const confirmationMessage = ref(null)
-
-    // Cache key for local storage, include initialArgs in the key
-    const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`
-
-    // Inject headers and API endpoint
-    const streamlineUrl = inject('streamlineUrl', window.streamlineUrl)
-    const enableCache = inject('enableCache', window.enableCache ?? true)
-
-    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 fetchServiceProperties = async (force) => {
-        if (!force) {
-            if (loading.value || propertiesFetched.value) return
-        }
-
-        try {
-            loading.value = true
-            const response = await shApis.doPost(streamlineUrl, {
-                action: 'onMounted',
-                stream,
-                params: initialArgs
-            })
-            assignProperties(response.data)
-            if (enableCache) {
-                await Cache.set(cacheKey, response.data)
-            }
-        } catch (error) {
-            console.error(`Error fetching properties for stream ${stream}`, error)
-            throw error
-        } finally {
-            propertiesFetched.value = true
-            loading.value = false
-        }
-    }
-
-    const assignProperties = (data) => {
-        Object.assign(service, data.properties)
-        Object.assign(originalProps, data.properties)
-    }
-
-    const handler = {
-        get(target, prop, receiver) {
-            if (prop in target) {
-                return target[prop]
-            }
-
-            return (...args) => {
-                if (prop === 'refresh' || prop === 'reload') {
-                    return fetchServiceProperties(true)
-                }
-                if (prop === 'confirm') {
-                    return confirmAction(args[0] ?? 'Are you sure?')
-                }
-                let repo = null
-                const data = {
-                    action: prop,
-                    stream,
-                    ...formData,
-                    params: args,
-                    initialParams: initialArgs
-                }
-                args.forEach(arg => {
-                    if (arg && typeof arg === 'object' && !Array.isArray(arg)) {
-                        Object.assign(data, arg)
-                    }
-                })
-                if (confirmationMessage.value) {
-                    repo = shRepo.runPlainRequest(streamlineUrl, null, confirmationMessage.value, data)
-                } else {
-                    repo = shApis
-                        .doPost(streamlineUrl, data);
-                }
-
-                loading.value = true
-                return repo.then((response) => {
-                    loading.value = false
-                    if (confirmationMessage.value) {
-                        confirmationMessage.value = null
-
-                        if (!response.isConfirmed) {
-                            return
-                        }
-                        if (response.value?.success) {
-                            return response.value.response
-                        } else {
-                            // throw error
-                            throw response.value.error
-                        }
-
-                    }
-
-                    return response.data
-                })
-                    .catch((error) => {
-                        loading.value = false
-                        console.error(`Error calling ${prop} on stream ${stream}`, error)
-                        throw error
-                    })
-            }
-        }
-    }
-    const getActionUrl = (action, ...args) => {
-        let newStream = stream
-        if (action.includes(':')) {
-            [newStream, action] = action.split(':')
-        }
-        const post = {
-            action,
-            stream: newStream,
-            params: args
-        }
-        return `${streamlineUrl}?${new URLSearchParams(post).toString()}`
-    }
-
-    const service = reactive({})
-
-    // Confirmation wrapper
-    const confirmAction = (message) => {
-        confirmationMessage.value = message
-        return new Proxy(service, handler)
-    }
-
-    onMounted(async () => {
-        if (enableCache) {
-            const cachedData = await Cache.get(cacheKey)
-            if (cachedData) {
-                assignProperties(cachedData)
-            }
-        }
-        if (initialArgs.length > 0) {
-            fetchServiceProperties()
-        }
-    })
-
-    return {
-        loading,
-        service: new Proxy(service, handler),
-        getActionUrl,
-        confirmAction,
-        props
-    }
-}
-
-export default useStreamline

package/src/main.js

@@ -1,21 +0,0 @@
-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: true
-})
-
-app.mount('#app')

package/src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/utils/cache.js

@@ -1,113 +0,0 @@
-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

package/vite.config.js

@@ -1,23 +0,0 @@
-// vite.config.js
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-export default defineConfig({
-  plugins: [vue()],
-  build: {
-    lib: {
-      entry: './src/index.js',
-      name: 'VueStreamline',
-      fileName: (format) => `vue-streamline.${format}.js`,
-    },
-    rollupOptions: {
-      // Make sure to externalize deps that shouldn't be bundled into your library
-      external: ['vue'],
-      output: {
-        globals: {
-          vue: 'Vue',
-        },
-      },
-    },
-  },
-});