solid-flip - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

dist/index.d.ts

@@ -7,4 +7,2 @@ import { Accessor } from 'solid-js';
 
-declare type ArrayOr_2<T> = T[] | T;
-
 declare type CSSStyleKeys = ValueOf<{
@@ -36,2 +34,3 @@ [Key in keyof CSSStyleDeclaration]: Key extends string ? CSSStyleDeclaration[Key] extends string ? Key : never : never;
     preserve: false | 'scale' | 'position' | 'all';
+    properties: string[];
     debug: boolean;
@@ -59,2 +58,3 @@ }
     id: string;
+    enabled?: boolean;
     duration?: number;
@@ -97,4 +97,2 @@ easing?: string;
 
-declare type Resolved<T extends ArrayOr_2<unknown>> = T extends readonly [infer K, ...infer U] ? [K, ...Resolved<U>] : T extends [] ? [] : [T];
-
 export declare const Unflip: (props: UnflipProps) => JSX.Element;
@@ -109,9 +107,2 @@
 
-export declare const When: <const When extends ArrayOr_2<unknown>>(props: WhenProps<When>) => JSX.Element;
-
-export declare interface WhenProps<When extends ArrayOr_2<unknown>> {
-    when: When;
-    children: (...params: Resolved<When>) => JSX.Element;
-}
-
 export { }

dist/index.es.js

 import { createComponent, isDev } from "solid-js/web";
-import { $PROXY, createSignal, createContext, useContext, createMemo, splitProps, mergeProps, onMount, createComputed, on, createRenderEffect, createEffect, onCleanup, getOwner, runWithOwner, For } from "solid-js";
+import { createContext, createSignal, useContext, createMemo, splitProps, mergeProps, onMount, createComputed, on, createRenderEffect, createEffect, onCleanup, getOwner, runWithOwner } from "solid-js";
 const dimensionToNumber = (value, parent) => {
@@ -52,95 +52,2 @@ let result = 0;
 };
-const $RAW = Symbol("store-raw"), $NODE = Symbol("store-node"), $HAS = Symbol("store-has"), $SELF = Symbol("store-self");
-function isWrappable(obj) {
-  let proto;
-  return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
-}
-function unwrap(item, set = /* @__PURE__ */ new Set()) {
-  let result, unwrapped, v, prop;
-  if (result = item != null && item[$RAW]) return result;
-  if (!isWrappable(item) || set.has(item)) return item;
-  if (Array.isArray(item)) {
-    if (Object.isFrozen(item)) item = item.slice(0);
-    else set.add(item);
-    for (let i = 0, l = item.length; i < l; i++) {
-      v = item[i];
-      if ((unwrapped = unwrap(v, set)) !== v) item[i] = unwrapped;
-    }
-  } else {
-    if (Object.isFrozen(item)) item = Object.assign({}, item);
-    else set.add(item);
-    const keys = Object.keys(item), desc = Object.getOwnPropertyDescriptors(item);
-    for (let i = 0, l = keys.length; i < l; i++) {
-      prop = keys[i];
-      if (desc[prop].get) continue;
-      v = item[prop];
-      if ((unwrapped = unwrap(v, set)) !== v) item[prop] = unwrapped;
-    }
-  }
-  return item;
-}
-function getNodes(target, symbol) {
-  let nodes = target[symbol];
-  if (!nodes)
-    Object.defineProperty(target, symbol, {
-      value: nodes = /* @__PURE__ */ Object.create(null)
-    });
-  return nodes;
-}
-function getNode(nodes, property, value) {
-  if (nodes[property]) return nodes[property];
-  const [s, set] = createSignal(value, {
-    equals: false,
-    internal: true
-  });
-  s.$ = set;
-  return nodes[property] = s;
-}
-function setProperty(state, property, value, deleting = false) {
-  if (!deleting && state[property] === value) return;
-  const prev = state[property], len = state.length;
-  if (value === void 0) {
-    delete state[property];
-    if (state[$HAS] && state[$HAS][property] && prev !== void 0) state[$HAS][property].$();
-  } else {
-    state[property] = value;
-    if (state[$HAS] && state[$HAS][property] && prev === void 0) state[$HAS][property].$();
-  }
-  let nodes = getNodes(state, $NODE), node;
-  if (node = getNode(nodes, property, prev)) node.$(() => value);
-  if (Array.isArray(state) && state.length !== len) {
-    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
-    (node = getNode(nodes, "length", len)) && node.$(state.length);
-  }
-  (node = nodes[$SELF]) && node.$();
-}
-const producers = /* @__PURE__ */ new WeakMap();
-const setterTraps = {
-  get(target, property) {
-    if (property === $RAW) return target;
-    const value = target[property];
-    let proxy;
-    return isWrappable(value) ? producers.get(value) || (producers.set(value, proxy = new Proxy(value, setterTraps)), proxy) : value;
-  },
-  set(target, property, value) {
-    setProperty(target, property, unwrap(value));
-    return true;
-  },
-  deleteProperty(target, property) {
-    setProperty(target, property, void 0, true);
-    return true;
-  }
-};
-function produce(fn) {
-  return (state) => {
-    if (isWrappable(state)) {
-      let proxy;
-      if (!(proxy = producers.get(state))) {
-        producers.set(state, proxy = new Proxy(state, setterTraps));
-      }
-      fn(proxy);
-    }
-    return state;
-  };
-}
 const defaultConfig = {
@@ -150,2 +57,3 @@ duration: 300,
   preserve: false,
+  properties: ["translate", "scale", "color", "opacity", "border"],
   debug: false
@@ -198,10 +106,10 @@ };
         attach: (id) => {
-          setAttachedFlipIds(produce((prev) => {
-            prev.add(id);
-          }));
+          const attached = attachedFlipIds();
+          attached.add(id);
+          setAttachedFlipIds(attached);
         },
         detach: (id) => {
-          setAttachedFlipIds(produce((prev) => {
-            prev.delete(id);
-          }));
+          const attached = attachedFlipIds();
+          attached.delete(id);
+          setAttachedFlipIds(attached);
         },
