From f4071e26ca92daf51d417c2abcbfc77e65ac65c5 Mon Sep 17 00:00:00 2001
From: Ajai Shankar <328008+ajaishankar@users.noreply.github.com>
Date: Tue, 17 Oct 2023 06:55:16 -0500
Subject: [PATCH] feat!: remove computed (see vue issue 4996)

---
 src/index.test.ts | 36 ++++++++++++++----------------------
 src/index.ts      |  8 --------
 2 files changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/index.test.ts b/src/index.test.ts
index 943780a..2d809dc 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -2,7 +2,7 @@ import { Application, Controller } from "@hotwired/stimulus";
 import { afterEach, beforeEach, describe, expect, it } from "@jest/globals";
 import { createEvent, fireEvent, screen, waitFor } from "@testing-library/dom";
 import { EffectScope, ShallowRef, computed, toRaw } from "@vue/reactivity";
-import { Computed, Effect, useStimulusReactive } from ".";
+import { Effect, useStimulusReactive } from ".";
 
 type HtmlInputEvent = {
   target: { value: string };
@@ -33,12 +33,12 @@ class CartItemController extends Controller {
     useStimulusReactive(identifier, application);
   }
 
+  get total() {
+    return this.priceValue * this.quantityValue;
+  }
+
   connect() {
-    this.effect(() => {
-      this.totalTarget.textContent = (
-        this.priceValue * this.quantityValue
-      ).toString();
-    });
+    this.effect(() => (this.totalTarget.textContent = this.total.toString()));
   }
 
   setQuantity(event: HtmlInputEvent) {
@@ -57,23 +57,20 @@ class CartController extends Controller {
   declare hasCartItemOutlet: boolean;
   declare cartItemOutlet: CartItemController;
   declare effect: Effect;
-  declare computed: Computed;
 
   static afterLoad(identifier: string, application: Application) {
     useStimulusReactive(identifier, application);
   }
 
+  get total() {
+    return this.cartItemOutlets.reduce((total, item) => total + item.total, 0);
+  }
+
   connect() {
-    const total = this.computed(() =>
-      this.cartItemOutlets.reduce(
-        (total, item) => total + item.priceValue * item.quantityValue,
-        0
-      )
-    );
-    this.effect(() => (this.checkoutTarget.disabled = total.value <= 0));
     this.effect(
-      () => (this.cartTotalTarget.textContent = total.value.toString())
+      () => (this.cartTotalTarget.textContent = this.total.toString())
     );
+    this.effect(() => (this.checkoutTarget.disabled = this.total == 0));
   }
 
   isDisconnected = false;
@@ -406,16 +403,11 @@ describe("stimulus reactive", () => {
       expect(properties).toContain("cartItemOutletDisconnected");
     });
 
-    it("should add lifecycle and reactive methods to prototype", () => {
+    it("should add method (initialize, disconnect, effect) to prototype", () => {
       const cart = getController("cart", "cart");
       const properties = Object.getOwnPropertyNames(cart.constructor.prototype);
       expect(properties).toEqual(
-        expect.arrayContaining([
-          "initialize",
-          "disconnect",
-          "effect",
-          "computed",
-        ])
+        expect.arrayContaining(["initialize", "disconnect", "effect"])
       );
     });
   });
diff --git a/src/index.ts b/src/index.ts
index 25410aa..711be6f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,12 +5,10 @@ import {
   effectScope,
   shallowReactive,
   shallowRef,
-  computed as vueComputed,
   effect as vueEffect,
 } from "@vue/reactivity";
 
 export type Effect = (fn: () => unknown) => void;
-export type Computed = <T>(fn: () => T) => { value: T };
 
 type ReactiveController = Controller & {
   __reactive: {
@@ -164,13 +162,7 @@ export function useStimulusReactive(
     this.__reactive.scope.run(() => vueEffect(fn));
   }
 
-  function computed<T>(this: ReactiveController, fn: () => T): { value: T } {
-    const computedRef = this.__reactive.scope.run(() => vueComputed(fn));
-    return computedRef!;
-  }
-
   Object.defineProperty(prototype, "effect", { value: effect });
-  Object.defineProperty(prototype, "computed", { value: computed });
   Object.defineProperty(prototype, "initialize", { value: initialize });
   Object.defineProperty(prototype, "disconnect", { value: disconnect });
   Object.keys(values).forEach((key) => valueChanged(key));