lwa 0.1.0 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 sutras
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# lwa
+
+轻量级的动画库。
+
+- 按需加载
+- 摇树优化
+
+## 文档与演示
+
+[https://sutras.github.io/lwa-docs](https://sutras.github.io/lwa-docs)
+
+## 安装
+
+```bash
+npm install lwa
+```
+
+## 注册插件
+
+```js
+import {
+  use,
+  cssPlugin,
+  colorPlugin,
+  relativePlugin,
+  svgPlugin,
+  interpPlugin,
+} from "lwa";
+
+use([cssPlugin, colorPlugin, relativePlugin, svgPlugin, interpPlugin]);
+```
+
+## 使用
+
+```js
+import { createAnimation } from "lwa";
+
+createAnimation("#el", {
+  translateX: 200,
+});
+```
+
+## 维护
+
+### 下载
+
+```bash
+git clone https://github.com/sutras/lwa.git
+```
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 启动开发环境
+
+```bash
+npm run dev
+```
+
+### 打包案例文档和部署
+
+```bash
+npm run buildDocsAndDeploy
+```
+
+### 打包库
+
+```bash
+npm run build:lib
+```

package/dist/lwa.d.ts

@@ -0,0 +1,293 @@
+declare function add(tick: () => void): void;
+
+export declare interface AnimatedTarget {
+    target: object;
+    index: number;
+    total: number;
+}
+
+export declare type BaseValue = number | string;
+
+export declare interface Between {
+    from: number;
+    to: number;
+    round: number;
+}
+
+export declare const colorPlugin: Plugin_2<    {
+color: {};
+}, any>;
+
+export declare function createAnimation(target: string | unknown[] | object, keyframes: Properties | Properties[], options?: TweenOptions & TimelineOptions): {
+    play: () => void;
+    pause: () => void;
+    finish: () => void;
+    restart: () => void;
+    seek: (nextPosition: number) => void;
+    progress: (p: number) => void;
+    tick: () => void;
+    getPosition(): number;
+    getDuration(): number;
+    getProgress(): number;
+    isReverse(): boolean;
+    add: {
+        (target: string | unknown[] | object, keyframes: Properties | Properties[], options?: TweenOptions, position?: number | string): any;
+        (target: string | unknown[] | object, keyframes: Properties | Properties[], position?: number | string): any;
+        (target: TimelineEventTarget, position?: number | string): any;
+    };
+    remove: (target: TimelineEventTarget) => void;
+    clear: () => void;
+    events: TimelineEvent[];
+    on: <U extends "pause" | "play" | "complete" | "update" | "begin" | "loopBegin" | "loopComplete">(type: U, callback: {
+        begin: () => void;
+        loopBegin: () => void;
+        complete: () => void;
+        loopComplete: () => void;
+        pause: () => void;
+        play: () => void;
+        update: (position: number, progress: number) => void;
+    }[U]) => void;
+    off: <U extends "pause" | "play" | "complete" | "update" | "begin" | "loopBegin" | "loopComplete">(type: U, callback?: {
+        begin: () => void;
+        loopBegin: () => void;
+        complete: () => void;
+        loopComplete: () => void;
+        pause: () => void;
+        play: () => void;
+        update: (position: number, progress: number) => void;
+    }[U] | undefined) => void;
+    once: <U extends "pause" | "play" | "complete" | "update" | "begin" | "loopBegin" | "loopComplete">(type: U, callback: {
+        begin: () => void;
+        loopBegin: () => void;
+        complete: () => void;
+        loopComplete: () => void;
+        pause: () => void;
+        play: () => void;
+        update: (position: number, progress: number) => void;
+    }[U]) => void;
+};
+
+export declare function createTimeline(options?: TimelineOptions): {
+    play: () => void;
+    pause: () => void;
+    finish: () => void;
+    restart: () => void;
+    seek: (nextPosition: number) => void;
+    progress: (p: number) => void;
+    tick: () => void;
+    getPosition(): number;
+    getDuration(): number;
+    getProgress(): number;
+    isReverse(): boolean;
+    add: {
+        (target: string | unknown[] | object, keyframes: Properties | Properties[], options?: TweenOptions, position?: number | string): any;
+        (target: string | unknown[] | object, keyframes: Properties | Properties[], position?: number | string): any;
+        (target: TimelineEventTarget, position?: number | string): any;
+    };
+    remove: (target: TimelineEventTarget) => void;
+    clear: () => void;
+    events: TimelineEvent[];
+    on: <U extends "pause" | "play" | "complete" | "update" | "begin" | "loopBegin" | "loopComplete">(type: U, callback: {
+        begin: () => void;
+        loopBegin: () => void;
+        complete: () => void;
+        loopComplete: () => void;
+        pause: () => void;
+        play: () => void;
+        update: (position: number, progress: number) => void;
+    }[U]) => void;
+    off: <U extends "pause" | "play" | "complete" | "update" | "begin" | "loopBegin" | "loopComplete">(type: U, callback?: {
+        begin: () => void;
+        loopBegin: () => void;
+        complete: () => void;
+        loopComplete: () => void;
+        pause: () => void;
+        play: () => void;
+        update: (position: number, progress: number) => void;
+    }[U] | undefined) => void;
+    once: <U extends "pause" | "play" | "complete" | "update" | "begin" | "loopBegin" | "loopComplete">(type: U, callback: {
+        begin: () => void;
+        loopBegin: () => void;
+        complete: () => void;
+        loopComplete: () => void;
+        pause: () => void;
+        play: () => void;
+        update: (position: number, progress: number) => void;
+    }[U]) => void;
+};
+
+export declare function css(elem: HTMLElement | SVGElement, prop: CSSStyleDeclarationKeys): string;
+
+export declare function css(elem: HTMLElement | SVGElement, prop: keyof HTMLElement | keyof SVGElement): number;
+
+export declare function css(elem: HTMLElement | SVGElement, prop: CSSStyleDeclarationKeys | keyof HTMLElement | keyof SVGElement, value: string | number): void;
+
+export declare function css(elem: HTMLElement | SVGElement, prop: Record<CSSStyleDeclarationKeys | keyof HTMLElement | keyof SVGElement, string | number>): void;
+
+export declare const cssPlugin: Plugin_2<    {
+css: "attr" | "css" | "trans";
+}, {
+transforms: {
+map: Map<string, string>;
+};
+}>;
+
+declare type CSSStyleDeclarationKeys = keyof Omit<PickStringKey<CSSStyleDeclaration>, "length" | "parentRule">;
+
+export declare type Direction = "normal" | "reverse" | "alternate" | "alternate-reverse";
+
+export declare type Easing = keyof typeof easings | FunctionalValue<(k: number) => number>;
+
+export declare type Easings = {
+    linear: (...args: any[]) => (p: number) => number;
+} & {
+    [p in EasingStuffNames as `${"easeIn" | "easeOut" | "easeInOut"}${p}`]: (...args: any[]) => (p: number) => number;
+};
+
+export declare const easings: Easings;
+
+declare type EasingStuffNames = "Quad" | "Cubic" | "Quart" | "Quint" | "Sine" | "Expo" | "Circ" | "Elastic" | "Back" | "Bounce";
+
+export declare type FunctionalValue<T> = (target: object, index: number, total: number) => T;
+
+export declare function geometry(elem: string | SVGGeometryElement, percent?: number): (prop: string) => SVGValue;
+
+export declare function getPrefixedCssProp(name: CSSStyleDeclarationKeys, host?: object): "filter" | "fill" | "stroke" | "animationName" | "flex" | "all" | "offset" | "height" | "width" | "left" | "top" | "cssText" | "item" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignmentBaseline" | "animation" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "baselineSource" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "bottom" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolation" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicSize" | "containIntrinsicWidth" | "container" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fillOpacity" | "fillRule" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gap" | "grid" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowClipMargin" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textCombineUpright" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrap" | "textWrapMode" | "textWrapStyle" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "visibility" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty";
+
+export declare const interpPlugin: Plugin_2<    {
+interp: string[];
+}, any>;
+
+export declare type MayFunctionValue<T> = T | FunctionalValue<T>;
+
+export declare interface ObjectValue extends TweenOptions {
+    value: BaseValue | SpecialValue;
+}
+
+declare type PickStringKey<T> = {
+    [K in keyof T as K extends string ? K : never]: T[K];
+};
+
+declare interface Plugin_2<T extends Record<string, unknown> = any, U extends Record<string, unknown> = any> {
+    order: number;
+    init?: (tween: Tween<T, U>, terminate: typeof TERMINATE) => void | undefined | typeof TERMINATE;
+    update?: (tween: Tween<T, U>, value: string | number[], terminate: typeof TERMINATE) => string | number[] | void | undefined | typeof TERMINATE;
+}
+
+export declare interface Properties {
+    [p: string]: Value;
+}
+
+export declare function random(min: number, max: number): number;
+
+export declare const relativePlugin: Plugin_2<any, any>;
+
+declare function remove(tick: () => void): void;
+
+export declare const setDashoffset: FunctionalValue<number>;
+
+export declare type SingleValue = BaseValue | SpecialValue | ObjectValue;
+
+export declare class SpecialValue {
+}
+
+export declare function stagger(value: number | [number, number], options?: StaggerOptions): (el: object, index: number, total: number) => number;
+
+export declare interface StaggerOptions {
+    start?: number;
+    from?: number | "first" | "center" | "last";
+    direction?: "normal" | "reverse";
+    easing?: Easing;
+    grid?: [number, number] | null;
+    axis?: "x" | "y" | null;
+}
+
+export declare const svgPlugin: Plugin_2<    {
+svg: SVGValue;
+}, any>;
+
+export declare class SVGValue extends SpecialValue {
+    el: SVGGeometryElement;
+    prop: string;
+    totalLength: number;
+    constructor(el: SVGGeometryElement, prop: string, totalLength: number);
+}
+
+declare const TERMINATE: unique symbol;
+
+export declare const ticker: {
+    add: typeof add;
+    remove: typeof remove;
+};
+
+export declare interface TimelineCallbackOptions {
+    begin?: () => void;
+    loopBegin?: () => void;
+    complete?: () => void;
+    loopComplete?: () => void;
+    pause?: () => void;
+    play?: () => void;
+    update?: (position: number, progress: number) => void;
+}
+
+export declare interface TimelineEvent {
+    target: TimelineEventTarget;
+    position: number | string;
+    begin: number;
+    end: number;
+}
+
+export declare interface TimelineEventTarget {
+    getDuration: () => number;
+    seek: (position: number) => void;
+    tweens?: Tween[];
+    events?: TimelineEvent[];
+}
+
+export declare interface TimelineOptions extends TimelineCallbackOptions {
+    externalTicker?: boolean;
+    autoplay?: boolean;
+    direction?: Direction;
+    loop?: number;
+}
+
+export declare interface Tween<T extends {} = {}, U = {}> {
+    animatedTarget: AnimatedTarget & U;
+    prop: string;
+    duration: number;
+    delay: number;
+    endDelay: number;
+    begin: number;
+    end: number;
+    easing: (k: number) => number;
+    data: T;
+    from: unknown;
+    to: unknown;
+    withoutFrom: boolean;
+    round: number;
+    unit: string;
+    operator: string;
+    between: Between[];
+}
+
+export declare interface TweenOptions {
+    duration?: number | FunctionalValue<number>;
+    delay?: number | FunctionalValue<number>;
+    endDelay?: number | FunctionalValue<number>;
+    easing?: Easing;
+    round?: number | FunctionalValue<number>;
+}
+
+export declare function use(plugin: Plugin_2 | Plugin_2[]): void;
+
+export declare type Value = MayFunctionValue<SingleValue | SingleValue[]>;
+
+export declare function withFrom(from: MayFunctionValue<BaseValue>, to: MayFunctionValue<BaseValue>): WithFromValue;
+
+export declare class WithFromValue extends SpecialValue {
+    from: MayFunctionValue<BaseValue>;
+    to: MayFunctionValue<BaseValue>;
+    constructor(from: MayFunctionValue<BaseValue>, to: MayFunctionValue<BaseValue>);
+}
+
+export { }