@pinia/colada-plugin-delay 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present Eduardo San Martin Morote
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+<h1>
+  <img height="76" src="https://github.com/posva/pinia-colada/assets/664177/02011637-f94d-4a35-854a-02f7aed86a3c" alt="Pinia Colada logo">
+  Pinia Colada Delay
+</h1>
+
+<a href="https://npmjs.com/package/@pinia/colada-plugin-delay">
+  <img src="https://badgen.net/npm/v/@pinia/colada-plugin-delay/latest" alt="npm package">
+</a>
+
+Delay the `asyncStatus` of a query to avoid flickering when refreshing data. The perfect addition to `placeholderData` in your paginated queries 💪.
+
+## Installation
+
+```sh
+npm install @pinia/colada-plugin-delay
+```
+
+## Usage
+
+```js
+import { PiniaColadaDelay } from '@pinia/colada-plugin-delay'
+
+// Pass the plugin to Pinia Colada options
+app.use(PiniaColada, {
+  // ...
+  plugins: [
+    PiniaColadaDelay({
+      delay: 200, // default delay
+    }),
+  ],
+})
+```
+
+You can customize the delay behavior individually for each query with the `delay` option:
+
+```ts
+useQuery({
+  key: ['todos'],
+  query: getTodos,
+  delay: false, // disable delay
+})
+```
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

