solid-flip - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.d.ts

@@ -32,2 +32,3 @@ import { Accessor } from 'solid-js';
     easing: string;
+    preserve: false | 'scale' | 'position' | 'all';
     debug: boolean;
@@ -58,5 +59,6 @@ }
     properties?: ArrayOr<CSSStyleKeys>;
+    with?: ArrayOr<unknown>;
     enter?: string | boolean;
     exit?: string | boolean;
-    with?: ArrayOr<unknown>;
+    preserve?: false | 'scale' | 'position' | 'all';
     debug?: boolean;
@@ -63,0 +65,0 @@ children: JSX.Element;

dist/index.es.js

@@ -148,2 +148,3 @@ import { createComponent, isDev } from "solid-js/web";
   easing: "ease",
+  preserve: false,
   debug: false
@@ -291,5 +292,6 @@ };
     easing: defaultConfig2.easing,
+    preserve: defaultConfig2.preserve,
     with: [],
     debug: defaultConfig2.debug
-  }, props), ["duration", "easing", "properties"], ["enter", "exit"], ["with"]);
+  }, props), ["duration", "easing", "properties"], ["enter", "exit", "preserve"], ["with"]);
   const [unflips, setUnflips] = createSignal([]);
@@ -333,3 +335,8 @@ const triggerWith = createMemo(() => {
   };
-  const animate = (firstState, lastState) => {
+  const animate = (firstState, lastState, {
+    biasX = 0,
+    biasY = 0,
+    biasWidth = 1,
+    biasHeight = 1
+  } = {}) => {
     const firstParentState = nested == null ? void 0 : nested.firstParentState();
@@ -368,2 +375,5 @@ const lastParentState = nested == null ? void 0 : nested.lastParentState();
     };
+    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) {
@@ -383,5 +393,6 @@ const properties2 = Array.isArray(animationProps.properties) ? animationProps.properties : [animationProps.properties];
       ...startKeyframe
-    }, {}], {
+    }, endKeyframe], {
       duration: animationProps.duration,
-      easing: animationProps.easing
+      easing: animationProps.easing,
+      fill: "both"
     }) ?? null;
