@reimujs/aos 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +3 -1
  2. package/dist/aos.cjs.js +84 -3
  3. package/dist/aos.esm.js +82 -1
  4. package/package.json +3 -6
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # aos.js
2
2
 
3
+ ![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)
4
+
3
5
  Animate on scroll library.
4
6
 
5
7
  Rewrite [aos](https://github.com/michalsnik/aos) using typescript.
@@ -58,7 +60,7 @@ So what's the difference between aos and @reimujs/aos?
58
60
 
59
61
 
60
62
  - Typescript friendly
61
- - Smaller package size (from 14.7KB + 26.1KB to 6.74KB + 24.5KB)
63
+ - Smaller package size (from 14.7KB + 26.1KB to 6.9KB + 25.2KB)
62
64
  - Only support modern browsers
63
65
  - Support additional settings
64
66
  - Support additional API
package/dist/aos.cjs.js CHANGED
@@ -1,6 +1,87 @@
1
1
  'use strict';
2
2
 
3
- var esToolkit = require('es-toolkit');
3
+ function debounce(func, debounceMs, { signal, edges } = {}) {
4
+ let pendingThis = undefined;
5
+ let pendingArgs = null;
6
+ const leading = edges != null && edges.includes('leading');
7
+ const trailing = edges == null || edges.includes('trailing');
8
+ const invoke = () => {
9
+ if (pendingArgs !== null) {
10
+ func.apply(pendingThis, pendingArgs);
11
+ pendingThis = undefined;
12
+ pendingArgs = null;
13
+ }
14
+ };
15
+ const onTimerEnd = () => {
16
+ if (trailing) {
17
+ invoke();
18
+ }
19
+ cancel();
20
+ };
21
+ let timeoutId = null;
22
+ const schedule = () => {
23
+ if (timeoutId != null) {
24
+ clearTimeout(timeoutId);
25
+ }
26
+ timeoutId = setTimeout(() => {
27
+ timeoutId = null;
28
+ onTimerEnd();
29
+ }, debounceMs);
30
+ };
31
+ const cancelTimer = () => {
32
+ if (timeoutId !== null) {
33
+ clearTimeout(timeoutId);
34
+ timeoutId = null;
35
+ }
36
+ };
37
+ const cancel = () => {
38
+ cancelTimer();
39
+ pendingThis = undefined;
40
+ pendingArgs = null;
41
+ };
42
+ const flush = () => {
43
+ cancelTimer();
44
+ invoke();
45
+ };
46
+ const debounced = function (...args) {
47
+ if (signal?.aborted) {
48
+ return;
49
+ }
50
+ pendingThis = this;
51
+ pendingArgs = args;
52
+ const isFirstCall = timeoutId == null;
53
+ schedule();
54
+ if (leading && isFirstCall) {
55
+ invoke();
56
+ }
57
+ };
58
+ debounced.schedule = schedule;
59
+ debounced.cancel = cancel;
60
+ debounced.flush = flush;
61
+ signal?.addEventListener('abort', cancel, { once: true });
62
+ return debounced;
63
+ }
64
+
65
+ function throttle(func, throttleMs, { signal, edges = ['leading', 'trailing'] } = {}) {
66
+ let pendingAt = null;
67
+ const debounced = debounce(func, throttleMs, { signal, edges });
68
+ const throttled = function (...args) {
69
+ if (pendingAt == null) {
70
+ pendingAt = Date.now();
71
+ }
72
+ else {
73
+ if (Date.now() - pendingAt >= throttleMs) {
74
+ pendingAt = Date.now();
75
+ debounced.cancel();
76
+ debounced(...args);
77
+ }
78
+ }
79
+ debounced(...args);
80
+ };
81
+ throttled.cancel = debounced.cancel;
82
+ throttled.flush = debounced.flush;
83
+ return throttled;
84
+ }
4
85
 
5
86
  const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
6
87
  const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
@@ -245,7 +326,7 @@ class Aos {
245
326
  const { container } = this;
246
327
  this.elements = prepare(this.elements, this.options, container);
247
328
  handleScroll(this.elements, this.container);
248
- this.scrollHandler = esToolkit.throttle(() => {
329
+ this.scrollHandler = throttle(() => {
249
330
  handleScroll(this.elements, container);
250
331
  }, this.options.throttleDelay);
251
332
  container.addEventListener("scroll", this.scrollHandler, {
@@ -286,7 +367,7 @@ class Aos {
286
367
  ["complete", "interactive"].indexOf(document.readyState) > -1) {
287
368
  this.refresh(true);
288
369
  }
289
- this.resizeHandler = esToolkit.debounce(this.refresh.bind(this), this.options.debounceDelay);
370
+ this.resizeHandler = debounce(this.refresh.bind(this), this.options.debounceDelay);
290
371
  window.addEventListener("resize", this.resizeHandler);
291
372
  window.addEventListener("orientationchange", this.resizeHandler);
292
373
  }
package/dist/aos.esm.js CHANGED
@@ -1,4 +1,85 @@
1
- import { throttle, debounce } from 'es-toolkit';
1
+ function debounce(func, debounceMs, { signal, edges } = {}) {
2
+ let pendingThis = undefined;
3
+ let pendingArgs = null;
4
+ const leading = edges != null && edges.includes('leading');
5
+ const trailing = edges == null || edges.includes('trailing');
6
+ const invoke = () => {
7
+ if (pendingArgs !== null) {
8
+ func.apply(pendingThis, pendingArgs);
9
+ pendingThis = undefined;
10
+ pendingArgs = null;
11
+ }
12
+ };
13
+ const onTimerEnd = () => {
14
+ if (trailing) {
15
+ invoke();
16
+ }
17
+ cancel();
18
+ };
19
+ let timeoutId = null;
20
+ const schedule = () => {
21
+ if (timeoutId != null) {
22
+ clearTimeout(timeoutId);
23
+ }
24
+ timeoutId = setTimeout(() => {
25
+ timeoutId = null;
26
+ onTimerEnd();
27
+ }, debounceMs);
28
+ };
29
+ const cancelTimer = () => {
30
+ if (timeoutId !== null) {
31
+ clearTimeout(timeoutId);
32
+ timeoutId = null;
33
+ }
34
+ };
35
+ const cancel = () => {
36
+ cancelTimer();
37
+ pendingThis = undefined;
38
+ pendingArgs = null;
39
+ };
40
+ const flush = () => {
41
+ cancelTimer();
42
+ invoke();
43
+ };
44
+ const debounced = function (...args) {
45
+ if (signal?.aborted) {
46
+ return;
47
+ }
48
+ pendingThis = this;
49
+ pendingArgs = args;
50
+ const isFirstCall = timeoutId == null;
51
+ schedule();
52
+ if (leading && isFirstCall) {
53
+ invoke();
54
+ }
55
+ };
56
+ debounced.schedule = schedule;
57
+ debounced.cancel = cancel;
58
+ debounced.flush = flush;
59
+ signal?.addEventListener('abort', cancel, { once: true });
60
+ return debounced;
61
+ }
62
+
63
+ function throttle(func, throttleMs, { signal, edges = ['leading', 'trailing'] } = {}) {
64
+ let pendingAt = null;
65
+ const debounced = debounce(func, throttleMs, { signal, edges });
66
+ const throttled = function (...args) {
67
+ if (pendingAt == null) {
68
+ pendingAt = Date.now();
69
+ }
70
+ else {
71
+ if (Date.now() - pendingAt >= throttleMs) {
72
+ pendingAt = Date.now();
73
+ debounced.cancel();
74
+ debounced(...args);
75
+ }
76
+ }
77
+ debounced(...args);
78
+ };
79
+ throttled.cancel = debounced.cancel;
80
+ throttled.flush = debounced.flush;
81
+ return throttled;
82
+ }
2
83
 
3
84
  const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
4
85
  const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
package/package.json CHANGED
@@ -1,13 +1,12 @@
1
1
  {
2
2
  "name": "@reimujs/aos",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "main": "dist/aos.cjs.js",
5
5
  "module": "dist/aos.esm.js",
6
6
  "browser": "dist/aos.umd.js",
7
7
  "types": "dist/index.d.ts",
8
8
  "scripts": {
9
- "build": "rollup -c",
10
- "build:umd": "rollup -c umd.config.mjs"
9
+ "build": "rollup -c"
11
10
  },
12
11
  "author": "D-Sketon",
13
12
  "license": "MIT",
@@ -20,9 +19,7 @@
20
19
  "rollup-plugin-scss": "^3.0.0",
21
20
  "sass": "^1.79.4",
22
21
  "tslib": "^2.7.0",
23
- "typescript": "^5.6.2"
24
- },
25
- "dependencies": {
22
+ "typescript": "^5.6.2",
26
23
  "es-toolkit": "^1.23.0"
27
24
  },
28
25
  "repository": {