feat: useCall, useList, useDoc

.github/workflows/vitest.yml

@@ -0,0 +1,25 @@
+name: Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run prettier check and tests
+        run: yarn test

package.json

@@ -4,8 +4,8 @@
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
-    "test": "npx prettier --check ./src",
-    "prettier": "npx prettier -w ./src",
+    "test": "vitest",
+    "prettier": "yarn prettier -w ./src",
     "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
     "dev": "vite",
     "build": "vite build",
@@ -67,13 +67,14 @@
     "@histoire/plugin-vue": "^0.17.14",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
-    "cross-fetch": "^3.1.5",
     "histoire": "^0.17.14",
     "lint-staged": ">=10",
+    "msw": "^2.7.0",
     "postcss": "^8.4.21",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
-    "vite": "^4.1.0",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8",
     "vue": "^3.3.0",
     "vue-router": "^4.1.6"
   },

src/data-fetching/docStore.ts

@@ -0,0 +1,148 @@
+import { reactive, watch, type Ref, type ComputedRef, unref } from 'vue'
+
+type Doc = {
+  doctype: string
+  name: string
+  [key: string]: any
+}
+
+type DocKey = `${string}/${string}`
+type SubscriberCallback = (doc: Doc) => void
+
+class DocStore {
+  private docs: Map<DocKey, Doc>
+  private lastFetched: Map<DocKey, number>
+  private subscribers: Map<DocKey, Set<SubscriberCallback>>
+  private cacheTimeout: number = 5 * 60 * 1000 // 5 minutes
+
+  constructor() {
+    this.docs = reactive(new Map<DocKey, Doc>())
+    this.lastFetched = new Map()
+    this.subscribers = new Map()
+  }
+
+  setDoc(doc: Doc) {
+    if (!doc?.doctype || !doc?.name) {
+      throw new Error('Invalid doc: must have doctype and name')
+    }
+    const key = this.getKey(doc.doctype, doc.name)
+    this.docs.set(key, doc)
+    this.lastFetched.set(key, Date.now())
+
+    // Notify subscribers
+    const docSubscribers = this.subscribers.get(key)
+    if (docSubscribers) {
+      docSubscribers.forEach((callback) => callback(doc))
+    }
+  }
+
+  getDoc(
+    doctype: string,
+    name: string | Ref<string> | ComputedRef<string>,
+  ): Doc | null {
+    const nameStr = unref(name)
+    if (!doctype || !nameStr) {
+      throw new Error('doctype and name are required')
+    }
+    const key = this.getKey(doctype, nameStr)
+    if (this.isStale(key)) {
+      this.cleanup(key)
+      return null
+    }
+    return this.docs.get(key) || null
+  }
+
+  setDocs(docs: Doc[]) {
+    docs.forEach((doc) => this.setDoc(doc))
+  }
+
+  invalidateDoc(doctype: string, name: string) {
+    if (!doctype || !name) return
+    const key = this.getKey(doctype, name)
+    this.cleanup(key)
+  }
+
+  subscribe(
+    doctype: string,
+    name: string | Ref<string> | ComputedRef<string>,
+    callback: SubscriberCallback,
+  ): () => void {
+    if (typeof name === 'string') {
+      return this.subscribeToKey(doctype, name, callback)
+    }
+
+    // Handle reactive name
+    const stopWatch = watch(
+      () => unref(name),
+      (newName, oldName) => {
+        if (oldName) {
+          this.unsubscribe(doctype, oldName, callback)
+        }
+        this.subscribeToKey(doctype, newName, callback)
+      },
+      { immediate: true },
+    )
+
+    // Return combined cleanup function
+    return () => {
+      stopWatch()
+      this.unsubscribe(doctype, unref(name), callback)
+    }
+  }
+
+  private subscribeToKey(
+    doctype: string,
+    name: string,
+    callback: SubscriberCallback,
+  ): () => void {
+    if (!doctype || !name || !callback) {
+      throw new Error('doctype, name, and callback are required')
+    }
+    const key = this.getKey(doctype, name)
+    if (!this.subscribers.has(key)) {
+      this.subscribers.set(key, new Set())
+    }
+    this.subscribers.get(key)?.add(callback)
+
+    return () => {
+      this.unsubscribe(doctype, name, callback)
+    }
+  }
+
+  unsubscribe(doctype: string, name: string, callback: SubscriberCallback) {
+    const key = this.getKey(doctype, name)
+    this.subscribers.get(key)?.delete(callback)
+    if (this.subscribers.get(key)?.size === 0) {
+      this.subscribers.delete(key)
+    }
+    this.lastFetched.delete(key)
+  }
+
+  private getKey(doctype: string, name: string): DocKey {
+    return `${doctype.trim()}/${name.trim()}` as DocKey
+  }
+
+  private isStale(key: DocKey): boolean {
+    const fetchTime = this.lastFetched.get(key)
+    if (!fetchTime) return true
+    return Date.now() - fetchTime > this.cacheTimeout
+  }
+
+  private cleanup(key: DocKey) {
+    this.docs.delete(key)
+    this.lastFetched.delete(key)
+    this.subscribers.delete(key)
+  }
+
+  clearAll() {
+    this.docs.clear()
+    this.lastFetched.clear()
+    // Cleanup all subscriptions
+    this.subscribers.forEach((subscribers) => {
+      subscribers.clear()
+    })
+    this.subscribers.clear()
+  }
+}
+
+export const docStore = new DocStore()

src/data-fetching/index.ts

@@ -0,0 +1,4 @@
+export { useCall } from './useCall/useCall'
+export { useList } from './useList/useList'
+export { useDoc } from './useDoc/useDoc'
+export { useFrappeFetch } from './useFrappeFetch'

src/data-fetching/useCall/types.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'vue'
+
+export type BasicParams = Record<string, any> | undefined
+
+export interface UseCallOptions<
+  TResponse = any,
+  TParams extends BasicParams = undefined,
+> {
+  url: string | Ref<string>
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
+  params?: TParams | (() => TParams)
+  cacheKey?: string | Array<string | number | boolean>
+  immediate?: boolean
+  refetch?: boolean
+  transform?: (data: TResponse) => TResponse
+  onSuccess?: (data: TResponse) => void
+  onError?: (error: Error) => void
+  baseUrl?: string
+}