@ssgoi/react 7.4.0-beta.3 → 7.4.1

package/README.md

@@ -1,6 +1,6 @@
 # @ssgoi/react
 
-React bindings for SSGOI.
+Native app-like page transitions for React and Next.js. Make a web app, PWA or WebView app (Capacitor, Tauri, Ionic) feel like a native app without replacing your router.
 
 [![SSGOI live showcase](https://ssgoi.dev/readme.png)](https://ssgoi.dev)
 

package/dist/context.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=require("@ssgoi/core/internal"),s=e.createContext(null),o=()=>n.IDLE_TRANSITION_STATE;function i(){const t=e.useContext(s);if(!t)throw new Error("useSsgoiTransition must be used within <Ssgoi>");return e.useSyncExternalStore(t.subscribe,t.getTransitionState,o)}exports.ssgoiContext=s;exports.useSsgoiTransition=i;

package/dist/context.d.ts

@@ -0,0 +1,16 @@
+import { SsgoiContext } from '@ssgoi/core/internal';
+import { SsgoiTransitionState } from '@ssgoi/core/types';
+/** Provider-scoped dispatcher; `<Ssgoi>` owns the only value. */
+export declare const ssgoiContext: import('react').Context<SsgoiContext | null>;
+/**
+ * Reads the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins. Re-renders the caller on
+ * every change.
+ *
+ * Use it to defer work that would fight the animation, such as a
+ * programmatic scroll on the arriving page, until the status returns to
+ * `"idle"`.
+ *
+ * Must be called under `<Ssgoi>`.
+ */
+export declare function useSsgoiTransition(): SsgoiTransitionState;

package/dist/context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as o, useContext as e, useSyncExternalStore as s } from "react";
+import { IDLE_TRANSITION_STATE as n } from "@ssgoi/core/internal";
+const r = o(null), i = () => n;
+function a() {
+  const t = e(r);
+  if (!t)
+    throw new Error("useSsgoiTransition must be used within <Ssgoi>");
+  return s(
+    t.subscribe,
+    t.getTransitionState,
+    i
+  );
+}
+export {
+  r as ssgoiContext,
+  a as useSsgoiTransition
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./ssgoi.cjs"),i=require("./ssgoi-transition.cjs"),r=require("@ssgoi/core");exports.Ssgoi=o.Ssgoi;exports.SsgoiTransition=i.SsgoiTransition;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./ssgoi.cjs"),i=require("./context.cjs"),s=require("./ssgoi-transition.cjs"),r=require("@ssgoi/core");exports.Ssgoi=o.Ssgoi;exports.useSsgoiTransition=i.useSsgoiTransition;exports.SsgoiTransition=s.SsgoiTransition;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export { Ssgoi } from './ssgoi';
+export { useSsgoiTransition } from './context';
 export { SsgoiTransition } from './ssgoi-transition';
 export * from '@ssgoi/core';

package/dist/index.js

@@ -1,8 +1,10 @@
 export * from "@ssgoi/core/types";
-import { Ssgoi as e } from "./ssgoi.js";
-import { SsgoiTransition as i } from "./ssgoi-transition.js";
+import { Ssgoi as t } from "./ssgoi.js";
+import { useSsgoiTransition as s } from "./context.js";
+import { SsgoiTransition as m } from "./ssgoi-transition.js";
 export * from "@ssgoi/core";
 export {
-  e as Ssgoi,
-  i as SsgoiTransition
+  t as Ssgoi,
+  m as SsgoiTransition,
+  s as useSsgoiTransition
 };

package/dist/ssgoi.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("react"),i=require("@ssgoi/core/internal"),a={display:"contents"},l=e.memo(({config:t,host:o,children:u})=>{const r=e.useRef(null),s=e.useMemo(()=>i.createSggoiTransitionContext(t,{host:o}),[t,o]);return e.useEffect(()=>{const n=r.current;if(n)return i.observeSsgoiTransitions(n,s)},[s]),c.jsx("div",{ref:r,"data-ssgoi-root":"",style:a,children:u})});exports.Ssgoi=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),c=require("@ssgoi/core/internal"),a=require("./context.cjs"),l={display:"contents"},g=e.memo(({config:o,host:r,children:u})=>{const s=e.useRef(null),t=e.useMemo(()=>c.createSggoiTransitionContext(o,{host:r}),[o,r]);return e.useEffect(()=>{const n=s.current;if(n)return c.observeSsgoiTransitions(n,t)},[t]),i.jsx(a.ssgoiContext.Provider,{value:t,children:i.jsx("div",{ref:s,"data-ssgoi-root":"",style:l,children:u})})});exports.Ssgoi=g;

package/dist/ssgoi.js