@@ -497,2 +508,4 @@ animation.addEventListener("finish", () => animation = null, {
     const id = local.id;
+    const beforeElement = childElement.previousElementSibling;
+    const afterElement = childElement.nextElementSibling;
     const parentElement = childElement.parentElement;
@@ -505,6 +518,40 @@ queueMicrotask(() => {
           if (!childElement2) return;
+          animation == null ? void 0 : animation.cancel();
+          animation = null;
           childElement2.classList.add(exitClassName);
-          parentElement.append(childElement2);
+          if (afterElement) afterElement.insertAdjacentElement("beforebegin", childElement2);
+          else if (beforeElement) beforeElement.insertAdjacentElement("afterend", childElement2);
+          else parentElement.append(childElement2);
           const lastState = captureState(childElement2, properties());
-          (_a = animate(newState, lastState)) == null ? void 0 : _a.addEventListener("finish", () => {
+          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);
+          console.log("exit", newState, "->", lastState, "/", options);
+          (_a = animate(newState, lastState, options)) == null ? void 0 : _a.addEventListener("finish", () => {
             childElement2.remove();
@@ -511,0 +558,0 @@ });

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={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"})}));
+!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:v}=y,w=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(w),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(w.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(w);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"]),[v,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 O=null,C=null;const L=()=>{let e=O;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,w=-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,O=v().map((e=>o(e,F()))),A={translate:`${w}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;C=M.animate([{transformOrigin:"50% 50%",...A},E],{duration:f.duration,easing:f.easing,fill:"both"})??null,C.addEventListener("finish",(()=>C=null),{once:!0});const j=v().map(((e,t)=>{const i=O[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(!C)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 C},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==C||C.cancel(),C=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==C||C.cancel(),C=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),console.log("exit",t,"->",i,"/",u),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 v()},setUnflips:R,get children(){return O=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(v,{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=w,e.NestedFlipProvider=x,e.Unflip=e=>{const t=r.useContext(w);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.4.0",
+  "version": "0.5.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",

README.md

@@ -146,15 +146,54 @@ # Solid-flip
 
+| Property      | Type         | Default | Description                                                                                                       |
+|---------------|--------------|---------|-------------------------------------------------------------------------------------------------------------------|
+| defaultConfig | `FlipConfig` | -       | The default configuration of the flip animation. If you set the value in `Flip` component, it will be overridden. |
+
+```tsx
+interface FlipConfig {
+  duration?: number;
+  easing?: string;
+  enter?: string | boolean;
+  exit?: string | boolean;
+  preserve?: false | 'position' | 'scale' | 'all';
+}
+```
+See `Flip` component for more details.
+
+- Usage Example
+   ```tsx
+   import { FlipProvider } from 'solid-flip';
+   
+   const root = document.getElementById('root');
+   
+   render(() => (
+     <FlipProvider>
+       <App/>
+     </FlipProvider>
+   ), root!);
+   ```
+
+
 ## Flip
 `Flip` component is used to wrap the content that you want to animate. It directly passes children.
 
-| Property   | Type                   | Default      | Description                                                                                                                                                                                                                      |
-|------------|------------------------|--------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| id*        | `string`               | _(required)_ | The unique id of the flip component                                                                                                                                                                                              |
-| with       | `unknown \| unknown[]` | []           | The condition to determine when the content should be animated                                                                                                                                                                   |
-| duration   | `number`               | 300          | The duration of the animation                                                                                                                                                                                                    |
-| easing     | `string`               | 'ease'       | The easing of the animation                                                                                                                                                                                                      |
-| properties | `string \| string[]`   | []           | The additional properties that will be animated                                                                                                                                                                                  |
-| enter      | `string \| boolean`    | false        | If this value is truthy, The element will be animate when the element is inserted. The value means the initial class name of the element. If you set this value as `true`, entering class name will be set as `enter`            |
-| exit       | `string \| boolean`    | false        | If this value is truthy, The element will be animate when the element is removed. The value means the class name of the element after element removed. If you set this value as `true`, exiting class name will be set as `exit` |
+| Property   | Type                                      | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                               |
+|------------|-------------------------------------------|--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| id*        | `string`                                  | _(required)_ | The unique id of the flip component                                                                                                                                                                                                                                                                                                                                                                       |
+| with       | `unknown \| unknown[]`                    | []           | The condition to determine when the content should be animated                                                                                                                                                                                                                                                                                                                                            |
+| duration   | `number`                                  | 300          | The duration of the animation                                                                                                                                                                                                                                                                                                                                                                             |
+| easing     | `string`                                  | 'ease'       | The easing of the animation                                                                                                                                                                                                                                                                                                                                                                               |
+| properties | `string \| string[]`                      | []           | The additional properties that will be animated                                                                                                                                                                                                                                                                                                                                                           |
+| enter      | `string \| boolean`                       | false        | If this value is truthy, The element will be animate when the element is inserted. The value means the initial class name of the element. If you set this value as `true`, entering class name will be set as `enter`                                                                                                                                                                                     |
+| exit       | `string \| boolean`                       | false        | If this value is truthy, The element will be animate when the element is removed. The value means the class name of the element after element removed. If you set this value as `true`, exiting class name will be set as `exit`                                                                                                                                                                          |
+| preserve   | `false \| 'position' \| 'scale' \| 'all'` | false        | This value manipulates the element's style when the element runs in 'enter' or 'exit'. If you set this value as `position`, the element will be use the value when the element is connected to DOM. So that It prevent the element moving to 'enter' or 'exit' position. It will be useful when you set the 'exit' animation's position as absolute or fixed. 'scale' and 'all' also act like 'position'. |
 
+- Usage Example
+  ```tsx
+  import { Flip } from 'solid-flip';
+  
+  <Flip id={'my-flip-id'} with={flip()}>
+    <div class={flip() ? 'show' : 'hidden'}>Animated content</div>
+  </Flip>
+    ```
+
 ## Unflip
@@ -166,1 +205,15 @@ `Unflip` component is used to warp the content that ignore parent flip animation. It directly passes children.
 | id       | `string` | -       | A parent id that ignore flip animation |
+
+- Usage Example
+  ```tsx
+  import { Unflip } from 'solid-flip';
+  
+  <Flip id={'my-flip-id'}>
+    <div>
+      Animated content
+      <Unflip> // id is not required. Unflip component will find the parent flip component automatically.
+        <div>Ignore flip animation</div>
+      </Unflip>
+    </div>
+  </Flip>
+  ```

No alert changes

Improved metrics

Total package byte prevSize

50047

increased by17.8%

Lines of code

739

increased by7.88%

Number of lines in readme file

218

increased by32.12%

No dependency changes