Skip to content

Commit d3635af

Browse files
committed
feat(rescript-intersection-observer): a binding for intersection-observer web API
1 parent 63dfbe6 commit d3635af

8 files changed

Lines changed: 279 additions & 0 deletions

File tree

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
### Reasonml ###
2+
src/**/*.js
3+
/lib
4+
5+
.bsb.lock
6+
.merlin
7+
### Node ###
8+
# Logs
9+
logs
10+
*.log
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
lerna-debug.log*
15+
16+
# Diagnostic reports (https://nodejs.org/api/report.html)
17+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
18+
19+
# Runtime data
20+
pids
21+
*.pid
22+
*.seed
23+
*.pid.lock
24+
25+
# Directory for instrumented libs generated by jscoverage/JSCover
26+
lib-cov
27+
28+
# Coverage directory used by tools like istanbul
29+
coverage
30+
*.lcov
31+
32+
# nyc test coverage
33+
.nyc_output
34+
35+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
36+
.grunt
37+
38+
# Bower dependency directory (https://bower.io/)
39+
bower_components
40+
41+
# node-waf configuration
42+
.lock-wscript
43+
44+
# Compiled binary addons (https://nodejs.org/api/addons.html)
45+
build/Release
46+
47+
# Dependency directories
48+
node_modules/
49+
jspm_packages/
50+
51+
# TypeScript v1 declaration files
52+
typings/
53+
54+
# TypeScript cache
55+
*.tsbuildinfo
56+
57+
# Optional npm cache directory
58+
.npm
59+
60+
# Optional eslint cache
61+
.eslintcache
62+
63+
# Optional stylelint cache
64+
.stylelintcache
65+
66+
# Microbundle cache
67+
.rpt2_cache/
68+
.rts2_cache_cjs/
69+
.rts2_cache_es/
70+
.rts2_cache_umd/
71+
72+
# Optional REPL history
73+
.node_repl_history
74+
75+
# Output of 'npm pack'
76+
*.tgz
77+
78+
# Yarn Integrity file
79+
.yarn-integrity
80+
81+
# dotenv environment variables file
82+
.env
83+
.env.test
84+
.env*.local
85+
86+
# parcel-bundler cache (https://parceljs.org/)
87+
.cache
88+
.parcel-cache
89+
90+
# Next.js build output
91+
.next
92+
93+
# Nuxt.js build / generate output
94+
.nuxt
95+
dist
96+
97+
# Storybook build outputs
98+
.out
99+
.storybook-out
100+
storybook-static
101+
102+
# rollup.js default build output
103+
dist/
104+
105+
# Gatsby files
106+
.cache/
107+
# Comment in the public line in if your project uses Gatsby and not Next.js
108+
# https://nextjs.org/blog/next-9-1#public-directory-support
109+
# public
110+
111+
# vuepress build output
112+
.vuepress/dist
113+
114+
# Serverless directories
115+
.serverless/
116+
117+
# FuseBox cache
118+
.fusebox/
119+
120+
# DynamoDB Local files
121+
.dynamodb/
122+
123+
# TernJS port file
124+
.tern-port
125+
126+
# Stores VSCode versions used for testing VSCode extensions
127+
.vscode-test
128+
129+
# Temporary folders
130+
tmp/
131+
temp/
132+
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
examples/
2+
src/**/*.js
3+
lib/**/*
4+
**/*.merlin
5+
**/*.lock
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
## 0.0.0 (2021-05-22)
2+
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# rescript-intersection-observer
2+
> nearly zero-cost bind [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)
3+
4+
5+
## Installation
6+
7+
Run the following in your favorit console:
8+
```console
9+
> yarn add @ri7nz/rescript-intersection-observer
10+
```
11+
12+
**OR**
13+
14+
```console
15+
> npm install --save @ri7nz/rescript-intersection-observer
16+
```
17+
18+
Then, add `@ri7nz/rescript-intersection-observer` in your `bsconfig.json`:
19+
20+
```diff
21+
-- "bs-dependencies": [],
22+
++ "bs-dependencies": ["@ri7nz/rescript-intersection-observer"],
23+
```
24+
25+
## Usage
26+
27+
```rescript
28+
open Intersection
29+
30+
// construct
31+
let observer = ObserverEntry.new(entries => {
32+
// implement your observe here
33+
})
34+
35+
// observe
36+
observer->Observer.observe(targetDOMElement)
37+
// unobserve
38+
observer->Observer.unobserve(targetDOMElement)
39+
40+
```
41+
42+
Or you can check this [**examples**](https://github.com/ri7nz/rescript-intersection-observer/tree/main/examples).
43+
44+
## API
45+
> TODO: docs for API
46+
47+
* **Intersection.Observer**
48+
* **Intersection.ObserverEntry**
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "@ri7nz/rescript-intersection-observer",
3+
"sources": [
4+
{
5+
"dir": "src",
6+
"subdirs": true
7+
}
8+
],
9+
"package-specs": {
10+
"module": "es6",
11+
"in-source": true
12+
},
13+
"bs-dependencies": ["@ri7nz/rescript-dom"],
14+
"pinned-dependencies": ["@ri7nz/rescript-dom"]
15+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "@ri7nz/rescript-intersection-observer",
3+
"version": "0.0.0",
4+
"description": "zero-cost binding Web API intersection-observer",
5+
"author": "ri7nz <hi@rin.rocks>",
6+
"license": "MIT",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/ri7nz/rescript-libs.git",
10+
"directory": "rescript-intersection-observer"
11+
},
12+
"bugs": "https://github.com/ri7nz/rescript-libs/issues",
13+
"scripts": {
14+
"start": "rescript build -w",
15+
"build": "rescript build -with-deps"
16+
},
17+
"publishConfig": {
18+
"access": "public"
19+
},
20+
"devDependencies": {
21+
"rescript": "9.1.1"
22+
},
23+
"dependencies": {
24+
"@ri7nz/rescript-dom": "1.0.0"
25+
}
26+
}
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
module DOMRect = ResDOM.DOMRect
2+
3+
module ObserverEntry = {
4+
type t = Dom.intersectionObserverEntry
5+
@get
6+
external boundingClientRect: t => DOMRect.t = "boundingClientRect"
7+
@get
8+
external intersectionRatio: t => float = "intersectionRatio"
9+
@get
10+
external intersectionRect: t => DOMRect.t = "intersectionRect"
11+
@get
12+
external isIntersecting: t => bool = "isIntersecting"
13+
@get
14+
external isVisible: t => bool = "isVisible"
15+
@get
16+
external rootBounds: t => DOMRect.t = "rootBounds"
17+
@get
18+
external target: t => Dom.element = "target"
19+
@get
20+
external time: t => float = "time"
21+
}
22+
23+
module Observer = {
24+
type t = Dom.intersectionObserver
25+
26+
@new
27+
external new: (array<ObserverEntry.t> => unit) => t = "IntersectionObserver"
28+
// properties
29+
30+
// TODO: intersectionObserver.root return Dom.element or Dom.document
31+
@get
32+
external root: t => option<Dom.element> = "root"
33+
@get
34+
external rootMargin: t => string = "rootMargin"
35+
@get
36+
external thresholds: t => array<float> = "thresholds"
37+
// methods
38+
@send
39+
external disconnect: t => unit = "disconnect"
40+
@send
41+
external observe: (t, Dom.element) => unit = "observe"
42+
@send
43+
external takeRecords: t => array<ObserverEntry.t> = "takeRecords"
44+
@send
45+
external unobserve: (t, Dom.element) => unit = "unobserve"
46+
}

yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -914,6 +914,11 @@
914914
dependencies:
915915
"@octokit/openapi-types" "^7.2.0"
916916

917+
"@ri7nz/rescript-dom@1.0.0":
918+
version "1.0.0"
919+
resolved "https://registry.yarnpkg.com/@ri7nz/rescript-dom/-/rescript-dom-1.0.0.tgz#402199fc5d538a8385bd347d0dcb48cdb18bf793"
920+
integrity sha512-zSFubeybebGNhQPkQH1XKG9FapDpZ2QBgCDVte2eA7AXYqcqDdyZHYbPq/FbSDO9zYOOrvwbLvRPROMUq0E/1A==
921+
917922
"@tootallnate/once@1":
918923
version "1.1.2"
919924
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"

0 commit comments

Comments
 (0)