@@ -1,20 +1,21 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import c, { useRef as m, useMemo as f, useEffect as u } from "react";
-import { createSggoiTransitionContext as a, observeSsgoiTransitions as g } from "@ssgoi/core/internal";
-const l = { display: "contents" }, x = c.memo(
-  ({ config: o, host: t, children: n }) => {
-    const r = m(null), e = f(
-      () => a(o, { host: t }),
-      [o, t]
+import m, { useRef as c, useMemo as f, useEffect as u } from "react";
+import { createSggoiTransitionContext as a, observeSsgoiTransitions as l } from "@ssgoi/core/internal";
+import { ssgoiContext as g } from "./context.js";
+const p = { display: "contents" }, y = m.memo(
+  ({ config: t, host: r, children: n }) => {
+    const e = c(null), o = f(
+      () => a(t, { host: r }),
+      [t, r]
     );
     return u(() => {
-      const s = r.current;
+      const s = e.current;
       if (s)
-        return g(s, e);
-    }, [e]), /* @__PURE__ */ i("div", { ref: r, "data-ssgoi-root": "", style: l, children: n });
+        return l(s, o);
+    }, [o]), /* @__PURE__ */ i(g.Provider, { value: o, children: /* @__PURE__ */ i("div", { ref: e, "data-ssgoi-root": "", style: p, children: n }) });
   }
 );
 export {
-  x as Ssgoi
+  y as Ssgoi
 };

package/dist/tanstack-router.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("@tanstack/react-router"),s=require("./routers/route-boundary.cjs");function c({resolve:e,...o}){const t={pathname:a.useRouterState({select:r=>r.location.pathname})},n=e?.(t)??{id:t.pathname};return u.jsx(s.RouteBoundary,{...o,boundary:n})}exports.SsgoiRouteBoundary=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("@tanstack/react-router"),c=require("./routers/route-boundary.cjs");function i({resolve:t,...n}){const o={pathname:u.useRouterState({select:s})},r=t?.(o)??{id:o.pathname};return a.jsx(c.RouteBoundary,{...n,boundary:r})}function s(t){const n=t.location.pathname,e=t.matches?.[t.matches.length-1]?.pathname;return e?e.length>1&&e.endsWith("/")&&!n.endsWith("/")?e.slice(0,-1):e:n}exports.SsgoiRouteBoundary=i;

package/dist/tanstack-router.js

@@ -1,16 +1,18 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { useRouterState as m } from "@tanstack/react-router";
-import { RouteBoundary as u } from "./routers/route-boundary.js";
-function d({
-  resolve: t,
-  ...n
+import { useRouterState as c } from "@tanstack/react-router";
+import { RouteBoundary as i } from "./routers/route-boundary.js";
+function p({
+  resolve: n,
+  ...o
 }) {
-  const o = { pathname: m({
-    select: (e) => e.location.pathname
-  }) }, a = t?.(o) ?? { id: o.pathname };
-  return /* @__PURE__ */ r(u, { ...n, boundary: a });
+  const e = { pathname: c({ select: m }) }, a = n?.(e) ?? { id: e.pathname };
+  return /* @__PURE__ */ r(i, { ...o, boundary: a });
+}
+function m(n) {
+  const o = n.location.pathname, t = n.matches?.[n.matches.length - 1]?.pathname;
+  return t ? t.length > 1 && t.endsWith("/") && !o.endsWith("/") ? t.slice(0, -1) : t : o;
 }
 export {
-  d as SsgoiRouteBoundary
+  p as SsgoiRouteBoundary
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ssgoi/react",
-  "version": "7.4.0-beta.3",
-  "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
+  "version": "7.4.1",
+  "description": "Native app-like page transitions for React and Next.js. Make a web app, PWA or WebView app feel native, with Remix, React Router and TanStack Router support.",
   "private": false,
   "type": "module",
   "files": [
@@ -90,7 +90,7 @@
   "dependencies": {
     "unplugin": "^2.3.2",
     "@babel/core": "^7.26.10",
-    "@ssgoi/core": "^7.4.0-beta.3"
+    "@ssgoi/core": "^7.4.1"
   },
   "devDependencies": {
     "@babel/traverse": "7.28.5",
@@ -121,21 +121,33 @@
   },
   "keywords": [
     "react",
+    "nextjs",
+    "next-js",
+    "next.js",
+    "remix",
+    "react-router",
+    "tanstack-router",
+    "drill-transition",
     "page-transition",
     "page-transitions",
+    "route-transition",
+    "navigation-animation",
+    "native-app",
+    "app-like",
+    "mobile-web",
+    "webview",
+    "pwa",
+    "capacitor",
+    "react-native-webview",
+    "hybrid-app",
     "view-transitions",
     "view-transition-api-alternative",
-    "animation",
-    "ssgoi",
-    "spring-physics",
-    "nextjs",
-    "next-js",
-    "cross-browser",
-    "navigation-animation",
-    "hero-transition",
     "shared-element-transition",
-    "route-transition",
-    "drill-transition"
+    "hero-transition",
+    "spring-physics",
+    "web-animations",
+    "animation",
+    "ssgoi"
   ],
   "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
   "license": "MIT",