fix(cache): rename the cache interface name (#1224)

# Overview
close #1218

- rename CacheStore to Cache, to , useCache to useRead,
CacheStoreProvider to CacheProvider
<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <[email protected]>

.changeset/quiet-rings-compete.md

@@ -0,0 +1,5 @@
+---
+'@suspensive/cache': minor
+---
+
+fix(cache): rename the cache interface name

README.md

@@ -36,9 +36,9 @@ Key features: Atom, AtomValue, SetAtom, and more.
 
 ### @suspensive/cache [![npm version](https://img.shields.io/npm/v/@suspensive/cache?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/cache) [![npm](https://img.shields.io/npm/dm/@suspensive/cache?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/cache) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/cache?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/cache)
 
-> This package provides caching solutions that can be used within React applications. It includes hooks like useCache and useCacheStore, as well as providers for managing and storing cache data efficiently.
+> This package provides caching solutions that can be used within React applications. It includes hooks like useRead and useCache, as well as providers for managing and storing cache data efficiently.
 
-Key features: Cache, useCache, CacheStore, useCacheStore, CacheStoreProvider, and more.
+Key features: Read, useRead, Cache, useCache, CacheProvider, and more.
 
 <br/>
 

examples/visualization/src/app/cache/SuspenseCache/page.tsx

@@ -1,36 +1,36 @@
 'use client'
 
-import { Cache, cacheOptions, useCacheStore } from '@suspensive/cache'
+import { Read, cacheOptions, useCache } from '@suspensive/cache'
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { api } from '~/utils'
 
-const caches = (ms: number) =>
+const successCache = (ms: number) =>
   cacheOptions({
     cacheKey: [ms] as const,
     cacheFn: () => api.delay(ms, { percentage: 100 }),
   })
 
 export default function Page() {
-  const cacheStore = useCacheStore()
+  const cache = useCache()
 
   return (
     <ErrorBoundary fallback={() => <div>error</div>}>
       <div className="flex flex-col">
         <Suspense clientOnly fallback={<div>loading...</div>}>
-          <Cache {...caches(2000)}>
+          <Read {...successCache(2000)}>
             {(cached) => (
               <div>
                 <button
                   onClick={() => {
-                    cacheStore.reset(caches(2000))
+                    cache.reset(successCache(2000))
                   }}
                 >
                   Try again
                 </button>
                 <div>{cached.data}</div>
               </div>
             )}
-          </Cache>
+          </Read>
         </Suspense>
       </div>
     </ErrorBoundary>

examples/visualization/src/app/providers.tsx

@@ -1,25 +1,25 @@
 'use client'
 
-import { CacheStore, CacheStoreProvider } from '@suspensive/cache'
+import { Cache, CacheProvider } from '@suspensive/cache'
 import { DefaultProps, DefaultPropsProvider } from '@suspensive/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { type PropsWithChildren, useState } from 'react'
 import { Spinner } from '~/components/uis'
 
 export const Providers = ({ children }: PropsWithChildren) => {
-  const cacheStore = useState(() => new CacheStore())[0]
+  const cache = useState(() => new Cache())[0]
   const queryClient = useState(() => new QueryClient({ defaultOptions: { queries: { retry: 0 } } }))[0]
   const defaultProps = useState(() => new DefaultProps({ Delay: { ms: 1200 }, Suspense: { fallback: <Spinner /> } }))[0]
 
   return (
-    <CacheStoreProvider store={cacheStore}>
+    <CacheProvider cache={cache}>
       <DefaultPropsProvider defaultProps={defaultProps}>
         <QueryClientProvider client={queryClient}>
           {children}
           <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </DefaultPropsProvider>
-    </CacheStoreProvider>
+    </CacheProvider>
   )
 }

packages/cache/src/CacheStore.ts → packages/cache/src/Cache.ts

@@ -82,20 +82,20 @@ export type Cached<TData, TCacheKey extends CacheKey = CacheKey> =
 /**
  * @experimental This is experimental feature.
  */
-export class CacheStore extends Subscribable<() => void> {
-  private cacheStore = new Map<ReturnType<typeof hashCacheKey>, Cached<unknown>>()
+export class Cache extends Subscribable<() => void> {
+  private cache = new Map<ReturnType<typeof hashCacheKey>, Cached<unknown>>()
 
   public reset = (options?: Pick<CacheOptions<unknown, CacheKey>, 'cacheKey'>) => {
     if (typeof options?.cacheKey === 'undefined' || options.cacheKey.length === 0) {
-      this.cacheStore.clear()
+      this.cache.clear()
       this.notify()
       return
     }
 
     const hashedCacheKey = hashCacheKey(options.cacheKey)
 
-    if (this.cacheStore.has(hashedCacheKey)) {
-      this.cacheStore.delete(hashedCacheKey)
+    if (this.cache.has(hashedCacheKey)) {
+      this.cache.delete(hashedCacheKey)
     }
 
     this.notify()
@@ -104,14 +104,14 @@ export class CacheStore extends Subscribable<() => void> {
   public remove = (options: Pick<CacheOptions<unknown, CacheKey>, 'cacheKey'>) => {
     const hashedCacheKey = hashCacheKey(options.cacheKey)
 
-    if (this.cacheStore.has(hashedCacheKey)) {
-      this.cacheStore.delete(hashedCacheKey)
+    if (this.cache.has(hashedCacheKey)) {
+      this.cache.delete(hashedCacheKey)
     }
   }
 
   public clearError = (options?: Pick<CacheOptions<unknown, CacheKey>, 'cacheKey'>) => {
     if (options?.cacheKey === undefined || options.cacheKey.length === 0) {
-      this.cacheStore.forEach((cached, hashedCacheKey, cache) => {
+      this.cache.forEach((cached, hashedCacheKey, cache) => {
         cache.set(hashedCacheKey, {
           ...cached,
           status: CacheStatus.Idle,
@@ -127,9 +127,9 @@ export class CacheStore extends Subscribable<() => void> {
     }
 
     const hashedCacheKey = hashCacheKey(options.cacheKey)
-    const cached = this.cacheStore.get(hashedCacheKey)
+    const cached = this.cache.get(hashedCacheKey)
     if (cached) {
-      this.cacheStore.set(hashedCacheKey, {
+      this.cache.set(hashedCacheKey, {
         ...cached,
         status: CacheStatus.Idle,
         promiseToSuspend: undefined,
@@ -147,7 +147,7 @@ export class CacheStore extends Subscribable<() => void> {
     cacheFn,
   }: CacheOptions<TData, TCacheKey>): ResolvedCached<TData, TCacheKey> => {
     const hashedCacheKey = hashCacheKey(cacheKey)
-    const cached = this.cacheStore.get(hashedCacheKey)
+    const cached = this.cache.get(hashedCacheKey)
     if (cached && cached.status !== CacheStatus.Idle) {
       if (cached.status === CacheStatus.Rejected) {
         throw cached.state.error
@@ -182,13 +182,13 @@ export class CacheStore extends Subscribable<() => void> {
       ),
     }
 
-    this.cacheStore.set(hashedCacheKey, newCached)
+    this.cache.set(hashedCacheKey, newCached)
 
     throw newCached.promiseToSuspend
   }
 
   public getData = (options: Pick<CacheOptions<unknown, CacheKey>, 'cacheKey'>) =>
-    this.cacheStore.get(hashCacheKey(options.cacheKey))?.state.data
+    this.cache.get(hashCacheKey(options.cacheKey))?.state.data
   public getError = (options: Pick<CacheOptions<unknown, CacheKey>, 'cacheKey'>) =>
-    this.cacheStore.get(hashCacheKey(options.cacheKey))?.state.error
+    this.cache.get(hashCacheKey(options.cacheKey))?.state.error
 }

packages/cache/src/CacheProvider.tsx

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from 'react'
+import type { Cache } from './Cache'
+import { CacheContext } from './contexts'
+
+type CacheProviderProps = PropsWithChildren<{ cache: Cache }>
+
+/**
+ * @experimental This is experimental feature.
+ */
+export function CacheProvider({ cache, children }: CacheProviderProps) {
+  return <CacheContext.Provider value={cache}>{children}</CacheContext.Provider>
+}