@reimujs/aos 0.0.1 → 0.1.0

package/README.md

@@ -1,5 +1,7 @@
 # aos.js
 
+![NPM License](https://img.shields.io/npm/l/%40reimujs%2Faos) ![NPM Version](https://img.shields.io/npm/v/%40reimujs%2Faos) ![npm bundle size](https://img.shields.io/bundlephobia/min/%40reimujs%2Faos)
+
 Animate on scroll library.
 
 Rewrite [aos](https://github.com/michalsnik/aos) using typescript.
@@ -26,6 +28,7 @@ Just same as aos@next. For more information, please visit [aos-how-to-use-it](ht
 
 ```typescript
 import AOS from "@reimujs/aos";
+import "@reimujs/aos/dist/aos.css";
 
 AOS.init({
   // Global settings:
@@ -52,13 +55,76 @@ AOS.init({
 });
 ```
 
+### Next.js
+
+```typescript
+"use client";
+import { useEffect } from "react";
+import "@reimujs/aos/dist/aos.css";
+
+export default function Page() {
+  useEffect(() => {
+    import("@reimujs/aos").then(({ default: AOS }) => {
+      AOS.init();
+    });
+  }, []);
+}
+```
+
+### Nuxt
+
+```html
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import "@reimujs/aos/dist/aos.css";
+
+onMounted(() => {
+  import("@reimujs/aos").then(({ default: AOS }) => {
+    AOS.init();
+  });
+});
+</script>
+```
+
+### Augular
+
+```typescript
+import { Component, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import '@reimujs/aos/dist/aos.css';
+
+@Component({})
+export class AppComponent {
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {
+    if (isPlatformBrowser(this.platformId)) {
+      import("@reimujs/aos").then(({ default: AOS }) => {
+        AOS.init();
+      });
+    }
+  }
+}
+```
+
+### Astro
+
+```html
+---
+import "@reimujs/aos/dist/aos.css";
+---
+<script>
+  import AOS from "@reimujs/aos";
+  AOS.init();
+</script>
+```
+
 ## Difference
 
 So what's the difference between aos and @reimujs/aos?
 
-
 - Typescript friendly
-- Smaller package size (from 14.7KB + 26.1KB to 6.74KB + 24.5KB)
+- Smaller package size (from 14.7KB + 26.1KB to 6.9KB + 25.2KB)
 - Only support modern browsers
 - Support additional settings
 - Support additional API
@@ -83,6 +149,6 @@ function destroy(): void;
 
 Remove all event listeners and disconnect MutationObserver.
 
-
 ## License
-MIT
+
+MIT

package/dist/aos.cjs.js

@@ -1,6 +1,87 @@
 'use strict';
 
-var esToolkit = require('es-toolkit');
+function debounce(func, debounceMs, { signal, edges } = {}) {
+    let pendingThis = undefined;
+    let pendingArgs = null;
+    const leading = edges != null && edges.includes('leading');
+    const trailing = edges == null || edges.includes('trailing');
+    const invoke = () => {
+        if (pendingArgs !== null) {
+            func.apply(pendingThis, pendingArgs);
+            pendingThis = undefined;
+            pendingArgs = null;
+        }
+    };
+    const onTimerEnd = () => {
+        if (trailing) {
+            invoke();
+        }
+        cancel();
+    };
+    let timeoutId = null;
+    const schedule = () => {
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            onTimerEnd();
+        }, debounceMs);
+    };
+    const cancelTimer = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    const cancel = () => {
+        cancelTimer();
+        pendingThis = undefined;
+        pendingArgs = null;
+    };
+    const flush = () => {
+        cancelTimer();
+        invoke();
+    };
+    const debounced = function (...args) {
+        if (signal?.aborted) {
+            return;
+        }
+        pendingThis = this;
+        pendingArgs = args;
+        const isFirstCall = timeoutId == null;
+        schedule();
+        if (leading && isFirstCall) {
+            invoke();
+        }
+    };
+    debounced.schedule = schedule;
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    signal?.addEventListener('abort', cancel, { once: true });
+    return debounced;
+}
+
+function throttle(func, throttleMs, { signal, edges = ['leading', 'trailing'] } = {}) {
+    let pendingAt = null;
+    const debounced = debounce(func, throttleMs, { signal, edges });
+    const throttled = function (...args) {
+        if (pendingAt == null) {
+            pendingAt = Date.now();
+        }
+        else {
+            if (Date.now() - pendingAt >= throttleMs) {
+                pendingAt = Date.now();
+                debounced.cancel();
+                debounced(...args);
+            }
+        }
+        debounced(...args);
+    };
+    throttled.cancel = debounced.cancel;
+    throttled.flush = debounced.flush;
+    return throttled;
+}
 
 const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
 const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
@@ -245,7 +326,7 @@ class Aos {
         const { container } = this;
         this.elements = prepare(this.elements, this.options, container);
         handleScroll(this.elements, this.container);
-        this.scrollHandler = esToolkit.throttle(() => {
+        this.scrollHandler = throttle(() => {
             handleScroll(this.elements, container);
         }, this.options.throttleDelay);
         container.addEventListener("scroll", this.scrollHandler, {
@@ -286,7 +367,7 @@ class Aos {
             ["complete", "interactive"].indexOf(document.readyState) > -1) {
             this.refresh(true);
         }
-        this.resizeHandler = esToolkit.debounce(this.refresh.bind(this), this.options.debounceDelay);
+        this.resizeHandler = debounce(this.refresh.bind(this), this.options.debounceDelay);
         window.addEventListener("resize", this.resizeHandler);
         window.addEventListener("orientationchange", this.resizeHandler);
     }

package/dist/aos.esm.js

@@ -1,4 +1,85 @@
-import { throttle, debounce } from 'es-toolkit';
+function debounce(func, debounceMs, { signal, edges } = {}) {
+    let pendingThis = undefined;
+    let pendingArgs = null;
+    const leading = edges != null && edges.includes('leading');
+    const trailing = edges == null || edges.includes('trailing');
+    const invoke = () => {
+        if (pendingArgs !== null) {
+            func.apply(pendingThis, pendingArgs);
+            pendingThis = undefined;
+            pendingArgs = null;
+        }
+    };
+    const onTimerEnd = () => {
+        if (trailing) {
+            invoke();
+        }
+        cancel();
+    };
+    let timeoutId = null;
+    const schedule = () => {
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            onTimerEnd();
+        }, debounceMs);
+    };
+    const cancelTimer = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    const cancel = () => {
+        cancelTimer();
+        pendingThis = undefined;
+        pendingArgs = null;
+    };
+    const flush = () => {
+        cancelTimer();
+        invoke();
+    };
+    const debounced = function (...args) {
+        if (signal?.aborted) {
+            return;
+        }
+        pendingThis = this;
+        pendingArgs = args;
+        const isFirstCall = timeoutId == null;
+        schedule();
+        if (leading && isFirstCall) {
+            invoke();
+        }
+    };
+    debounced.schedule = schedule;
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    signal?.addEventListener('abort', cancel, { once: true });
+    return debounced;
+}
+
+function throttle(func, throttleMs, { signal, edges = ['leading', 'trailing'] } = {}) {
+    let pendingAt = null;
+    const debounced = debounce(func, throttleMs, { signal, edges });
+    const throttled = function (...args) {
+        if (pendingAt == null) {
+            pendingAt = Date.now();
+        }
+        else {
+            if (Date.now() - pendingAt >= throttleMs) {
+                pendingAt = Date.now();
+                debounced.cancel();
+                debounced(...args);
+            }
+        }
+        debounced(...args);
+    };
+    throttled.cancel = debounced.cancel;
+    throttled.flush = debounced.flush;
+    return throttled;
+}
 
 const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
 const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;

package/dist/index.d.ts

@@ -1,12 +1,23 @@
+type AosEventType = "aos:in" | "aos:out";
+interface AosEvent extends Event {
+    detail: Element;
+}
+declare global {
+    interface Document {
+        addEventListener(type: AosEventType, listener: (event: AosEvent) => void, options?: boolean | AddEventListenerOptions): void;
+    }
+}
+type easingOptions = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "ease-in-back" | "ease-out-back" | "ease-in-out-back" | "ease-in-sine" | "ease-out-sine" | "ease-in-out-sine" | "ease-in-quad" | "ease-out-quad" | "ease-in-out-quad" | "ease-in-cubic" | "ease-out-cubic" | "ease-in-out-cubic" | "ease-in-quart" | "ease-out-quart" | "ease-in-out-quart";
+type anchorPlacementOptions = "top-bottom" | "top-center" | "top-top" | "center-bottom" | "center-center" | "center-top" | "bottom-bottom" | "bottom-center" | "bottom-top";
 export interface Options {
     offset: number;
     delay: number;
-    easing: string;
+    easing: easingOptions;
     duration: number;
     disable: boolean | "mobile" | "phone" | "tablet" | (() => boolean);
     once: boolean;
     mirror: boolean;
-    anchorPlacement: string;
+    anchorPlacement: anchorPlacementOptions;
     startEvent: string;
     animatedClassName: string;
     initClassName: string;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@reimujs/aos",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "dist/aos.cjs.js",
   "module": "dist/aos.esm.js",
   "browser": "dist/aos.umd.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
-    "build:umd": "rollup -c umd.config.mjs"
+    "build": "rollup -c"
   },
   "author": "D-Sketon",
   "license": "MIT",
@@ -20,9 +19,7 @@
     "rollup-plugin-scss": "^3.0.0",
     "sass": "^1.79.4",
     "tslib": "^2.7.0",
-    "typescript": "^5.6.2"
-  },
-  "dependencies": {
+    "typescript": "^5.6.2",
     "es-toolkit": "^1.23.0"
   },
   "repository": {