@lit-labs/motion - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5-pre.0

animate-controller.js

@@ -1,2 +0,2 @@
-const i=new WeakMap;class t{constructor(t,s){this.startPaused=!1,this.disabled=!1,this.clients=new Set,this.pendingComplete=!1,this.host=t,this.defaultOptions=s.defaultOptions||{},this.startPaused=!!s.startPaused,this.disabled=!!s.disabled,this.onComplete=s.onComplete,i.set(this.host,this)}async add(i){var t,s;this.clients.add(i),this.startPaused&&(null===(t=i.webAnimation)||void 0===t||t.pause()),this.pendingComplete=!0,await i.finished,this.pendingComplete&&!this.isAnimating&&(this.pendingComplete=!1,null===(s=this.onComplete)||void 0===s||s.call(this))}remove(i){this.clients.delete(i)}pause(){this.clients.forEach((i=>{var t;return null===(t=i.webAnimation)||void 0===t?void 0:t.pause()}))}play(){this.clients.forEach((i=>{var t;return null===(t=i.webAnimation)||void 0===t?void 0:t.play()}))}cancel(){this.clients.forEach((i=>{var t;return null===(t=i.webAnimation)||void 0===t?void 0:t.cancel()})),this.clients.clear()}finish(){this.clients.forEach((i=>{var t;return null===(t=i.webAnimation)||void 0===t?void 0:t.finish()})),this.clients.clear()}togglePlay(){this.isPlaying?this.pause():this.play()}get isAnimating(){return this.clients.size>0}get isPlaying(){return Array.from(this.clients).some((i=>{var t;return"running"===(null===(t=i.webAnimation)||void 0===t?void 0:t.playState)}))}async finished(){await Promise.all(Array.from(this.clients).map((i=>i.finished)))}}export{t as AnimateController,i as controllerMap};
+const i=new WeakMap;class t{constructor(t,s){this.startPaused=!1,this.disabled=!1,this.clients=new Set,this.pendingComplete=!1,this.host=t,this.defaultOptions=s.defaultOptions||{},this.startPaused=!!s.startPaused,this.disabled=!!s.disabled,this.onComplete=s.onComplete,i.set(this.host,this)}async add(i){this.clients.add(i),this.startPaused&&i.webAnimation?.pause(),this.pendingComplete=!0,await i.finished,this.pendingComplete&&!this.isAnimating&&(this.pendingComplete=!1,this.onComplete?.())}remove(i){this.clients.delete(i)}pause(){this.clients.forEach((i=>i.webAnimation?.pause()))}play(){this.clients.forEach((i=>i.webAnimation?.play()))}cancel(){this.clients.forEach((i=>i.webAnimation?.cancel())),this.clients.clear()}finish(){this.clients.forEach((i=>i.webAnimation?.finish())),this.clients.clear()}togglePlay(){this.isPlaying?this.pause():this.play()}get isAnimating(){return this.clients.size>0}get isPlaying(){return Array.from(this.clients).some((i=>"running"===i.webAnimation?.playState))}async finished(){await Promise.all(Array.from(this.clients).map((i=>i.finished)))}}export{t as AnimateController,i as controllerMap};
 //# sourceMappingURL=animate-controller.js.map

animate.d.ts

@@ -5,7 +5,7 @@ import { AttributePart } from 'lit/html.js';
 export { AnimateController } from './animate-controller.js';
