@ssgoi/react 4.1.0 → 4.2.1

package/dist/lib/ssgoi-transition.d.ts

@@ -1,10 +1,9 @@
-import { ReactNode, ElementType, CSSProperties } from 'react';
+import { ReactNode, ElementType } from 'react';
 type SsgoiTransitionProps<T extends ElementType = "div"> = {
     children: ReactNode;
     id: string;
     as?: T;
     className?: string;
-    style?: CSSProperties;
 };
-export declare const SsgoiTransition: <T extends ElementType = "div">({ children, id, as, className, style, ...rest }: SsgoiTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SsgoiTransition: <T extends ElementType = "div">({ children, id, as, className, ...rest }: SsgoiTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib/ssgoi.d.ts

@@ -4,11 +4,12 @@ interface SsgoiProps {
     config: SsgoiConfig;
     children: ReactNode;
     /**
-     * Function to get current pathname
-     * Used to determine initial style and navigation detection
-     * @example Next.js: () => usePathname()
+     * Hook to get current pathname (e.g., Next.js usePathname)
+     * @example
+     * import { usePathname } from 'next/navigation';
+     * <Ssgoi config={config} usePathname={usePathname}>
      */
-    getPathname?: () => string;
+    usePathname?: () => string;
 }
 export declare const Ssgoi: React.FC<SsgoiProps>;
 export {};

package/dist/lib/types.d.ts

@@ -1,6 +1,13 @@
 import { CSSProperties } from 'react';
 import { SsgoiContext } from '@ssgoi/core/types';
 export * from '@ssgoi/core/types';
+/**
+ * Navigation info containing from/to paths
+ */
+export type NavigationInfo = {
+    from: string | null;
+    to: string;
+};
 /**
  * React-specific context type with style control
  */
@@ -9,7 +16,8 @@ export type ReactSsgoiContext = {
     getTransition: SsgoiContext;
     /**
      * Get initial style for an element
-     * Returns { visibility: "hidden" } if transition is configured, {} otherwise
+     * Returns { visibility: "hidden" } on first call if transition is configured, {} otherwise
+     * Subsequent calls always return {} to prevent re-hiding on rerender
      */
-    getInitialStyle: (path: string) => CSSProperties;
+    getInitialStyle: () => CSSProperties;
 };

package/dist/lib/utils.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+/**
+ * Combines multiple ref callbacks into one
+ */
+export declare function combineRefs<T>(...refs: Array<((el: T | null) => void) | null | undefined>): (el: T | null) => void;
+/**
+ * Forks style from element.style based on initialStyle keys
+ * Returns the current DOM style values for keys that were in initialStyle
+ */
+export declare function forkStyleFromElement(element: HTMLElement, initialStyle: CSSProperties): CSSProperties;

package/dist/react/src/lib/ssgoi-transition.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),l=require("./transition.cjs"),S=require("./context.cjs"),y=({children:n,id:t,as:i,className:e,style:o,...s})=>{const{getTransition:r,getInitialStyle:a}=S.useSsgoi(),c=i||"div",u=a(t);return g.jsx(c,{ref:l.transition(r(t)),"data-ssgoi-transition":t,className:e,style:{...o,...u},...s,children:n})};exports.SsgoiTransition=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),e=require("react"),T=require("./transition.cjs"),j=require("./context.cjs"),f=require("./utils.cjs"),x=({children:a,id:s,as:R,className:m,...g})=>{const{getTransition:S,getInitialStyle:y}=j.useSsgoi(),b=R||"div",n=e.useRef(null),i=e.useRef(!0),t=e.useRef(null);t.current===null&&(t.current=y());let r;i.current?r=t.current:n.current&&t.current&&(r=f.forkStyleFromElement(n.current,t.current));const o=e.useCallback(l=>{n.current=l,l&&(i.current=!1)},[]),c=S(s),u=e.useMemo(()=>T.transition(c),[c]),d=e.useMemo(()=>f.combineRefs(o,u),[o,u]);return q.jsx(b,{ref:d,"data-ssgoi-transition":s,className:m,style:r,...g,children:a})};exports.SsgoiTransition=x;

package/dist/react/src/lib/ssgoi-transition.js