@@ -292,5 +200,7 @@ defaultConfig: {
   const [animationProps, timingProps, triggerProps, local] = splitProps(mergeProps({
+    enabled: true,
     duration: defaultConfig2.duration,
     easing: defaultConfig2.easing,
     preserve: defaultConfig2.preserve,
+    properties: defaultConfig2.properties,
     with: [],
@@ -301,4 +211,4 @@ debug: defaultConfig2.debug
   const triggerWith = createMemo(() => {
-    const withList = triggerProps.with;
-    return Array.isArray(withList) ? withList : [withList];
+    const value = triggerProps.with;
+    return Array.isArray(value) ? value : [value];
   });
@@ -367,18 +277,6 @@ const properties = createMemo(() => {
     const unflipStates = unflips().map((it) => captureState(it, properties()));
-    const startKeyframe = {
-      translate: `${deltaX}px ${deltaY}px`,
-      scale: `${deltaWidth} ${deltaHeight}`,
-      backgroundColor: firstState.color,
-      opacity: firstState.opacity,
-      borderTopLeftRadius: `${firstState.borderTopLeftXRadius / safeDeltaWidth}px ${firstState.borderTopLeftYRadius / safeDeltaHeight}px`,
-      borderTopRightRadius: `${firstState.borderTopRightXRadius / safeDeltaWidth}px ${firstState.borderTopRightYRadius / safeDeltaHeight}px`,
-      borderBottomLeftRadius: `${firstState.borderBottomLeftXRadius / safeDeltaWidth}px ${firstState.borderBottomLeftYRadius / safeDeltaHeight}px`,
-      borderBottomRightRadius: `${firstState.borderBottomRightXRadius / safeDeltaWidth}px ${firstState.borderBottomRightYRadius / safeDeltaHeight}px`
-    };
-    const endKeyframe = {};
-    if (biasX || biasY) endKeyframe.translate = `${biasX ?? 0}px ${biasY ?? 0}px`;
-    if (biasWidth !== 1 || biasHeight !== 1) endKeyframe.scale = `${biasWidth} ${biasHeight}`;
-    if (animationProps.properties) {
-      const properties2 = Array.isArray(animationProps.properties) ? animationProps.properties : [animationProps.properties];
-      properties2.forEach((property) => {
+    const allowed = properties();
+    const startKeyframe = {};
+    if (allowed) {
+      allowed.forEach((property) => {
         var _a;
@@ -390,2 +288,15 @@ const value = (_a = firstState.additionalProperties) == null ? void 0 : _a[property];
     }
+    const allowedTransform = allowed.includes("transform");
+    const allowedBorderRadius = allowed.includes("border") || allowed.includes("borderRadius");
+    if (allowed.includes("translate") || allowedTransform) startKeyframe.translate = `${deltaX}px ${deltaY}px`;
+    if (allowed.includes("scale") || allowedTransform) startKeyframe.scale = `${deltaWidth} ${deltaHeight}`;
+    if (allowed.includes("color") || allowed.some((it) => it.startsWith("background"))) startKeyframe.backgroundColor = firstState.color;
+    if (allowed.includes("opacity")) startKeyframe.opacity = firstState.opacity;
+    if (allowed.includes("borderTopLeftRadius") || allowedBorderRadius) startKeyframe.borderTopLeftRadius = `${firstState.borderTopLeftXRadius / safeDeltaWidth}px ${firstState.borderTopLeftYRadius / safeDeltaHeight}px`;
+    if (allowed.includes("borderTopRightRadius") || allowedBorderRadius) startKeyframe.borderTopRightRadius = `${firstState.borderTopRightXRadius / safeDeltaWidth}px ${firstState.borderTopRightYRadius / safeDeltaHeight}px`;
+    if (allowed.includes("borderBottomLeftRadius") || allowedBorderRadius) startKeyframe.borderBottomLeftRadius = `${firstState.borderBottomLeftXRadius / safeDeltaWidth}px ${firstState.borderBottomLeftYRadius / safeDeltaHeight}px`;
+    if (allowed.includes("borderBottomRightRadius") || allowedBorderRadius) startKeyframe.borderBottomRightRadius = `${firstState.borderBottomRightXRadius / safeDeltaWidth}px ${firstState.borderBottomRightYRadius / safeDeltaHeight}px`;
+    const endKeyframe = {};
+    if (biasX || biasY) endKeyframe.translate = `${biasX ?? 0}px ${biasY ?? 0}px`;
+    if (biasWidth !== 1 || biasHeight !== 1) endKeyframe.scale = `${biasWidth} ${biasHeight}`;
     const childElement = child();
@@ -450,2 +361,3 @@ if (!childElement) return null;
   const flip = () => {
+    if (!local.enabled) return;
     const childElement = child();
@@ -514,50 +426,52 @@ if (!childElement) return;
     const parentElement = childElement.parentElement;
-    queueMicrotask(() => {
-      runWithOwner(owner, () => {
-        var _a;
-        if (exitClassName && parentElement) {
-          const childElement2 = child();
-          if (!childElement2) return;
-          animation == null ? void 0 : animation.cancel();
-          animation = null;
-          childElement2.classList.add(exitClassName);
-          if (afterElement) afterElement.insertAdjacentElement("beforebegin", childElement2);
-          else if (beforeElement) beforeElement.insertAdjacentElement("afterend", childElement2);
-          else parentElement.append(childElement2);
-          const lastState = captureState(childElement2, properties());
-          const rect = {
-            x: lastState.rect.x,
-            y: lastState.rect.y,
-            width: lastState.rect.width,
-            height: lastState.rect.height
-          };
-          const isNewStatePositionAbsolute = newState.position === "absolute" || newState.position === "fixed";
-          const isLastStatePositionAbsolute = lastState.position === "absolute" || lastState.position === "fixed";
-          const options = {
-            biasX: 0,
-            biasY: 0,
-            biasWidth: 1,
-            biasHeight: 1
-          };
-          const isPositionPreserve = timingProps.preserve === "position" || timingProps.preserve === "all";
-          const isScalePreserve = timingProps.preserve === "scale" || timingProps.preserve === "all";
-          if (isNewStatePositionAbsolute && !isLastStatePositionAbsolute) {
-            if (isPositionPreserve) options.biasX = lastState.rect.x - newState.rect.x;
-            if (isPositionPreserve) options.biasY = lastState.rect.y - newState.rect.y;
-            if (isScalePreserve) options.biasWidth = lastState.rect.width / newState.rect.width;
-            if (isScalePreserve) options.biasHeight = lastState.rect.height / newState.rect.height;
+    if (local.enabled) {
+      queueMicrotask(() => {
+        runWithOwner(owner, () => {
+          var _a;
+          if (exitClassName && parentElement) {
+            const childElement2 = child();
+            if (!childElement2) return;
+            animation == null ? void 0 : animation.cancel();
+            animation = null;
+            childElement2.classList.add(exitClassName);
+            if (afterElement) afterElement.insertAdjacentElement("beforebegin", childElement2);
+            else if (beforeElement) beforeElement.insertAdjacentElement("afterend", childElement2);
+            else parentElement.append(childElement2);
+            const lastState = captureState(childElement2, properties());
+            const rect = {
+              x: lastState.rect.x,
+              y: lastState.rect.y,
+              width: lastState.rect.width,
+              height: lastState.rect.height
+            };
+            const isNewStatePositionAbsolute = newState.position === "absolute" || newState.position === "fixed";
+            const isLastStatePositionAbsolute = lastState.position === "absolute" || lastState.position === "fixed";
+            const options = {
+              biasX: 0,
+              biasY: 0,
+              biasWidth: 1,
+              biasHeight: 1
+            };
+            const isPositionPreserve = timingProps.preserve === "position" || timingProps.preserve === "all";
+            const isScalePreserve = timingProps.preserve === "scale" || timingProps.preserve === "all";
+            if (isNewStatePositionAbsolute && !isLastStatePositionAbsolute) {
+              if (isPositionPreserve) options.biasX = lastState.rect.x - newState.rect.x;
+              if (isPositionPreserve) options.biasY = lastState.rect.y - newState.rect.y;
+              if (isScalePreserve) options.biasWidth = lastState.rect.width / newState.rect.width;
+              if (isScalePreserve) options.biasHeight = lastState.rect.height / newState.rect.height;
+            }
+            if (!isNewStatePositionAbsolute && isLastStatePositionAbsolute) {
+              if (isPositionPreserve) options.biasX = newState.rect.x - lastState.rect.x + (newState.rect.width - lastState.rect.width) / 2;
+              if (isPositionPreserve) options.biasY = newState.rect.y - lastState.rect.y + (newState.rect.height - lastState.rect.height) / 2;
+              if (isScalePreserve) options.biasWidth = newState.rect.width / lastState.rect.width;
+              if (isScalePreserve) options.biasHeight = newState.rect.height / lastState.rect.height;
+            }
+            lastState.rect = DOMRect.fromRect(rect);
+            (_a = animate(newState, lastState, options)) == null ? void 0 : _a.addEventListener("finish", () => {
+              childElement2.remove();
+            });
           }
-          if (!isNewStatePositionAbsolute && isLastStatePositionAbsolute) {
-            if (isPositionPreserve) options.biasX = newState.rect.x - lastState.rect.x + (newState.rect.width - lastState.rect.width) / 2;
-            if (isPositionPreserve) options.biasY = newState.rect.y - lastState.rect.y + (newState.rect.height - lastState.rect.height) / 2;
-            if (isScalePreserve) options.biasWidth = newState.rect.width / lastState.rect.width;
-            if (isScalePreserve) options.biasHeight = newState.rect.height / lastState.rect.height;
-          }
-          lastState.rect = DOMRect.fromRect(rect);
-          (_a = animate(newState, lastState, options)) == null ? void 0 : _a.addEventListener("finish", () => {
-            childElement2.remove();
-          });
-        }
+        });
       });
-    });
+    }
     setTimeout(() => {
@@ -615,14 +529,2 @@ runWithOwner(owner, () => {
 };
-const When = (props) => {
-  const trigger = () => {
-    const whenProperty = props.when;
-    return Array.isArray(whenProperty) ? whenProperty : [whenProperty];
-  };
-  return createComponent(For, {
-    get each() {
-      return [trigger()];
-    },
-    children: (params) => props.children(...params)
-  });
-};
 export {
@@ -634,4 +536,3 @@ Flip,
   NestedFlipProvider,
-  Unflip,
-  When
+  Unflip
 };

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("solid-js/web"),require("solid-js")):"function"==typeof define&&define.amd?define(["exports","solid-js/web","solid-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["solid-flip"]={},e.solid,e.solid)}(this,(function(e,t,r){"use strict";const i=(e,t)=>{let r=0;return e.endsWith("px")&&(r=parseFloat(e.replace("px",""))),e.endsWith("%")&&(r=t*(parseFloat(e.replace("%",""))/100)),Number.isFinite(r)||(r=0),r},n=(e,t)=>{if(!e.includes(" ")){const r=i(e,t);return[r,r]}const[r,n]=e.split(" ");return[i(r,t),i(n,t)]},o=(e,t=[])=>{const r=getComputedStyle(e),i=e.getBoundingClientRect(),o=Math.max(i.width,i.height),s=t.reduce(((e,t)=>({...e,[t]:null==r?void 0:r[t]})),{}),a=r.scale.split(" ").map((e=>{const t=Number(e);return Number.isFinite(t)?t:1})),[l,c]=1===a.length?[a[0],a[0]]:a,[d,u]=n(r.borderTopLeftRadius,o),[p,h]=n(r.borderTopRightRadius,o),[f,g]=n(r.borderBottomLeftRadius,o),[b,m]=n(r.borderBottomRightRadius,o);return{rect:i,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:d*l,borderTopLeftYRadius:u*c,borderTopRightXRadius:p*l,borderTopRightYRadius:h*c,borderBottomLeftXRadius:f*l,borderBottomLeftYRadius:g*c,borderBottomRightXRadius:b*l,borderBottomRightYRadius:m*c,additionalProperties:s}},s=Symbol("store-raw"),a=Symbol("store-node"),l=Symbol("store-has"),c=Symbol("store-self");function d(e){let t;return null!=e&&"object"==typeof e&&(e[r.$PROXY]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function u(e,t=new Set){let r,i,n,o;if(r=null!=e&&e[s])return r;if(!d(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let r=0,o=e.length;r<o;r++)n=e[r],(i=u(n,t))!==n&&(e[r]=i)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const r=Object.keys(e),s=Object.getOwnPropertyDescriptors(e);for(let a=0,l=r.length;a<l;a++)o=r[a],s[o].get||(n=e[o],(i=u(n,t))!==n&&(e[o]=i))}return e}function p(e,t,i){if(e[t])return e[t];const[n,o]=r.createSignal(i,{equals:!1,internal:!0});return n.$=o,e[t]=n}function h(e,t,r,i=!1){if(!i&&e[t]===r)return;const n=e[t],o=e.length;void 0===r?(delete e[t],e[l]&&e[l][t]&&void 0!==n&&e[l][t].$()):(e[t]=r,e[l]&&e[l][t]&&void 0===n&&e[l][t].$());let s,d=function(e,t){let r=e[t];return r||Object.defineProperty(e,t,{value:r=Object.create(null)}),r}(e,a);if((s=p(d,t,n))&&s.$((()=>r)),Array.isArray(e)&&e.length!==o){for(let t=e.length;t<o;t++)(s=d[t])&&s.$();(s=p(d,"length",o))&&s.$(e.length)}(s=d[c])&&s.$()}const f=new WeakMap,g={get(e,t){if(t===s)return e;const r=e[t];let i;return d(r)?f.get(r)||(f.set(r,i=new Proxy(r,g)),i):r},set:(e,t,r)=>(h(e,t,u(r)),!0),deleteProperty:(e,t)=>(h(e,t,void 0,!0),!0)};function b(e){return t=>{if(d(t)){let r;(r=f.get(t))||f.set(t,r=new Proxy(t,g)),e(r)}return t}}const m={duration:300,easing:"ease",preserve:!1,debug:!1},y=r.createContext(),{Provider:w}=y,v=r.createContext(),x=e=>{const i=r.useContext(y);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:n,getLastState:o}=i,s=r.useContext(v),a=r.createMemo((()=>{const t=n(e.id);if(!t)return null;const r=null==s?void 0:s.firstParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}})),l=r.createMemo((()=>{const t=o(e.id);if(!t)return null;const r=null==s?void 0:s.lastParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}}));return t.createComponent(v.Provider,{get value(){return{parentId:()=>e.id,firstParentState:a,lastParentState:l,unflips:()=>e.unflips,setUnflips:e.setUnflips}},get children(){return e.children}})};e.Flip=e=>{const i=r.useContext(y),n=r.useContext(v);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{attachedFlipIds:s,getFirstState:a,setFirstState:l,setLastState:c,recordFirstState:d,detach:u,attach:p,defaultConfig:h}=i,[f,g,b,m]=r.splitProps(r.mergeProps({duration:h.duration,easing:h.easing,preserve:h.preserve,with:[],debug:h.debug},e),["duration","easing","properties"],["enter","exit","preserve"],["with"]),[w,R]=r.createSignal([]),S=r.createMemo((()=>{const e=b.with;return Array.isArray(e)?e:[e]})),F=r.createMemo((()=>{const e=f.properties;return e?Array.isArray(e)?e:[e]:[]})),$=r.createMemo((()=>{const e=g.enter;return"string"==typeof e?e:!0===e?"enter":null})),P=r.createMemo((()=>{const e=g.exit;return"string"==typeof e?e:!0===e?"exit":null}));let C=null,O=null;const L=()=>{let e=C;return e instanceof Function&&(e=e()),Array.isArray(e)?(console.warn('Flip children must be a "single" DOM node',e),null):e instanceof HTMLElement||e instanceof SVGElement?e:(console.warn("Flip children looks like not a DOM node",e),null)},A=(e,r,{biasX:i=0,biasY:s=0,biasWidth:a=1,biasHeight:l=1}={})=>{const c=null==n?void 0:n.firstParentState(),d=null==n?void 0:n.lastParentState();let u=0,p=0,h=1,g=1;if(d&&c){const e=(c.rect.width-d.rect.width)/2,t=(c.rect.height-d.rect.height)/2;u=c.rect.left-d.rect.left+e,p=c.rect.top-d.rect.top+t,h=c.rect.width/d.rect.width,g=c.rect.height/d.rect.height}const b=(e.rect.width-r.rect.width)/2,y=(e.rect.height-r.rect.height)/2,v=-1*u+e.rect.left-r.rect.left+b,x=-1*p+e.rect.top-r.rect.top+y,R=e.rect.width/r.rect.width/h,S=e.rect.height/r.rect.height/g,$=0===R?1:R,P=0===S?1:S,C=w().map((e=>o(e,F()))),A={translate:`${v}px ${x}px`,scale:`${R} ${S}`,backgroundColor:e.color,opacity:e.opacity,borderTopLeftRadius:`${e.borderTopLeftXRadius/$}px ${e.borderTopLeftYRadius/P}px`,borderTopRightRadius:`${e.borderTopRightXRadius/$}px ${e.borderTopRightYRadius/P}px`,borderBottomLeftRadius:`${e.borderBottomLeftXRadius/$}px ${e.borderBottomLeftYRadius/P}px`,borderBottomRightRadius:`${e.borderBottomRightXRadius/$}px ${e.borderBottomRightYRadius/P}px`},E={};if((i||s)&&(E.translate=`${i??0}px ${s??0}px`),1===a&&1===l||(E.scale=`${a} ${l}`),f.properties){(Array.isArray(f.properties)?f.properties:[f.properties]).forEach((t=>{var r;const i=null==(r=e.additionalProperties)?void 0:r[t];i?A[t]=i:console.warn(`Property "${t}" is not found in the first state`)}))}const M=L();if(!M)return null;O=M.animate([{transformOrigin:"50% 50%",...A},E],{duration:f.duration,easing:f.easing,fill:"both"})??null,O.addEventListener("finish",(()=>O=null),{once:!0});const j=w().map(((e,t)=>{const i=C[t],n=i.rect.left-r.rect.left,o=i.rect.top-r.rect.top;return()=>{const t=e,[r,s]=getComputedStyle(M).scale.split(" ").map(Number);if(!Number.isFinite(r)||!Number.isFinite(s))return t.style.removeProperty("scale"),t.style.removeProperty("translate"),!0;const a=1/r,l=1/s,c=i.rect.width*(a-1)/2+n*(a-1),d=i.rect.height*(l-1)/2+o*(l-1);return t.style.setProperty("translate",`${c}px ${d}px`),t.style.setProperty("scale",`${a} ${l}`),!1}})),T=()=>{j.map((e=>e())).every(Boolean)||requestAnimationFrame(T)};if(T(),t.isDev&&m.debug){const e=()=>{if(!O)return void Object.keys(A).forEach((e=>{delete M.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]}));const t=getComputedStyle(M);Object.keys(A).forEach((e=>{M.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]=t[e]})),requestAnimationFrame(e)};e()}return O},E=()=>{const e=L();if(!e)return;const t=$();let r=a(m.id);if(!r&&t&&(e.classList.add(t),r=o(e,F()),e.classList.remove(t),l(m.id,r)),r){null==O||O.cancel(),O=null;const t=o(e,F());c(m.id,t),requestAnimationFrame((()=>{A(r,t)}))}else d(m.id,e,F())};return r.onMount((()=>{const e=L();e&&e.parentElement&&E()})),r.createComputed(r.on(S,(()=>{const e=L();e&&d(m.id,e,F())}),{defer:!0})),r.createRenderEffect(r.on((()=>m.id),(()=>{p(m.id)}))),r.createEffect(r.on(S,(()=>{E()}),{defer:!0})),t.isDev&&r.createEffect(r.on((()=>m.debug),(e=>{const t=L();t&&(e?t.dataset.flipId=m.id:delete t.dataset.flipId)}))),r.onCleanup((()=>{const e=L();if(!e)return;u(m.id);const t=o(e,F());l(m.id,t);const i=r.getOwner(),n=P(),a=m.id,c=e.previousElementSibling,d=e.nextElementSibling,p=e.parentElement;queueMicrotask((()=>{r.runWithOwner(i,(()=>{var e;if(n&&p){const r=L();if(!r)return;null==O||O.cancel(),O=null,r.classList.add(n),d?d.insertAdjacentElement("beforebegin",r):c?c.insertAdjacentElement("afterend",r):p.append(r);const i=o(r,F()),s={x:i.rect.x,y:i.rect.y,width:i.rect.width,height:i.rect.height},a="absolute"===t.position||"fixed"===t.position,l="absolute"===i.position||"fixed"===i.position,u={biasX:0,biasY:0,biasWidth:1,biasHeight:1},h="position"===g.preserve||"all"===g.preserve,f="scale"===g.preserve||"all"===g.preserve;a&&!l&&(h&&(u.biasX=i.rect.x-t.rect.x),h&&(u.biasY=i.rect.y-t.rect.y),f&&(u.biasWidth=i.rect.width/t.rect.width),f&&(u.biasHeight=i.rect.height/t.rect.height)),!a&&l&&(h&&(u.biasX=t.rect.x-i.rect.x+(t.rect.width-i.rect.width)/2),h&&(u.biasY=t.rect.y-i.rect.y+(t.rect.height-i.rect.height)/2),f&&(u.biasWidth=t.rect.width/i.rect.width),f&&(u.biasHeight=t.rect.height/i.rect.height)),i.rect=DOMRect.fromRect(s),null==(e=A(t,i,u))||e.addEventListener("finish",(()=>{r.remove()}))}}))})),setTimeout((()=>{r.runWithOwner(i,(()=>{s().has(a)||l(a,null)}))}),16)})),t.createComponent(x,{get id(){return m.id},get unflips(){return w()},setUnflips:R,get children(){return C=e.children}})},e.FlipContext=y,e.FlipProvider=e=>{const[i,n]=r.createSignal(new Set),[s,a]=r.createSignal({}),[l,c]=r.createSignal({});return t.createComponent(w,{get value(){return{attachedFlipIds:i,firstState:s,lastState:l,getFirstState:e=>s()[e],getLastState:e=>l()[e],setFirstState:(e,t)=>{a((r=>({...r,[e]:t})))},recordFirstState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||a((t=>({...t,[e]:i})))},setLastState:(e,t)=>{c((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||c((t=>({...t,[e]:i})))},attach:e=>{n(b((t=>{t.add(e)})))},detach:e=>{n(b((t=>{t.delete(e)})))},defaultConfig:{...m,...e.defaultConfig}}},get children(){return e.children}})},e.NestedFlipContext=v,e.NestedFlipProvider=x,e.Unflip=e=>{const t=r.useContext(v);let i=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;const r=(()=>{let e=i;return e instanceof Function&&(e=e()),Array.isArray(e)?e.every((e=>e instanceof HTMLElement||e instanceof SVGElement))?e:(console.warn("Unflip children must be DOM nodes",e),[]):e instanceof HTMLElement||e instanceof SVGElement?[e]:(console.warn("Unflip children looks like not a DOM node",e),[])})();if(0===r.length)return;const n=t.parentId();(e.id??n)===n&&(null==t||t.setUnflips([...t.unflips(),...r]))}))),i=e.children},e.When=e=>{const i=()=>{const t=e.when;return Array.isArray(t)?t:[t]};return t.createComponent(r.For,{get each(){return[i()]},children:t=>e.children(...t)})},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("solid-js/web"),require("solid-js")):"function"==typeof define&&define.amd?define(["exports","solid-js/web","solid-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["solid-flip"]={},e.solid,e.solid)}(this,(function(e,t,r){"use strict";const i=(e,t)=>{let r=0;return e.endsWith("px")&&(r=parseFloat(e.replace("px",""))),e.endsWith("%")&&(r=t*(parseFloat(e.replace("%",""))/100)),Number.isFinite(r)||(r=0),r},n=(e,t)=>{if(!e.includes(" ")){const r=i(e,t);return[r,r]}const[r,n]=e.split(" ");return[i(r,t),i(n,t)]},o=(e,t=[])=>{const r=getComputedStyle(e),i=e.getBoundingClientRect(),o=Math.max(i.width,i.height),s=t.reduce(((e,t)=>({...e,[t]:null==r?void 0:r[t]})),{}),a=r.scale.split(" ").map((e=>{const t=Number(e);return Number.isFinite(t)?t:1})),[c,l]=1===a.length?[a[0],a[0]]:a,[d,u]=n(r.borderTopLeftRadius,o),[p,h]=n(r.borderTopRightRadius,o),[f,g]=n(r.borderBottomLeftRadius,o),[b,m]=n(r.borderBottomRightRadius,o);return{rect:i,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:d*c,borderTopLeftYRadius:u*l,borderTopRightXRadius:p*c,borderTopRightYRadius:h*l,borderBottomLeftXRadius:f*c,borderBottomLeftYRadius:g*l,borderBottomRightXRadius:b*c,borderBottomRightYRadius:m*l,additionalProperties:s}},s={duration:300,easing:"ease",preserve:!1,properties:["translate","scale","color","opacity","border"],debug:!1},a=r.createContext(),{Provider:c}=a,l=r.createContext(),d=e=>{const i=r.useContext(a);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:n,getLastState:o}=i,s=r.useContext(l),c=r.createMemo((()=>{const t=n(e.id);if(!t)return null;const r=null==s?void 0:s.firstParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}})),d=r.createMemo((()=>{const t=o(e.id);if(!t)return null;const r=null==s?void 0:s.lastParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}}));return t.createComponent(l.Provider,{get value(){return{parentId:()=>e.id,firstParentState:c,lastParentState:d,unflips:()=>e.unflips,setUnflips:e.setUnflips}},get children(){return e.children}})};e.Flip=e=>{const i=r.useContext(a),n=r.useContext(l);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{attachedFlipIds:s,getFirstState:c,setFirstState:u,setLastState:p,recordFirstState:h,detach:f,attach:g,defaultConfig:b}=i,[m,R,y,x]=r.splitProps(r.mergeProps({enabled:!0,duration:b.duration,easing:b.easing,preserve:b.preserve,properties:b.properties,with:[],debug:b.debug},e),["duration","easing","properties"],["enter","exit","preserve"],["with"]),[v,w]=r.createSignal([]),S=r.createMemo((()=>{const e=y.with;return Array.isArray(e)?e:[e]})),F=r.createMemo((()=>{const e=m.properties;return e?Array.isArray(e)?e:[e]:[]})),L=r.createMemo((()=>{const e=R.enter;return"string"==typeof e?e:!0===e?"enter":null})),C=r.createMemo((()=>{const e=R.exit;return"string"==typeof e?e:!0===e?"exit":null}));let $=null,P=null;const E=()=>{let e=$;return e instanceof Function&&(e=e()),Array.isArray(e)?(console.warn('Flip children must be a "single" DOM node',e),null):e instanceof HTMLElement||e instanceof SVGElement?e:(console.warn("Flip children looks like not a DOM node",e),null)},T=(e,r,{biasX:i=0,biasY:s=0,biasWidth:a=1,biasHeight:c=1}={})=>{const l=null==n?void 0:n.firstParentState(),d=null==n?void 0:n.lastParentState();let u=0,p=0,h=1,f=1;if(d&&l){const e=(l.rect.width-d.rect.width)/2,t=(l.rect.height-d.rect.height)/2;u=l.rect.left-d.rect.left+e,p=l.rect.top-d.rect.top+t,h=l.rect.width/d.rect.width,f=l.rect.height/d.rect.height}const g=(e.rect.width-r.rect.width)/2,b=(e.rect.height-r.rect.height)/2,R=-1*u+e.rect.left-r.rect.left+g,y=-1*p+e.rect.top-r.rect.top+b,w=e.rect.width/r.rect.width/h,S=e.rect.height/r.rect.height/f,L=0===w?1:w,C=0===S?1:S,$=v().map((e=>o(e,F()))),T=F(),M={};T&&T.forEach((t=>{var r;const i=null==(r=e.additionalProperties)?void 0:r[t];i?M[t]=i:console.warn(`Property "${t}" is not found in the first state`)}));const B=T.includes("transform"),O=T.includes("border")||T.includes("borderRadius");(T.includes("translate")||B)&&(M.translate=`${R}px ${y}px`),(T.includes("scale")||B)&&(M.scale=`${w} ${S}`),(T.includes("color")||T.some((e=>e.startsWith("background"))))&&(M.backgroundColor=e.color),T.includes("opacity")&&(M.opacity=e.opacity),(T.includes("borderTopLeftRadius")||O)&&(M.borderTopLeftRadius=`${e.borderTopLeftXRadius/L}px ${e.borderTopLeftYRadius/C}px`),(T.includes("borderTopRightRadius")||O)&&(M.borderTopRightRadius=`${e.borderTopRightXRadius/L}px ${e.borderTopRightYRadius/C}px`),(T.includes("borderBottomLeftRadius")||O)&&(M.borderBottomLeftRadius=`${e.borderBottomLeftXRadius/L}px ${e.borderBottomLeftYRadius/C}px`),(T.includes("borderBottomRightRadius")||O)&&(M.borderBottomRightRadius=`${e.borderBottomRightXRadius/L}px ${e.borderBottomRightYRadius/C}px`);const A={};(i||s)&&(A.translate=`${i??0}px ${s??0}px`),1===a&&1===c||(A.scale=`${a} ${c}`);const X=E();if(!X)return null;P=X.animate([{transformOrigin:"50% 50%",...M},A],{duration:m.duration,easing:m.easing,fill:"both"})??null,P.addEventListener("finish",(()=>P=null),{once:!0});const Y=v().map(((e,t)=>{const i=$[t],n=i.rect.left-r.rect.left,o=i.rect.top-r.rect.top;return()=>{const t=e,[r,s]=getComputedStyle(X).scale.split(" ").map(Number);if(!Number.isFinite(r)||!Number.isFinite(s))return t.style.removeProperty("scale"),t.style.removeProperty("translate"),!0;const a=1/r,c=1/s,l=i.rect.width*(a-1)/2+n*(a-1),d=i.rect.height*(c-1)/2+o*(c-1);return t.style.setProperty("translate",`${l}px ${d}px`),t.style.setProperty("scale",`${a} ${c}`),!1}})),j=()=>{Y.map((e=>e())).every(Boolean)||requestAnimationFrame(j)};if(j(),t.isDev&&x.debug){const e=()=>{if(!P)return void Object.keys(M).forEach((e=>{delete X.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]}));const t=getComputedStyle(X);Object.keys(M).forEach((e=>{X.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]=t[e]})),requestAnimationFrame(e)};e()}return P},M=()=>{if(!x.enabled)return;const e=E();if(!e)return;const t=L();let r=c(x.id);if(!r&&t&&(e.classList.add(t),r=o(e,F()),e.classList.remove(t),u(x.id,r)),r){null==P||P.cancel(),P=null;const t=o(e,F());p(x.id,t),requestAnimationFrame((()=>{T(r,t)}))}else h(x.id,e,F())};return r.onMount((()=>{const e=E();e&&e.parentElement&&M()})),r.createComputed(r.on(S,(()=>{const e=E();e&&h(x.id,e,F())}),{defer:!0})),r.createRenderEffect(r.on((()=>x.id),(()=>{g(x.id)}))),r.createEffect(r.on(S,(()=>{M()}),{defer:!0})),t.isDev&&r.createEffect(r.on((()=>x.debug),(e=>{const t=E();t&&(e?t.dataset.flipId=x.id:delete t.dataset.flipId)}))),r.onCleanup((()=>{const e=E();if(!e)return;f(x.id);const t=o(e,F());u(x.id,t);const i=r.getOwner(),n=C(),a=x.id,c=e.previousElementSibling,l=e.nextElementSibling,d=e.parentElement;x.enabled&&queueMicrotask((()=>{r.runWithOwner(i,(()=>{var e;if(n&&d){const r=E();if(!r)return;null==P||P.cancel(),P=null,r.classList.add(n),l?l.insertAdjacentElement("beforebegin",r):c?c.insertAdjacentElement("afterend",r):d.append(r);const i=o(r,F()),s={x:i.rect.x,y:i.rect.y,width:i.rect.width,height:i.rect.height},a="absolute"===t.position||"fixed"===t.position,u="absolute"===i.position||"fixed"===i.position,p={biasX:0,biasY:0,biasWidth:1,biasHeight:1},h="position"===R.preserve||"all"===R.preserve,f="scale"===R.preserve||"all"===R.preserve;a&&!u&&(h&&(p.biasX=i.rect.x-t.rect.x),h&&(p.biasY=i.rect.y-t.rect.y),f&&(p.biasWidth=i.rect.width/t.rect.width),f&&(p.biasHeight=i.rect.height/t.rect.height)),!a&&u&&(h&&(p.biasX=t.rect.x-i.rect.x+(t.rect.width-i.rect.width)/2),h&&(p.biasY=t.rect.y-i.rect.y+(t.rect.height-i.rect.height)/2),f&&(p.biasWidth=t.rect.width/i.rect.width),f&&(p.biasHeight=t.rect.height/i.rect.height)),i.rect=DOMRect.fromRect(s),null==(e=T(t,i,p))||e.addEventListener("finish",(()=>{r.remove()}))}}))})),setTimeout((()=>{r.runWithOwner(i,(()=>{s().has(a)||u(a,null)}))}),16)})),t.createComponent(d,{get id(){return x.id},get unflips(){return v()},setUnflips:w,get children(){return $=e.children}})},e.FlipContext=a,e.FlipProvider=e=>{const[i,n]=r.createSignal(new Set),[a,l]=r.createSignal({}),[d,u]=r.createSignal({});return t.createComponent(c,{get value(){return{attachedFlipIds:i,firstState:a,lastState:d,getFirstState:e=>a()[e],getLastState:e=>d()[e],setFirstState:(e,t)=>{l((r=>({...r,[e]:t})))},recordFirstState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||l((t=>({...t,[e]:i})))},setLastState:(e,t)=>{u((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||u((t=>({...t,[e]:i})))},attach:e=>{const t=i();t.add(e),n(t)},detach:e=>{const t=i();t.delete(e),n(t)},defaultConfig:{...s,...e.defaultConfig}}},get children(){return e.children}})},e.NestedFlipContext=l,e.NestedFlipProvider=d,e.Unflip=e=>{const t=r.useContext(l);let i=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;const r=(()=>{let e=i;return e instanceof Function&&(e=e()),Array.isArray(e)?e.every((e=>e instanceof HTMLElement||e instanceof SVGElement))?e:(console.warn("Unflip children must be DOM nodes",e),[]):e instanceof HTMLElement||e instanceof SVGElement?[e]:(console.warn("Unflip children looks like not a DOM node",e),[])})();if(0===r.length)return;const n=t.parentId();(e.id??n)===n&&(null==t||t.setUnflips([...t.unflips(),...r]))}))),i=e.children},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package.json

 {
   "name": "solid-flip",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "The most advanced Flip animation library for Solid.js inspired by react-flip-toolkit",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

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

Worsened metrics

Total package byte prevSize

46495

decreased by-8.19%

Lines of code

650

decreased by-14.25%

No dependency changes