stimulus-reactive - npm Package Compare versions

Comparing version 0.1.4 to 1.0.0

dist/index.d.ts

 import { Application } from "@hotwired/stimulus";
 export type Effect = (fn: () => unknown) => void;
-export type Computed = <T>(fn: () => T) => {
-    value: T;
-};
 export declare function useStimulusReactive(identifier: string, application: Application): void;

dist/index.js

@@ -9,4 +9,2 @@ function makeMap(str, expectsLowerCase) {
 }
-const NOOP = () => {
-};
 const extend = Object.assign;
@@ -17,3 +15,2 @@ const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 const isMap = (val) => toTypeString(val) === "[object Map]";
-const isFunction = (val) => typeof val === "function";
 const isString = (val) => typeof val === "string";
@@ -917,47 +914,2 @@ const isSymbol = (val) => typeof val === "symbol";
 
-class ComputedRefImpl {
-  constructor(getter, _setter, isReadonly, isSSR) {
-    this._setter = _setter;
-    this.dep = void 0;
-    this.__v_isRef = true;
-    this["__v_isReadonly"] = false;
-    this._dirty = true;
-    this.effect = new ReactiveEffect(getter, () => {
-      if (!this._dirty) {
-        this._dirty = true;
-        triggerRefValue(this);
-      }
-    });
-    this.effect.computed = this;
-    this.effect.active = this._cacheable = !isSSR;
-    this["__v_isReadonly"] = isReadonly;
-  }
-  get value() {
-    const self = toRaw(this);
-    trackRefValue(self);
-    if (self._dirty || !self._cacheable) {
-      self._dirty = false;
-      self._value = self.effect.run();
-    }
-    return self._value;
-  }
-  set value(newValue) {
-    this._setter(newValue);
-  }
-}
-function computed(getterOrOptions, debugOptions, isSSR = false) {
-  let getter;
-  let setter;
-  const onlyGetter = isFunction(getterOrOptions);
-  if (onlyGetter) {
-    getter = getterOrOptions;
-    setter = NOOP;
-  } else {
-    getter = getterOrOptions.get;
-    setter = getterOrOptions.set;
-  }
-  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
-  return cRef;
-}
-
 function getPropertyDescriptors(prototype, pattern, checkAncestors = true) {
@@ -1075,8 +1027,3 @@ const matches = {};
     }
-    function computed$1(fn) {
-        const computedRef = this.__reactive.scope.run(() => computed(fn));
-        return computedRef;
-    }
     Object.defineProperty(prototype, "effect", { value: effect$1 });
-    Object.defineProperty(prototype, "computed", { value: computed$1 });
     Object.defineProperty(prototype, "initialize", { value: initialize });
@@ -1083,0 +1030,0 @@ Object.defineProperty(prototype, "disconnect", { value: disconnect });

dist/index.umd.js

