test useTransition on cloudflare

.github/workflows/main.yml

@@ -5,19 +5,23 @@ on:
   push:
     branches: [main]
 
+env:
+  NODE_VERSION: 18
+  PNPM_VERSION: 18.11.0
+
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [${{ env.NODE_VERSION }}]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -35,13 +39,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [${{ env.NODE_VERSION}}]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -65,13 +69,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [${{ env.NODE_VERSION }}]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Install Node.js
         uses: actions/setup-node@v3

.github/workflows/publish.yml

@@ -4,21 +4,25 @@ on:
   release:
     types: [published]
 
+env: 
+  NODE_VERSION: 18
+  PNPM_VERSION: 8.11.0
+
 jobs:
   publish:
     name: Publish
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [${{ env.NODE_VERSION }}]
     steps:
       - uses: actions/checkout@v3
         with:
           ref: ${{ github.event.release.target_commitish }}
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Install Node.js
         uses: actions/setup-node@v3

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { TransitionState, useTransition } from 'react-transition-state'
+import { TransitionState } from 'react-transition-state'
+
+import { useTransition } from '../../../hooks/useTransition/useTransition'
 
 import { Portal } from '../..'
 
@@ -81,7 +83,7 @@ export const Backdrop = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, noBackground])
 
-  return state !== 'unmounted' ? (
+  return state.status !== 'unmounted' ? (
     <Portal className={className} renderCallback={renderCallback}>
       {onDismiss && (
         <Background
@@ -91,7 +93,7 @@ export const Backdrop = ({
           onClick={dismissClick}
         />
       )}
-      {children({ state })}
+      {children({ state: state.status as TransitionState })}
     </Portal>
   ) : null
 }

components/src/hooks/useTransition/useTransition.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import {
+  ENTERED,
+  ENTERING,
+  EXITING,
+  PRE_ENTER,
+  PRE_EXIT,
+  getEndStatus,
+  getState,
+  getTimeout,
+  nextTick,
+  startOrEnd,
+} from './utils'
+
+const updateState = (
+  status: any,
+  setState: any,
+  latestState: any,
+  timeoutId: any,
+  onChange: any,
+) => {
+  clearTimeout(timeoutId.current)
+  const state = getState(status)
+  setState(state)
+  latestState.current = state
+  onChange && onChange({ current: state })
+}
+
+export const useTransition = ({
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange,
+}: any = {}) => {
+  const [state, setState] = useState(() =>
+    getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+  )
+  const latestState = useRef(state)
+  const timeoutId = useRef<any>()
+  const [enterTimeout, exitTimeout] = getTimeout(timeout)
+
+  const endTransition = useCallback(() => {
+    const status = getEndStatus(latestState.current._s, unmountOnExit)
+    status && updateState(status, setState, latestState, timeoutId, onChange)
+  }, [onChange, unmountOnExit])
+
+  const toggle = useCallback(
+    (toEnter: any) => {
+      const transitState = (status: any) => {
+        updateState(status, setState, latestState, timeoutId, onChange)
+
+        switch (status) {
+          case ENTERING:
+            if (enterTimeout >= 0)
+              timeoutId.current = setTimeout(endTransition, enterTimeout)
+            break
+
+          case EXITING:
+            if (exitTimeout >= 0)
+              timeoutId.current = setTimeout(endTransition, exitTimeout)
+            break
+
+          case PRE_ENTER:
+          case PRE_EXIT:
+            timeoutId.current = nextTick(transitState, status)
+            break
+        }
+      }
+
+      const enterStage = latestState.current.isEnter
+      if (typeof toEnter !== 'boolean') toEnter = !enterStage
+
+      if (toEnter) {
+        !enterStage &&
+          transitState(enter ? (preEnter ? PRE_ENTER : ENTERING) : ENTERED)
+      } else {
+        enterStage &&
+          transitState(
+            exit ? (preExit ? PRE_EXIT : EXITING) : startOrEnd(unmountOnExit),
+          )
+      }
+    },
+    [
+      endTransition,
+      onChange,
+      enter,
+      exit,
+      preEnter,
+      preExit,
+      enterTimeout,
+      exitTimeout,
+      unmountOnExit,
+    ],
+  )
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId.current)
+    }
+  }, [])
+
+  return [state, toggle, endTransition] as const
+}

components/src/hooks/useTransition/utils.ts

@@ -0,0 +1,50 @@
+export const PRE_ENTER = 0
+export const ENTERING = 1
+export const ENTERED = 2
+export const PRE_EXIT = 3
+export const EXITING = 4
+export const EXITED = 5
+export const UNMOUNTED = 6
+
+export const STATUS = [
+  'preEnter',
+  'entering',
+  'entered',
+  'preExit',
+  'exiting',
+  'exited',
+  'unmounted',
+]
+
+export const getState = (status: any) => ({
+  _s: status,
+  status: STATUS[status],
+  isEnter: status < PRE_EXIT,
+  isMounted: status !== UNMOUNTED,
+  isResolved: status === ENTERED || status > EXITING,
+})
+
+export const startOrEnd = (unmounted: any) => (unmounted ? UNMOUNTED : EXITED)
+
+export const getEndStatus = (status: any, unmountOnExit: any) => {
+  switch (status) {
+    case ENTERING:
+    case PRE_ENTER:
+      return ENTERED
+
+    case EXITING:
+    case PRE_EXIT:
+      return startOrEnd(unmountOnExit)
+  }
+}
+
+export const getTimeout = (timeout: any) =>
+  typeof timeout === 'object'
+    ? [timeout.enter, timeout.exit]
+    : [timeout, timeout]
+
+export const nextTick = (transitState: any, status: any) =>
+  setTimeout(() => {
+    // Reading document.body.offsetTop can force browser to repaint before transition to the next state
+    isNaN(document.body.offsetTop) || transitState(status + 1)
+  }, 0)

docs/package.json

@@ -8,7 +8,7 @@
     "build:next": "next build",
     "export": "next export",
     "clean": "rimraf .next public/playroom",
-    "dev": "NODE_OPTIONS='--inspect' next dev & playroom start",
+    "dev": "NODE_OPTIONS='--inspect' next dev & NODE_OPTIONS='--openssl-legacy-provider' playroom start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "lint:types": "tsc --noEmit",