first commit

.github/workflows/github-pages.yml

@@ -0,0 +1,55 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,95 @@
+# ScrollSizeObserver
+
+ScrollSizeObserver is a lightweight JavaScript library that provides a simple and efficient way to observe changes to elements' [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) and [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) properties. It offers a similar API to [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+
+## Features
+
+- **Easy Integration**: Simple to integrate into existing projects with minimal setup.
+- **Flexible Configuration**: Offers options to observe horizontal and/or vertical scroll sizes based on requirements.
+- **Efficient Observations**: Utilizes modern browser APIs to efficiently track changes without impacting performance.
+- **Cross-Browser Compatibility**: Compatible with major modern browsers, ensuring consistent behavior across different environments.
+- **Lightweight**: Zero-dependency minimal footprint ensures fast loading times and optimal performance.
+
+## Demo
+
+Check out the [demo page](https://avisek.github.io/scroll-size-observer/) to see a simple demonstration of the ScrollSizeObserver library in action.
+
+## Installation
+
+You can install ScrollSizeObserver via npm:
+
+```sh
+npm install scroll-size-observer
+```
+
+Alternatively, you can include it directly in your HTML:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/scroll-size-observer/dist/scroll-size-observer.min.js"></script>
+```
+
+## Usage
+
+```javascript
+import { ScrollSizeObserver } from 'scroll-size-observer'
+
+// Just like `ResizeObserver`
+const observer = new ScrollSizeObserver((entries, observer) => {
+  entries.forEach((entry) => {
+    console.log('Target element:', entry.target)
+    console.log('New scrollWidth:', entry.scrollWidth)
+    console.log('New scrollHeight:', entry.scrollHeight)
+    console.log('Previous scrollWidth:', entry.previousScrollWidth)
+    console.log('Previous scrollHeight:', entry.previousScrollHeight)
+  })
+})
+
+// Observe an element
+observer.observe(elementToObserve)
+
+// Observe only `scrollHeight`
+observer.observe(elementToObserve, { scrollWidth: false })
+
+// Unobserve an element
+observer.unobserve(elementToUnobserve)
+
+// Unobserve all observed elements
+observer.disconnect()
+```
+
+## API
+
+- **`ScrollSizeObserver(callback: ScrollSizeObserverCallback)`**
+
+  Creates a new `ScrollSizeObserver` instance.
+
+  - `callback`: A function called whenever an observed scroll size change occurs.
+
+- **`observe(target: Element, options?: ScrollSizeObserverOptions): void`**
+
+  Starts observing the specified `Element`.
+
+  - `target`: A reference to the `Element` to be observed.
+  - `options`: An options object allowing you to set options for the observation.
+
+- **`unobserve(target: Element): void`**
+
+  Ends the observation of a specified `Element`.
+
+  - `target`: A reference to the `Element` to be unobserved.
+
+- **`disconnect(): void`**
+
+  Unobserves all observed `Element` targets.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Fork the repository, make your changes, and submit a pull request. Thank you for helping improve our project!
+
+## Support
+
+For any questions, issues, or feature requests, please [open an issue](https://github.com/avisek/scroll-size-observer/issues/new).

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "scroll-size-observer",
+  "private": false,
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "Avisek Das <[email protected]>",
+  "description": "A lightweight JavaScript library that provides a simple and efficient way to observe changes to elements' `scrollWidth` and `scrollHeight` properties. It offers a similar API to `ResizeObserver`.",
+  "keywords": [
+    "scroll",
+    "dimensions",
+    "size",
+    "resize",
+    "event",
+    "observer",
+    "scrollWidth",
+    "scrollHeight",
+    "zero-dependency"
+  ],
+  "homepage": "https://avisek.github.io/scroll-size-observer/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/avisek/scroll-size-observer.git"
+  },
+  "type": "module",
+  "files": [
+    "./dist/ScrollSizeObserver.js",
+    "./dist/ScrollSizeObserver.d.ts"
+  ],
+  "main": "./dist/ScrollSizeObserver.js",
+  "types": "./dist/ScrollSizeObserver.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.16",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.2"
+  }
+}