Feat/support appear (#517)

* feat: support appear component

* chore: modify version

* fix: should disappear

* chore: export VisibilityChangeEvent

* feat: rax-compat use @ice/appear

* feat: need not give childref

* chore: update lock

* chore: update README and package

* chore: update README

* test: add test for appear

* chore: update lock

examples/rax-project/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@ice/app": "workspace:*",
     "@ice/plugin-rax-compat": "workspace:*",
+    "@ice/appear": "workspace:*",
     "@ice/runtime": "workspace:*",
     "rax": "^1.2.2",
     "rax-image": "^2.4.1",
@@ -25,4 +26,4 @@
     "@types/react-dom": "^18.0.2",
     "webpack": "^5.73.0"
   }
-}
+}

packages/appear/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @ice/appear
+
+## v0.1.0
+
+- [feat] support VisibilityChange.

packages/appear/README.md

@@ -0,0 +1,24 @@
+# @ice/appear
+
+React component for appear and disappear.
+
+## Usage
+
+```bash
+npm i @ice/appear
+```
+
+```jsx
+import VisibilityChange from '@ice/appear';
+
+export default function Home() {
+  return <VisibilityChange
+    onAppear={() => {
+      console.log('onAppear')
+    }}
+    onDisappear={() => {
+      console.log('ondisAppear')
+    }}
+  >show something</VisibilityChange>
+}
+```

packages/appear/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ice/appear",
+  "version": "0.1.0",
+  "description": "",
+  "main": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "scripts": {
+    "watch": "tsc -w",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}

packages/appear/src/index.tsx

@@ -0,0 +1,39 @@
+import { Children, useRef, useEffect, useCallback } from 'react';
+import { isFunction } from './type';
+import { observerElement, VisibilityChangeEvent } from './visibility';
+
+function VisibilityChange(props: any) {
+  const {
+    onAppear,
+    onDisappear,
+    children,
+  } = props;
+
+  const ref = useRef(null);
+
+  const listen = useCallback((eventName: string, handler: Function) => {
+    const { current } = ref;
+    // Rax components will set custom ref by useImperativeHandle.
+    // So We should get eventTarget by _nativeNode.
+    // https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/src/index.tsx#L151
+    if (current && isFunction(handler)) {
+      const eventTarget = current._nativeNode || current;
+      observerElement(eventTarget as HTMLElement);
+      eventTarget.addEventListener(eventName, handler);
+    }
+    return () => {
+      const { current } = ref;
+      if (current) {
+        const eventTarget = current._nativeNode || current;
+        eventTarget.removeEventListener(eventName, handler);
+      }
+    };
+  }, [ref]);
+
+  useEffect(() => listen(VisibilityChangeEvent.appear, onAppear), [ref, onAppear, listen]);
+  useEffect(() => listen(VisibilityChangeEvent.disappear, onDisappear), [ref, onDisappear, listen]);
+
+  return Children.only({ ...children, ref });
+}
+
+export default VisibilityChange;

packages/rax-compat/src/intersection-observer.ts → packages/appear/src/intersection-observer.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * An IntersectionObserver registry. This registry exists to hold a strong
  * reference to IntersectionObserver instances currently observing a target

packages/appear/src/type.ts

@@ -0,0 +1,3 @@
+export function isFunction(obj: any): obj is Function {
+  return typeof obj === 'function';
+}

packages/rax-compat/src/visibility.ts → packages/appear/src/visibility.ts

@@ -1,9 +1,9 @@
 // Handle appear and disappear event.
 // Fork from https://github.com/raxjs/appear-polyfill
-// @ts-ignore
+// @ts-nocheck
 import PolyfilledIntersectionObserver from './intersection-observer';
 
