solid-flip - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.d.ts

@@ -29,2 +29,8 @@ import { Accessor } from 'solid-js';
 
+declare interface FlipConfig {
+    duration: number;
+    easing: string;
+    debug: boolean;
+}
+
 export declare const FlipContext: Context<FlipContextProps | undefined>;
@@ -44,2 +50,3 @@
     detach: (id: string) => void;
+    defaultConfig: FlipConfig;
 }
@@ -55,2 +62,3 @@
     with?: ArrayOr<unknown>;
+    debug?: boolean;
     children: JSX.Element;
@@ -62,2 +70,3 @@ }
 export declare interface FlipProviderProps {
+    defaultConfig?: Partial<FlipConfig>;
     children: JSX.Element;
@@ -64,0 +73,0 @@ }

dist/index.es.js

@@ -145,2 +145,7 @@ import { createComponent, isDev } from "solid-js/web";
 }
+const defaultConfig = {
+  duration: 300,
+  easing: "ease",
+  debug: false
+};
 const FlipContext = createContext();
@@ -155,46 +160,52 @@ const {
   return createComponent(BaseFlipProvider, {
-    value: {
-      attachedFlipIds,
-      firstState,
-      lastState,
-      getFirstState: (id) => firstState()[id],
-      getLastState: (id) => lastState()[id],
-      setFirstState: (id, newState) => {
-        setFirstState((prev) => ({
-          ...prev,
-          [id]: newState
-        }));
-      },
-      recordFirstState: (id, element, properties = []) => {
-        const newState = captureState(element, properties);
-        if (newState.rect.width === 0 && newState.rect.height === 0) return;
-        setFirstState((prev) => ({
-          ...prev,
-          [id]: newState
-        }));
-      },
-      setLastState: (id, newState) => {
-        setLastState((prev) => ({
-          ...prev,
-          [id]: newState
-        }));
-      },
-      recordLastState: (id, element, properties = []) => {
-        const newState = captureState(element, properties);
-        if (newState.rect.width === 0 && newState.rect.height === 0) return;
-        setLastState((prev) => ({
-          ...prev,
-          [id]: newState
-        }));
-      },
-      attach: (id) => {
-        setAttachedFlipIds(produce((prev) => {
-          prev.add(id);
-        }));
-      },
-      detach: (id) => {
-        setAttachedFlipIds(produce((prev) => {
-          prev.delete(id);
-        }));
-      }
+    get value() {
+      return {
+        attachedFlipIds,
+        firstState,
+        lastState,
+        getFirstState: (id) => firstState()[id],
+        getLastState: (id) => lastState()[id],
+        setFirstState: (id, newState) => {
+          setFirstState((prev) => ({
+            ...prev,
+            [id]: newState
+          }));
+        },
+        recordFirstState: (id, element, properties = []) => {
+          const newState = captureState(element, properties);
+          if (newState.rect.width === 0 && newState.rect.height === 0) return;
+          setFirstState((prev) => ({
+            ...prev,
+            [id]: newState
+          }));
+        },
+        setLastState: (id, newState) => {
+          setLastState((prev) => ({
+            ...prev,
+            [id]: newState
+          }));
+        },
+        recordLastState: (id, element, properties = []) => {
+          const newState = captureState(element, properties);
+          if (newState.rect.width === 0 && newState.rect.height === 0) return;
+          setLastState((prev) => ({
+            ...prev,
+            [id]: newState
+          }));
+        },
+        attach: (id) => {
+          setAttachedFlipIds(produce((prev) => {
+            prev.add(id);
+          }));
+        },
+        detach: (id) => {
+          setAttachedFlipIds(produce((prev) => {
+            prev.delete(id);
+          }));
+        },
+        defaultConfig: {
+          ...defaultConfig,
+          ...props.defaultConfig
+        }
+      };
     },
@@ -275,8 +286,10 @@ get children() {
     detach,
-    attach
+    attach,
+    defaultConfig: defaultConfig2
   } = context;
   const [animationProps, timingProps, triggerProps, local] = splitProps(mergeProps({
-    duration: 300,
-    easing: "ease-in-out",
-    with: []
+    duration: defaultConfig2.duration,
+    easing: defaultConfig2.easing,
+    with: [],
+    debug: defaultConfig2.debug
   }, props), ["duration", "easing", "properties"], ["enter", "exit"], ["with"]);
@@ -306,7 +319,18 @@ const [unflips, setUnflips] = createSignal([]);
   });
+  let result = null;
+  let animation = null;
+  const child = () => {
+    let value = result;
+    if (value instanceof Function) value = value();
+    if (Array.isArray(value)) {
+      console.warn('Flip children must be a "single" DOM node', value);
+      return null;
+    }
+    if (!(value instanceof HTMLElement) && !(value instanceof SVGElement)) {
+      console.warn("Flip children looks like not a DOM node", value);
+      return null;
+    }
+    return value;
+  };
   const animate = (firstState, lastState) => {
-    if (!(result instanceof Element)) {
-      console.warn("Flip children must be a single DOM node");
-      return;
-    }
     const firstParentState = nested == null ? void 0 : nested.firstParentState();
@@ -336,3 +360,2 @@ const lastParentState = nested == null ? void 0 : nested.lastParentState();
     const startKeyframe = {
-      transformOrigin: "50% 50%",
       translate: `${deltaX}px ${deltaY}px`,
@@ -356,5 +379,13 @@ scale: `${deltaWidth} ${deltaHeight}`,
     }
-    animation = result.animate([startKeyframe, {}], {
+    const childElement = child();
+    if (!childElement) return null;
+    animation = childElement.animate([{
+      transformOrigin: "50% 50%",
+      ...startKeyframe
+    }, {}], {
       duration: animationProps.duration,
       easing: animationProps.easing
+    }) ?? null;
+    animation.addEventListener("finish", () => animation = null, {
+      once: true
     });
@@ -367,3 +398,3 @@ const animateUnflips = unflips().map((unflip, index) => {
         const target = unflip;
-        const [parentScaleX, parentScaleY] = getComputedStyle(result).scale.split(" ").map(Number);
+        const [parentScaleX, parentScaleY] = getComputedStyle(childElement).scale.split(" ").map(Number);
         if (!Number.isFinite(parentScaleX) || !Number.isFinite(parentScaleY)) {
@@ -389,17 +420,29 @@ target.style.removeProperty("scale");
     animateAll();
+    if (isDev && local.debug) {
+      const showDebugProps = () => {
+        if (!animation) {
+          Object.keys(startKeyframe).forEach((key) => {
+            delete childElement.dataset[`flip${key[0].toUpperCase()}${key.slice(1)}`];
+          });
+          return;
+        }
+        const style = getComputedStyle(childElement);
+        Object.keys(startKeyframe).forEach((key) => {
+          childElement.dataset[`flip${key[0].toUpperCase()}${key.slice(1)}`] = style[key];
+        });
+        requestAnimationFrame(showDebugProps);
+      };
+      showDebugProps();
+    }
     return animation;
   };
-  let result = null;
-  let animation = null;
   const flip = () => {
-    if (!(result instanceof Element)) {
-      console.warn("Flip children must be a single DOM node", result);
-      return;
-    }
+    const childElement = child();
+    if (!childElement) return;
     const enterClassName = enterClass();
     let firstState = getFirstState(local.id);
     if (!firstState && enterClassName) {
-      result.classList.add(enterClassName);
-      firstState = captureState(result, properties());
-      result.classList.remove(enterClassName);
+      childElement.classList.add(enterClassName);
+      firstState = captureState(childElement, properties());
+      childElement.classList.remove(enterClassName);
       setFirstState(local.id, firstState);
@@ -410,3 +453,3 @@ }
       animation = null;
-      const lastState = captureState(result, properties());
+      const lastState = captureState(childElement, properties());
       setLastState(local.id, lastState);
@@ -417,24 +460,15 @@ requestAnimationFrame(() => {
     } else {
-      recordFirstState(local.id, result, properties());
+      recordFirstState(local.id, childElement, properties());
     }
   };
   onMount(() => {
-    if (!(result instanceof Element)) {
-      console.warn("Flip children must be a single DOM node");
-      return;
-    }
-    if (isDev) {
-      if (result instanceof HTMLElement || result instanceof SVGElement) {
-        result.dataset.flipId = local.id;
-      }
-    }
-    if (!result.parentElement) return;
+    const childElement = child();
+    if (!childElement) return;
+    if (!childElement.parentElement) return;
     flip();
   });
   createComputed(on(triggerWith, () => {
-    if (!(result instanceof Element)) {
-      console.warn("Flip children must be a single DOM node");
-      return;
-    }
-    recordFirstState(local.id, result, properties());
+    const childElement = child();
+    if (!childElement) return;
+    recordFirstState(local.id, childElement, properties());
   }, {
@@ -451,9 +485,15 @@ defer: true
   }));
+  if (isDev) {
+    createEffect(on(() => local.debug, (isDebug) => {
+      const childElement = child();
+      if (!childElement) return;
+      if (isDebug) childElement.dataset.flipId = local.id;
+      else delete childElement.dataset.flipId;
+    }));
+  }
   onCleanup(() => {
-    if (!(result instanceof Element)) {
-      console.warn("Flip children must be a single DOM node");
-      return;
-    }
+    const childElement = child();
+    if (!childElement) return;
     detach(local.id);
-    const newState = captureState(result, properties());
+    const newState = captureState(childElement, properties());
     setFirstState(local.id, newState);
@@ -463,3 +503,3 @@ const owner = getOwner();
     const id = local.id;
-    const parentElement = result.parentElement;
+    const parentElement = childElement.parentElement;
     queueMicrotask(() => {
@@ -469,8 +509,9 @@ runWithOwner(owner, () => {
         if (exitClassName && parentElement) {
-          if (!(result instanceof HTMLElement) && !(result instanceof SVGElement)) return;
-          result.classList.add(exitClassName);
-          parentElement.append(result);
-          const lastState = captureState(result, properties());
+          const childElement2 = child();
+          if (!childElement2) return;
+          childElement2.classList.add(exitClassName);
+          parentElement.append(childElement2);
+          const lastState = captureState(childElement2, properties());
           (_a = animate(newState, lastState)) == null ? void 0 : _a.addEventListener("finish", () => {
-            result.remove();
+            childElement2.remove();
           });
@@ -504,13 +545,27 @@ }
   let result = null;
+  const children = () => {
+    let value = result;
+    if (value instanceof Function) value = value();
+    if (Array.isArray(value)) {
+      if (!value.every((it) => it instanceof HTMLElement || it instanceof SVGElement)) {
+        console.warn("Unflip children must be DOM nodes", value);
+        return [];
+      }
+      return value;
+    } else {
+      if (!(value instanceof HTMLElement) && !(value instanceof SVGElement)) {
+        console.warn("Unflip children looks like not a DOM node", value);
+        return [];
+      }
+      return [value];
+    }
+  };
   createEffect(on(() => props.id, () => {
     if (!nested) return;
-    const isValid = Array.isArray(result) ? result.every((it) => it instanceof Element) : result instanceof Element;
-    if (!isValid) {
-      console.warn("Unflip children must be a DOM node", result);
-      return;
-    }
+    const childElements = children();
+    if (childElements.length === 0) return;
     const parentId = nested.parentId();
     const targetId = props.id ?? parentId;
     if (targetId !== parentId) return;
-    nested == null ? void 0 : nested.setUnflips([...nested.unflips(), ...Array.isArray(result) ? result : [result]]);
+    nested == null ? void 0 : nested.setUnflips([...nested.unflips(), ...childElements]);
   }));
@@ -517,0 +572,0 @@ return result = props.children;

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 n=(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},i=(e,t)=>{if(!e.includes(" ")){const r=n(e,t);return[r,r]}const[r,i]=e.split(" ");return[n(r,t),n(i,t)]},o=(e,t=[])=>{const r=getComputedStyle(e),n=e.getBoundingClientRect(),o=Math.max(n.width,n.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]=i(r.borderTopLeftRadius,o),[p,f]=i(r.borderTopRightRadius,o),[h,g]=i(r.borderBottomLeftRadius,o),[m,b]=i(r.borderBottomRightRadius,o);return{rect:n,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:d*l,borderTopLeftYRadius:u*c,borderTopRightXRadius:p*l,borderTopRightYRadius:f*c,borderBottomLeftXRadius:h*l,borderBottomLeftYRadius:g*c,borderBottomRightXRadius:m*l,borderBottomRightYRadius:b*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,n,i,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++)i=e[r],(n=u(i,t))!==i&&(e[r]=n)}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||(i=e[o],(n=u(i,t))!==i&&(e[o]=n))}return e}function p(e,t,n){if(e[t])return e[t];const[i,o]=r.createSignal(n,{equals:!1,internal:!0});return i.$=o,e[t]=i}function f(e,t,r,n=!1){if(!n&&e[t]===r)return;const i=e[t],o=e.length;void 0===r?(delete e[t],e[l]&&e[l][t]&&void 0!==i&&e[l][t].$()):(e[t]=r,e[l]&&e[l][t]&&void 0===i&&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,i))&&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 h=new WeakMap,g={get(e,t){if(t===s)return e;const r=e[t];let n;return d(r)?h.get(r)||(h.set(r,n=new Proxy(r,g)),n):r},set:(e,t,r)=>(f(e,t,u(r)),!0),deleteProperty:(e,t)=>(f(e,t,void 0,!0),!0)};function m(e){return t=>{if(d(t)){let r;(r=h.get(t))||h.set(t,r=new Proxy(t,g)),e(r)}return t}}const b=r.createContext(),{Provider:y}=b,R=r.createContext(),w=e=>{const n=r.useContext(b);if(!n)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:i,getLastState:o}=n,s=r.useContext(R),a=r.createMemo((()=>{const t=i(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(R.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 n=r.useContext(b),i=r.useContext(R);if(!n)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}=n,[f,h,g,m]=r.splitProps(r.mergeProps({duration:300,easing:"ease-in-out",with:[]},e),["duration","easing","properties"],["enter","exit"],["with"]),[y,v]=r.createSignal([]),S=r.createMemo((()=>{const e=g.with;return Array.isArray(e)?e:[e]})),x=r.createMemo((()=>{const e=f.properties;return e?Array.isArray(e)?e:[e]:[]})),F=r.createMemo((()=>{const e=h.enter;return"string"==typeof e?e:!0===e?"enter":null})),P=r.createMemo((()=>{const e=h.exit;return"string"==typeof e?e:!0===e?"exit":null})),O=(e,t)=>{if(!($ instanceof Element))return void console.warn("Flip children must be a single DOM node");const r=null==i?void 0:i.firstParentState(),n=null==i?void 0:i.lastParentState();let s=0,a=0,l=1,c=1;if(n&&r){const e=(r.rect.width-n.rect.width)/2,t=(r.rect.height-n.rect.height)/2;s=r.rect.left-n.rect.left+e,a=r.rect.top-n.rect.top+t,l=r.rect.width/n.rect.width,c=r.rect.height/n.rect.height}const d=(e.rect.width-t.rect.width)/2,u=(e.rect.height-t.rect.height)/2,p=-1*s+e.rect.left-t.rect.left+d,h=-1*a+e.rect.top-t.rect.top+u,g=e.rect.width/t.rect.width/l,m=e.rect.height/t.rect.height/c,b=0===g?1:g,R=0===m?1:m,w=y().map((e=>o(e,x()))),v={transformOrigin:"50% 50%",translate:`${p}px ${h}px`,scale:`${g} ${m}`,backgroundColor:e.color,opacity:e.opacity,borderTopLeftRadius:`${e.borderTopLeftXRadius/b}px ${e.borderTopLeftYRadius/R}px`,borderTopRightRadius:`${e.borderTopRightXRadius/b}px ${e.borderTopRightYRadius/R}px`,borderBottomLeftRadius:`${e.borderBottomLeftXRadius/b}px ${e.borderBottomLeftYRadius/R}px`,borderBottomRightRadius:`${e.borderBottomRightXRadius/b}px ${e.borderBottomRightYRadius/R}px`};if(f.properties){(Array.isArray(f.properties)?f.properties:[f.properties]).forEach((t=>{var r;const n=null==(r=e.additionalProperties)?void 0:r[t];n?v[t]=n:console.warn(`Property "${t}" is not found in the first state`)}))}L=$.animate([v,{}],{duration:f.duration,easing:f.easing});const S=y().map(((e,r)=>{const n=w[r],i=n.rect.left-t.rect.left,o=n.rect.top-t.rect.top;return()=>{const t=e,[r,s]=getComputedStyle($).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=n.rect.width*(a-1)/2+i*(a-1),d=n.rect.height*(l-1)/2+o*(l-1);return t.style.setProperty("translate",`${c}px ${d}px`),t.style.setProperty("scale",`${a} ${l}`),!1}})),F=()=>{S.map((e=>e())).every(Boolean)||requestAnimationFrame(F)};return F(),L};let $=null,L=null;const M=()=>{if(!($ instanceof Element))return void console.warn("Flip children must be a single DOM node",$);const e=F();let t=a(m.id);if(!t&&e&&($.classList.add(e),t=o($,x()),$.classList.remove(e),l(m.id,t)),t){null==L||L.cancel(),L=null;const e=o($,x());c(m.id,e),requestAnimationFrame((()=>{O(t,e)}))}else d(m.id,$,x())};return r.onMount((()=>{$ instanceof Element?(t.isDev&&($ instanceof HTMLElement||$ instanceof SVGElement)&&($.dataset.flipId=m.id),$.parentElement&&M()):console.warn("Flip children must be a single DOM node")})),r.createComputed(r.on(S,(()=>{$ instanceof Element?d(m.id,$,x()):console.warn("Flip children must be a single DOM node")}),{defer:!0})),r.createRenderEffect(r.on((()=>m.id),(()=>{p(m.id)}))),r.createEffect(r.on(S,(()=>{M()}),{defer:!0})),r.onCleanup((()=>{if(!($ instanceof Element))return void console.warn("Flip children must be a single DOM node");u(m.id);const e=o($,x());l(m.id,e);const t=r.getOwner(),n=P(),i=m.id,a=$.parentElement;queueMicrotask((()=>{r.runWithOwner(t,(()=>{var t;if(n&&a){if(!($ instanceof HTMLElement||$ instanceof SVGElement))return;$.classList.add(n),a.append($);const r=o($,x());null==(t=O(e,r))||t.addEventListener("finish",(()=>{$.remove()}))}}))})),setTimeout((()=>{r.runWithOwner(t,(()=>{s().has(i)||l(i,null)}))}),16)})),t.createComponent(w,{get id(){return m.id},get unflips(){return y()},setUnflips:v,get children(){return $=e.children}})},e.FlipContext=b,e.FlipProvider=e=>{const[n,i]=r.createSignal(new Set),[s,a]=r.createSignal({}),[l,c]=r.createSignal({});return t.createComponent(y,{value:{attachedFlipIds:n,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 n=o(t,r);0===n.rect.width&&0===n.rect.height||a((t=>({...t,[e]:n})))},setLastState:(e,t)=>{c((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const n=o(t,r);0===n.rect.width&&0===n.rect.height||c((t=>({...t,[e]:n})))},attach:e=>{i(m((t=>{t.add(e)})))},detach:e=>{i(m((t=>{t.delete(e)})))}},get children(){return e.children}})},e.NestedFlipContext=R,e.NestedFlipProvider=w,e.Unflip=e=>{const t=r.useContext(R);let n=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;if(!(Array.isArray(n)?n.every((e=>e instanceof Element)):n instanceof Element))return void console.warn("Unflip children must be a DOM node",n);const r=t.parentId();(e.id??r)===r&&(null==t||t.setUnflips([...t.unflips(),...Array.isArray(n)?n:[n]]))}))),n=e.children},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 n=(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},i=(e,t)=>{if(!e.includes(" ")){const r=n(e,t);return[r,r]}const[r,i]=e.split(" ");return[n(r,t),n(i,t)]},o=(e,t=[])=>{const r=getComputedStyle(e),n=e.getBoundingClientRect(),o=Math.max(n.width,n.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]=i(r.borderTopLeftRadius,o),[p,f]=i(r.borderTopRightRadius,o),[h,g]=i(r.borderBottomLeftRadius,o),[m,b]=i(r.borderBottomRightRadius,o);return{rect:n,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:d*l,borderTopLeftYRadius:u*c,borderTopRightXRadius:p*l,borderTopRightYRadius:f*c,borderBottomLeftXRadius:h*l,borderBottomLeftYRadius:g*c,borderBottomRightXRadius:m*l,borderBottomRightYRadius:b*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,n,i,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++)i=e[r],(n=u(i,t))!==i&&(e[r]=n)}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||(i=e[o],(n=u(i,t))!==i&&(e[o]=n))}return e}function p(e,t,n){if(e[t])return e[t];const[i,o]=r.createSignal(n,{equals:!1,internal:!0});return i.$=o,e[t]=i}function f(e,t,r,n=!1){if(!n&&e[t]===r)return;const i=e[t],o=e.length;void 0===r?(delete e[t],e[l]&&e[l][t]&&void 0!==i&&e[l][t].$()):(e[t]=r,e[l]&&e[l][t]&&void 0===i&&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,i))&&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 h=new WeakMap,g={get(e,t){if(t===s)return e;const r=e[t];let n;return d(r)?h.get(r)||(h.set(r,n=new Proxy(r,g)),n):r},set:(e,t,r)=>(f(e,t,u(r)),!0),deleteProperty:(e,t)=>(f(e,t,void 0,!0),!0)};function m(e){return t=>{if(d(t)){let r;(r=h.get(t))||h.set(t,r=new Proxy(t,g)),e(r)}return t}}const b={duration:300,easing:"ease",debug:!1},y=r.createContext(),{Provider:R}=y,S=r.createContext(),w=e=>{const n=r.useContext(y);if(!n)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:i,getLastState:o}=n,s=r.useContext(S),a=r.createMemo((()=>{const t=i(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(S.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 n=r.useContext(y),i=r.useContext(S);if(!n)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:f}=n,[h,g,m,b]=r.splitProps(r.mergeProps({duration:f.duration,easing:f.easing,with:[],debug:f.debug},e),["duration","easing","properties"],["enter","exit"],["with"]),[R,v]=r.createSignal([]),x=r.createMemo((()=>{const e=m.with;return Array.isArray(e)?e:[e]})),F=r.createMemo((()=>{const e=h.properties;return e?Array.isArray(e)?e:[e]:[]})),P=r.createMemo((()=>{const e=g.enter;return"string"==typeof e?e:!0===e?"enter":null})),$=r.createMemo((()=>{const e=g.exit;return"string"==typeof e?e:!0===e?"exit":null}));let C=null,L=null;const O=()=>{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)},M=(e,r)=>{const n=null==i?void 0:i.firstParentState(),s=null==i?void 0:i.lastParentState();let a=0,l=0,c=1,d=1;if(s&&n){const e=(n.rect.width-s.rect.width)/2,t=(n.rect.height-s.rect.height)/2;a=n.rect.left-s.rect.left+e,l=n.rect.top-s.rect.top+t,c=n.rect.width/s.rect.width,d=n.rect.height/s.rect.height}const u=(e.rect.width-r.rect.width)/2,p=(e.rect.height-r.rect.height)/2,f=-1*a+e.rect.left-r.rect.left+u,g=-1*l+e.rect.top-r.rect.top+p,m=e.rect.width/r.rect.width/c,y=e.rect.height/r.rect.height/d,S=0===m?1:m,w=0===y?1:y,v=R().map((e=>o(e,F()))),x={translate:`${f}px ${g}px`,scale:`${m} ${y}`,backgroundColor:e.color,opacity:e.opacity,borderTopLeftRadius:`${e.borderTopLeftXRadius/S}px ${e.borderTopLeftYRadius/w}px`,borderTopRightRadius:`${e.borderTopRightXRadius/S}px ${e.borderTopRightYRadius/w}px`,borderBottomLeftRadius:`${e.borderBottomLeftXRadius/S}px ${e.borderBottomLeftYRadius/w}px`,borderBottomRightRadius:`${e.borderBottomRightXRadius/S}px ${e.borderBottomRightYRadius/w}px`};if(h.properties){(Array.isArray(h.properties)?h.properties:[h.properties]).forEach((t=>{var r;const n=null==(r=e.additionalProperties)?void 0:r[t];n?x[t]=n:console.warn(`Property "${t}" is not found in the first state`)}))}const P=O();if(!P)return null;L=P.animate([{transformOrigin:"50% 50%",...x},{}],{duration:h.duration,easing:h.easing})??null,L.addEventListener("finish",(()=>L=null),{once:!0});const $=R().map(((e,t)=>{const n=v[t],i=n.rect.left-r.rect.left,o=n.rect.top-r.rect.top;return()=>{const t=e,[r,s]=getComputedStyle(P).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=n.rect.width*(a-1)/2+i*(a-1),d=n.rect.height*(l-1)/2+o*(l-1);return t.style.setProperty("translate",`${c}px ${d}px`),t.style.setProperty("scale",`${a} ${l}`),!1}})),C=()=>{$.map((e=>e())).every(Boolean)||requestAnimationFrame(C)};if(C(),t.isDev&&b.debug){const e=()=>{if(!L)return void Object.keys(x).forEach((e=>{delete P.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]}));const t=getComputedStyle(P);Object.keys(x).forEach((e=>{P.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]=t[e]})),requestAnimationFrame(e)};e()}return L},A=()=>{const e=O();if(!e)return;const t=P();let r=a(b.id);if(!r&&t&&(e.classList.add(t),r=o(e,F()),e.classList.remove(t),l(b.id,r)),r){null==L||L.cancel(),L=null;const t=o(e,F());c(b.id,t),requestAnimationFrame((()=>{M(r,t)}))}else d(b.id,e,F())};return r.onMount((()=>{const e=O();e&&e.parentElement&&A()})),r.createComputed(r.on(x,(()=>{const e=O();e&&d(b.id,e,F())}),{defer:!0})),r.createRenderEffect(r.on((()=>b.id),(()=>{p(b.id)}))),r.createEffect(r.on(x,(()=>{A()}),{defer:!0})),t.isDev&&r.createEffect(r.on((()=>b.debug),(e=>{const t=O();t&&(e?t.dataset.flipId=b.id:delete t.dataset.flipId)}))),r.onCleanup((()=>{const e=O();if(!e)return;u(b.id);const t=o(e,F());l(b.id,t);const n=r.getOwner(),i=$(),a=b.id,c=e.parentElement;queueMicrotask((()=>{r.runWithOwner(n,(()=>{var e;if(i&&c){const r=O();if(!r)return;r.classList.add(i),c.append(r);const n=o(r,F());null==(e=M(t,n))||e.addEventListener("finish",(()=>{r.remove()}))}}))})),setTimeout((()=>{r.runWithOwner(n,(()=>{s().has(a)||l(a,null)}))}),16)})),t.createComponent(w,{get id(){return b.id},get unflips(){return R()},setUnflips:v,get children(){return C=e.children}})},e.FlipContext=y,e.FlipProvider=e=>{const[n,i]=r.createSignal(new Set),[s,a]=r.createSignal({}),[l,c]=r.createSignal({});return t.createComponent(R,{get value(){return{attachedFlipIds:n,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 n=o(t,r);0===n.rect.width&&0===n.rect.height||a((t=>({...t,[e]:n})))},setLastState:(e,t)=>{c((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const n=o(t,r);0===n.rect.width&&0===n.rect.height||c((t=>({...t,[e]:n})))},attach:e=>{i(m((t=>{t.add(e)})))},detach:e=>{i(m((t=>{t.delete(e)})))},defaultConfig:{...b,...e.defaultConfig}}},get children(){return e.children}})},e.NestedFlipContext=S,e.NestedFlipProvider=w,e.Unflip=e=>{const t=r.useContext(S);let n=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;const r=(()=>{let e=n;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 i=t.parentId();(e.id??i)===i&&(null==t||t.setUnflips([...t.unflips(),...r]))}))),n=e.children},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package.json

 {
   "name": "solid-flip",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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

Improved metrics

Total package byte prevSize

42486

increased by6.43%

Lines of code

685

increased by10.48%

No dependency changes