floppy-disk 2.3.0-beta.1 → 2.3.0

package/README.md

@@ -28,28 +28,39 @@ import { createQuery, createMutation } from 'floppy-disk'; // 8.4 kB (gzipped: 2
 
 ## Key Features
 
-- Create store ✅
-  - Yes, it also support middleware & set/get state outside component ✅
-  - Store event (`onSubscribe`, `onUnsubscribe`, etc.) ✅
-  - Use store as local state manager ✅
-- Create stores (yes, it's plural) ✅ \*_controlled with a store key_
-- Create query ✅
-  - Dedupe multiple request ✅
-  - Auto-update stale data (stale-while-revalidate) ✅
-  - Enable/disable query ✅
-  - Auto-fetch or manual (lazy query) ✅
-  - Retry on error (retry count, retry delay) ✅
-  - SSR/SSG's initial query data ✅
-  - Optimistic update ✅
-  - Invalidate query ✅
-  - Reset query ✅
-  - Query with param (query key) ✅
-  - Infinite query ✅
-  - Get query data outside component ✅
-  - Custom reactivity ✅
-  - Fetching mechanisms are agnostically built on promises ✅
-    - Can be used with literally any asynchronous data fetching client, including GraphQL ✅
-- Create mutation ✅
+- **Create Store**
+  - Get/set store inside/outside component
+  - Custom reactivity (like `useEffect`'s dependency array)
+  - Support middleware
+  - Set state interception
+  - Store event (`onSubscribe`, `onUnsubscribe`, etc.)
+  - Use store as local state manager
+- **Create Stores**
+  - Same as store, but controlled with a store key
+- **Create Query & Mutation**
+  - Backend agnostic (support GraphQL & any async function)
+  - TypeScript ready
+  - SSR/SSG support
+  - Custom reactivity (we choose when to re-render)
+  - **Create query**
+    - Dedupe multiple request
+    - Auto-fetch on mount or manual (lazy query)
+    - Enable/disable query
+    - Serve stale data while revalidating
+    - Retry on error (customizable)
+    - Optimistic update
+    - Invalidate query
+    - Reset query
+    - Query with param (query key)
+    - Paginated/infinite query
+    - Prefetch query
+    - Fetch from inside/outside component
+    - Get query state inside/outside component
+    - Suspense mode
+  - **Create mutation**
+    - Mutate from inside/outside component
+    - Get mutation state inside/outside component
+  - ... and [a lot more](https://floppy-disk.vercel.app/)
 
 <br>
 

package/esm/preact/create-query.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { FunctionComponent } from 'preact';
 import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
 export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
     /**
@@ -227,5 +229,11 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
      * Use query with suspense mode.
      */
     suspend: (key?: TKey | null) => QueryState<TKey, TResponse, TData, TError>;
+    Render: (props: {
+        queryKey?: TKey | null;
+        loading?: FunctionComponent<TKey>;
+        success?: FunctionComponent<TKey>;
+        error?: FunctionComponent<TKey>;
+    }) => JSX.Element;
 };
 export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;

package/esm/preact/create-query.js

@@ -1,3 +1,4 @@
+import { h as createElement } from 'preact';
 import { useState } from 'preact/hooks';
 import { hasValue, identityFn, noop } from '../utils';
 import { createStores } from './create-stores';
@@ -352,5 +353,14 @@ export const createQuery = (queryFn, options = {}) => {
             throw state.error;
         return state;
     };
+    const defaultElement = () => null;
+    useQuery.Render = (props) => {
+        const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const state = useQuery(queryKey);
+        if (state.data)
+            return createElement(success, state.key);
+        return createElement(state.isLoading ? loading : error, state.key);
+    };
     return useQuery;
 };

package/esm/react/create-query.d.ts

@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
 export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
     /**
@@ -227,5 +228,11 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
      * Use query with suspense mode.
      */
     suspend: (key?: TKey | null) => QueryState<TKey, TResponse, TData, TError>;
+    Render: (props: {
+        queryKey?: TKey | null;
+        loading?: FunctionComponent<TKey>;
+        success?: FunctionComponent<TKey>;
+        error?: FunctionComponent<TKey>;
+    }) => JSX.Element;
 };
 export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;

package/esm/react/create-query.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { createElement, useState } from 'react';
 import { hasValue, identityFn, noop } from '../utils';
 import { createStores } from './create-stores';
 const getDecision = (value, param, { ifTrue, ifAlways }) => {
@@ -352,5 +352,14 @@ export const createQuery = (queryFn, options = {}) => {
             throw state.error;
         return state;
     };
+    const defaultElement = () => null;
+    useQuery.Render = (props) => {
+        const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const state = useQuery(queryKey);
+        if (state.data)
+            return createElement(success, state.key);
+        return createElement(state.isLoading ? loading : error, state.key);
+    };
     return useQuery;
 };

package/lib/preact/create-query.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { FunctionComponent } from 'preact';
 import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
 export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
     /**
@@ -227,5 +229,11 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
      * Use query with suspense mode.
      */
     suspend: (key?: TKey | null) => QueryState<TKey, TResponse, TData, TError>;
+    Render: (props: {
+        queryKey?: TKey | null;
+        loading?: FunctionComponent<TKey>;
+        success?: FunctionComponent<TKey>;
+        error?: FunctionComponent<TKey>;
+    }) => JSX.Element;
 };
 export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;

package/lib/preact/create-query.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createQuery = void 0;
+const preact_1 = require("preact");
 const hooks_1 = require("preact/hooks");
 const utils_1 = require("../utils");
 const create_stores_1 = require("./create-stores");
@@ -355,6 +356,15 @@ const createQuery = (queryFn, options = {}) => {
             throw state.error;
         return state;
     };
+    const defaultElement = () => null;
+    useQuery.Render = (props) => {
+        const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const state = useQuery(queryKey);
+        if (state.data)
+            return (0, preact_1.h)(success, state.key);
+        return (0, preact_1.h)(state.isLoading ? loading : error, state.key);
+    };
     return useQuery;
 };
 exports.createQuery = createQuery;

package/lib/react/create-query.d.ts

@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
 export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
     /**
@@ -227,5 +228,11 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
      * Use query with suspense mode.
      */
     suspend: (key?: TKey | null) => QueryState<TKey, TResponse, TData, TError>;
+    Render: (props: {
+        queryKey?: TKey | null;
+        loading?: FunctionComponent<TKey>;
+        success?: FunctionComponent<TKey>;
+        error?: FunctionComponent<TKey>;
+    }) => JSX.Element;
 };
 export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;

package/lib/react/create-query.js

@@ -355,6 +355,15 @@ const createQuery = (queryFn, options = {}) => {
             throw state.error;
         return state;
     };
+    const defaultElement = () => null;
+    useQuery.Render = (props) => {
+        const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const state = useQuery(queryKey);
+        if (state.data)
+            return (0, react_1.createElement)(success, state.key);
+        return (0, react_1.createElement)(state.isLoading ? loading : error, state.key);
+    };
     return useQuery;
 };
 exports.createQuery = createQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "2.3.0-beta.1",
+  "version": "2.3.0",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",