@react-spring/shared - npm Package Compare versions

Comparing version 9.0.0 to 9.1.0

index.cjs.js

@@ -6,4 +6,3 @@ 'use strict';
 var rafz = require('rafz');
-var fluids = require('fluids');
-var react = require('react');
+var React = require('react');
 
@@ -479,2 +478,66 @@ function noop() {
 
+const $get = Symbol.for("FluidValue.get");
+const $observers = Symbol.for("FluidValue.observers");
+const hasFluidValue = (arg) => Boolean(arg && arg[$get]);
+const getFluidValue = (arg) => arg && arg[$get] ? arg[$get]() : arg;
+const getFluidObservers = (target) => target[$observers] || null;
+function callFluidObserver(observer, event) {
+  if (observer.eventObserved) {
+    observer.eventObserved(event);
+  } else {
+    observer(event);
+  }
+}
+function callFluidObservers(target, event) {
+  let observers = target[$observers];
+  if (observers) {
+    observers.forEach((observer) => {
+      callFluidObserver(observer, event);
+    });
+  }
+}
+class FluidValue {
+  constructor(get) {
+    if (!get && !(get = this.get)) {
+      throw Error("Unknown getter");
+    }
+    setFluidGetter(this, get);
+  }
+}
+const setFluidGetter = (target, get) => setHidden(target, $get, get);
+function addFluidObserver(target, observer) {
+  if (target[$get]) {
+    let observers = target[$observers];
+    if (!observers) {
+      setHidden(target, $observers, observers = new Set());
+    }
+    if (!observers.has(observer)) {
+      observers.add(observer);
+      if (target.observerAdded) {
+        target.observerAdded(observers.size, observer);
+      }
+    }
+  }
+  return observer;
+}
+function removeFluidObserver(target, observer) {
+  let observers = target[$observers];
+  if (observers && observers.has(observer)) {
+    const count = observers.size - 1;
+    if (count) {
+      observers.delete(observer);
+    } else {
+      target[$observers] = null;
+    }
+    if (target.observerRemoved) {
+      target.observerRemoved(count, observer);
+    }
+  }
+}
+const setHidden = (target, key, value) => Object.defineProperty(target, key, {
+  value,
+  writable: true,
+  configurable: true
+});
+
 const numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
@@ -488,3 +551,3 @@ const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
     namedColorRegex = colors ? new RegExp(`(${Object.keys(colors).join("|")})`, "g") : /^\b$/;
-  const output = config.output.map((value) => fluids.getFluidValue(value).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba));
+  const output = config.output.map((value) => getFluidValue(value).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba));
   const keyframes = output.map((value) => value.match(numberRegex).map(Number));