@@ -15,4 +15,2 @@ (function (global, factory) {
   }
-  const NOOP = () => {
-  };
   const extend = Object.assign;
@@ -23,3 +21,2 @@ const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
   const isMap = (val) => toTypeString(val) === "[object Map]";
-  const isFunction = (val) => typeof val === "function";
   const isString = (val) => typeof val === "string";
@@ -923,47 +920,2 @@ const isSymbol = (val) => typeof val === "symbol";
 
-  class ComputedRefImpl {
-    constructor(getter, _setter, isReadonly, isSSR) {
-      this._setter = _setter;
-      this.dep = void 0;
-      this.__v_isRef = true;
-      this["__v_isReadonly"] = false;
-      this._dirty = true;
-      this.effect = new ReactiveEffect(getter, () => {
-        if (!this._dirty) {
-          this._dirty = true;
-          triggerRefValue(this);
-        }
-      });
-      this.effect.computed = this;
-      this.effect.active = this._cacheable = !isSSR;
-      this["__v_isReadonly"] = isReadonly;
-    }
-    get value() {
-      const self = toRaw(this);
-      trackRefValue(self);
-      if (self._dirty || !self._cacheable) {
-        self._dirty = false;
-        self._value = self.effect.run();
-      }
-      return self._value;
-    }
-    set value(newValue) {
-      this._setter(newValue);
-    }
-  }
-  function computed(getterOrOptions, debugOptions, isSSR = false) {
-    let getter;
-    let setter;
-    const onlyGetter = isFunction(getterOrOptions);
-    if (onlyGetter) {
-      getter = getterOrOptions;
-      setter = NOOP;
-    } else {
-      getter = getterOrOptions.get;
-      setter = getterOrOptions.set;
-    }
-    const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
-    return cRef;
-  }
-
   function getPropertyDescriptors(prototype, pattern, checkAncestors = true) {
@@ -1081,8 +1033,3 @@ const matches = {};
       }
-      function computed$1(fn) {
-          const computedRef = this.__reactive.scope.run(() => computed(fn));
-          return computedRef;
-      }
       Object.defineProperty(prototype, "effect", { value: effect$1 });
-      Object.defineProperty(prototype, "computed", { value: computed$1 });
       Object.defineProperty(prototype, "initialize", { value: initialize });
@@ -1089,0 +1036,0 @@ Object.defineProperty(prototype, "disconnect", { value: disconnect });

package.json

 {
   "name": "stimulus-reactive",
-  "version": "0.1.4",
+  "version": "1.0.0",
   "description": "Reactivity for the Stimulus you already have.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -8,3 +8,3 @@ [![version(scoped)](https://img.shields.io/npm/v/stimulus-reactive.svg)](https://www.npmjs.com/package/stimulus-reactive)
 
-#### View the [Shopping Cart Demo](https://ajaishankar.github.io/stimulus-reactive/) and the [Controllers](https://github.com/ajaishankar/stimulus-reactive/blob/main/docs/)
+#### 🚀 View the [Shopping Cart Demo](https://ajaishankar.github.io/stimulus-reactive/) and the [Controllers](https://github.com/ajaishankar/stimulus-reactive/blob/main/docs/)
 
@@ -41,9 +41,9 @@ When you love the refreshing simplicity of Stimulus but miss the reactivity of other big frameworks.
 
+  get total() {
+    return this.priceValue * this.quantityValue;
+  }
+
   connect() {
-    // item total will be updated when price or quantity changes
-    this.effect(() => {
-      this.totalTarget.textContent = (
-        this.priceValue * this.quantityValue
-      ).toString();
-    });
+    // displayed total will be updated when price or quantity changes
+    this.effect(() => (this.totalTarget.textContent = this.total.toString()));
   }
@@ -60,19 +60,16 @@ }
 
+  get total() {
+    return this.cartItemOutlets.reduce((total, item) => total + item.total, 0);
+  }
+
   connect() {
-    // total will be updated when items get added or removed
-    // or when an item's price or quantity changes
-    const total = this.computed(() =>
-      this.cartItemOutlets.reduce(
-        (total, item) => total + item.priceValue * item.quantityValue,
-        0
-      )
-    );
+    this.effect(() => {
+      // text content is kept in sync with cart total
+      this.cartTotalTarget.textContent = total.toString()
+      // checkout button is enabled only when balance is due
+      this.checkoutTarget.disabled = total == 0
+    });
 
-    // checkout button will be enabled only when balance is due
-    this.effect(() => (this.checkoutTarget.disabled = total.value <= 0));
-
-    // text content is kept in sync with cart total
-    this.effect(
-      () => (this.cartTotalTarget.textContent = total.value.toString())
-    );
+    // another effect for some other dependency
+    this.effect(() => ...);
   }
@@ -87,6 +84,5 @@ }
 1. Call `useStimulusReactive` in the static `afterLoad` method
-2. In the `connect` lifecycle method specify the controller logic using `effect`
+2. In the `connect` lifecycle method specify controller behavior using `effect`s
 3. Effects will run whenever any dependency changes  
    This will be familiar to those coming from other frameworks like React, Vue etc.
-4. Use `computed` (as needed) for any optimizations
 
@@ -99,2 +95,2 @@ That's pretty much it!
 
-Give it a go and hopefully this helps make your [majestic monolith](https://m.signalvnoise.com/the-majestic-monolith-29166d022228) sparkle!
+Give it a go and hopefully this helps make your [majestic monolith](https://m.signalvnoise.com/the-majestic-monolith-29166d022228) sparkle!

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

67661

decreased by-4.58%

Lines of code

2055

decreased by-4.95%

Number of lines in readme file

92

decreased by-3.16%

No dependency changes