next-suspend 1.0.0

package/README.md

@@ -0,0 +1,68 @@
+# next-suspend
+
+```
+npm i next-suspend
+```
+
+## Getting started
+
+```tsx
+import { suspend } from "next-suspend";
+
+// 1. Setup your data resolver
+export const SuspendedProduct = suspend(
+  async ({ productId }: { productId: string}) => {
+    const product = await db.select.productById({ productId });
+    if (!product) {
+        notFound();
+    }
+    return product;
+  },
+);
+
+
+// 2. Pass the params & render values suspensfully
+export default async function Page({ params }: PageProps<"/inventory/[productId]">) {
+  return (
+    <div className="mb-8 w-full">
+      <Property icon={<TbGardenCart className="-mt-1 mr-1 size-6" />}>
+        <PropertyTitle>Product</PropertyTitle>
+        <PropertyValue>
+          <SuspendedProduct params={params} fallback={<SkeletonLine />}>
+            {({ name }) => <span>{name}</span>}
+          </SuspendedProduct>
+        </PropertyValue>
+      </Property>
+      <Property icon={<TbGardenCart className="-mt-1 mr-1 size-6" />}>
+        <PropertyTitle>Description</PropertyTitle>
+        <PropertyValue>
+          <SuspendedProduct params={params} fallback={<SkeletonLine />}>
+            {({ description }) => <span>{description}</span>}
+          </SuspendedProduct>
+        </PropertyValue>
+      </Property>
+  )
+}
+```
+
+Your resolver will run once per params.
+
+## Helper types
+
+Simplify the data resolvers, so their params are typed by your routes:
+
+```ts
+// 1. Define a global helper type
+import type { AppRoutes } from "@/../.next/types/routes";
+
+declare global {
+  type Suspended<Route extends AppRoutes> = Awaited<PageProps<Route>["params"]>;
+}
+
+// 2. Get params by Page
+const SuspendedProduct = suspend(
+  async ({ productId }: Suspended<"/inventory/[productId]">) => {
+    // ...
+  },
+);
+```

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { ReactNode, SuspenseProps } from "react";
+//#region src/suspend.d.ts
+export declare function suspend<Params extends Record<string, string>, Result>(resolve: (params: Params) => Promise<Result>): ({ params, children, ...props }: Omit<SuspenseProps, "children"> & {
+  params: Promise<Params>;
+  children: (props: Result) => ReactNode;
+}) => Promise<import("react").JSX.Element>;
+//#endregion

package/dist/index.mjs

@@ -0,0 +1 @@
+import{Suspense as e,cache as t}from"react";import{jsx as n}from"react/jsx-runtime";function r(r){let i=t(async e=>r(await e));return async function({params:t,children:r,...a}){return n(e,{...a,children:i(t).then(e=>r(e))})}}export{r as suspend};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "next-suspend",
+  "version": "1.0.0",
+  "description": "Suspensfully access data by page params.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "suspense",
+    "cache"
+  ],
+  "license": "ISC",
+  "author": "Miroslav Petrik",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "/dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --minify"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2"
+  }
+}