@ssgoi/solid 7.4.0 → 7.4.1

package/README.md

@@ -1,6 +1,6 @@
 # @ssgoi/solid
 
-Solid and SolidStart bindings for SSGOI.
+Native app-like page transitions for Solid and SolidStart. 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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("solid-js"),t=o.createContext(null),s=t.Provider,r=()=>{const e=o.useContext(t);if(!e)throw new Error("useSsgoi must be used within SsgoiProvider");return e};exports.SsgoiProvider=s;exports.useSsgoi=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("solid-js"),s=e.createContext(null),r=s.Provider,u=()=>{const t=e.useContext(s);if(!t)throw new Error("useSsgoi must be used within SsgoiProvider");return t},c=()=>{const t=e.useContext(s);if(!t)throw new Error("useSsgoiTransition must be used within <Ssgoi>");const[o,i]=e.createSignal(t.getTransitionState());return e.onCleanup(t.subscribe(n=>i(()=>n))),o};exports.SsgoiProvider=r;exports.useSsgoi=u;exports.useSsgoiTransition=c;

package/dist/context.d.ts

@@ -1,3 +1,14 @@
-import { SsgoiContext } from './types';
+import { Accessor } from 'solid-js';
+import { SsgoiContext, SsgoiTransitionState } from './types';
 export declare const SsgoiProvider: import('solid-js').ContextProviderComponent<SsgoiContext | null>;
 export declare const useSsgoi: () => SsgoiContext;
+/**
+ * Signal of the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins.
+ *
+ * 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 const useSsgoiTransition: () => Accessor<SsgoiTransitionState>;

package/dist/context.js

@@ -1,11 +1,18 @@
-import { createContext as e, useContext as r } from "solid-js";
-const t = e(null), n = t.Provider, i = () => {
-  const o = r(t);
-  if (!o)
+import { createContext as i, useContext as o, createSignal as u, onCleanup as c } from "solid-js";
+const e = i(null), S = e.Provider, g = () => {
+  const t = o(e);
+  if (!t)
     throw new Error("useSsgoi must be used within SsgoiProvider");
-  return o;
+  return t;
+}, w = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error("useSsgoiTransition must be used within <Ssgoi>");
+  const [s, n] = u(t.getTransitionState());
+  return c(t.subscribe((r) => n(() => r))), s;
 };
 export {
-  n as SsgoiProvider,
-  i as useSsgoi
+  S as SsgoiProvider,
+  g as useSsgoi,
+  w 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,5 +1,6 @@
 export * from './types';
 export { Ssgoi } from './ssgoi';
+export { useSsgoiTransition } from './context';
 /** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ssgoi/solid",
-  "version": "7.4.0",
-  "description": "Solid.js bindings for SSGOI - Native app-like page transitions for Solid applications",
+  "version": "7.4.1",
+  "description": "Native app-like page transitions for Solid and SolidStart. Make a web app, PWA or WebView app feel native.",
   "private": false,
   "type": "module",
   "files": [
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^7.4.0"
+    "@ssgoi/core": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -76,10 +76,28 @@
   "keywords": [
     "solid",
     "solidjs",
+    "solid-router",
+    "solidstart",
     "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",
+    "shared-element-transition",
+    "hero-transition",
+    "spring-physics",
+    "web-animations",
     "animation",
-    "ssgoi",
-    "spring-physics"
+    "ssgoi"
   ],
   "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
   "license": "MIT",

package/src/lib/context.tsx

@@ -1,5 +1,11 @@
-import { createContext, useContext } from "solid-js";
-import type { SsgoiContext } from "./types";
+import {
+  createContext,
+  createSignal,
+  onCleanup,
+  useContext,
+  type Accessor,
+} from "solid-js";
+import type { SsgoiContext, SsgoiTransitionState } from "./types";
 
 const SsgoiContextInstance = createContext<SsgoiContext | null>(null);
 
@@ -12,3 +18,24 @@ export const useSsgoi = () => {
   }
   return context;
 };
+
+/**
+ * Signal of the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins.
+ *
+ * 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 const useSsgoiTransition = (): Accessor<SsgoiTransitionState> => {
+  const context = useContext(SsgoiContextInstance);
+  if (!context) {
+    throw new Error("useSsgoiTransition must be used within <Ssgoi>");
+  }
+  const [state, setState] = createSignal<SsgoiTransitionState>(
+    context.getTransitionState(),
+  );
+  onCleanup(context.subscribe((next) => setState(() => next)));
+  return state;
+};

package/src/lib/index.ts

@@ -1,5 +1,6 @@
 export * from "./types";
 export { Ssgoi } from "./ssgoi";
+export { useSsgoiTransition } from "./context";
 /** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
 export { SsgoiTransition } from "./ssgoi-transition";
 export * from "@ssgoi/core";