vue-computed-eager 1.0.0

package/README.md

@@ -0,0 +1,47 @@
+# vue-computed-eager
+
+Eager computed
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+## Installation
+
+```bash
+npm install vue-computed-eager
+```
+
+## Usage
+
+```ts
+import { computedEager } from 'vue-computed-eager';
+```
+
+Eager computed without lazy evaluation.
+
+> **Info:** This function will be removed in future version.
+
+
+> **Tip:** Note💡: If you are using Vue 3.4+, you can use `computed` right away, you no longer need this function.
+In Vue 3.4+, if the computed new value does not change, `computed`, `effect`, `watch`, `watchEffect`, `render` dependencies will not be triggered.
+See: https://github.com/vuejs/core/pull/5912
+
+
+Learn more at [Vue: When a computed property can be the wrong tool](https://dev.to/linusborg/vue-when-a-computed-property-can-be-the-wrong-tool-195j).
+
+- Use `computed()` when you have a complex calculation going on, which can actually profit from caching and lazy evaluation and should only be (re-)calculated if really necessary.
+- Use `computedEager()` when you have a simple operation, with a rarely changing return value – often a boolean.
+
+```ts
+import { computedEager } from 'vue-computed-eager'
+
+const todos = ref([])
+const hasOpenTodos = computedEager(() => !!todos.length)
+
+console.log(hasOpenTodos.value) // false
+toTodos.value.push({ title: 'Learn Vue' })
+console.log(hasOpenTodos.value) // true
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+const vue = require('vue');
+
+function computedEager(fn, options) {
+  const result = vue.shallowRef();
+  vue.watchEffect(() => {
+    result.value = fn();
+  }, {
+    ...options,
+    flush: options?.flush ?? "sync"
+  });
+  return vue.readonly(result);
+}
+const eagerComputed = computedEager;
+
+exports.computedEager = computedEager;
+exports.eagerComputed = eagerComputed;

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import { WatchOptionsBase, ShallowRef } from 'vue';
+
+type ComputedEagerOptions = WatchOptionsBase;
+type ComputedEagerReturn<T = any> = Readonly<ShallowRef<T>>;
+/**
+ *
+ * @deprecated This function will be removed in future version.
+ *
+ * Note: If you are using Vue 3.4+, you can straight use computed instead.
+ * Because in Vue 3.4+, if computed new value does not change,
+ * computed, effect, watch, watchEffect, render dependencies will not be triggered.
+ * refer: https://github.com/vuejs/core/pull/5912
+ *
+ * @param fn effect function
+ * @param options WatchOptionsBase
+ * @returns readonly shallowRef
+ */
+declare function computedEager<T>(fn: () => T, options?: ComputedEagerOptions): ComputedEagerReturn<T>;
+/** @deprecated use `computedEager` instead */
+declare const eagerComputed: typeof computedEager;
+
+export { computedEager, eagerComputed };
+export type { ComputedEagerOptions, ComputedEagerReturn };

package/dist/index.d.mts

@@ -0,0 +1,23 @@
+import { WatchOptionsBase, ShallowRef } from 'vue';
+
+type ComputedEagerOptions = WatchOptionsBase;
+type ComputedEagerReturn<T = any> = Readonly<ShallowRef<T>>;
+/**
+ *
+ * @deprecated This function will be removed in future version.
+ *
+ * Note: If you are using Vue 3.4+, you can straight use computed instead.
+ * Because in Vue 3.4+, if computed new value does not change,
+ * computed, effect, watch, watchEffect, render dependencies will not be triggered.
+ * refer: https://github.com/vuejs/core/pull/5912
+ *
+ * @param fn effect function
+ * @param options WatchOptionsBase
+ * @returns readonly shallowRef
+ */
+declare function computedEager<T>(fn: () => T, options?: ComputedEagerOptions): ComputedEagerReturn<T>;
+/** @deprecated use `computedEager` instead */
+declare const eagerComputed: typeof computedEager;
+
+export { computedEager, eagerComputed };
+export type { ComputedEagerOptions, ComputedEagerReturn };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { WatchOptionsBase, ShallowRef } from 'vue';
+
+type ComputedEagerOptions = WatchOptionsBase;
+type ComputedEagerReturn<T = any> = Readonly<ShallowRef<T>>;
+/**
+ *
+ * @deprecated This function will be removed in future version.
+ *
+ * Note: If you are using Vue 3.4+, you can straight use computed instead.
+ * Because in Vue 3.4+, if computed new value does not change,
+ * computed, effect, watch, watchEffect, render dependencies will not be triggered.
+ * refer: https://github.com/vuejs/core/pull/5912
+ *
+ * @param fn effect function
+ * @param options WatchOptionsBase
+ * @returns readonly shallowRef
+ */
+declare function computedEager<T>(fn: () => T, options?: ComputedEagerOptions): ComputedEagerReturn<T>;
+/** @deprecated use `computedEager` instead */
+declare const eagerComputed: typeof computedEager;
+
+export { computedEager, eagerComputed };
+export type { ComputedEagerOptions, ComputedEagerReturn };

package/dist/index.mjs

@@ -0,0 +1,15 @@
+import { shallowRef, watchEffect, readonly } from 'vue';
+
+function computedEager(fn, options) {
+  const result = shallowRef();
+  watchEffect(() => {
+    result.value = fn();
+  }, {
+    ...options,
+    flush: options?.flush ?? "sync"
+  });
+  return readonly(result);
+}
+const eagerComputed = computedEager;
+
+export { computedEager, eagerComputed };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vue-computed-eager",
+  "version": "1.0.0",
+  "description": "Eager computed",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "composable",
+    "vueuse",
+    "computedEager"
+  ],
+  "author": "VueFrag",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuefrag/vue-computed-eager.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vuefrag/vue-computed-eager/issues"
+  },
+  "homepage": "https://github.com/vuefrag/vue-computed-eager#readme",
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "unbuild": "^2.0.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.4.0"
+  }
+}