-enum VisibilityChangeEvent {
+export enum VisibilityChangeEvent {
   appear = 'appear',
   disappear = 'disappear',
 }
@@ -92,7 +92,7 @@ function handleIntersect(entries: IntersectionObserverEntry[]) {
     ) {
       target.setAttribute('data-appeared', 'false');
       target.setAttribute('data-has-disappeared', 'true');
-      target.dispatchEvent(createEvent(VisibilityChangeEvent.appear, {
+      target.dispatchEvent(createEvent(VisibilityChangeEvent.disappear, {
         direction: currentY > beforeY ? VisibilityChangeDirection.up : VisibilityChangeDirection.down,
       }));
     }

packages/appear/tests/visibilityChange.test.tsx

@@ -0,0 +1,22 @@
+import { it, describe } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import VisibilityChange from '../src/index';
+
+describe('visibilytyChange', () => {
+  it('appear', () => {
+    return new Promise(resolve => {
+      function App() {
+        return (<VisibilityChange
+          onAppear={() => {
+            resolve();
+          }}
+        >
+          <span>content</span>
+        </VisibilityChange>);
+      }
+
+      render(<App />);
+    });
+  });
+});

packages/appear/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "rootDir": "src",
+    "outDir": "esm"
+  },
+  "allowJs": true,
+  "include": [
+    "src"
+  ]
+}

packages/rax-compat/package.json

@@ -47,7 +47,8 @@
   "dependencies": {
     "@swc/helpers": "^0.4.3",
     "style-unit": "^3.0.5",
-    "create-react-class": "^15.7.0"
+    "create-react-class": "^15.7.0",
+    "@ice/appear": "^0.1.0"
   },
   "devDependencies": {
     "@ice/pkg": "1.1.2-0",

packages/rax-compat/src/create-element.ts

@@ -9,7 +9,7 @@ import type {
 } from 'react';
 import { createElement as _createElement, useEffect, useCallback, useRef, useState, forwardRef as _forwardRef } from 'react';
 import { cached, convertUnit } from 'style-unit';
-import { observerElement } from './visibility';
+import VisibilityChange from '@ice/appear';
 import { isFunction, isObject, isNumber } from './type';
 import transformPrototype from './prototypes';
 
@@ -131,51 +131,14 @@ export function createElement<P extends {
       {
         onAppear,
         onDisappear,
-        // Passing child ref to `VisibilityChange` to avoid creating a new ref.
-        childRef: rest.ref,
-        // Using forwardedRef as a prop to the backend react element.
-        forwardRef: (ref: RefObject<any>) => _createElement(type, Object.assign({ ref }, rest), ...children),
+        children: _createElement(type, rest, ...children),
       },
     );
   } else {
     return _createElement(type, rest, ...children);
   }
 }
 
-function VisibilityChange({
-  onAppear,
-  onDisappear,
-  childRef,
-  forwardRef,
-}: any) {
-  const fallbackRef = useRef(null); // `fallbackRef` used if `childRef` is not provided.
-  const ref = childRef || fallbackRef;
-
-  const listen = useCallback((eventName: string, handler: Function) => {
-    const { current } = ref;
-    // Rax components will set custom ref by useImperativeHandle.
-    // So We should get eventTarget by _nativeNode.
-    // https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/src/index.tsx#L151
-    if (current && isFunction(handler)) {
-      const eventTarget = current._nativeNode || current;
-      observerElement(eventTarget as HTMLElement);
-      eventTarget.addEventListener(eventName, handler);
-    }
-    return () => {
-      const { current } = ref;
-      if (current) {
-        const eventTarget = current._nativeNode || current;
-        eventTarget.removeEventListener(eventName, handler);
-      }
-    };
-  }, [ref]);
-
-  useEffect(() => listen('appear', onAppear), [ref, onAppear, listen]);
-  useEffect(() => listen('disappear', onDisappear), [ref, onDisappear, listen]);
-
-  return forwardRef(ref);
-}
-
 const isDimensionalProp = cached((prop: string) => !NON_DIMENSIONAL_REG.test(prop));
 
 // Convert unit as driver-dom does.