@@ -505,9 +568,23 @@ const outputRanges = keyframes[0].map((_, i) => keyframes.map((values) => {
 const prefix = "react-spring: ";
-let flagInterpolate = false;
+const once = (fn) => {
+  const func = fn;
+  let called = false;
+  if (typeof func != "function") {
+    throw new TypeError(`${prefix}once requires a function parameter`);
+  }
+  return (...args) => {
+    if (!called) {
+      func(...args);
+      called = true;
+    }
+  };
+};
+const warnInterpolate = once(console.warn);
 function deprecateInterpolate() {
-  if (!flagInterpolate) {
-    flagInterpolate = true;
-    console.warn(prefix + 'The "interpolate" function is deprecated in v9 (use "to" instead)');
-  }
+  warnInterpolate(`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`);
 }
+const warnDirectCall = once(console.warn);
+function deprecateDirectCall() {
+  warnDirectCall(`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead)`);
+}
 
@@ -518,8 +595,8 @@ function isAnimatedString(value) {
 
-const useOnce = (effect) => react.useEffect(effect, emptyDeps);
+const useOnce = (effect) => React.useEffect(effect, emptyDeps);
 const emptyDeps = [];
 
 function useForceUpdate() {
-  const update = react.useState()[1];
-  const mounted = react.useState(makeMountedRef)[0];
+  const update = React.useState()[1];
+  const mounted = React.useState(makeMountedRef)[0];
   useOnce(mounted.unmount);
@@ -543,7 +620,7 @@ return () => {
 function useMemoOne(getResult, inputs) {
-  const [initial] = react.useState(() => ({
+  const [initial] = React.useState(() => ({
     inputs,
     result: getResult()
   }));
-  const committed = react.useRef();
+  const committed = React.useRef();
   const prevCache = committed.current;
@@ -562,3 +639,3 @@ let cache = prevCache;
   }
-  react.useEffect(() => {
+  React.useEffect(() => {
     committed.current = cache;
@@ -584,4 +661,4 @@ if (prevCache == initial) {
 function usePrev(value) {
-  const prevRef = react.useRef();
-  react.useEffect(() => {
+  const prevRef = React.useRef();
+  React.useEffect(() => {
     prevRef.current = value;
@@ -592,10 +669,4 @@ });
 
-Object.keys(fluids).forEach(function (k) {
-  if (k !== 'default') Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () {
-      return fluids[k];
-    }
-  });
-});
+const useLayoutEffect = typeof window !== "undefined" && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
+
 Object.defineProperty(exports, 'raf', {
@@ -607,3 +678,7 @@ enumerable: true,
 });
+exports.FluidValue = FluidValue;
 exports.Globals = globals;
+exports.addFluidObserver = addFluidObserver;
+exports.callFluidObserver = callFluidObserver;
+exports.callFluidObservers = callFluidObservers;
 exports.colorToRgba = colorToRgba;
@@ -614,2 +689,3 @@ exports.colors = colors$1;
 exports.defineHidden = defineHidden;
+exports.deprecateDirectCall = deprecateDirectCall;
 exports.deprecateInterpolate = deprecateInterpolate;
@@ -621,2 +697,5 @@ exports.each = each;
 exports.frameLoop = frameLoop;
+exports.getFluidObservers = getFluidObservers;
+exports.getFluidValue = getFluidValue;
+exports.hasFluidValue = hasFluidValue;
 exports.hex3 = hex3;
@@ -632,6 +711,9 @@ exports.hex4 = hex4;
 exports.noop = noop;
+exports.removeFluidObserver = removeFluidObserver;
 exports.rgb = rgb;
 exports.rgba = rgba;
+exports.setFluidGetter = setFluidGetter;
 exports.toArray = toArray;
 exports.useForceUpdate = useForceUpdate;
+exports.useLayoutEffect = useLayoutEffect;
 exports.useMemoOne = useMemoOne;
@@ -638,0 +720,0 @@ exports.useOnce = useOnce;

index.d.ts

 /// <reference types="react" />
 import { raf } from 'rafz';
 export { Timeout, raf } from 'rafz';
-import { FluidValue } from 'fluids';
-export * from 'fluids';
 import { InterpolatorConfig, OneOrMore, InterpolatorArgs, InterpolatorFactory, Lookup, AnyFn, Any } from '@react-spring/types';
+import { useEffect } from 'react';
 
+/**
+ * MIT License
+ * Copyright (c) Alec Larson
+ * 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.
+ */
+declare const $get: unique symbol;
+declare const $observers: unique symbol;
+/** Returns true if `arg` can be observed. */
+declare const hasFluidValue: (arg: any) => arg is FluidValue<any, any>;
+/**
+ * Get the current value.
+ * If `arg` is not observable, `arg` is returned.
+ */
+declare const getFluidValue: GetFluidValue;
+/** Get the current observer set. Never mutate it directly! */
+declare const getFluidObservers: GetFluidObservers;
+/** Send an event to an observer. */
+declare function callFluidObserver<E extends FluidEvent>(observer: FluidObserver<E>, event: E): void;
+/** Send an event to all observers. */
+declare function callFluidObservers<E extends FluidEvent>(target: FluidValue<any, E>, event: E): void;
+declare function callFluidObservers(target: object, event: FluidEvent): void;
+declare type GetFluidValue = {
+    <T, U = never>(target: T | FluidValue<U>): Exclude<T, FluidValue> | U;
+};
+declare type GetFluidObservers = {
+    <E extends FluidEvent>(target: FluidValue<any, E>): ReadonlySet<FluidObserver<E>> | null;
+    (target: object): ReadonlySet<FluidObserver> | null;
+};
+/** An event sent to `FluidObserver` objects. */
+interface FluidEvent<T = any> {
+    type: string;
+    parent: FluidValue<T>;
+}
+/**
+ * Extend this class for automatic TypeScript support when passing this
+ * value to `fluids`-compatible libraries.
+ */
+declare abstract class FluidValue<T = any, E extends FluidEvent<T> = any> {
+    private [$get];
+    private [$observers]?;
+    constructor(get?: () => T);
+    /** Get the current value. */
+    protected get?(): T;
+    /** Called after an observer is added. */
+    protected observerAdded?(count: number, observer: FluidObserver<E>): void;
+    /** Called after an observer is removed. */
+    protected observerRemoved?(count: number, observer: FluidObserver<E>): void;
+}
+/** An observer of `FluidValue` objects. */
+declare type FluidObserver<E extends FluidEvent = any> = {
+    eventObserved(event: E): void;
+} | {
+    (event: E): void;
+};
+/** Add the `FluidValue` type to every property. */
+declare type FluidProps<T> = T extends object ? {
+    [P in keyof T]: T[P] | FluidValue<Exclude<T[P], void>>;
+} : unknown;
+/** Remove the `FluidValue` type from every property. */
+declare type StaticProps<T extends object> = {
+    [P in keyof T]: T[P] extends FluidValue<infer U> ? U : T[P];
+};
+/** Define the getter called by `getFluidValue`. */
+declare const setFluidGetter: (target: object, get: () => any) => any;
+/** Observe a `fluids`-compatible object. */
+declare function addFluidObserver<T, E extends FluidEvent>(target: FluidValue<T, E>, observer: FluidObserver<E>): typeof observer;
+declare function addFluidObserver<E extends FluidEvent>(target: object, observer: FluidObserver<E>): typeof observer;
+/** Stop observing a `fluids`-compatible object. */
+declare function removeFluidObserver<E extends FluidEvent>(target: FluidValue<any, E>, observer: FluidObserver<E>): void;
+declare function removeFluidObserver<E extends FluidEvent>(target: object, observer: FluidObserver<E>): void;
+
 interface OpaqueAnimation {
@@ -260,2 +346,3 @@ idle: boolean;
 declare function deprecateInterpolate(): void;
+declare function deprecateDirectCall(): void;
 
@@ -305,2 +392,4 @@ declare function noop(): void;
 
-export { ColorName, globals as Globals, OpaqueAnimation, colorToRgba, colors$1 as colors, createInterpolator, createStringInterpolator$1 as createStringInterpolator, defineHidden, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, noop, rgb, rgba, toArray, useForceUpdate, useMemoOne, useOnce, usePrev };
+declare const useLayoutEffect: typeof useEffect;
+
+export { ColorName, FluidEvent, FluidObserver, FluidProps, FluidValue, globals as Globals, OpaqueAnimation, StaticProps, addFluidObserver, callFluidObserver, callFluidObservers, colorToRgba, colors$1 as colors, createInterpolator, createStringInterpolator$1 as createStringInterpolator, defineHidden, deprecateDirectCall, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, getFluidObservers, getFluidValue, hasFluidValue, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, noop, removeFluidObserver, rgb, rgba, setFluidGetter, toArray, useForceUpdate, useLayoutEffect, useMemoOne, useOnce, usePrev };

index.js

 import { raf } from 'rafz';
 export { raf } from 'rafz';
-import { getFluidValue } from 'fluids';
-export * from 'fluids';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useLayoutEffect as useLayoutEffect$1 } from 'react';
 
@@ -476,2 +474,66 @@ function noop() {
 
+const $get = Symbol.for("FluidValue.get");
+const $observers = Symbol.for("FluidValue.observers");
+const hasFluidValue = (arg) => Boolean(arg && arg[$get]);
+const getFluidValue = (arg) => arg && arg[$get] ? arg[$get]() : arg;
+const getFluidObservers = (target) => target[$observers] || null;
+function callFluidObserver(observer, event) {
+  if (observer.eventObserved) {
+    observer.eventObserved(event);
+  } else {
+    observer(event);
+  }
+}
+function callFluidObservers(target, event) {
+  let observers = target[$observers];
+  if (observers) {
+    observers.forEach((observer) => {
+      callFluidObserver(observer, event);
+    });
+  }
+}
+class FluidValue {
+  constructor(get) {
+    if (!get && !(get = this.get)) {
+      throw Error("Unknown getter");
+    }
+    setFluidGetter(this, get);
+  }
+}
+const setFluidGetter = (target, get) => setHidden(target, $get, get);
+function addFluidObserver(target, observer) {
+  if (target[$get]) {
+    let observers = target[$observers];
+    if (!observers) {
+      setHidden(target, $observers, observers = new Set());
+    }
+    if (!observers.has(observer)) {
+      observers.add(observer);
+      if (target.observerAdded) {
+        target.observerAdded(observers.size, observer);
+      }
+    }
+  }
+  return observer;
+}
+function removeFluidObserver(target, observer) {
+  let observers = target[$observers];
+  if (observers && observers.has(observer)) {
+    const count = observers.size - 1;
+    if (count) {
+      observers.delete(observer);
+    } else {
+      target[$observers] = null;
+    }
+    if (target.observerRemoved) {
+      target.observerRemoved(count, observer);
+    }
+  }
+}
+const setHidden = (target, key, value) => Object.defineProperty(target, key, {
+  value,
+  writable: true,
+  configurable: true
+});
+
 const numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
@@ -501,9 +563,23 @@ const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
 const prefix = "react-spring: ";
-let flagInterpolate = false;
+const once = (fn) => {
+  const func = fn;
+  let called = false;
+  if (typeof func != "function") {
+    throw new TypeError(`${prefix}once requires a function parameter`);
+  }
+  return (...args) => {
+    if (!called) {
+      func(...args);
+      called = true;
+    }
+  };
+};
+const warnInterpolate = once(console.warn);
 function deprecateInterpolate() {
-  if (!flagInterpolate) {
-    flagInterpolate = true;
-    console.warn(prefix + 'The "interpolate" function is deprecated in v9 (use "to" instead)');
-  }
+  warnInterpolate(`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`);
 }
+const warnDirectCall = once(console.warn);
+function deprecateDirectCall() {
+  warnDirectCall(`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead)`);
+}
 
@@ -584,3 +660,5 @@ function isAnimatedString(value) {
 
-export { globals as Globals, colorToRgba, colors$1 as colors, createInterpolator, createStringInterpolator$1 as createStringInterpolator, defineHidden, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, noop, rgb, rgba, toArray, useForceUpdate, useMemoOne, useOnce, usePrev };
+const useLayoutEffect = typeof window !== "undefined" && window.document && window.document.createElement ? useLayoutEffect$1 : useEffect;
+
+export { FluidValue, globals as Globals, addFluidObserver, callFluidObserver, callFluidObservers, colorToRgba, colors$1 as colors, createInterpolator, createStringInterpolator$1 as createStringInterpolator, defineHidden, deprecateDirectCall, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, getFluidObservers, getFluidValue, hasFluidValue, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, noop, removeFluidObserver, rgb, rgba, setFluidGetter, toArray, useForceUpdate, useLayoutEffect, useMemoOne, useOnce, usePrev };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@react-spring/shared",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Globals and shared modules",
@@ -13,5 +13,4 @@ "homepage": "https://github.com/pmndrs/react-spring/tree/v9/packages/shared#readme",
   "dependencies": {
-    "@react-spring/types": "^9.0.0",
-    "fluids": "^0.2.2",
-    "rafz": "^0.1.13"
+    "@react-spring/types": "^9.1.0",
+    "rafz": "^0.1.14"
   },
@@ -18,0 +17,0 @@ "peerDependencies": {

README.md

@@ -14,4 +14,2 @@ # @react-spring/shared
 - The `colorToRgba` function
-- The [`fluids`] package
-
-[`fluids`]: https://www.npmjs.com/package/fluids
+- The `FluidValue` class and related functions

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77964

increased by17.98%

Dependency count

3

decreased by-25%

Lines of code

1708

increased by16.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

15

decreased by-11.76%

Dependency changes

• - Removedfluids@^0.2.2

• - Removedfluids@0.2.9(transitive)

• Updated@react-spring/types@^9.1.0

• Updatedrafz@^0.1.14