-export declare type CSSValues = {
+export type CSSValues = {
     [index: string]: string | number;
 };
-export declare type CSSPropertiesList = string[];
-export declare type Options = {
+export type CSSPropertiesList = string[];
+export type Options = {
     keyframeOptions?: KeyframeAnimationOptions;
@@ -12,0 +12,0 @@ properties?: CSSPropertiesList;

animate.js

@@ -1,2 +0,2 @@
-import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as e}from"lit/async-directive.js";import{controllerMap as o}from"./animate-controller.js";export{AnimateController}from"./animate-controller.js";let h=0;const r=new Map,n=new WeakSet,a=()=>new Promise((t=>requestAnimationFrame(t))),l=[{transform:"translateY(100%) scale(0)",opacity:0}],c=[{transform:"translateY(-100%) scale(0)",opacity:0}],d=[{transform:"translateX(-100%) scale(0)",opacity:0}],u=[{transform:"translateX(100%) scale(0)",opacity:0}],v=[{}],m=[{opacity:0}],f=m,p=[{opacity:0},{opacity:1}],y=[{opacity:0},{opacity:.25,offset:.75},{opacity:1}],g=(t,i)=>{const s=t-i;return 0===s?void 0:s},w=(t,i)=>{const s=t/i;return 1===s?void 0:s},N={left:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateX(${s}px)`}},top:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateY(${s}px)`}},width:(t,i)=>{let s;0===i&&(i=1,s={width:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleX(${e})`}},height:(t,i)=>{let s;0===i&&(i=1,s={height:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleY(${e})`}}},A={duration:333,easing:"ease-in-out"},b=["left","top","width","height","opacity","color","background"],j=new WeakMap;class x extends e{constructor(t){if(super(t),this.t=null,this.i=null,this.o=!0,this.shouldLog=!1,t.type===s.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){var t;null===(t=this.resolveFinished)||void 0===t||t.call(this),this.finished=new Promise((t=>{this.h=t}))}async resolveFinished(){var t;null===(t=this.h)||void 0===t||t.call(this),this.h=void 0}render(i){return t}getController(){return o.get(this.l)}isDisabled(){var t;return this.options.disabled||(null===(t=this.getController())||void 0===t?void 0:t.disabled)}update(t,[i]){var s;const e=void 0===this.l;return e&&(this.l=null===(s=t.options)||void 0===s?void 0:s.host,this.l.addController(this),this.element=t.element,j.set(this.element,this)),this.optionsOrCallback=i,(e||"function"!=typeof i)&&this.u(i),this.render(i)}u(t){var i,s;t=null!=t?t:{};const e=this.getController();void 0!==e&&((t={...e.defaultOptions,...t}).keyframeOptions={...e.defaultOptions.keyframeOptions,...t.keyframeOptions}),null!==(i=(s=t).properties)&&void 0!==i||(s.properties=b),this.options=t}v(){const t={},i=this.element.getBoundingClientRect(),s=getComputedStyle(this.element);return this.options.properties.forEach((e=>{var o;const h=null!==(o=i[e])&&void 0!==o?o:N[e]?void 0:s[e],r=Number(h);t[e]=isNaN(r)?h+"":r})),t}p(){let t,i=!0;return this.options.guard&&(t=this.options.guard(),i=((t,i)=>{if(Array.isArray(t)){if(Array.isArray(i)&&i.length===t.length&&t.every(((t,s)=>t===i[s])))return!1}else if(i===t)return!1;return!0})(t,this.m)),this.o=this.l.hasUpdated&&!this.isDisabled()&&!this.isAnimating()&&i&&this.element.isConnected,this.o&&(this.m=Array.isArray(t)?Array.from(t):t),this.o}hostUpdate(){var t;"function"==typeof this.optionsOrCallback&&this.u(this.optionsOrCallback()),this.p()&&(this.g=this.v(),this.t=null!==(t=this.t)&&void 0!==t?t:this.element.parentNode,this.i=this.element.nextSibling)}async hostUpdated(){if(!this.o||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await a;const i=this._(),s=this.A(this.options.keyframeOptions,i),e=this.v();if(void 0!==this.g){const{from:s,to:o}=this.O(this.g,e,i);this.log("measured",[this.g,e,s,o]),t=this.calculateKeyframes(s,o)}else{const s=r.get(this.options.inId);if(s){r.delete(this.options.inId);const{from:o,to:n}=this.O(s,e,i);t=this.calculateKeyframes(o,n),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,h++,t.forEach((t=>t.zIndex=h))}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,s)}resetStyles(){var t;void 0!==this.j&&(this.element.setAttribute("style",null!==(t=this.j)&&void 0!==t?t:""),this.j=void 0)}commitStyles(){var t,i;this.j=this.element.getAttribute("style"),null===(t=this.webAnimation)||void 0===t||t.commitStyles(),null===(i=this.webAnimation)||void 0===i||i.cancel()}reconnected(){}async disconnected(){var t;if(!this.o)return;if(void 0!==this.options.id&&r.set(this.options.id,this.g),void 0===this.options.out)return;if(this.prepare(),await a(),null===(t=this.t)||void 0===t?void 0:t.isConnected){const t=this.i&&this.i.parentNode===this.t?this.i:null;if(this.t.insertBefore(this.element,t),this.options.stabilizeOut){const t=this.v();this.log("stabilizing out");const i=this.g.left-t.left,s=this.g.top-t.top;!("static"===getComputedStyle(this.element).position)||0===i&&0===s||(this.element.style.position="relative"),0!==i&&(this.element.style.left=i+"px"),0!==s&&(this.element.style.top=s+"px")}}const i=this.A(this.options.keyframeOptions);await this.animate(this.options.out,i),this.element.remove()}prepare(){this.createFinished()}start(){var t,i;null===(i=(t=this.options).onStart)||void 0===i||i.call(t,this)}didFinish(t){var i,s;t&&(null===(s=(i=this.options).onComplete)||void 0===s||s.call(i,this)),this.g=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}_(){const t=[];for(let i=this.element.parentNode;i;i=null==i?void 0:i.parentNode){const s=j.get(i);s&&!s.isDisabled()&&s&&t.push(s)}return t}get isHostRendered(){const t=n.has(this.l);return t||this.l.updateComplete.then((()=>{n.add(this.l)})),t}A(t,i=this._()){const s={...A};return i.forEach((t=>Object.assign(s,t.options.keyframeOptions))),Object.assign(s,t),s}O(t,i,s){t={...t},i={...i};const e=s.map((t=>t.animatingProperties)).filter((t=>void 0!==t));let o=1,h=1;return void 0!==e&&(e.forEach((t=>{t.width&&(o/=t.width),t.height&&(h/=t.height)})),void 0!==t.left&&void 0!==i.left&&(t.left=o*t.left,i.left=o*i.left),void 0!==t.top&&void 0!==i.top&&(t.top=h*t.top,i.top=h*i.top)),{from:t,to:i}}calculateKeyframes(t,i,s=!1){var e;const o={},h={};let r=!1;const n={};for(const s in i){const a=t[s],l=i[s];if(s in N){const t=N[s];if(void 0===a||void 0===l)continue;const i=t(a,l);void 0!==i.transform&&(n[s]=i.value,r=!0,o.transform=`${null!==(e=o.transform)&&void 0!==e?e:""} ${i.transform}`,void 0!==i.overrideFrom&&Object.assign(o,i.overrideFrom))}else a!==l&&void 0!==a&&void 0!==l&&(r=!0,o[s]=a,h[s]=l)}return o.transformOrigin=h.transformOrigin=s?"center center":"top left",this.animatingProperties=n,r?[o,h]:void 0}async animate(t,i=this.options.keyframeOptions){this.start(),this.frames=t;let s=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),void 0!==t)){this.log("animate",[t,i]),s=!0,this.webAnimation=this.element.animate(t,i);const e=this.getController();null==e||e.add(this);try{await this.webAnimation.finished}catch(t){}null==e||e.remove(this)}return this.didFinish(s),s}isAnimating(){var t,i;return"running"===(null===(t=this.webAnimation)||void 0===t?void 0:t.playState)||(null===(i=this.webAnimation)||void 0===i?void 0:i.pending)}log(t,i){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,i)}}const F=i(x);export{x as Animate,F as animate,a as animationFrame,b as defaultCssProperties,A as defaultKeyframeOptions,f as fade,p as fadeIn,y as fadeInSlow,m as fadeOut,c as flyAbove,l as flyBelow,d as flyLeft,u as flyRight,v as none,N as transformProps};
+import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as e}from"lit/async-directive.js";import{controllerMap as h}from"./animate-controller.js";export{AnimateController}from"./animate-controller.js";let o=0;const r=new Map,n=new WeakSet,a=()=>new Promise((t=>requestAnimationFrame(t))),c=[{transform:"translateY(100%) scale(0)",opacity:0}],l=[{transform:"translateY(-100%) scale(0)",opacity:0}],d=[{transform:"translateX(-100%) scale(0)",opacity:0}],u=[{transform:"translateX(100%) scale(0)",opacity:0}],m=[{}],f=[{opacity:0}],p=f,v=[{opacity:0},{opacity:1}],y=[{opacity:0},{opacity:.25,offset:.75},{opacity:1}],g=(t,i)=>{const s=t-i;return 0===s?void 0:s},w=(t,i)=>{const s=t/i;return 1===s?void 0:s},N={left:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateX(${s}px)`}},top:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateY(${s}px)`}},width:(t,i)=>{let s;0===i&&(i=1,s={width:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleX(${e})`}},height:(t,i)=>{let s;0===i&&(i=1,s={height:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleY(${e})`}}},A={duration:333,easing:"ease-in-out"},b=["left","top","width","height","opacity","color","background"],j=new WeakMap;class x extends e{constructor(t){if(super(t),this.t=null,this.i=null,this.o=!0,this.shouldLog=!1,t.type===s.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){this.resolveFinished?.(),this.finished=new Promise((t=>{this.h=t}))}async resolveFinished(){this.h?.(),this.h=void 0}render(i){return t}getController(){return h.get(this.l)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[i]){const s=void 0===this.l;return s&&(this.l=t.options?.host,this.l.addController(this),this.element=t.element,j.set(this.element,this)),this.optionsOrCallback=i,(s||"function"!=typeof i)&&this.u(i),this.render(i)}u(t){t=t??{};const i=this.getController();void 0!==i&&((t={...i.defaultOptions,...t}).keyframeOptions={...i.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??=b,this.options=t}p(){const t={},i=this.element.getBoundingClientRect(),s=getComputedStyle(this.element);return this.options.properties.forEach((e=>{const h=i[e]??(N[e]?void 0:s[e]),o=Number(h);t[e]=isNaN(o)?h+"":o})),t}m(){let t,i=!0;return this.options.guard&&(t=this.options.guard(),i=((t,i)=>{if(Array.isArray(t)){if(Array.isArray(i)&&i.length===t.length&&t.every(((t,s)=>t===i[s])))return!1}else if(i===t)return!1;return!0})(t,this.v)),this.o=this.l.hasUpdated&&!this.isDisabled()&&!this.isAnimating()&&i&&this.element.isConnected,this.o&&(this.v=Array.isArray(t)?Array.from(t):t),this.o}hostUpdate(){"function"==typeof this.optionsOrCallback&&this.u(this.optionsOrCallback()),this.m()&&(this.g=this.p(),this.t=this.t??this.element.parentNode,this.i=this.element.nextSibling)}async hostUpdated(){if(!this.o||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await a;const i=this._(),s=this.A(this.options.keyframeOptions,i),e=this.p();if(void 0!==this.g){const{from:s,to:h}=this.O(this.g,e,i);this.log("measured",[this.g,e,s,h]),t=this.calculateKeyframes(s,h)}else{const s=r.get(this.options.inId);if(s){r.delete(this.options.inId);const{from:h,to:n}=this.O(s,e,i);t=this.calculateKeyframes(h,n),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,o++,t.forEach((t=>t.zIndex=o))}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,s)}resetStyles(){void 0!==this.j&&(this.element.setAttribute("style",this.j??""),this.j=void 0)}commitStyles(){this.j=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel()}reconnected(){}async disconnected(){if(!this.o)return;if(void 0!==this.options.id&&r.set(this.options.id,this.g),void 0===this.options.out)return;if(this.prepare(),await a(),this.t?.isConnected){const t=this.i&&this.i.parentNode===this.t?this.i:null;if(this.t.insertBefore(this.element,t),this.options.stabilizeOut){const t=this.p();this.log("stabilizing out");const i=this.g.left-t.left,s=this.g.top-t.top;!("static"===getComputedStyle(this.element).position)||0===i&&0===s||(this.element.style.position="relative"),0!==i&&(this.element.style.left=i+"px"),0!==s&&(this.element.style.top=s+"px")}}const t=this.A(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove()}prepare(){this.createFinished()}start(){this.options.onStart?.(this)}didFinish(t){t&&this.options.onComplete?.(this),this.g=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}_(){const t=[];for(let i=this.element.parentNode;i;i=i?.parentNode){const s=j.get(i);s&&!s.isDisabled()&&s&&t.push(s)}return t}get isHostRendered(){const t=n.has(this.l);return t||this.l.updateComplete.then((()=>{n.add(this.l)})),t}A(t,i=this._()){const s={...A};return i.forEach((t=>Object.assign(s,t.options.keyframeOptions))),Object.assign(s,t),s}O(t,i,s){t={...t},i={...i};const e=s.map((t=>t.animatingProperties)).filter((t=>void 0!==t));let h=1,o=1;return void 0!==e&&(e.forEach((t=>{t.width&&(h/=t.width),t.height&&(o/=t.height)})),void 0!==t.left&&void 0!==i.left&&(t.left=h*t.left,i.left=h*i.left),void 0!==t.top&&void 0!==i.top&&(t.top=o*t.top,i.top=o*i.top)),{from:t,to:i}}calculateKeyframes(t,i,s=!1){const e={},h={};let o=!1;const r={};for(const s in i){const n=t[s],a=i[s];if(s in N){const t=N[s];if(void 0===n||void 0===a)continue;const i=t(n,a);void 0!==i.transform&&(r[s]=i.value,o=!0,e.transform=`${e.transform??""} ${i.transform}`,void 0!==i.overrideFrom&&Object.assign(e,i.overrideFrom))}else n!==a&&void 0!==n&&void 0!==a&&(o=!0,e[s]=n,h[s]=a)}return e.transformOrigin=h.transformOrigin=s?"center center":"top left",this.animatingProperties=r,o?[e,h]:void 0}async animate(t,i=this.options.keyframeOptions){this.start(),this.frames=t;let s=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),void 0!==t)){this.log("animate",[t,i]),s=!0,this.webAnimation=this.element.animate(t,i);const e=this.getController();e?.add(this);try{await this.webAnimation.finished}catch(t){}e?.remove(this)}return this.didFinish(s),s}isAnimating(){return"running"===this.webAnimation?.playState||this.webAnimation?.pending}log(t,i){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,i)}}const F=i(x);export{x as Animate,F as animate,a as animationFrame,b as defaultCssProperties,A as defaultKeyframeOptions,p as fade,v as fadeIn,y as fadeInSlow,f as fadeOut,l as flyAbove,c as flyBelow,d as flyLeft,u as flyRight,m as none,N as transformProps};
 //# sourceMappingURL=animate.js.map

development/animate-controller.js

@@ -26,6 +26,5 @@ export const controllerMap = new WeakMap();
     async add(animate) {
-        var _a, _b;
         this.clients.add(animate);
         if (this.startPaused) {
-            (_a = animate.webAnimation) === null || _a === void 0 ? void 0 : _a.pause();
+            animate.webAnimation?.pause();
         }
@@ -36,3 +35,3 @@ this.pendingComplete = true;
             this.pendingComplete = false;
-            (_b = this.onComplete) === null || _b === void 0 ? void 0 : _b.call(this);
+            this.onComplete?.();
         }
@@ -47,3 +46,3 @@ }
     pause() {
-        this.clients.forEach((f) => { var _a; return (_a = f.webAnimation) === null || _a === void 0 ? void 0 : _a.pause(); });
+        this.clients.forEach((f) => f.webAnimation?.pause());
     }
