@ssgoi/react 4.1.0 → 4.2.0

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 d=require("react/jsx-runtime"),r=require("react"),q=require("./transition.cjs"),b=require("./context.cjs"),o=require("./utils.cjs"),T=({children:c,id:i,as:u,className:l,...f})=>{const{getTransition:a,getInitialStyle:R}=b.useSsgoi(),S=u||"div",t=r.useRef(null),s=r.useRef(!0),e=r.useRef(null);e.current===null&&(e.current=R());let n;s.current?n=e.current:t.current&&e.current&&(n=o.forkStyleFromElement(t.current,e.current));const g=q.transition(a(i)),m=o.combineRefs(y=>{t.current=y,s.current=!1},g);return d.jsx(S,{ref:m,"data-ssgoi-transition":i,className:l,style:n,...f,children:c})};exports.SsgoiTransition=T;

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

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