@@ -1,28 +1,44 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { transition as p } from "./transition.js";
-import { useSsgoi as c } from "./context.js";
-const u = ({
-  children: o,
-  id: t,
-  as: i,
-  className: n,
-  style: s,
-  ...r
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as r, useCallback as C, useMemo as u } from "react";
+import { transition as k } from "./transition.js";
+import { useSsgoi as x } from "./context.js";
+import { forkStyleFromElement as E, combineRefs as F } from "./utils.js";
+const h = ({
+  children: m,
+  id: o,
+  as: a,
+  className: R,
+  ...p
 }) => {
-  const { getTransition: e, getInitialStyle: a } = c(), m = i || "div", g = a(t);
-  return /* @__PURE__ */ l(
-    m,
+  const { getTransition: g, getInitialStyle: S } = x(), y = a || "div", e = r(null), i = r(!0), t = r(null);
+  t.current === null && (t.current = S());
+  let n;
+  i.current ? n = t.current : e.current && t.current && (n = E(
+    e.current,
+    t.current
+  ));
+  const s = C((l) => {
+    e.current = l, l && (i.current = !1);
+  }, []), c = g(o), f = u(
+    () => k(c),
+    [c]
+  ), b = u(
+    () => F(s, f),
+    [s, f]
+  );
+  return /* @__PURE__ */ d(
+    y,
     {
-      ref: p(e(t)),
-      "data-ssgoi-transition": t,
-      className: n,
-      style: { ...s, ...g },
-      ...r,
-      children: o
+      ref: b,
+      "data-ssgoi-transition": o,
+      className: R,
+      style: n,
+      ...p,
+      children: m
     }
   );
 };
 export {
-  u as SsgoiTransition
+  h as SsgoiTransition
 };

package/dist/react/src/lib/ssgoi.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),n=require("react"),g=require("./context.cjs"),i=require("@ssgoi/core"),d=require("./create-pathname-detector.cjs"),m=n.memo(({config:o,children:c,getPathname:e})=>{const t=n.useRef(null),s=n.useMemo(()=>{const{getTransition:u,hasMatchingTransition:a}=i.createSggoiTransitionContext(o,{outFirst:!1,createNavigationDetector:e?()=>d.createPathnameDetector(e):i.createAnyOrderDetector});return{getTransition:u,getInitialStyle:l=>{if(!e)return{};const r=e();if(!t.current||t.current===r)return t.current=r,{};const S=t.current;return t.current=r,a(S,l)?{visibility:"hidden"}:{}}}},[o,e]);return f.jsx(g.SsgoiProvider,{value:s,children:c})});exports.Ssgoi=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),v=require("./context.cjs"),s=require("@ssgoi/core");function R(t){const n=o.useRef(null),e=o.useRef(null);t!==null&&n.current!==t&&(e.current=n.current,n.current=t);const r=o.useRef({from:null,to:""});return t!==null&&(r.current={from:e.current,to:t}),o.useCallback(()=>r.current,[])}function S(t){return{trigger(){},get(n){const{from:e,to:r}=t();return!e||!r||e===r?Promise.resolve(null):Promise.resolve({from:e,to:r})}}}const y=o.memo(({config:t,children:n,usePathname:e})=>{const r=e?.()??null,i=R(r),l=o.useMemo(()=>{const{getTransition:g,hasMatchingTransition:f}=s.createSggoiTransitionContext(t,{createNavigationDetector:e?()=>S(i):s.createAnyOrderDetector});return{getTransition:g,getInitialStyle:()=>{if(!e)return{};const{from:u,to:c}=i();return!u||u===c?{}:f(u,c)?{visibility:"hidden"}:{}}}},[t,e,i]);return a.jsx(v.SsgoiProvider,{value:l,children:n})});exports.Ssgoi=y;

package/dist/react/src/lib/ssgoi.js