@@ -54,10 +53,10 @@ /**
     play() {
-        this.clients.forEach((f) => { var _a; return (_a = f.webAnimation) === null || _a === void 0 ? void 0 : _a.play(); });
+        this.clients.forEach((f) => f.webAnimation?.play());
     }
     cancel() {
-        this.clients.forEach((f) => { var _a; return (_a = f.webAnimation) === null || _a === void 0 ? void 0 : _a.cancel(); });
+        this.clients.forEach((f) => f.webAnimation?.cancel());
         this.clients.clear();
     }
     finish() {
-        this.clients.forEach((f) => { var _a; return (_a = f.webAnimation) === null || _a === void 0 ? void 0 : _a.finish(); });
+        this.clients.forEach((f) => f.webAnimation?.finish());
         this.clients.clear();
@@ -86,3 +85,3 @@ }
     get isPlaying() {
-        return Array.from(this.clients).some((a) => { var _a; return ((_a = a.webAnimation) === null || _a === void 0 ? void 0 : _a.playState) === 'running'; });
+        return Array.from(this.clients).some((a) => a.webAnimation?.playState === 'running');
     }
@@ -89,0 +88,0 @@ async finished() {

development/animate.d.ts

@@ -5,7 +5,7 @@ import { AttributePart } from 'lit/html.js';
 export { AnimateController } from './animate-controller.js';
-export declare type CSSValues = {
+export type CSSValues = {
     [index: string]: string | number;
 };
-export declare type CSSPropertiesList = string[];
-export declare type Options = {
+export type CSSPropertiesList = string[];
+export type Options = {
     keyframeOptions?: KeyframeAnimationOptions;
@@ -12,0 +12,0 @@ properties?: CSSPropertiesList;

development/animate.js

@@ -119,4 +119,3 @@ import { nothing } from 'lit/html.js';
     createFinished() {
-        var _a;
-        (_a = this.resolveFinished) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.resolveFinished?.();
         this.finished = new Promise((r) => {
@@ -127,4 +126,3 @@ this._resolveFinished = r;
     async resolveFinished() {
-        var _a;
-        (_a = this._resolveFinished) === null || _a === void 0 ? void 0 : _a.call(this);
+        this._resolveFinished?.();
         this._resolveFinished = undefined;
@@ -139,10 +137,8 @@ }
     isDisabled() {
-        var _a;
-        return this.options.disabled || ((_a = this.getController()) === null || _a === void 0 ? void 0 : _a.disabled);
+        return this.options.disabled || this.getController()?.disabled;
     }
     update(part, [options]) {
-        var _a;
         const firstUpdate = this._host === undefined;
         if (firstUpdate) {
-            this._host = (_a = part.options) === null || _a === void 0 ? void 0 : _a.host;
+            this._host = part.options?.host;
             this._host.addController(this);
@@ -162,5 +158,3 @@ this.element = part.element;
     _setOptions(options) {
-        var _a;
-        var _b;
-        options = options !== null && options !== void 0 ? options : {};
+        options = options ?? {};
         // Mixin controller options.
@@ -179,3 +173,3 @@ const controller = this.getController();
         // Ensure there are some properties to animation and some animation options.
-        (_a = (_b = options).properties) !== null && _a !== void 0 ? _a : (_b.properties = defaultCssProperties);
+        options.properties ??= defaultCssProperties;
         this.options = options;
@@ -189,6 +183,6 @@ }
         this.options.properties.forEach((p) => {
-            var _a;
-            const v = (_a = bounds[p]) !== null && _a !== void 0 ? _a : (!transformProps[p]
-                ? computedStyle[p]
-                : undefined);
+            const v = bounds[p] ??
+                (!transformProps[p]
+                    ? computedStyle[p]
+                    : undefined);
             const asNum = Number(v);
@@ -220,3 +214,2 @@ props[p] = isNaN(asNum) ? String(v) : asNum;
     hostUpdate() {
-        var _a;
         // TODO(sorvell): If options will change that will affect measuring,
@@ -231,3 +224,3 @@ // then the user must pass a callback which can be called at update time.
             this._parentNode =
-                (_a = this._parentNode) !== null && _a !== void 0 ? _a : this.element.parentNode;
+                this._parentNode ?? this.element.parentNode;
             this._nextSibling = this.element.nextSibling;
@@ -284,5 +277,4 @@ }
     resetStyles() {
-        var _a;
         if (this._styles !== undefined) {
-            this.element.setAttribute('style', (_a = this._styles) !== null && _a !== void 0 ? _a : '');
+            this.element.setAttribute('style', this._styles ?? '');
             this._styles = undefined;
@@ -292,7 +284,6 @@ }
     commitStyles() {
-        var _a, _b;
         this._styles = this.element.getAttribute('style');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (_a = this.webAnimation) === null || _a === void 0 ? void 0 : _a.commitStyles();
-        (_b = this.webAnimation) === null || _b === void 0 ? void 0 : _b.cancel();
+        this.webAnimation?.commitStyles();
+        this.webAnimation?.cancel();
     }
@@ -302,3 +293,2 @@ reconnected() { }
     async disconnected() {
-        var _a;
         if (!this._shouldAnimate) {
@@ -315,3 +305,3 @@ return;
         await animationFrame();
-        if ((_a = this._parentNode) === null || _a === void 0 ? void 0 : _a.isConnected) {
+        if (this._parentNode?.isConnected) {
             // put element back in DOM
@@ -354,9 +344,7 @@ const ref = this._nextSibling && this._nextSibling.parentNode === this._parentNode
     start() {
-        var _a, _b;
-        (_b = (_a = this.options).onStart) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.options.onStart?.(this);
     }
     didFinish(didAnimate) {
-        var _a, _b;
         if (didAnimate) {
-            (_b = (_a = this.options).onComplete) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+            this.options.onComplete?.(this);
         }
@@ -370,3 +358,3 @@ this._fromValues = undefined;
         const ancestors = [];
-        for (let p = this.element.parentNode; p; p = p === null || p === void 0 ? void 0 : p.parentNode) {
+        for (let p = this.element.parentNode; p; p = p?.parentNode) {
             const a = nodeToAnimateMap.get(p);
@@ -427,3 +415,2 @@ if (a && !a.isDisabled() && a) {
     calculateKeyframes(from, to, center = false) {
-        var _a;
         const fromFrame = {};
@@ -444,3 +431,3 @@ const toFrame = {};
                     hasFrames = true;
-                    fromFrame['transform'] = `${(_a = fromFrame['transform']) !== null && _a !== void 0 ? _a : ''} ${op['transform']}`;
+                    fromFrame['transform'] = `${fromFrame['transform'] ?? ''} ${op['transform']}`;
                     if (op.overrideFrom !== undefined) {
@@ -477,3 +464,3 @@ Object.assign(fromFrame, op.overrideFrom);
                 const controller = this.getController();
-                noAwait(controller === null || controller === void 0 ? void 0 : controller.add(this));
+                noAwait(controller?.add(this));
                 try {
@@ -485,3 +472,3 @@ await this.webAnimation.finished;
                 }
-                controller === null || controller === void 0 ? void 0 : controller.remove(this);
+                controller?.remove(this);
             }
@@ -493,4 +480,3 @@ }
     isAnimating() {
-        var _a, _b;
-        return (((_a = this.webAnimation) === null || _a === void 0 ? void 0 : _a.playState) === 'running' || ((_b = this.webAnimation) === null || _b === void 0 ? void 0 : _b.pending));
+        return (this.webAnimation?.playState === 'running' || this.webAnimation?.pending);
     }
@@ -497,0 +483,0 @@ log(message, data) {

development/position.d.ts

@@ -12,7 +12,7 @@ import { AttributePart } from 'lit/html.js';
 }
-declare type Ref = {
+type Ref = {
     value: HTMLElement;
 };
-export declare type TargetCallbackOrRef = (() => HTMLElement) | Ref;
-export declare type Positions = Array<keyof Positionables>;
+export type TargetCallbackOrRef = (() => HTMLElement) | Ref;
+export type Positions = Array<keyof Positionables>;
 export declare class Position extends AsyncDirective {
@@ -19,0 +19,0 @@ private _host?;

development/position.js

@@ -16,5 +16,4 @@ import { nothing } from 'lit/html.js';
     update(part, [target, positions]) {
-        var _a;
         if (this._host === undefined) {
-            this._host = (_a = part.options) === null || _a === void 0 ? void 0 : _a.host;
+            this._host = part.options?.host;
             this._host.addController(this);
@@ -24,3 +23,3 @@ }
         this._targetCallbackOrRef = target;
-        this._positions = positions !== null && positions !== void 0 ? positions : ['left', 'top', 'width', 'height'];
+        this._positions = positions ?? ['left', 'top', 'width', 'height'];
         return this.render(target, positions);
@@ -32,6 +31,5 @@ }
     _position() {
-        var _a, _b;
         const target = typeof this._targetCallbackOrRef === 'function'
             ? this._targetCallbackOrRef()
-            : (_a = this._targetCallbackOrRef) === null || _a === void 0 ? void 0 : _a.value;
+            : this._targetCallbackOrRef?.value;
         const parent = target.offsetParent;
@@ -43,3 +41,3 @@ if (target === undefined || !parent) {
         const pr = parent.getBoundingClientRect();
-        (_b = this._positions) === null || _b === void 0 ? void 0 : _b.forEach((p) => {
+        this._positions?.forEach((p) => {
             const x = positionedPoints.includes(p) ? tr[p] - pr[p] : tr[p];
@@ -46,0 +44,0 @@ this._element.style[p] = `${x}px`;

package.json

 {
   "name": "@lit-labs/motion",
-  "version": "1.0.4",
+  "version": "1.0.5-pre.0",
   "description": "Lit directives for making things move.",
@@ -157,6 +157,6 @@ "license": "BSD-3-Clause",
     "@types/trusted-types": "^2.0.2",
-    "@lit-internal/scripts": "^1.0.0"
+    "@lit-internal/scripts": "^1.0.1-pre.0"
   },
   "dependencies": {
-    "lit": "^2.8.0"
+    "lit": "^3.0.0-pre.1"
   },
@@ -163,0 +163,0 @@ "publishConfig": {

position.d.ts

@@ -12,7 +12,7 @@ import { AttributePart } from 'lit/html.js';
 }
-declare type Ref = {
+type Ref = {
     value: HTMLElement;
 };
-export declare type TargetCallbackOrRef = (() => HTMLElement) | Ref;
-export declare type Positions = Array<keyof Positionables>;
+export type TargetCallbackOrRef = (() => HTMLElement) | Ref;
+export type Positions = Array<keyof Positionables>;
 export declare class Position extends AsyncDirective {
@@ -19,0 +19,0 @@ private _host?;

position.js

@@ -1,2 +0,2 @@
-import{nothing as t}from"lit/html.js";import{directive as i,PartType as o}from"lit/directive.js";import{AsyncDirective as s}from"lit/async-directive.js";const r=["top","right","bottom","left"];class e extends s{constructor(t){if(super(t),t.type!==o.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(i,o){return t}update(t,[i,o]){var s;return void 0===this.l&&(this.l=null===(s=t.options)||void 0===s?void 0:s.host,this.l.addController(this)),this.N=t.element,this.P=i,this.S=null!=o?o:["left","top","width","height"],this.render(i,o)}hostUpdated(){this.C()}C(){var t,i;const o="function"==typeof this.P?this.P():null===(t=this.P)||void 0===t?void 0:t.value,s=o.offsetParent;if(void 0===o||!s)return;const e=o.getBoundingClientRect(),h=s.getBoundingClientRect();null===(i=this.S)||void 0===i||i.forEach((t=>{const i=r.includes(t)?e[t]-h[t]:e[t];this.N.style[t]=i+"px"}))}}const h=i(e);export{e as Position,h as position};
+import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as o}from"lit/async-directive.js";const r=["top","right","bottom","left"];class e extends o{constructor(t){if(super(t),t.type!==s.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(i,s){return t}update(t,[i,s]){return void 0===this.l&&(this.l=t.options?.host,this.l.addController(this)),this.N=t.element,this.P=i,this.S=s??["left","top","width","height"],this.render(i,s)}hostUpdated(){this.C()}C(){const t="function"==typeof this.P?this.P():this.P?.value,i=t.offsetParent;if(void 0===t||!i)return;const s=t.getBoundingClientRect(),o=i.getBoundingClientRect();this.S?.forEach((t=>{const i=r.includes(t)?s[t]-o[t]:s[t];this.N.style[t]=i+"px"}))}}const h=i(e);export{e as Position,h as position};
 //# sourceMappingURL=position.js.map

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

No v1

Quality

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

Found 1 instance in 1 package

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

157084

decreased by-2.67%

Lines of code

1154

decreased by-1.7%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@lit/reactive-element@2.0.4(transitive)

• + Addedlit@3.2.1(transitive)

• + Addedlit-element@4.1.1(transitive)

• + Addedlit-html@3.2.1(transitive)

• - Removed@lit/reactive-element@1.6.3(transitive)

• - Removedlit@2.8.0(transitive)

• - Removedlit-element@3.3.3(transitive)

• - Removedlit-html@2.8.0(transitive)

• Updatedlit@^3.0.0-pre.1