@ssgoi/react 3.1.0 → 3.2.1

package/dist/core/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(n){return("tick"in n||"css"in n)&&!("springs"in n)}function r(n){return"springs"in n}function s(n){return"css"in n&&typeof n.css=="function"}function a(n){return"tick"in n&&typeof n.tick=="function"}function o(n){if(s(n)&&a(n))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function c(n){if(n.tick&&n.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function f(n){const i=await n;return r(i)?(i.springs.forEach(c),i):(o(i),{prepare:i.prepare,wait:i.wait,onStart:i.onStart,onEnd:i.onEnd,springs:[{spring:i.spring,tick:i.tick,css:i.css}],schedule:"parallel"})}function g(n){const i=n.schedule??"parallel",l=n.springs.map(t=>{let e;switch(i){case"parallel":e=0;break;case"sequential":e=1;break;case"stagger":e=Math.max(0,Math.min(1,t.offset??0));break;default:e=0}return{...t,normalizedOffset:e}}),{schedule:d,...u}=n;return{...u,springs:l}}exports.isCssAnimation=s;exports.isMultiSpring=r;exports.isSingleSpring=p;exports.isTickAnimation=a;exports.normalizeMultiSpringSchedule=g;exports.normalizeToMultiSpring=f;exports.validateAnimationMode=o;exports.validateSpringItem=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(e){return("tick"in e||"css"in e)&&!("springs"in e)}function s(e){return"springs"in e}function o(e){return"css"in e&&typeof e.css=="function"}function a(e){return"tick"in e&&typeof e.tick=="function"}function c(e){if(o(e)&&a(e))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(e){if(e.tick&&e.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function m(e){const n=await e;return s(n)?(n.springs.forEach(l),n):(c(n),{prepare:n.prepare,wait:n.wait,onStart:n.onStart,onEnd:n.onEnd,springs:[{spring:n.spring,tick:n.tick,css:n.css}],schedule:"parallel"})}function S(e,n){const u=e.schedule??"parallel",f=e.springs.map(r=>{let t;switch(u){case"parallel":t=0;break;case"sequential":t=1;break;case"stagger":t=Math.max(0,Math.min(1,r.offset??0));break;default:t=0}const{css:i,offset:w,...g}=r,d=i?typeof i=="function"?n?{element:n,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...g,css:d,normalizedOffset:t}}),{schedule:k,...p}=e;return{...p,springs:f}}exports.isCssAnimation=o;exports.isMultiSpring=s;exports.isSingleSpring=h;exports.isTickAnimation=a;exports.normalizeMultiSpringSchedule=S;exports.normalizeToMultiSpring=m;exports.validateAnimationMode=c;exports.validateSpringItem=l;

package/dist/core/dist/types.js

@@ -1,74 +1,77 @@
-function f(n) {
+function k(n) {
   return ("tick" in n || "css" in n) && !("springs" in n);
 }
-function a(n) {
+function f(n) {
   return "springs" in n;
 }
-function o(n) {
+function p(n) {
   return "css" in n && typeof n.css == "function";
 }
-function c(n) {
+function u(n) {
   return "tick" in n && typeof n.tick == "function";
 }
-function l(n) {
-  if (o(n) && c(n))
+function g(n) {
+  if (p(n) && u(n))
     throw new Error(
       "SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other."
     );
 }
-function p(n) {
+function d(n) {
   if (n.tick && n.css)
     throw new Error(
       "SpringItem cannot have both 'tick' and 'css' defined. Use one or the other."
     );
 }
-async function g(n) {
-  const i = await n;
-  return a(i) ? (i.springs.forEach(p), i) : (l(i), {
-    prepare: i.prepare,
-    wait: i.wait,
-    onStart: i.onStart,
-    onEnd: i.onEnd,
+async function S(n) {
+  const e = await n;
+  return f(e) ? (e.springs.forEach(d), e) : (g(e), {
+    prepare: e.prepare,
+    wait: e.wait,
+    onStart: e.onStart,
+    onEnd: e.onEnd,
     springs: [
       {
-        spring: i.spring,
-        tick: i.tick,
-        css: i.css
+        spring: e.spring,
+        tick: e.tick,
+        css: e.css
       }
     ],
     schedule: "parallel"
   });
 }
-function h(n) {
-  const i = n.schedule ?? "parallel", s = n.springs.map((e) => {
-    let t;
-    switch (i) {
-      case "parallel":
-        t = 0;
-        break;
-      case "sequential":
-        t = 1;
-        break;
-      case "stagger":
-        t = Math.max(0, Math.min(1, e.offset ?? 0));
-        break;
-      default:
-        t = 0;
+function w(n, e) {
+  const r = n.schedule ?? "parallel", a = n.springs.map(
+    (s) => {
+      let t;
+      switch (r) {
+        case "parallel":
+          t = 0;
+          break;
+        case "sequential":
+          t = 1;
+          break;
+        case "stagger":
+          t = Math.max(0, Math.min(1, s.offset ?? 0));
+          break;
+        default:
+          t = 0;
+      }
+      const { css: i, offset: m, ...c } = s, l = i ? typeof i == "function" ? e ? { element: e, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
+      return { ...c, css: l, normalizedOffset: t };
     }
-    return { ...e, normalizedOffset: t };
-  }), { schedule: u, ...r } = n;
+  ), { schedule: h, ...o } = n;
   return {
-    ...r,
-    springs: s
+    ...o,
+    springs: a
   };
 }
 export {
-  o as isCssAnimation,
-  a as isMultiSpring,
-  f as isSingleSpring,
-  c as isTickAnimation,
-  h as normalizeMultiSpringSchedule,
-  g as normalizeToMultiSpring,
-  l as validateAnimationMode,
-  p as validateSpringItem
+  p as isCssAnimation,
+  f as isMultiSpring,
+  k as isSingleSpring,
+  u as isTickAnimation,
+  w as normalizeMultiSpringSchedule,
+  S as normalizeToMultiSpring,
+  g as validateAnimationMode,
+  d as validateSpringItem
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@ssgoi/core"),i=require("./core/dist/types.cjs"),e=require("./react/src/lib/ssgoi.cjs"),t=require("./react/src/lib/ssgoi-transition.cjs"),o=require("./react/src/lib/transition-scope.cjs");Object.defineProperty(exports,"transition",{enumerable:!0,get:()=>n.transition});exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=e.Ssgoi;exports.SsgoiTransition=t.SsgoiTransition;exports.TransitionScope=o.TransitionScope;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./react/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),t=require("./react/src/lib/ssgoi.cjs"),o=require("./react/src/lib/ssgoi-transition.cjs"),e=require("./react/src/lib/transition-scope.cjs");exports.transition=n.transition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=t.Ssgoi;exports.SsgoiTransition=o.SsgoiTransition;exports.TransitionScope=e.TransitionScope;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { transition as n } from "@ssgoi/core";
+import { transition as n } from "./react/src/lib/transition.js";
 import { isCssAnimation as t, isMultiSpring as e, isSingleSpring as a, isTickAnimation as m, normalizeMultiSpringSchedule as p, normalizeToMultiSpring as s, validateAnimationMode as S, validateSpringItem as l } from "./core/dist/types.js";
 import { Ssgoi as f } from "./react/src/lib/ssgoi.js";
 import { SsgoiTransition as d } from "./react/src/lib/ssgoi-transition.js";

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

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("@ssgoi/core"),u=require("./context.cjs"),g=({children:n,id:t,as:o,className:e,...i})=>{const s=u.useSsgoi(),r=o||"div";return c.jsx(r,{ref:a.transition(s(t)),"data-ssgoi-transition":t,className:e,...i,children:n})};exports.SsgoiTransition=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("./transition.cjs"),u=require("./context.cjs"),g=({children:n,id:t,as:i,className:o,...s})=>{const e=u.useSsgoi(),r=i||"div";return a.jsx(r,{ref:c.transition(e(t)),"data-ssgoi-transition":t,className:o,...s,children:n})};exports.SsgoiTransition=g;

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as m } from "react/jsx-runtime";
-import { transition as e } from "@ssgoi/core";
+import { transition as e } from "./transition.js";
 import { useSsgoi as a } from "./context.js";
 const u = ({
   children: t,

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

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),c=({config:e,children:t})=>{const o=s.useMemo(()=>n.createSggoiTransitionContext(e),[e]);return r.jsx(i.SsgoiProvider,{value:o,children:t})};exports.Ssgoi=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),u=({config:e,children:t})=>{const o=s.useMemo(()=>n.createSggoiTransitionContext(e,{outFirst:!1}),[e]);return r.jsx(i.SsgoiProvider,{value:o,children:t})};exports.Ssgoi=u;

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

@@ -3,13 +3,17 @@ import { jsx as e } from "react/jsx-runtime";
 import { useMemo as i } from "react";
 import { SsgoiProvider as m } from "./context.js";
 import { createSggoiTransitionContext as s } from "@ssgoi/core";
-const x = ({ config: o, children: r }) => {
+const f = ({ config: o, children: r }) => {
   const t = i(
-    () => s(o),
+    () => s(o, {
+      // React uses MutationObserver for unmount detection,
+      // so OUT and IN can arrive in any order
+      outFirst: !1
+    }),
     [o]
   );
   return /* @__PURE__ */ e(m, { value: t, children: r });
 };
 export {
-  x as Ssgoi
+  f as Ssgoi
 };

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@ssgoi/core"),c=i=>{const r=o.transition(i);return t=>{if(t){const n=r(t);n&&o.watchUnmount(t,n)}}};exports.transition=c;

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

@@ -0,0 +1,14 @@
+"use client";
+import { transition as a, watchUnmount as r } from "@ssgoi/core";
+const s = (o) => {
+  const i = a(o);
+  return (t) => {
+    if (t) {
+      const n = i(t);
+      n && r(t, n);
+    }
+  };
+};
+export {
+  s as transition
+};

package/dist/transition.d.ts

@@ -1 +1,23 @@
-export { transition } from '@ssgoi/core';
+import { Transition, TransitionKey, TransitionScope } from '@ssgoi/core';
+type TransitionOptions = Transition<undefined> & {
+    key?: TransitionKey;
+    scope?: TransitionScope;
+    ref?: object;
+};
+/**
+ * React ref callback for element transitions
+ *
+ * OUT transition is automatically triggered by MutationObserver
+ * when the element is removed from the DOM - works with React 18+
+ *
+ * @example
+ * ```tsx
+ * <div ref={transition({
+ *   key: 'fade',
+ *   in: (el) => ({ tick: (p) => el.style.opacity = String(p) }),
+ *   out: (el) => ({ tick: (p) => el.style.opacity = String(p) }),
+ * })} />
+ * ```
+ */
+export declare const transition: (options: TransitionOptions) => (element: HTMLElement | null) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
@@ -45,11 +45,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^3.1.0"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "@ssgoi/core": "^3.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",