Refactor/[email protected]

.gitignore

@@ -10,3 +10,6 @@ build/
 dist/
 lib/
 es/
+esm/
+es2017/
+.docusaurus/

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.0
+
+- [refactor] Using ICE PKG to build the package.
+- [feature] Support minimum version of appear-polyfill.
+- [refactor] Support passive event listener.
 ## 0.1.3
 
 - [feat] Support custom option `endReachedThreshold`

README.md

@@ -1,7 +1,7 @@
-[![npm](https://img.shields.io/npm/v/rax-appear.svg)](https://www.npmjs.com/package/rax-appear)
+[![npm](https://img.shields.io/npm/v/rax-appear.svg)](https://www.npmjs.com/package/appear-polyfill)
 
 **描述：**
-封装了组件 Appear 和 Disappear 的监听。
+封装了 appear 和 disappear 事件监听的 Polyfill。
 
 ## 安装
 
@@ -11,50 +11,59 @@ $ npm install appear-polyfill --save
 
 ## 示例
 
-
 ```jsx
-import { createElement, render } from 'rax';
-import * as DriverDOM from 'driver-dom';
-import { isWeb } from 'universal-env';
+// app.js
+import { useEffect } from 'react';
 import { setupAppear } from 'appear-polyfill';
-
-if (isWeb) {
-  setupAppear(window);
+setupAppear(window);
+
+function App() {
+  useEffect(() => {
+    const item50 = document.getElementById('item50');
+
+    item50.addEventListener('appear', (event) => {
+      console.log('appear at', event.target, event);
+    });
+
+    item50.addEventListener('disappear', (event) => {
+      console.log('disappear at', event.target, event);
+    });
+  }, []);
+  return Array.from({ length: 100 })
+    .map((_, index) => (
+        <div id={`item${index}`} key={index} style={styles.item}>Item {index}</div>
+    ))
 }
+render(<App />);
+```
+## 配置项
+
+**intersectionObserverLoader**
 
-const list = [];
-for (let index = 1; index <= 100; index++) {
-  list.push(index);
+- 类型：`function`
+
+> Tip: 从 0.2.0 版本开始, appear-polyfill 移除了内置的 IntersectionObserver Polyfill，如有必要可以自行引入。
+
+用于在浏览器不支持 IntersectionObserver 的情况下，动态加载 IntersectionObserver Polyfill。
+
+```js
+import { setupAppear } from 'appear-polyfill';
+
+const INTERSECTION_OBSERVER_POLYFILL = 'https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js';
+function intersectionObserverLoader() {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    // Polyfill 加载完成后，会在 window 上挂载 IntersectionObserver 对象
+    script.onload = () => resolve(window.IntersectionObserver);
+    script.onerror = () => reject();
+    script.src = INTERSECTION_OBSERVER_POLYFILL;
+    document.head.appendChild(script);
+  });
 }
 
-render((
-  <div>
-    {list.map((item) => {
-      return (
-        <div
-          style={{
-            height: 100,
-            backgroundColor: '#ccc',
-            marginBottom: 20,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-          onAppear={(event) => {
-            console.log('appear: ', item, event.detail.direction);
-          }}
-          onDisappear={() => {
-            console.log('disappear: ', item, event.detail.direction);
-          }}
-        >
-          第 {item} 个
-        </div>
-      );
-    })}
-  </div>
-), document.body, { driver: DriverDOM });
+// 启动监听
+setupAppear(window, { intersectionObserverLoader });
 ```
-## 配置项
 
 **preAppear**
 
@@ -64,7 +73,6 @@ render((
 
 ```jsx
 import { createElement, render } from 'rax';
-import DriverUniversal from 'driver-universal';
 import Image from 'rax-image';
 
 import { setupAppear } from 'appear-polyfill';
@@ -97,5 +105,5 @@ const App = () => {
   );
 };
 
-render(<App />, document.body, { driver: DriverUniversal });
+render(<App />, document.body);
 ```

build.config.mts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@ice/pkg';
+
+export default defineConfig({
+  transform: {
+    formats: ['esm'],
+  },
+  bundle: {
+    formats: ['umd', 'es2017'],
+    minify: true,
+  },
+  plugins: [
+    '@ice/pkg-plugin-docusaurus',
+  ],
+});

docs/index.md

@@ -0,0 +1,41 @@
+# Example
+
+展开代码块以查看使用的例子
+
+```jsx preview
+import { useEffect } from 'react';
+import { setupAppear } from '../src/index';
+
+// https://caniuse.com/?search=IntersectionObserver
+function intersectionObserverLoader() {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.onload = () => resolve(window.IntersectionObserver);
+    script.onerror = () => reject();
+    script.src = 'https://g.alicdn.com/ice/intersection-observer/0.12.2/intersection-observer.min.js';
+    document.head.appendChild(script);
+  });
+}
+setupAppear(window, { intersectionObserverLoader });
+
+const styles = {
+  item: {
+    padding: '10px 0',
+    borderBottom: '1px solid #eee',
+  },
+};
+// Ignore following line.
+export default function List() {
+  useEffect(() => {
+    document.getElementById('item50').addEventListener('appear', (event) => {
+      console.log('appear at', event.target, event);
+    });
+
+    document.getElementById('item50').addEventListener('disappear', (event) => {
+      console.log('disappear at', event.target, event);
+    });
+  }, []);
+  return Array.from({ length: 100 })
+    .map((_, index) => (<div id={`item${index}`} key={index} style={styles.item}>Item {index}</div>));
+}
+```

package.json

@@ -1,14 +1,15 @@
 {
   "name": "appear-polyfill",
-  "version": "0.1.3",
-  "description": "",
-  "author": "rax",
+  "version": "0.2.0",
+  "description": "Simulate appear & disappear events.",
+  "author": "Rax Team & ICE Team",
   "license": "BSD-3-Clause",
-  "main": "lib/index.js",
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
   "scripts": {
-    "start": "build-scripts start",
-    "build": "build-scripts build",
-    "test": "build-scripts test",
+    "start": "ice-pkg start",
+    "build": "ice-pkg build",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -18,18 +19,14 @@
   "engines": {
     "npm": ">=3.0.0"
   },
-  "peerDependencies": {
-    "rax": "^1.0.0"
-  },
   "devDependencies": {
-    "@alib/build-scripts": "^0.1.28",
-    "build-plugin-component": "^1.0.0",
-    "driver-dom": "^1.0.0",
-    "rax": "^1.0.0",
-    "rax-jest-config": "^1.0.0",
-    "rax-test-renderer": "^1.0.0",
-    "rax-view": "^1.0.2",
-    "universal-env": "^1.0.1"
+    "@ice/pkg": "^1.5.0",
+    "@ice/pkg-plugin-docusaurus": "^1.4.3",
+    "react-dom": "^18.2.0"
+  },
+  "homepage": "https://unpkg.com/[email protected]/build/index.html",
+  "dependencies": {
+    "@swc/helpers": "^0.4.14"
   },
-  "homepage": "https://unpkg.com/appear-polyfill@0.1.3/build/index.html"
+  "repository": "git@github.com:raxjs/appear-polyfill.git"
 }