zova-module-a-model 5.0.18 → 5.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-model",
-  "version": "5.0.18",
+  "version": "5.0.22",
   "title": "a-model",
   "zovaModule": {
     "capabilities": {
@@ -55,5 +55,5 @@
     "@tanstack/vue-query": "^5.45.0",
     "localforage": "^1.10.0"
   },
-  "gitHead": "38b917802862663cf6c2e6829857de9a2a742dcd"
+  "gitHead": "32f556ffbbe6864613db3b5a50adc3fb259411d9"
 }

package/src/bean/bean.model/bean.model.cookie.ts

@@ -1,12 +1,13 @@
 import { Query } from '@tanstack/vue-query';
-import { BeanModelPersister } from './bean.model.persister.js';
+import { BeanModelLocal } from './bean.model.local.js';
+import { QueryMetaPersisterCookieType } from '../../types.js';
 
-export class BeanModelCookie<TScopeModule = unknown> extends BeanModelPersister<TScopeModule> {
+export class BeanModelCookie<TScopeModule = unknown> extends BeanModelLocal<TScopeModule> {
   $serializeCookie(obj?: Query) {
     return String(obj?.state?.data ?? '');
   }
 
-  $deserializeCookie(value?: string) {
+  $deserializeCookie(value?: any) {
     return {
       state: {
         data: value,
@@ -27,4 +28,20 @@ export class BeanModelCookie<TScopeModule = unknown> extends BeanModelPersister<
       buster: this._getPersisterBuster(),
     };
   }
+
+  protected _cookieCoerce(value?: string, cookieType?: QueryMetaPersisterCookieType) {
+    if (value === undefined || value === '') return undefined; // string of '' means should delete the cookie
+    if (!cookieType || cookieType === 'auto') {
+      return value === 'true' ? true : value === 'false' ? false : value;
+    } else if (cookieType === 'boolean') {
+      return value === 'true' ? true : value === 'false' ? false : Boolean(Number(value));
+    } else if (cookieType === 'number') {
+      return Number(value);
+    } else if (cookieType === 'date') {
+      return new Date(value);
+    } else if (cookieType === 'string') {
+      return value;
+    }
+    return value;
+  }
 }

package/src/bean/bean.model/bean.model.local.ts

@@ -0,0 +1,30 @@
+import { Query } from '@tanstack/vue-query';
+import { BeanModelPersister } from './bean.model.persister.js';
+
+export class BeanModelLocal<TScopeModule = unknown> extends BeanModelPersister<TScopeModule> {
+  $serializeLocal(obj?: Query) {
+    return JSON.stringify(obj?.state?.data);
+  }
+
+  $deserializeLocal(value?: string) {
+    return {
+      state: {
+        data: value ? JSON.parse(value) : undefined,
+        dataUpdateCount: 0,
+        dataUpdatedAt: Date.now(),
+        error: null,
+        errorUpdateCount: 0,
+        errorUpdatedAt: 0,
+        fetchFailureCount: 0,
+        fetchFailureReason: null,
+        fetchMeta: null,
+        isInvalidated: false,
+        status: 'success',
+        fetchStatus: 'idle',
+      },
+      queryKey: undefined,
+      queryHash: undefined,
+      buster: this._getPersisterBuster(),
+    };
+  }
+}

package/src/bean/bean.model/bean.model.persister.ts

@@ -1,9 +1,10 @@
-import { QueryMetaPersister } from '../../types.js';
+import { QueryMetaPersister, resolveMaxAgeTime } from '../../types.js';
 import { experimental_createPersister } from '@tanstack/query-persist-client-core';
 import { Query, QueryKey } from '@tanstack/vue-query';
 import localforage from 'localforage';
 import { SymbolBeanFullName } from 'zova';
 import { BeanModelLast } from './bean.model.last.js';
+import { CookieWrapper } from '../../common/cookieWrapper.js';
 
 export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TScopeModule> {
   $persisterLoad<T>(queryKey: QueryKey): T | undefined {
@@ -11,7 +12,7 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
     if (!query) return undefined;
     const options = this._adjustPersisterOptions(query.meta?.persister);
     if (!options) return undefined;
-    const storage = this._getPersisterStorage(options);
+    const storage = this._getPersisterStorage(options, query);
     if (!storage) return undefined;
     const storageKey = this._getPersisterStorageKey(options, query);
     try {
@@ -21,7 +22,7 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
 
       if (persistedQuery.state.dataUpdatedAt) {
         const queryAge = Date.now() - persistedQuery.state.dataUpdatedAt;
-        const expired = queryAge > options.maxAge!;
+        const expired = queryAge > (resolveMaxAgeTime(options.maxAge, query) ?? Infinity);
         const busted = persistedQuery.buster !== options.buster;
         if (expired || busted) {
           storage.removeItem(storageKey);
@@ -50,7 +51,7 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
     if (!query) return;
     const options = this._adjustPersisterOptions(query.meta?.persister);
     if (!options) return;
-    const storage = this._getPersisterStorage(options);
+    const storage = this._getPersisterStorage(options, query);
     if (!storage) return;
     const storageKey = this._getPersisterStorageKey(options, query);
     const data = options.serialize!({
@@ -74,7 +75,7 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
     if (!query) return;
     const options = this._adjustPersisterOptions(query.meta?.persister);
     if (!options) return;
-    const storage = this._getPersisterStorage(options);
+    const storage = this._getPersisterStorage(options, query);
     if (!storage) return;
     const storageKey = this._getPersisterStorageKey(options, query);
     if (options.sync === true) {
@@ -92,7 +93,7 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
     if (!options) return undefined;
     return experimental_createPersister({
       storage: this._getPersisterStorage(options) as any,
-      maxAge: options.maxAge,
+      maxAge: options.maxAge as number,
       prefix: options.prefix,
       buster: options.buster,
     });
@@ -106,9 +107,7 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
       options = { ...options };
     }
     options.storage = options.storage ?? (options.sync ? 'local' : 'db');
-    options.maxAge =
-      options.maxAge ??
-      (options.sync ? this.scopeSelf.config.persister.sync.maxAge : this.scopeSelf.config.persister.async.maxAge);
+    options.maxAge = options.maxAge ?? this.scopeSelf.config.persister.maxAge[options.storage];
     options.prefix = options.prefix ?? this._getPersisterPrefix();
     options.buster = options.buster ?? this._getPersisterBuster();
     options.serialize = options.serialize ?? JSON.stringify;
@@ -117,15 +116,20 @@ export class BeanModelPersister<TScopeModule = unknown> extends BeanModelLast<TS
   }
 
   protected _getPersisterStorageKey(options: QueryMetaPersister, query: Query) {
-    if (options.storage === 'cookie') return String(query.queryKey[query.queryKey.length - 1]);
+    if (['cookie', 'local'].includes(options.storage!)) return String(query.queryKey[query.queryKey.length - 1]);
     return `${options.prefix}-${query.queryHash}`;
   }
 
-  protected _getPersisterStorage(options?: QueryMetaPersister | boolean) {
+  protected _getPersisterStorage(options?: QueryMetaPersister | boolean, query?: Query) {
     options = this._adjustPersisterOptions(options);
     if (!options) return undefined;
-    if (options.storage === 'cookie') return this.app.meta.cookie;
+    // cookie
+    if (options.storage === 'cookie') return this.bean._newBeanSimple(CookieWrapper, false, options, query);
+    // check server
+    if (process.env.SERVER) return undefined;
+    // local
     if (options.storage === 'local') return localStorage;
+    // db
     if (options.storage === 'db') return localforage;
   }
 

package/src/bean/bean.model/bean.model.useQuery.ts

@@ -13,6 +13,7 @@ import { UnwrapNestedRefs } from 'vue';
 import { useCustomRef } from 'zova';
 import { DefinedInitialQueryOptions, UndefinedInitialQueryOptions } from '../../common/types.js';
 import { BeanModelQuery } from './bean.model.query.js';
+import { resolveStaleTime } from '../../types.js';
 
 const SymbolUseQueries = Symbol('SymbolUseQueries');
 
@@ -35,6 +36,19 @@ export class BeanModelUseQuery<TScopeModule = unknown> extends BeanModelQuery<TS
     const queryKey = this.self._forceQueryKeyPrefix(options.queryKey);
     const persister = this._createPersister(options.meta?.persister);
     options = { ...options, queryKey, persister };
+    // staleTime
+    const sync = typeof options.meta?.persister === 'object' && options.meta?.persister?.sync;
+    if (sync !== true) {
+      const staleTime = options.staleTime ?? this.scopeSelf.config.query.staleTime.async;
+      const queryCache = this.$queryFind({ queryKey });
+      const queryCacheExists = queryCache?.state.data !== undefined;
+      options.staleTime = query => {
+        if (process.env.CLIENT && this.ctx.meta.ssr.isRuntimeSsrPreHydration && queryCacheExists) {
+          return resolveStaleTime(this.scopeSelf.config.query.staleTime.ssr, query);
+        }
+        return resolveStaleTime(staleTime, query);
+      };
+    }
     return this.ctx.meta.util.instanceScope(() => {
       return useQuery(options, queryClient);
     });
@@ -59,13 +73,28 @@ export class BeanModelUseQuery<TScopeModule = unknown> extends BeanModelQuery<TS
     TQueryKey extends QueryKey = QueryKey,
   >(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, queryClient?: QueryClient): TData;
   $useQueryLocal(options, queryClient) {
-    options = this.app.meta.util.extend({}, options, {
-      enabled: false,
-      staleTime: Infinity,
-      meta: {
-        persister: { storage: 'local', sync: true },
+    options = this.app.meta.util.extend(
+      {
+        meta: {
+          persister: {
+            serialize: (obj?: Query) => {
+              return this.$serializeLocal(obj);
+            },
+            deserialize: (value?: string) => {
+              return this.$deserializeLocal(value);
+            },
+          },
+        },
       },
-    });
+      options,
+      {
+        enabled: false,
+        staleTime: Infinity,
+        meta: {
+          persister: { storage: 'local', sync: true },
+        },
+      },
+    );
     const self = this;
     return useCustomRef(() => {
       return {
@@ -114,7 +143,8 @@ export class BeanModelUseQuery<TScopeModule = unknown> extends BeanModelQuery<TS
               return this.$serializeCookie(obj);
             },
             deserialize: (value?: string) => {
-              return this.$deserializeCookie(value);
+              const cookieType = options.meta.persister.cookieType;
+              return this.$deserializeCookie(this._cookieCoerce(value, cookieType));
             },
           },
         },

package/src/bean/local.storage.ts

@@ -0,0 +1,40 @@
+import { BeanBase, Local } from 'zova';
+import { ScopeModule } from '../resource/this.js';
+import { dehydrate, hydrate, QueryClient, VueQueryPlugin, VueQueryPluginOptions } from '@tanstack/vue-query';
+
+@Local()
+export class LocalStorage extends BeanBase<ScopeModule> {
+  protected async __init__() {
+    // options
+    let options = this.scope.config.queryClientConfig.defaultOptions;
+    if (process.env.SERVER) {
+      options = this.app.meta.util.extend({}, options, {
+        queries: { gcTime: Infinity },
+      });
+    }
+    // queryClient
+    const queryClient = new QueryClient({
+      defaultOptions: options,
+    });
+    // use plugin
+    const vueQueryPluginOptions: VueQueryPluginOptions = { queryClient };
+    this.app.vue.use(VueQueryPlugin, vueQueryPluginOptions);
+    // onRendered
+    if (process.env.SERVER) {
+      this.ctx.meta.ssr.context.onRendered(() => {
+        this.ctx.meta.ssr.state.query = dehydrate(queryClient, {
+          shouldDehydrateMutation: () => {
+            return false;
+          },
+        });
+        queryClient.clear();
+      });
+    }
+    // client
+    if (process.env.CLIENT && this.ctx.meta.ssr.isRuntimeSsrPreHydration) {
+      hydrate(queryClient, this.ctx.meta.ssr.state.query);
+    }
+  }
+
+  protected __dispose__() {}
+}

package/src/common/cookieWrapper.ts

@@ -0,0 +1,36 @@
+import { Query } from '@tanstack/vue-query';
+import { BeanSimple, CookieOptions } from 'zova';
+import { QueryMetaPersister, resolveMaxAgeTime } from '../types.js';
+import { __ThisModule__ } from '../resource/this.js';
+
+export class CookieWrapper extends BeanSimple {
+  options: QueryMetaPersister;
+  query: Query;
+
+  protected __init__(options: QueryMetaPersister, query: Query) {
+    this.options = options;
+    this.query = query;
+  }
+
+  getItem(key: string): string | undefined {
+    return this.app.meta.cookie.getItem(key);
+  }
+
+  setItem(key: string, value: string): void {
+    const configScope = this.bean.scope(__ThisModule__).config;
+    const opts: CookieOptions = { ...configScope.persister.cookie.options };
+    let maxAge = resolveMaxAgeTime(this.options.maxAge, this.query);
+    if (maxAge !== undefined) {
+      if (maxAge === Infinity) maxAge = 1000 * 60 * 60 * 24 * 365;
+      opts.expires = new Date(Date.now() + maxAge);
+    }
+    if (!opts.path) {
+      opts.path = `/${this.app.config.env.appPublicPath || ''}`;
+    }
+    this.app.meta.cookie.setItem(key, value, opts);
+  }
+
+  removeItem(key: string): void {
+    this.app.meta.cookie.removeItem(key);
+  }
+}

package/src/config/config.ts

@@ -1,5 +1,6 @@
-import { DefaultOptions, defaultShouldDehydrateQuery } from '@tanstack/vue-query';
-import { ZovaApplication } from 'zova';
+import { DefaultOptions, defaultShouldDehydrateQuery, StaleTime } from '@tanstack/vue-query';
+import { CookieOptions, ZovaApplication } from 'zova';
+import { MaxAgeTime } from '../types.js';
 
 const defaultOptions: DefaultOptions = {
   queries: {
@@ -12,19 +13,31 @@ const defaultOptions: DefaultOptions = {
   dehydrate: {
     shouldDehydrateQuery(query) {
       if (query.meta?.ssr?.dehydrate === false) return false;
+      if (typeof query.meta?.persister === 'object' && query.meta?.persister?.sync) return false;
       return defaultShouldDehydrateQuery(query);
     },
+    shouldDehydrateMutation(_mutation) {
+      return false;
+    },
   },
 };
 
 export const config = (_app: ZovaApplication) => {
   return {
     persister: {
-      sync: {
-        maxAge: Infinity,
+      maxAge: {
+        cookie: undefined as MaxAgeTime | undefined, // undefined: session cookie
+        local: Infinity as MaxAgeTime,
+        db: (1000 * 60 * 60 * 24) as number, // 24 hours
+      },
+      cookie: {
+        options: {} as Omit<CookieOptions, 'expires'>,
       },
-      async: {
-        maxAge: 1000 * 60 * 60 * 24, // 24 hours
+    },
+    query: {
+      staleTime: {
+        async: 0 as StaleTime,
+        ssr: Infinity as StaleTime,
       },
     },
     queryClientConfig: {

package/src/monkey.ts

@@ -1,14 +1,14 @@
 import { BeanBase, BeanContainer, BeanSimple, IMonkeySystem } from 'zova';
-import { Storage } from './local/storage.js';
+import { LocalStorage } from './bean/local.storage.js';
 import { useQueryClient } from '@tanstack/vue-query';
 import { markRaw } from 'vue';
 
 export class Monkey extends BeanSimple implements IMonkeySystem {
-  storage: Storage;
+  storage: LocalStorage;
 
   async appInitialize(bean: BeanContainer) {
     // storage
-    this.storage = await bean._newBean(Storage, false);
+    this.storage = await bean._newBean(LocalStorage, false);
   }
   async appInitialized(_bean: BeanContainer) {}
   async appReady(_bean: BeanContainer) {}

package/src/types.ts

@@ -1,10 +1,23 @@
 import 'zova';
-import { DefaultError, useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import {
+  DefaultError,
+  DehydratedState,
+  Query,
+  QueryKey,
+  StaleTime,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/vue-query';
 import { UnwrapNestedRefs } from 'vue';
 declare module 'zova' {
   export interface BeanBase {
     $queryClient: ReturnType<typeof useQueryClient>;
   }
+
+  export interface SSRContextState {
+    query: DehydratedState;
+  }
 }
 
 declare module '@tanstack/vue-query' {
@@ -29,13 +42,22 @@ export interface QueryMetaSSR {
 
 export type QueryMetaPersisterStorage = 'cookie' | 'local' | 'db' | undefined;
 
+export type QueryMetaPersisterCookieType = 'auto' | 'boolean' | 'number' | 'date' | 'string' | undefined;
+
+export type MaxAgeTime<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = StaleTime<TQueryFnData, TError, TData, TQueryKey>;
+
 export interface QueryMetaPersister {
   /** default is false */
   sync?: boolean;
   /** default is db if async, local if sync */
   storage?: QueryMetaPersisterStorage;
   /** default is 24 hours */
-  maxAge?: number;
+  maxAge?: MaxAgeTime;
   /**
    * How to serialize the data to storage.
    * @default `JSON.stringify`
@@ -48,6 +70,7 @@ export interface QueryMetaPersister {
   deserialize?: (cachedString: any) => any;
   prefix?: string;
   buster?: string;
+  cookieType?: QueryMetaPersisterCookieType;
 }
 
 export type DataQuery<TData> = UnwrapNestedRefs<ReturnType<typeof useQuery<TData | undefined, Error | null>>>;
@@ -55,3 +78,27 @@ export type DataQuery<TData> = UnwrapNestedRefs<ReturnType<typeof useQuery<TData
 export type DataMutation<TData = unknown, TVariables = void, TContext = unknown> = UnwrapNestedRefs<
   ReturnType<typeof useMutation<TData, DefaultError, TVariables, TContext>>
 >;
+
+export function resolveStaleTime<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  staleTime: undefined | StaleTime<TQueryFnData, TError, TData, TQueryKey>,
+  query: Query<TQueryFnData, TError, TData, TQueryKey>,
+): number | undefined {
+  return typeof staleTime === 'function' ? staleTime(query) : staleTime;
+}
+
+export function resolveMaxAgeTime<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  maxAge: undefined | MaxAgeTime<TQueryFnData, TError, TData, TQueryKey>,
+  query: Query<TQueryFnData, TError, TData, TQueryKey>,
+): number | undefined {
+  return typeof maxAge === 'function' ? maxAge(query) : maxAge;
+}

package/src/local/storage.ts

@@ -1,17 +0,0 @@
-import { BeanBase, Local } from 'zova';
-import { ScopeModule } from '../resource/this.js';
-import { VueQueryPlugin, VueQueryPluginOptions } from '@tanstack/vue-query';
-
-@Local()
-export class Storage extends BeanBase<ScopeModule> {
-  protected async __init__() {
-    const vueQueryPluginOptions: VueQueryPluginOptions = {
-      queryClientConfig: {
-        defaultOptions: this.scope.config.queryClientConfig.defaultOptions,
-      },
-    };
-    this.app.vue.use(VueQueryPlugin, vueQueryPluginOptions);
-  }
-
-  protected __dispose__() {}
-}