keyframekit 1.0.7 → 1.0.9

package/docs/docs/index.md

@@ -1,141 +1,142 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: KeyframeKit
-  tagline: Intuitive, powerful and performant tools for working with CSS animations in JavaScript.
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /#installation
-    - theme: alt
-      text: Reference
-      link: /reference
----
-
-<Playground/>
-
-## About
-
-While working with the [Web Animations API][1], I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So I wrote a typed, spec-compliant library to convert from one to the other, letting you play your CSS-defined animations right in JS. Along the way, I also added some other useful utilities for working with the API.
-
-## Installation
-
-::: code-group
-```sh [npm]
-npm install keyframekit
-```
-:::
-
-## Usage
-
-### Playing CSS-defined animations with JS
-
-In your CSS:
-```css
-@keyframes rotate-small { ... }
-```
-
-Then, in JS:
-```js
-import KeyframeKit from 'keyframekit';
-
-const documentStyleSheets = await KeyframeKit.getDocumentStyleSheetsOnLoad();
-
-// get animation keyframes from the document's stylesheets
-const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
-  of: 'rotate-small',
-  in: documentStyleSheets
-});
-
-// then, define your animation
-const rotateSmallAnim = rotateSmallAnimKeyframes.toKeyframeEffect({
-  duration: 700,
-  easing: 'ease'
-});
-
-// finally, attach it to an element:
-const attachedAnim = rotateSmallAnim.toAnimation({
-  target: document.querySelector('.el')
-});
-
-attachedAnim.play();
-```
-
-The primary reason to play your animation with JS is because you get way more control over its playback:
-```js
-attachedAnim.pause();
-attachedAnim.playbackRate = -1;
-const progress = attachedAnim.overallProgress; // 0 to 1 (Baseline newly available)
-await attachedAnim.finished;
-```
-[...and more.][2]
-
-### Importing animations directly from a CSS file
-
-Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
-
-```js
-import KeyframeKit from 'keyframekit';
-
-const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
-
-// get animation keyframes from stylesheet
-const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
-  of: 'rotate-small',
-  in: styleSheet
-});
-```
-
-> Note: This won't resolve any `@import` rules in the stylesheet. [See here.][3]
-
-### Defining animations in JS
-
-The `KeyframeEffectParameters` class provides a more convenient way to define your animations in JS than is offered natively.  
-It's useful for when you want to have all your animation code in one place.
-
-```js
-import { KeyframeEffectParameters } from 'keyframekit';
-
-// define your animation
-const linkTextHoverAnim = new KeyframeEffectParameters({
-
-  keyframes: {
-    // 0 to 1. equivalent to CSS keyframe percentage values:
-    offset: [0, 0.499, 0.5, 1],
-    // respective CSS property keyframes:
-    clipPath: ['inset(0 0 0 0)', 'inset(100% 0 0 0)', 'inset(0 0 100% 0)', 'inset(0 0 0 0)'],
-    top: ['0', '-20px', '20px', '0']
-  },
-
-  options: {
-    duration: 700,
-    easing: 'ease'
-  }
-  
-});
-
-// then, attach it to an element:
-const attachedAnim = linkTextHoverAnim.toAnimation({
-  target: document.querySelector('.link')
-});
-
-attachedAnim.play();
-```
-
-### Full reference
-[See here.](/reference/index.md)
-
-## Typing
-
-This library is fully compatable with native JS, but it also has full spec-compliant type support, including declaration files and source maps.
-
-## License
-
-[MIT](https://github.com/benhatsor/KeyframeKit/blob/main/LICENSE)
-
-
-[1]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
-[2]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
-[3]: https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: KeyframeKit
+  tagline: Intuitive, powerful and lightweight tools for working with CSS animations in JavaScript.
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /#installation
+    - theme: alt
+      text: Reference
+      link: /reference
+---
+
+<Playground/>
+
+## About
+
+While working with the [Web Animations API][1], I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So I wrote a typed, spec-compliant library to convert from one to the other, letting you play your CSS-defined animations right in JS. Along the way, I also added some other useful utilities for working with the API. [Read more.][2]
+
+## Installation
+
+::: code-group
+```sh [npm]
+npm install keyframekit
+```
+:::
+
+## Usage
+
+### Playing CSS-defined animations with JS
+
+In your CSS:
+```css
+@keyframes rotate-small { ... }
+```
+
+Then, in JS:
+```js
+import KeyframeKit from 'keyframekit';
+
+const documentStyleSheets = await KeyframeKit.getDocumentStyleSheetsOnLoad();
+
+// get animation keyframes from the document's stylesheets
+const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate-small',
+  in: documentStyleSheets
+});
+
+// then, define your animation
+const rotateSmallAnim = rotateSmallAnimKeyframes.toKeyframeEffect({
+  duration: 700,
+  easing: 'ease'
+});
+
+// finally, attach it to an element:
+const attachedAnim = rotateSmallAnim.toAnimation({
+  target: document.querySelector('.el')
+});
+
+attachedAnim.play();
+```
+
+The primary reason to play your animation with JS is because you get way more control over its playback:
+```js
+attachedAnim.pause();
+attachedAnim.playbackRate = -1;
+const progress = attachedAnim.overallProgress; // 0 to 1 (Baseline newly available)
+await attachedAnim.finished;
+```
+[...and more.][3]
+
+### Importing animations directly from a CSS file
+
+Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
+
+```js
+import KeyframeKit from 'keyframekit';
+
+const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
+
+// get animation keyframes from stylesheet
+const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate-small',
+  in: styleSheet
+});
+```
+
+> Note: This won't resolve any `@import` rules in the stylesheet. [See more.][4]
+
+### Defining animations in JS
+
+The `KeyframeEffectParameters` class provides a more convenient way to define your animations in JS than is offered natively.  
+It's useful for when you want to have all your animation code in one place.
+
+```js
+import { KeyframeEffectParameters } from 'keyframekit';
+
+// define your animation
+const linkTextHoverAnim = new KeyframeEffectParameters({
+
+  keyframes: {
+    // 0 to 1. equivalent to CSS keyframe percentage values:
+    offset: [0, 0.499, 0.5, 1],
+    // respective CSS property keyframes:
+    clipPath: ['inset(0 0 0 0)', 'inset(100% 0 0 0)', 'inset(0 0 100% 0)', 'inset(0 0 0 0)'],
+    top: ['0', '-20px', '20px', '0']
+  },
+
+  options: {
+    duration: 700,
+    easing: 'ease'
+  }
+  
+});
+
+// then, attach it to an element:
+const attachedAnim = linkTextHoverAnim.toAnimation({
+  target: document.querySelector('.link')
+});
+
+attachedAnim.play();
+```
+
+### Full reference
+[See here.](/reference/index.md)
+
+## Typing
+
+This library is fully compatable with native JS, but it also has full spec-compliant type support, including declaration files and source maps.
+
+## License
+
+[MIT](https://github.com/benhatsor/KeyframeKit/blob/main/LICENSE)
+
+
+[1]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
+[2]: https://benhatsor.medium.com/99573ef4738b
+[3]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
+[4]: https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418

package/docs/docs/public/playground/KeyframeKit/dist/KeyframeKit.d.ts

@@ -1,139 +1,139 @@
-export type KeyframesFactorySource = StyleSheetList | CSSStyleSheet;
-declare class KeyframesFactory {
-    #private;
-    readonly Error: {
-        readonly KeyframesRuleNameTypeError: {
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            isError(error: unknown): error is Error;
-        };
-        readonly SourceTypeError: {
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            isError(error: unknown): error is Error;
-        };
-        readonly StyleSheetImportError: {
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            isError(error: unknown): error is Error;
-        };
-    };
-    getDocumentStyleSheetsOnLoad({ document }?: {
-        document?: Document;
-    }): Promise<StyleSheetList>;
-    /** @remarks
-     *  Note: `@import` rules won't be resolved in imported stylesheets.
-     *  See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418. */
-    importStyleSheet(url: string): Promise<CSSStyleSheet>;
-    /** @param obj.of The name of the `@keyframes` rule to get keyframes from. */
-    getStyleSheetKeyframes({ of: ruleName, in: source }: {
-        of: string;
-        in: KeyframesFactorySource;
-    }): ParsedKeyframes | undefined;
-    getAllStyleSheetKeyframesRules({ in: source }: {
-        in: KeyframesFactorySource;
-    }): ParsedKeyframesRules;
-    parseKeyframesRule({ rule: keyframes }: {
-        rule: CSSKeyframesRule;
-    }): ParsedKeyframes;
-}
-declare const _default: KeyframesFactory;
-export default _default;
-export type { KeyframesFactory };
-/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
-export type KeyframeArgument = Keyframe[] | PropertyIndexedKeyframes;
-/** https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface */
-export declare class KeyframeEffectParameters {
-    #private;
-    keyframes: KeyframeArgument;
-    options: KeyframeEffectOptions;
-    /**
-     * @param obj.keyframes [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats)
-     * @param obj.options [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
-     */
-    constructor({ keyframes, options }: {
-        keyframes: KeyframeArgument;
-        options?: number | KeyframeEffectOptions;
-    });
-    /**
-     * @param obj.target An element to attach the animation to.
-     * @param obj.options Additional keyframe effect options. Can override existing keys.
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
-     *
-     * @see Specifications:
-     * - https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface
-     * - https://drafts.csswg.org/web-animations-1/#the-animation-interface
-     */
-    toAnimation({ target, options: additionalOptions, timeline }: {
-        target: Element | null;
-        options?: number | KeyframeEffectOptions;
-        timeline?: AnimationTimeline;
-    }): Animation;
-}
-export declare class ParsedKeyframes {
-    keyframes: Keyframe[];
-    constructor(keyframes: Keyframe[]);
-    /**
-     * @param options
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
-     */
-    toKeyframeEffect(options: number | KeyframeEffectOptions | null): KeyframeEffectParameters;
-}
-export type ParsedKeyframesRules = {
-    [ruleName: string]: ParsedKeyframes;
-};
+export type KeyframesFactorySource = StyleSheetList | CSSStyleSheet;
+declare class KeyframesFactory {
+    #private;
+    readonly Error: {
+        readonly KeyframesRuleNameTypeError: {
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            isError(error: unknown): error is Error;
+        };
+        readonly SourceTypeError: {
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            isError(error: unknown): error is Error;
+        };
+        readonly StyleSheetImportError: {
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            isError(error: unknown): error is Error;
+        };
+    };
+    getDocumentStyleSheetsOnLoad({ document }?: {
+        document?: Document;
+    }): Promise<StyleSheetList>;
+    /** @remarks
+     *  Note: `@import` rules won't be resolved in imported stylesheets.
+     *  See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418. */
+    importStyleSheet(url: string): Promise<CSSStyleSheet>;
+    /** @param obj.of The name of the `@keyframes` rule to get keyframes from. */
+    getStyleSheetKeyframes({ of: ruleName, in: source }: {
+        of: string;
+        in: KeyframesFactorySource;
+    }): ParsedKeyframes | undefined;
+    getAllStyleSheetKeyframesRules({ in: source }: {
+        in: KeyframesFactorySource;
+    }): ParsedKeyframesRules;
+    parseKeyframesRule({ rule: keyframes }: {
+        rule: CSSKeyframesRule;
+    }): ParsedKeyframes;
+}
+declare const _default: KeyframesFactory;
+export default _default;
+export type { KeyframesFactory };
+/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
+export type KeyframeArgument = Keyframe[] | PropertyIndexedKeyframes;
+/** https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface */
+export declare class KeyframeEffectParameters {
+    #private;
+    keyframes: KeyframeArgument;
+    options: KeyframeEffectOptions;
+    /**
+     * @param obj.keyframes [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats)
+     * @param obj.options [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
+     */
+    constructor({ keyframes, options }: {
+        keyframes: KeyframeArgument;
+        options?: number | KeyframeEffectOptions;
+    });
+    /**
+     * @param obj.target An element to attach the animation to.
+     * @param obj.options Additional keyframe effect options. Can override existing keys.
+     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
+     *
+     * @see Specifications:
+     * - https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface
+     * - https://drafts.csswg.org/web-animations-1/#the-animation-interface
+     */
+    toAnimation({ target, options: additionalOptions, timeline }: {
+        target: Element | null;
+        options?: number | KeyframeEffectOptions;
+        timeline?: AnimationTimeline;
+    }): Animation;
+}
+export declare class ParsedKeyframes {
+    keyframes: Keyframe[];
+    constructor(keyframes: Keyframe[]);
+    /**
+     * @param options
+     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
+     */
+    toKeyframeEffect(options: number | KeyframeEffectOptions | null): KeyframeEffectParameters;
+}
+export type ParsedKeyframesRules = {
+    [ruleName: string]: ParsedKeyframes;
+};
 //# sourceMappingURL=KeyframeKit.d.ts.map