@ahnseungchan/webviewkit 2.0.0 → 2.1.0

package/README.md

@@ -63,8 +63,8 @@ export default function App() {
 |------|------|------|
 | `initialActivity` | — | 루트 페이지. 마운트 시 1회만 읽음 |
 | `Activities` | `[]` | `{ path, element }[]`. path 에 `:param` 사용 가능 |
-| `transition` | `"slide"` | `"slide"` · `"fade"` · `"none"` |
-| `duration` | `300` | 전환 ms |
+| `transition` | `"slide"` | `"slide"`(iOS 네이티브 스택: 패럴랙스·dim·가장자리 그림자) · `"fade"` · `"none"` |
+| `duration` | `500` | 전환 ms |
 | `restoreStack` | `"with-root"` | 딥링크 복원 정책 |
 | `onBackAtRoot` / `onNotFound` | — | 콜백 |
 | `isShowHeader` | `false` | `StackHeader` 렌더 |
@@ -81,7 +81,7 @@ export default function App() {
 | `useActivity()` | 현재 페이지의 `{ key, path, pattern, params, query, data, index, isTop }` |
 | `useParams()` | `params` |
 
-테마는 CSS 변수로 바꿉니다: `--wvk-page-bg`, `--wvk-header-bg`, `--wvk-header-border`, `--wvk-header-color`, `--wvk-back-color`.
+테마는 CSS 변수로 바꿉니다: `--wvk-page-bg`, `--wvk-dim-color`, `--wvk-edge-shadow`, `--wvk-header-bg`, `--wvk-header-border`, `--wvk-header-color`, `--wvk-back-color`.
 
 ## Native Bridge
 

package/dist/index.d.mts

@@ -266,8 +266,11 @@ type WebViewBridgeProviderProps = {
  */
 declare function WebViewBridgeProvider({ children, stack, transport, enableOutboundBridge, hostOptions, }: WebViewBridgeProviderProps): _emotion_react_jsx_runtime.JSX.Element;
 
-/** push/back 전환 기본 시간 (ms). `StackRouterProvider` `duration` 으로 조정 */
-declare const STACK_TRANSITION_MS = 300;
+/**
+ * push/back 전환 기본 시간 (ms). iOS 네비게이션 전환 체감에 맞춘 값.
+ * `StackRouterProvider` `duration` 으로 조정
+ */
+declare const STACK_TRANSITION_MS = 500;
 /** `history.back()` 이 popstate 를 기다리는 최대 시간 */
 declare const BACK_TIMEOUT_MS = 1000;
 /** 브릿지 요청 응답 기본 타임아웃 */

package/dist/index.d.ts

@@ -266,8 +266,11 @@ type WebViewBridgeProviderProps = {
  */
 declare function WebViewBridgeProvider({ children, stack, transport, enableOutboundBridge, hostOptions, }: WebViewBridgeProviderProps): _emotion_react_jsx_runtime.JSX.Element;
 
-/** push/back 전환 기본 시간 (ms). `StackRouterProvider` `duration` 으로 조정 */
-declare const STACK_TRANSITION_MS = 300;
+/**
+ * push/back 전환 기본 시간 (ms). iOS 네비게이션 전환 체감에 맞춘 값.
+ * `StackRouterProvider` `duration` 으로 조정
+ */
+declare const STACK_TRANSITION_MS = 500;
 /** `history.back()` 이 popstate 를 기다리는 최대 시간 */
 declare const BACK_TIMEOUT_MS = 1000;
 /** 브릿지 요청 응답 기본 타임아웃 */

package/dist/index.js

@@ -84,7 +84,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/constants.ts
-var STACK_TRANSITION_MS = 300;
+var STACK_TRANSITION_MS = 500;
 var TRANSITION_END_GRACE_MS = 50;
 var BACK_TIMEOUT_MS = 1e3;
 var BRIDGE_TIMEOUT_MS = 5e3;
@@ -900,22 +900,33 @@ var import_react3 = require("@emotion/react");
 var import_styled2 = __toESM(require("@emotion/styled"));
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
-var slideInRight = import_react3.keyframes`
+var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var FADE_EASING = "ease";
+var PARALLAX_OFFSET = "-30%";
+var coverIn = import_react3.keyframes`
   from { transform: translate3d(100%, 0, 0); }
   to { transform: translate3d(0, 0, 0); }
 `;
-var slideOutLeft = import_react3.keyframes`
-  from { transform: translate3d(0, 0, 0); opacity: 1; }
-  to { transform: translate3d(-30%, 0, 0); opacity: 0.6; }
-`;
-var slideInLeft = import_react3.keyframes`
-  from { transform: translate3d(-30%, 0, 0); opacity: 0.6; }
-  to { transform: translate3d(0, 0, 0); opacity: 1; }
-`;
-var slideOutRight = import_react3.keyframes`
+var coverOut = import_react3.keyframes`
   from { transform: translate3d(0, 0, 0); }
   to { transform: translate3d(100%, 0, 0); }
 `;
+var parallaxOut = import_react3.keyframes`
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+`;
+var parallaxIn = import_react3.keyframes`
+  from { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+`;
+var dimIn = import_react3.keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var dimOut = import_react3.keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
 var fadeIn = import_react3.keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -924,14 +935,27 @@ var fadeOut = import_react3.keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-var SLIDE_KEYFRAMES = {
-  push: { enter: slideInRight, exit: slideOutLeft },
-  pop: { enter: slideInLeft, exit: slideOutRight }
-};
-var FADE_KEYFRAMES = { enter: fadeIn, exit: fadeOut };
-function pickKeyframes(transition, direction, pageState) {
-  if (transition === "fade") return FADE_KEYFRAMES[pageState];
-  return SLIDE_KEYFRAMES[direction][pageState];
+var layerOf = (direction, pageState) => direction === "push" === (pageState === "enter") ? "upper" : "lower";
+function slideStyles(direction, pageState, duration) {
+  const timing = `${duration}ms ${IOS_EASING} forwards`;
+  if (layerOf(direction, pageState) === "upper") {
+    return import_react3.css`
+      animation: ${direction === "push" ? coverIn : coverOut} ${timing};
+      box-shadow: var(--wvk-edge-shadow, -6px 0 24px rgba(0, 0, 0, 0.12));
+    `;
+  }
+  return import_react3.css`
+    animation: ${direction === "push" ? parallaxOut : parallaxIn} ${timing};
+    &::after {
+      content: "";
+      /* transform 중인 페이지 기준 fixed = 스크롤과 무관하게 페이지 전체를 덮음 */
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background: var(--wvk-dim-color, rgba(0, 0, 0, 0.12));
+      animation: ${direction === "push" ? dimIn : dimOut} ${timing};
+    }
+  `;
 }
 var PageWrapper = import_styled2.default.div`
   position: absolute;
@@ -944,10 +968,16 @@ var PageWrapper = import_styled2.default.div`
   ${({ pageState, direction, transitionType, duration }) => {
   if (pageState !== "enter" && pageState !== "exit") return "";
   if (transitionType === "none" || duration === 0) return "";
+  if (transitionType === "fade") {
+    return import_react3.css`
+        will-change: opacity;
+        animation: ${pageState === "enter" ? fadeIn : fadeOut} ${duration}ms
+          ${FADE_EASING} forwards;
+      `;
+  }
   return import_react3.css`
-      will-change: transform, opacity;
-      animation: ${pickKeyframes(transitionType, direction, pageState)}
-        ${duration}ms ease-in-out forwards;
+      will-change: transform;
+      ${slideStyles(direction, pageState, duration)}
     `;
 }}
 `;
@@ -970,7 +1000,9 @@ function StackPage({
       "data-state": wrapperProps.pageState,
       "aria-hidden": isTop ? void 0 : true,
       onAnimationEnd: (event) => {
-        if (event.target === event.currentTarget) onAnimationEnd == null ? void 0 : onAnimationEnd();
+        if (event.target === event.currentTarget && !event.pseudoElement) {
+          onAnimationEnd == null ? void 0 : onAnimationEnd();
+        }
       },
       children
     }
@@ -1283,12 +1315,8 @@ function useStackNavigation(options) {
     const delta = Math.min(Math.max(1, count), entries.length - 1);
     const targetIndex = entries.length - 1 - delta;
     busyRef.current = true;
-    void history.travel(-delta).then((popped) => {
-      if (!popped) {
-        busyRef.current = false;
-        dispatch({ type: "POP_TO", index: targetIndex, animate: false });
-      }
-    });
+    dispatch({ type: "POP_TO", index: targetIndex, animate: animate() });
+    void history.travel(-delta);
     return true;
   }, []);
   const back = (0, import_react8.useCallback)(() => pop(1), [pop]);