package/dist/index.cjs

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PiniaColadaDelay: () => PiniaColadaDelay
+});
+module.exports = __toCommonJS(src_exports);
+var import_vue = require("vue");
+function PiniaColadaDelay(options) {
+  return ({ queryCache }) => {
+    queryCache.$onAction(({ name, after }) => {
+      if (name === "create") {
+        after((entry) => {
+          const delay = entry.options?.delay ?? options?.delay ?? 200;
+          console.log("delay", entry.options?.delay, options?.delay, delay);
+          if (!delay) return;
+          const initialValue = entry.asyncStatus.value;
+          entry.asyncStatus = (0, import_vue.customRef)((track, trigger) => {
+            let value = initialValue;
+            let timeout;
+            return {
+              get() {
+                track();
+                return value;
+              },
+              set(newValue) {
+                clearTimeout(timeout);
+                if (newValue === "loading") {
+                  timeout = setTimeout(() => {
+                    value = newValue;
+                    trigger();
+                  }, delay);
+                } else {
+                  value = newValue;
+                  trigger();
+                }
+              }
+            };
+          });
+        });
+      }
+    });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PiniaColadaDelay
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @module @pinia/colada/plugins/delay\n */\nimport { customRef } from 'vue'\nimport type { PiniaColadaPlugin, AsyncStatus } from '@pinia/colada'\n\n/**\n * Options for the {@link PiniaColadaDelay} plugin.\n */\ninterface PiniaColadaDelayOptions {\n  /**\n   * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} plugin.\n   * @default 200\n   */\n  delay?: number | false\n}\n\n/**\n * Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.\n * @param options - Pinia Colada Delay Loading plugin options\n */\nexport function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin {\n  return ({ queryCache }) => {\n    queryCache.$onAction(({ name, after }) => {\n      if (name === 'create') {\n        after((entry) => {\n          const delay = entry.options?.delay ?? options?.delay ?? 200\n          console.log('delay', entry.options?.delay, options?.delay, delay)\n          if (!delay) return\n\n          const initialValue = entry.asyncStatus.value\n          entry.asyncStatus = customRef<AsyncStatus>((track, trigger) => {\n            let value = initialValue\n            let timeout: ReturnType<typeof setTimeout> | undefined\n            return {\n              get() {\n                track()\n                return value\n              },\n              set(newValue) {\n                clearTimeout(timeout)\n                if (newValue === 'loading') {\n                  timeout = setTimeout(() => {\n                    value = newValue\n                    trigger()\n                  }, delay)\n                } else {\n                  value = newValue\n                  trigger()\n                }\n              },\n            }\n          })\n        })\n      }\n    })\n  }\n}\n\ndeclare module '@pinia/colada' {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  export interface UseQueryOptions<TResult, TError> extends PiniaColadaDelayOptions {}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAkBnB,SAAS,iBAAiB,SAAsD;AACrF,SAAO,CAAC,EAAE,WAAW,MAAM;AACzB,eAAW,UAAU,CAAC,EAAE,MAAM,MAAM,MAAM;AACxC,UAAI,SAAS,UAAU;AACrB,cAAM,CAAC,UAAU;AACf,gBAAM,QAAQ,MAAM,SAAS,SAAS,SAAS,SAAS;AACxD,kBAAQ,IAAI,SAAS,MAAM,SAAS,OAAO,SAAS,OAAO,KAAK;AAChE,cAAI,CAAC,MAAO;AAEZ,gBAAM,eAAe,MAAM,YAAY;AACvC,gBAAM,kBAAc,sBAAuB,CAAC,OAAO,YAAY;AAC7D,gBAAI,QAAQ;AACZ,gBAAI;AACJ,mBAAO;AAAA,cACL,MAAM;AACJ,sBAAM;AACN,uBAAO;AAAA,cACT;AAAA,cACA,IAAI,UAAU;AACZ,6BAAa,OAAO;AACpB,oBAAI,aAAa,WAAW;AAC1B,4BAAU,WAAW,MAAM;AACzB,4BAAQ;AACR,4BAAQ;AAAA,kBACV,GAAG,KAAK;AAAA,gBACV,OAAO;AACL,0BAAQ;AACR,0BAAQ;AAAA,gBACV;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import { PiniaColadaPlugin } from '@pinia/colada';
+
+/**
+ * Options for the {@link PiniaColadaDelay} plugin.
+ */
+interface PiniaColadaDelayOptions {
+    /**
+     * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} plugin.
+     * @default 200
+     */
+    delay?: number | false;
+}
+/**
+ * Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.
+ * @param options - Pinia Colada Delay Loading plugin options
+ */
+declare function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin;
+declare module '@pinia/colada' {
+    interface UseQueryOptions<TResult, TError> extends PiniaColadaDelayOptions {
+    }
+}
+
+export { PiniaColadaDelay };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { PiniaColadaPlugin } from '@pinia/colada';
+
+/**
+ * Options for the {@link PiniaColadaDelay} plugin.
+ */
+interface PiniaColadaDelayOptions {
+    /**
+     * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} plugin.
+     * @default 200
+     */
+    delay?: number | false;
+}
+/**
+ * Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.
+ * @param options - Pinia Colada Delay Loading plugin options
+ */
+declare function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin;
+declare module '@pinia/colada' {
+    interface UseQueryOptions<TResult, TError> extends PiniaColadaDelayOptions {
+    }
+}
+
+export { PiniaColadaDelay };

package/dist/index.js

@@ -0,0 +1,42 @@
+// src/index.ts
+import { customRef } from "vue";
+function PiniaColadaDelay(options) {
+  return ({ queryCache }) => {
+    queryCache.$onAction(({ name, after }) => {
+      if (name === "create") {
+        after((entry) => {
+          const delay = entry.options?.delay ?? options?.delay ?? 200;
+          console.log("delay", entry.options?.delay, options?.delay, delay);
+          if (!delay) return;
+          const initialValue = entry.asyncStatus.value;
+          entry.asyncStatus = customRef((track, trigger) => {
+            let value = initialValue;
+            let timeout;
+            return {
+              get() {
+                track();
+                return value;
+              },
+              set(newValue) {
+                clearTimeout(timeout);
+                if (newValue === "loading") {
+                  timeout = setTimeout(() => {
+                    value = newValue;
+                    trigger();
+                  }, delay);
+                } else {
+                  value = newValue;
+                  trigger();
+                }
+              }
+            };
+          });
+        });
+      }
+    });
+  };
+}
+export {
+  PiniaColadaDelay
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @module @pinia/colada/plugins/delay\n */\nimport { customRef } from 'vue'\nimport type { PiniaColadaPlugin, AsyncStatus } from '@pinia/colada'\n\n/**\n * Options for the {@link PiniaColadaDelay} plugin.\n */\ninterface PiniaColadaDelayOptions {\n  /**\n   * Delay in milliseconds to wait before letting the `asyncStatus` become `'loading'`. Set to `false` or 0 to disable. Requires the {@link PiniaColadaDelay} plugin.\n   * @default 200\n   */\n  delay?: number | false\n}\n\n/**\n * Delays the `asyncStatus` of a query by a certain amount of time to avoid flickering between refreshes.\n * @param options - Pinia Colada Delay Loading plugin options\n */\nexport function PiniaColadaDelay(options?: PiniaColadaDelayOptions): PiniaColadaPlugin {\n  return ({ queryCache }) => {\n    queryCache.$onAction(({ name, after }) => {\n      if (name === 'create') {\n        after((entry) => {\n          const delay = entry.options?.delay ?? options?.delay ?? 200\n          console.log('delay', entry.options?.delay, options?.delay, delay)\n          if (!delay) return\n\n          const initialValue = entry.asyncStatus.value\n          entry.asyncStatus = customRef<AsyncStatus>((track, trigger) => {\n            let value = initialValue\n            let timeout: ReturnType<typeof setTimeout> | undefined\n            return {\n              get() {\n                track()\n                return value\n              },\n              set(newValue) {\n                clearTimeout(timeout)\n                if (newValue === 'loading') {\n                  timeout = setTimeout(() => {\n                    value = newValue\n                    trigger()\n                  }, delay)\n                } else {\n                  value = newValue\n                  trigger()\n                }\n              },\n            }\n          })\n        })\n      }\n    })\n  }\n}\n\ndeclare module '@pinia/colada' {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  export interface UseQueryOptions<TResult, TError> extends PiniaColadaDelayOptions {}\n}\n"],"mappings":";AAGA,SAAS,iBAAiB;AAkBnB,SAAS,iBAAiB,SAAsD;AACrF,SAAO,CAAC,EAAE,WAAW,MAAM;AACzB,eAAW,UAAU,CAAC,EAAE,MAAM,MAAM,MAAM;AACxC,UAAI,SAAS,UAAU;AACrB,cAAM,CAAC,UAAU;AACf,gBAAM,QAAQ,MAAM,SAAS,SAAS,SAAS,SAAS;AACxD,kBAAQ,IAAI,SAAS,MAAM,SAAS,OAAO,SAAS,OAAO,KAAK;AAChE,cAAI,CAAC,MAAO;AAEZ,gBAAM,eAAe,MAAM,YAAY;AACvC,gBAAM,cAAc,UAAuB,CAAC,OAAO,YAAY;AAC7D,gBAAI,QAAQ;AACZ,gBAAI;AACJ,mBAAO;AAAA,cACL,MAAM;AACJ,sBAAM;AACN,uBAAO;AAAA,cACT;AAAA,cACA,IAAI,UAAU;AACZ,6BAAa,OAAO;AACpB,oBAAI,aAAa,WAAW;AAC1B,4BAAU,WAAW,MAAM;AACzB,4BAAQ;AACR,4BAAQ;AAAA,kBACV,GAAG,KAAK;AAAA,gBACV,OAAO;AACL,0BAAQ;AACR,0BAAQ;AAAA,gBACV;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACF;","names":[]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@pinia/colada-plugin-delay",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0",
+  "description": "Delay async status in Pinia Colada",
+  "author": {
+    "name": "Eduardo San Martin Morote",
+    "email": "posva13@gmail.com"
+  },
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/posva",
+  "homepage": "https://github.com/posva/pinia-colada/plugins/delay#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/posva/pinia-colada.git"
+  },
+  "bugs": {
+    "url": "https://github.com/posva/pinia-colada/issues"
+  },
+  "keywords": [
+    "pinia",
+    "plugin",
+    "data",
+    "fetching",
+    "query",
+    "mutation",
+    "cache",
+    "layer",
+    "delay"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@pinia/colada": "^0.11.1"
+  },
+  "devDependencies": {
+    "@pinia/colada": "^0.11.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l @pinia/colada-plugin-delay -r 1",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}