vue-computed-with-control 1.0.0

package/README.md

@@ -0,0 +1,81 @@
+# vue-computed-with-control
+
+Computed with manual control
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+## Installation
+
+```bash
+npm install vue-computed-with-control
+```
+
+## Usage
+
+```ts
+import { computedWithControl } from 'vue-computed-with-control';
+```
+
+Explicitly define the dependencies of computed.
+
+```ts twoslash include main
+import { computedWithControl } from 'vue-computed-with-control'
+
+const source = ref('foo')
+const counter = ref(0)
+
+const computedRef = computedWithControl(
+  () => source.value, // watch source, same as `watch`
+  () => counter.value, // computed getter, same as `computed`
+)
+```
+
+With this, the changes of `counter` won't trigger `computedRef` to update but the `source` ref does.
+
+```ts
+// @include: main
+// ---cut---
+console.log(computedRef.value) // 0
+
+counter.value += 1
+
+console.log(computedRef.value) // 0
+
+source.value = 'bar'
+
+console.log(computedRef.value) // 1
+```
+
+### Manual Triggering
+
+You can also manually trigger the update of the computed by:
+
+```ts
+// @include: main
+// ---cut---
+const computedRef = computedWithControl(
+  () => source.value,
+  () => counter.value,
+)
+
+computedRef.trigger()
+```
+
+### Deep Watch
+
+Unlike `computed`, `computedWithControl` is shallow by default.
+You can specify the same options as `watch` to control the behavior:
+
+```ts
+const source = ref({ name: 'foo' })
+
+const computedRef = computedWithControl(
+  source,
+  () => counter.value,
+  { deep: true },
+)
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+const vue = require('vue');
+
+function computedWithControl(source, fn, options = {}) {
+  let v = void 0;
+  let track;
+  let trigger;
+  let dirty = true;
+  const update = () => {
+    dirty = true;
+    trigger();
+  };
+  vue.watch(source, update, { flush: "sync", ...options });
+  const get = typeof fn === "function" ? fn : fn.get;
+  const set = typeof fn === "function" ? void 0 : fn.set;
+  const result = vue.customRef((_track, _trigger) => {
+    track = _track;
+    trigger = _trigger;
+    return {
+      get() {
+        if (dirty) {
+          v = get(v);
+          dirty = false;
+        }
+        track();
+        return v;
+      },
+      set(v2) {
+        set?.(v2);
+      }
+    };
+  });
+  result.trigger = update;
+  return result;
+}
+const controlledComputed = computedWithControl;
+
+exports.computedWithControl = computedWithControl;
+exports.controlledComputed = controlledComputed;

package/dist/index.d.cts

@@ -0,0 +1,20 @@
+import { ComputedRef, WritableComputedRef, WatchSource, MultiWatchSources, ComputedGetter, WatchOptions, WritableComputedOptions } from 'vue';
+
+interface ComputedWithControlRefExtra {
+    /**
+     * Force update the computed value.
+     */
+    trigger: () => void;
+}
+interface ComputedRefWithControl<T> extends ComputedRef<T>, ComputedWithControlRefExtra {
+}
+interface WritableComputedRefWithControl<T> extends WritableComputedRef<T>, ComputedWithControlRefExtra {
+}
+type ComputedWithControlRef<T = any> = ComputedRefWithControl<T> | WritableComputedRefWithControl<T>;
+declare function computedWithControl<T>(source: WatchSource | MultiWatchSources, fn: ComputedGetter<T>, options?: WatchOptions): ComputedRefWithControl<T>;
+declare function computedWithControl<T>(source: WatchSource | MultiWatchSources, fn: WritableComputedOptions<T>, options?: WatchOptions): WritableComputedRefWithControl<T>;
+/** @deprecated use `computedWithControl` instead */
+declare const controlledComputed: typeof computedWithControl;
+
+export { computedWithControl, controlledComputed };
+export type { ComputedRefWithControl, ComputedWithControlRef, ComputedWithControlRefExtra, WritableComputedRefWithControl };

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import { ComputedRef, WritableComputedRef, WatchSource, MultiWatchSources, ComputedGetter, WatchOptions, WritableComputedOptions } from 'vue';
+
+interface ComputedWithControlRefExtra {
+    /**
+     * Force update the computed value.
+     */
+    trigger: () => void;
+}
+interface ComputedRefWithControl<T> extends ComputedRef<T>, ComputedWithControlRefExtra {
+}
+interface WritableComputedRefWithControl<T> extends WritableComputedRef<T>, ComputedWithControlRefExtra {
+}
+type ComputedWithControlRef<T = any> = ComputedRefWithControl<T> | WritableComputedRefWithControl<T>;
+declare function computedWithControl<T>(source: WatchSource | MultiWatchSources, fn: ComputedGetter<T>, options?: WatchOptions): ComputedRefWithControl<T>;
+declare function computedWithControl<T>(source: WatchSource | MultiWatchSources, fn: WritableComputedOptions<T>, options?: WatchOptions): WritableComputedRefWithControl<T>;
+/** @deprecated use `computedWithControl` instead */
+declare const controlledComputed: typeof computedWithControl;
+
+export { computedWithControl, controlledComputed };
+export type { ComputedRefWithControl, ComputedWithControlRef, ComputedWithControlRefExtra, WritableComputedRefWithControl };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { ComputedRef, WritableComputedRef, WatchSource, MultiWatchSources, ComputedGetter, WatchOptions, WritableComputedOptions } from 'vue';
+
+interface ComputedWithControlRefExtra {
+    /**
+     * Force update the computed value.
+     */
+    trigger: () => void;
+}
+interface ComputedRefWithControl<T> extends ComputedRef<T>, ComputedWithControlRefExtra {
+}
+interface WritableComputedRefWithControl<T> extends WritableComputedRef<T>, ComputedWithControlRefExtra {
+}
+type ComputedWithControlRef<T = any> = ComputedRefWithControl<T> | WritableComputedRefWithControl<T>;
+declare function computedWithControl<T>(source: WatchSource | MultiWatchSources, fn: ComputedGetter<T>, options?: WatchOptions): ComputedRefWithControl<T>;
+declare function computedWithControl<T>(source: WatchSource | MultiWatchSources, fn: WritableComputedOptions<T>, options?: WatchOptions): WritableComputedRefWithControl<T>;
+/** @deprecated use `computedWithControl` instead */
+declare const controlledComputed: typeof computedWithControl;
+
+export { computedWithControl, controlledComputed };
+export type { ComputedRefWithControl, ComputedWithControlRef, ComputedWithControlRefExtra, WritableComputedRefWithControl };

package/dist/index.mjs

@@ -0,0 +1,37 @@
+import { watch, customRef } from 'vue';
+
+function computedWithControl(source, fn, options = {}) {
+  let v = void 0;
+  let track;
+  let trigger;
+  let dirty = true;
+  const update = () => {
+    dirty = true;
+    trigger();
+  };
+  watch(source, update, { flush: "sync", ...options });
+  const get = typeof fn === "function" ? fn : fn.get;
+  const set = typeof fn === "function" ? void 0 : fn.set;
+  const result = customRef((_track, _trigger) => {
+    track = _track;
+    trigger = _trigger;
+    return {
+      get() {
+        if (dirty) {
+          v = get(v);
+          dirty = false;
+        }
+        track();
+        return v;
+      },
+      set(v2) {
+        set?.(v2);
+      }
+    };
+  });
+  result.trigger = update;
+  return result;
+}
+const controlledComputed = computedWithControl;
+
+export { computedWithControl, controlledComputed };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vue-computed-with-control",
+  "version": "1.0.0",
+  "description": "Computed with manual control",
+  "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",
+    "computedWithControl"
+  ],
+  "author": "VueFrag",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuefrag/vue-computed-with-control.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vuefrag/vue-computed-with-control/issues"
+  },
+  "homepage": "https://github.com/vuefrag/vue-computed-with-control#readme",
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "unbuild": "^2.0.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.4.0"
+  }
+}