@reimujs/aos 0.0.2 → 0.1.0

package/README.md

@@ -28,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:
@@ -54,11 +55,74 @@ 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.9KB + 25.2KB)
 - Only support modern browsers
@@ -85,6 +149,6 @@ function destroy(): void;
 
 Remove all event listeners and disconnect MutationObserver.
 
-
 ## License
-MIT
+
+MIT

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,6 +1,6 @@
 {
   "name": "@reimujs/aos",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "main": "dist/aos.cjs.js",
   "module": "dist/aos.esm.js",
   "browser": "dist/aos.umd.js",