Merge pull request #463 from elite174/feat/latest

Support temporary `latest` field for `createAsync` and `createAsyncStore`

Author: ryansolid

README.md

@@ -495,11 +495,19 @@ This is light wrapper over `createResource` that aims to serve as stand-in for a
 const user = createAsync((currentValue) => getUser(params.id))
 ```
 
+It also preserves `latest` field from `createResource`. Note that it will be removed in the future.
+
+```jsx
+const user = createAsync((currentValue) => getUser(params.id))
+return <h1>{user.latest.name}</h1>;
+```
+
 Using `cache` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
 
 ### `createAsyncStore`
 
 Similar to `createAsync` except it uses a deeply reactive store. Perfect for applying fine-grained changes to large model data that updates.
+It also supports `latest` field which will be removed in the future.
 
 ```jsx
 const todos = createAsyncStore(() => getTodos());

src/data/createAsync.ts

@@ -5,38 +5,56 @@ import { type Accessor, createResource, sharedConfig, type Setter, untrack } fro
 import { createStore, reconcile, type ReconcileOptions, unwrap } from "solid-js/store";
 import { isServer } from "solid-js/web";
 
+/**
+ * As `createAsync` and `createAsyncStore` are wrappers for `createResource`,
+ * this type allows to support `latest` field for these primitives.
+ * It will be removed in the future.
+ */
+export type AccessorWithLatest<T> = {
+  (): T;
+  latest: T;
+}
+
 export function createAsync<T>(
   fn: (prev: T) => Promise<T>,
   options: {
     name?: string;
     initialValue: T;
     deferStream?: boolean;
   }
-): Accessor<T>;
+): AccessorWithLatest<T>;
 export function createAsync<T>(
   fn: (prev: T | undefined) => Promise<T>,
   options?: {
     name?: string;
     initialValue?: T;
     deferStream?: boolean;
   }
-): Accessor<T | undefined>;
+): AccessorWithLatest<T | undefined>;
 export function createAsync<T>(
   fn: (prev: T | undefined) => Promise<T>,
   options?: {
     name?: string;
     initialValue?: T;
     deferStream?: boolean;
   }
-): Accessor<T | undefined> {
+): AccessorWithLatest<T | undefined> {
   let resource: () => T;
   let prev = () => !resource || (resource as any).state === "unresolved" ? undefined : (resource as any).latest;
   [resource] = createResource(
     () => subFetch(fn, untrack(prev)),
     v => v,
     options as any
   );
-  return () => resource();
+
+  const resultAccessor: AccessorWithLatest<T> = (() => resource()) as any;
+  Object.defineProperty(resultAccessor, 'latest', {
+    get() {
+      return (resource as any).latest;
+    }
+  })
+
+  return resultAccessor;
 }
 
 export function createAsyncStore<T>(
@@ -47,7 +65,7 @@ export function createAsyncStore<T>(
     deferStream?: boolean;
     reconcile?: ReconcileOptions;
   }
-): Accessor<T>;
+): AccessorWithLatest<T>;
 export function createAsyncStore<T>(
   fn: (prev: T | undefined) => Promise<T>,
   options?: {
@@ -56,7 +74,7 @@ export function createAsyncStore<T>(
     deferStream?: boolean;
     reconcile?: ReconcileOptions;
   }
-): Accessor<T | undefined>;
+): AccessorWithLatest<T | undefined>;
 export function createAsyncStore<T>(
   fn: (prev: T | undefined) => Promise<T>,
   options: {
@@ -65,7 +83,7 @@ export function createAsyncStore<T>(
     deferStream?: boolean;
     reconcile?: ReconcileOptions;
   } = {}
-): Accessor<T | undefined> {
+): AccessorWithLatest<T | undefined> {
   let resource: () => T;
   let prev = () => !resource || (resource as any).state === "unresolved" ? undefined : unwrap((resource as any).latest);
   [resource] = createResource(
@@ -76,7 +94,15 @@ export function createAsyncStore<T>(
       storage: (init: T | undefined) => createDeepSignal(init, options.reconcile)
     } as any
   );
-  return () => resource();
+
+  const resultAccessor: AccessorWithLatest<T> = (() => resource()) as any;
+  Object.defineProperty(resultAccessor, 'latest', {
+    get() {
+      return (resource as any).latest;
+    }
+  })
+
+  return resultAccessor;
 }
 
 function createDeepSignal<T>(value: T | undefined, options?: ReconcileOptions) {

src/data/index.ts

@@ -1,4 +1,4 @@
-export { createAsync, createAsyncStore } from "./createAsync.js";
+export { createAsync, createAsyncStore, type AccessorWithLatest } from "./createAsync.js";
 export { action, useSubmission, useSubmissions, useAction, type Action } from "./action.js";
 export { cache, revalidate, type CachedFunction } from "./cache.js";
 export { redirect, reload, json } from "./response.js";