@@ -1,36 +1,43 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import f, { useRef as l, useMemo as p } from "react";
-import { SsgoiProvider as v } from "./context.js";
-import { createSggoiTransitionContext as S, createAnyOrderDetector as d } from "@ssgoi/core";
-import { createPathnameDetector as g } from "./create-pathname-detector.js";
-const I = f.memo(
-  ({ config: o, children: n, getPathname: r }) => {
-    const t = l(null), i = p(() => {
-      const { getTransition: c, hasMatchingTransition: s } = S(o, {
-        // React uses MutationObserver for unmount detection,
-        // so OUT and IN can arrive in any order
-        outFirst: !1,
-        // Use pathname-based detector when getPathname is provided,
-        // otherwise use default any-order detector for React
-        createNavigationDetector: r ? () => g(r) : d
+import { jsx as g } from "react/jsx-runtime";
+import a, { useMemo as m, useRef as c, useCallback as v } from "react";
+import { SsgoiProvider as y } from "./context.js";
+import { createSggoiTransitionContext as R, createAnyOrderDetector as S } from "@ssgoi/core";
+function d(t) {
+  const n = c(null), r = c(null);
+  t !== null && n.current !== t && (r.current = n.current, n.current = t);
+  const e = c({ from: null, to: "" });
+  return t !== null && (e.current = { from: r.current, to: t }), v(() => e.current, []);
+}
+function p(t) {
+  return {
+    trigger() {
+    },
+    get(n) {
+      const { from: r, to: e } = t();
+      return !r || !e || r === e ? Promise.resolve(null) : Promise.resolve({ from: r, to: e });
+    }
+  };
+}
+const C = a.memo(
+  ({ config: t, children: n, usePathname: r }) => {
+    const e = r?.() ?? null, o = d(e), l = m(() => {
+      const { getTransition: s, hasMatchingTransition: f } = R(t, {
+        createNavigationDetector: r ? () => p(o) : S
       });
       return {
-        getTransition: c,
-        getInitialStyle: (u) => {
+        getTransition: s,
+        getInitialStyle: () => {
           if (!r)
             return {};
-          const e = r();
-          if (!t.current || t.current === e)
-            return t.current = e, {};
-          const a = t.current;
-          return t.current = e, s(a, u) ? { visibility: "hidden" } : {};
+          const { from: i, to: u } = o();
+          return !i || i === u ? {} : f(i, u) ? { visibility: "hidden" } : {};
         }
       };
-    }, [o, r]);
-    return /* @__PURE__ */ m(v, { value: i, children: n });
+    }, [t, r, o]);
+    return /* @__PURE__ */ g(y, { value: l, children: n });
   }
 );
 export {
-  I as Ssgoi
+  C as Ssgoi
 };

package/dist/react/src/lib/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(...t){return o=>{t.forEach(e=>e?.(o))}}function c(t,o){const e={};for(const n of Object.keys(o)){const r=t.style[n];r&&(e[n]=r)}return e}exports.combineRefs=f;exports.forkStyleFromElement=c;

package/dist/react/src/lib/utils.js

@@ -0,0 +1,17 @@
+function f(...o) {
+  return (t) => {
+    o.forEach((e) => e?.(t));
+  };
+}
+function c(o, t) {
+  const e = {};
+  for (const n of Object.keys(t)) {
+    const r = o.style[n];
+    r && (e[n] = r);
+  }
+  return e;
+}
+export {
+  f as combineRefs,
+  c as forkStyleFromElement
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",

package/dist/lib/create-pathname-detector.d.ts

@@ -1,6 +0,0 @@
-import { NavigationDetector } from '@ssgoi/core';
-/**
- * Creates a NavigationDetector based on pathname changes
- * Uses getPathname() to detect navigation without relying on IN/OUT callbacks
- */
-export declare function createPathnameDetector(getPathname: () => string): NavigationDetector;

package/dist/react/src/lib/create-pathname-detector.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(o){let e=null,t=null,r=!1,l=!1;return{trigger(){},get(u){const n=o();if(!t||r&&l){if(!e||e===n)return e=n,Promise.resolve(null);t={from:e,to:n},r=!1,l=!1}u==="out"?r=!0:l=!0;const a=t;return r&&l&&(e=n,t=null),Promise.resolve(a)}}}exports.createPathnameDetector=s;

package/dist/react/src/lib/create-pathname-detector.js

@@ -1,24 +0,0 @@
-function s(u) {
-  let e = null, t = null, r = !1, l = !1;
-  return {
-    trigger() {
-    },
-    get(o) {
-      const n = u();
-      if (!t || r && l) {
-        if (!e || e === n)
-          return e = n, Promise.resolve(null);
-        t = {
-          from: e,
-          to: n
-        }, r = !1, l = !1;
-      }
-      o === "out" ? r = !0 : l = !0;
-      const a = t;
-      return r && l && (e = n, t = null), Promise.resolve(a);
-    }
-  };
-}
-export {
-  s as createPathnameDetector
-};