@ssgoi/solid 7.0.3 → 7.1.0-beta.0

package/dist/solidstart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("solid-js/web"),l=require("@solidjs/router"),r=require("solid-js");function m(a){const n=l.useLocation(),[e,u]=r.splitProps(a,["children","as","resolve","routeKey"]),i=r.createMemo(()=>e.resolve?.({pathname:n.pathname})??{id:n.pathname}),d=r.createMemo(o=>{const c=i(),s=e.routeKey??c.key??c.id;return o?.key===s?o:{key:s}});return t.createComponent(r.Show,{get when(){return d()},keyed:!0,children:o=>t.createComponent(t.Dynamic,t.mergeProps({get component(){return e.as??"div"}},u,{get"data-ssgoi-transition"(){return i().id},get children(){return e.children}}))})}exports.SsgoiRouteBoundary=m;

package/dist/solidstart.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'solid-js';
+export interface RouteBoundaryState {
+    id: string;
+    key?: string | number;
+}
+export type SsgoiRouteBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
+    as?: keyof JSX.IntrinsicElements;
+    routeKey?: string | number;
+    resolve?: (location: {
+        pathname: string;
+    }) => RouteBoundaryState;
+};
+/** Solid Router boundary, including SolidStart. */
+export declare function SsgoiRouteBoundary(props: SsgoiRouteBoundaryProps): JSX.Element;

package/dist/solidstart.js

@@ -0,0 +1,36 @@
+import { createComponent as a, Dynamic as d, mergeProps as l } from "solid-js/web";
+import { useLocation as p } from "@solidjs/router";
+import { splitProps as h, createMemo as c, Show as y } from "solid-js";
+function v(s) {
+  const r = p(), [e, m] = h(s, ["children", "as", "resolve", "routeKey"]), o = c(() => e.resolve?.({
+    pathname: r.pathname
+  }) ?? {
+    id: r.pathname
+  }), u = c((t) => {
+    const n = o(), i = e.routeKey ?? n.key ?? n.id;
+    return t?.key === i ? t : {
+      key: i
+    };
+  });
+  return a(y, {
+    get when() {
+      return u();
+    },
+    keyed: !0,
+    children: (t) => a(d, l({
+      get component() {
+        return e.as ?? "div";
+      }
+    }, m, {
+      get "data-ssgoi-transition"() {
+        return o().id;
+      },
+      get children() {
+        return e.children;
+      }
+    }))
+  });
+}
+export {
+  v as SsgoiRouteBoundary
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/solid",
-  "version": "7.0.3",
+  "version": "7.1.0-beta.0",
   "description": "Solid.js bindings for SSGOI - Native app-like page transitions for Solid applications",
   "private": false,
   "type": "module",
@@ -36,10 +36,17 @@
       "import": "./dist/view-transitions.js",
       "require": "./dist/view-transitions.cjs",
       "default": "./dist/view-transitions.js"
+    },
+    "./solidstart": {
+      "solid": "./src/lib/solidstart.tsx",
+      "types": "./dist/solidstart.d.ts",
+      "import": "./dist/solidstart.js",
+      "require": "./dist/solidstart.cjs",
+      "default": "./dist/solidstart.js"
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^7.0.3"
+    "@ssgoi/core": "^7.1.0-beta.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -47,15 +54,17 @@
     "eslint": "^9.30.1",
     "globals": "^16.3.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "solid-js": "^1.9.10",
+    "solid-js": "^1.9.13",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-solid": "^2.11.10"
+    "vite-plugin-solid": "^2.11.10",
+    "@solidjs/router": "^0.16.1"
   },
   "peerDependencies": {
-    "solid-js": "^1.0.0"
+    "solid-js": "^1.0.0",
+    "@solidjs/router": "*"
   },
   "keywords": [
     "solid",
@@ -82,6 +91,11 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@solidjs/router": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc -b && vite build",

package/src/lib/solidstart.tsx

@@ -0,0 +1,51 @@
+import { useLocation } from "@solidjs/router";
+import { createMemo, Show, splitProps, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+export interface RouteBoundaryState {
+  id: string;
+  key?: string | number;
+}
+
+export type SsgoiRouteBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
+  as?: keyof JSX.IntrinsicElements;
+  routeKey?: string | number;
+  resolve?: (location: { pathname: string }) => RouteBoundaryState;
+};
+
+/** Solid Router boundary, including SolidStart. */
+export function SsgoiRouteBoundary(props: SsgoiRouteBoundaryProps) {
+  const location = useLocation();
+  const [local, rest] = splitProps(props, [
+    "children",
+    "as",
+    "resolve",
+    "routeKey",
+  ]);
+  const boundary = createMemo(
+    () =>
+      local.resolve?.({ pathname: location.pathname }) ?? {
+        id: location.pathname,
+      },
+  );
+  // Show uses truthiness. A token also supports valid keys such as 0 and "".
+  const lifetime = createMemo<{ key: string | number }>((previous) => {
+    const current = boundary();
+    const key = local.routeKey ?? current.key ?? current.id;
+    return previous?.key === key ? previous : { key };
+  });
+
+  return (
+    <Show when={lifetime()} keyed>
+      {(_lifetime) => (
+        <Dynamic
+          component={local.as ?? "div"}
+          {...rest}
+          data-ssgoi-transition={boundary().id}
+        >
+          {local.children}
+        </Dynamic>
+      )}
+    </Show>
+  );
+}